diff --git a/src/pages/sparring/components/card-swiper.vue b/src/pages/sparring/components/card-swiper.vue
index 27412dc3..adda52de 100644
--- a/src/pages/sparring/components/card-swiper.vue
+++ b/src/pages/sparring/components/card-swiper.vue
@@ -211,7 +211,7 @@
&-img{
height: 44rpx;
width: 30rpx;
- padding: 7rpx 0;
+ padding: 5rpx 0;
box-sizing: border-box;
}
&-icon{
diff --git a/src/pages/sparring/tip.vue b/src/pages/sparring/tip.vue
index 4791b577..35dd02a9 100644
--- a/src/pages/sparring/tip.vue
+++ b/src/pages/sparring/tip.vue
@@ -7,8 +7,71 @@
{{ '陪练名称陪练名称陪练名称陪练名称陪练名称陪练名称陪练名称陪练名称陪练名称陪练名称陪练名称陪练名称陪练名称陪练名称陪练名称陪练名称陪练名称' }}
+
+
+
+
+
+
+
+
+ {{ '李想' }}
+ {{ 128 }}岁
+
+
+
+
+
+ 预计时间： {{10}} ~ {{15}} 分钟
+
+
+
+
+ 身份情况
+
+
+
+ 性格特点
+
+
+
+
+ 提问思路
+
+
+
+ 人物描述
+
+
+
+
+ 场景描述
+
+ {{ '陪练名称陪练名称陪练名称陪练名称陪练名称陪练名称陪练名称陪练名称陪练名称陪练名称陪练名称陪练名称陪练名称陪练名称陪练名称陪练名称陪练名称' }}
+
+
- 开始陪练
+
+
+
+
+ {{'语音通话'}}
+
+
@@ -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;
+ }
}
}
}
diff --git a/src/static/images/sparring/waiting.png b/src/static/images/sparring/waiting.png
new file mode 100644
index 00000000..b4637e72
Binary files /dev/null and b/src/static/images/sparring/waiting.png differ