tianyan/tra-app
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: 陪练选择页面绘制

Browse Source
This commit is contained in:
杨航
2025-11-05 10:56:37 +08:00
parent 7f385f7cdb
commit 2d90376505
3 changed files with 240 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/pages/sparring/components/card-swiper.vue
+1 -1
View File
@@ -211,7 +211,7 @@
&-img{
height: 44rpx;
width: 30rpx;
padding: 7rpx 0;
padding: 5rpx 0;
box-sizing: border-box;
}
&-icon{
src/pages/sparring/tip.vue
+239 -7
View File
@@ -7,8 +7,71 @@
{{ '陪练名称陪练名称陪练名称陪练名称陪练名称陪练名称陪练名称陪练名称陪练名称陪练名称陪练名称陪练名称陪练名称陪练名称陪练名称陪练名称陪练名称' }}
</view>
</view>
<view class="body-content">
<view :class="['body-content-role', showRoleInfo?'show-info':'']">
<view :class="['role-title']">
<ImagePreview class="role-title-avatar" :src="'/traoss/tras3/show/S3F0250181220722025110316545500000431780'" :isCache="true">
</ImagePreview>
<view class="role-title-info" @click="showRoleInfo = !showRoleInfo">
<view class="arrow-r-icon"></view>
<view class="role-name card-title">
<text class="card-title-name">{{ '李想' }}</text>
<text class="card-title-age">{{ 128 }}岁</text>
<text class="card-title-img">
<image class="card-title-icon" v-if="gender === 'm'" src="@/static/images/me/man.png"></image>
<image class="card-title-icon" v-if="gender === 'f'" src="@/static/images/me/wuman.png"></image>
</text>
</view>
<view class="role-desc">预计时间： {{10}} ~ {{15}} 分钟</view>
</view>
</view>
<view class="role-content">
<view class="role-content-item">
身份情况
<!-- {{ item.occupation }} -->
</view>
<view class="role-content-item">
性格特点
<!-- {{ item.personality }} -->
</view>
<view class="role-content-item">
<!-- {{ item.thoughtProcess }} -->
提问思路
</view>
<view class="role-content-item">
<!-- {{ item.chaDesc }} -->
人物描述
</view>
</view>
</view>
<view class="body-scene">
<view class="body-scene-title">场景描述</view>
<!-- sceneDesc -->
{{ '陪练名称陪练名称陪练名称陪练名称陪练名称陪练名称陪练名称陪练名称陪练名称陪练名称陪练名称陪练名称陪练名称陪练名称陪练名称陪练名称陪练名称' }}
</view>
</view>
<view class="body-bottom">
<view class="body-bottom-btn" @click="toTip">开始陪练</view>
<view class="body-bottom-btn" @click="toTip">
<!--
<image
class="type-icon"
src="@/static/images/sparring/video-icon.png"
v-if="itemInfo.traInterTyp === '03'"
></image>
<image
class="type-icon"
src="@/static/images/sparring/phone-icon.png"
v-if="itemInfo.traInterTyp === '02'"
></image>
v-if="itemInfo.traInterTyp === '01'"-->
<view class="center-text">
<image
class="type-icon"
src="@/static/images/sparring/talk-icon.png"
></image>
{{'语音通话'}}
</view>
</view>
</view>
</view>
</view>
@@ -35,6 +98,8 @@
const detailInfo = ref({})
const roleList = ref([])
const currentIndex = ref(0)
const showRoleInfo = ref(false)
const gender = ref('m')
const activeRole = computed(()=>{
if(roleList.value.length>0){
return roleList.value[currentIndex.value]
@@ -71,28 +136,27 @@
position: relative;
overflow-x: hidden;
overflow-y: auto;
display: flex;
flex-direction: column;
background-image: url(@/static/images/sparring/bg.png);
background-size: cover;
// background-color: #f2f6fd;
.sparring-detail-body {
position: absolute;
overflow-x: hidden;
overflow-y: hidden;
left: 0;
top: 0;
min-height: 100%;
height: 100vh;
width: 100%;
box-sizing: border-box;
// background-color: #f6f8ff;
display: flex;
z-index: 1;
padding: calc(var(--status-bar-height) + 90rpx) 0 180rpx;
.top-box {
height: 90rpx;
width: 100%;
position: absolute;
position: fixed;
top: var(--status-bar-height);
left: 0;
z-index: 2;
@@ -148,11 +212,163 @@
}
}
.body-content{
height: 100%;
padding: 10rpx 24rpx 20rpx;
box-sizing: border-box;
overflow-y: auto;
.body-content-role{
background-color: #fff;
border-radius: 16rpx;
overflow: hidden;
margin-bottom: 30rpx;
&.show-info{
.arrow-r-icon::after {
transform: rotate(225deg) !important;
}
.role-content{
max-height: 0rpx !important;
padding-bottom: 0rpx !important;
}
}
.role-title{
height: 154rpx;
position: relative;
padding-left: 180rpx;
&-avatar{
width: 92rpx;
height: 92rpx;
position: absolute;
top: 50%;
left: 42rpx;
transform: translateY(-50%);
border-radius: 50%;
overflow: hidden;
}
&-info{
position: relative;
height: 100%;
box-sizing: border-box;
padding-top: 34rpx;
.role-name{
width: 100%;
&.card-title {
display: flex;
font-size: 29rpx;
line-height: 44rpx;
font-weight: 500;
color: #000;
overflow: hidden;
text-align: left;
justify-content: start;
margin-bottom: 8rpx;
.card-title-name{
margin-right: 20rpx;
line-height: 44rpx;
}
.card-title-age{
margin-right: 20rpx;
line-height: 44rpx;
}
.card-title-img{
height: 44rpx;
width: 30rpx;
padding: 5rpx 0;
box-sizing: border-box;
}
.card-title-icon{
height: 30rpx;
width: 30rpx;
}
}
}
.role-desc{
width: 100%;
font-size: 25rpx;
color: #666;
}
.arrow-r-icon {
position: absolute;
width: 36rpx;
height: 36rpx;
cursor: pointer;
right: 50rpx;
top: 50%;
transform: translateY(-50%);
}
.arrow-r-icon::before,
.arrow-r-icon::after {
content: '';
position: absolute;
transition: all 0.3s ease;
}
.arrow-r-icon::after {
top: 25%;
left: 25%;
width: 40%;
height: 40%;
border-top: 2rpx solid #000;
border-left: 2rpx solid #000;
transform: rotate(135deg);
}
}
}
.role-content{
max-height: 800rpx;
transition: all 0.3s ease;
padding-bottom: 12rpx;
&-item{
position: relative;
padding: 8rpx 46rpx 8rpx 76rpx;
line-height: 42rpx;
font-size: 29rpx;
&::before{
content: '';
display: block;
background-color: #000;
width: 12rpx;
height: 12rpx;
border-radius: 50%;
position: absolute;
left: 46rpx;
top: 22rpx;
}
}
}
}
.body-scene{
background: linear-gradient(209deg, #fefeff 0%, #d7dfff 100%);
border: 2rpx solid rgba(255, 255, 255, .65);
position: relative;
line-height: 42rpx;
font-size: 29rpx;
border-radius: 16rpx;
overflow: hidden;
padding: 108rpx 46rpx 30rpx;
.body-scene-title{
position: absolute;
left: 0;
top: 0;
background-color: #06f;
border-radius: 0 0 36rpx 0;
width: 170rpx;
height: 78rpx;
line-height: 78rpx;
color: #fff;
text-align: center;
}
}
}
.body-bottom {
height: 180rpx;
// background-color: #fff;
background-color: #fff;
padding: 36rpx 23rpx 0;
position: fixed;
width: 100vw;
@@ -168,6 +384,22 @@
color: #fff;
font-size: 29rpx;
border-radius: 23rpx;
position: relative;
.center-text{
height: 35rpx;
line-height: 35rpx;
width: 100%;
position: absolute;
top: 50%;
transform: translateY(-50%);
display: flex;
justify-content: center;
}
.type-icon{
width: 35rpx;
height: 35rpx;
margin-right: 10rpx;
}
}
}
}
src/static/images/sparring/waiting.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 244 KiB