Merge branch 'develop' of http://25.13.9.101:9000/K17_AITS/tra-app into develop
This commit is contained in:
@@ -211,7 +211,7 @@
|
||||
&-img{
|
||||
height: 44rpx;
|
||||
width: 30rpx;
|
||||
padding: 7rpx 0;
|
||||
padding: 5rpx 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
&-icon{
|
||||
|
||||
+239
-7
@@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 244 KiB |
Reference in New Issue
Block a user