You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
265 lines
6.1 KiB
265 lines
6.1 KiB
<template>
|
|
<view class="explain index">
|
|
<Header ref="headerref"></Header>
|
|
<view class="content">
|
|
<view class="nav-bar">
|
|
<view :class="'nav-item'+(navtype==2?' active PfScMedium':'')" @click="changeType(2)">
|
|
患者用法
|
|
<view class="nav-item-bt-border" v-if="navtype==2"></view>
|
|
</view>
|
|
<view :class="'nav-item'+(navtype==1?' active PfScMedium':'')" @click="changeType(1)">
|
|
医生指南
|
|
<view class="nav-item-bt-border" v-if="navtype==1"></view>
|
|
</view>
|
|
</view>
|
|
|
|
<view class="nav-type1-content" v-if="navtype == 1">
|
|
<view class="type1-item" v-for="(item, key) in doctorDescList" :key="key">
|
|
<img :src="cssUrl+'explain_'+(key+1)+'.svg'">
|
|
<view class="type1-txt1 PfScSemibold">{{item.txt1}}</view>
|
|
<view class="type1-txt2">{{item.txt2}}</view>
|
|
</view>
|
|
</view>
|
|
|
|
<view class="nav-type2-content" v-if="navtype == 2">
|
|
<view class="step-header PfScSemibold">使用步骤</view>
|
|
|
|
<view class="step-item" v-for="(item, key) in patientStepDescList" :key="key">
|
|
<view class="step-left PfScMedium">
|
|
{{key+1}}
|
|
</view>
|
|
<view class="step-right">
|
|
<view class="type1-txt1 PfScSemibold">{{item.txt1}}</view>
|
|
<view class="type1-txt2">{{item.txt2}}</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
<view class="step-bottom" v-if="navtype == 2">
|
|
<view class="step-bottom-desc">
|
|
<img :src="cssUrl+'explain_line_left.png'">
|
|
<text class="PfScSemibold">扫码约名医，疗程随时查</text>
|
|
<img :src="cssUrl+'explain_line_right.png'">
|
|
</view>
|
|
|
|
<view class="step-bottom-list">
|
|
<view class="step-bottom-item" v-for="(item, key) in stepBottomList" :key="key">
|
|
<img :src="cssUrl+item.img">
|
|
<text class="PfScMedium">{{item.txt}}</text>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import Header from '@/components/explainPageHeader.vue';
|
|
|
|
export default {
|
|
name:"index",
|
|
data() {
|
|
return {
|
|
pageLoad:false,
|
|
navtype:2,
|
|
cssUrl:this.cssUrl,
|
|
doctorDescList:[
|
|
{txt1:'医生个人品牌',txt2:'打造专属中医名片'},
|
|
{txt1:'处方余量管理',txt2:'自动扣除就诊次数'},
|
|
{txt1:'治疗时长闹钟',txt2:'智能计时免记录'},
|
|
{txt1:'床位标注',txt2:'医患实时同步位置'}
|
|
],
|
|
patientStepDescList:[
|
|
{txt1:'扫码或点击链接',txt2:'进入该医生的专属主页'},
|
|
{txt1:'预约就诊时间',txt2:'选择您方便的就诊时间段'},
|
|
{txt1:'就诊当天扫码报到',txt2:'扫描现场二维码，快速报到'},
|
|
{txt1:'查看疗程进度',txt2:'随时看治疗详情、剩余次数'},
|
|
],
|
|
stepBottomList:[
|
|
{txt:'名医直约',img:'explain_5.svg'},
|
|
{txt:'扫码即诊',img:'explain_6.svg'},
|
|
{txt:'疗程可查',img:'explain_7.svg'},
|
|
]
|
|
}
|
|
},
|
|
components:{
|
|
Header:Header
|
|
},
|
|
onLoad(e) {
|
|
console.log(e)
|
|
},
|
|
async onShow() {
|
|
this.pageLoad = true;
|
|
},
|
|
methods: {
|
|
changeType(type) {
|
|
this.navtype = type;
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style scoped lang="scss">
|
|
.explain{
|
|
height: 100vh;
|
|
box-sizing: border-box;
|
|
background: #FFFFFF;
|
|
width: 100vw;
|
|
overflow-x: hidden;
|
|
overflow-y: auto;
|
|
.content{
|
|
top: 356rpx;
|
|
position: absolute;
|
|
z-index: 198;
|
|
width: 100%;
|
|
height: auto;
|
|
overflow: hidden;
|
|
background: #FFFFFF;
|
|
border-radius: 24rpx 24rpx 0 0;
|
|
.nav-bar{
|
|
display: flex;
|
|
border-radius: 24rpx 24rpx 0rpx 0rpx;
|
|
border-radius: 24rpx 24rpx 0rpx 0rpx;
|
|
box-shadow: 0rpx 1rpx 0rpx 0rpx rgba(0, 0, 0, 0.15);
|
|
padding: 0 62rpx;
|
|
box-sizing: border-box;
|
|
width: 100%;
|
|
height: 120rpx;
|
|
.nav-item{
|
|
width: 269px;
|
|
height: 120rpx;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
font-size: 32rpx;
|
|
color: #666666;
|
|
position: relative;
|
|
.nav-item-bt-border{
|
|
position: absolute;
|
|
width:100%;
|
|
z-index: 9;
|
|
height: 4rpx;
|
|
bottom: 0rpx;
|
|
left: 0;
|
|
background: #4DC56D;
|
|
}
|
|
&.active{
|
|
color: #4DC56D;
|
|
}
|
|
}
|
|
}
|
|
.nav-type1-content{
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
justify-content: space-between;
|
|
padding: 48rpx 42rpx;
|
|
column-gap: 48rpx;
|
|
row-gap: 48rpx;
|
|
margin: 14rpx 42rpx 0 42rpx;
|
|
box-sizing: border-box;
|
|
height: auto;
|
|
.type1-item{
|
|
flex-shrink: 0;
|
|
flex-grow: 1;
|
|
img{
|
|
width: 80rpx;
|
|
height: 80rpx;
|
|
display: block;
|
|
margin: auto;
|
|
}
|
|
.type1-txt1,.type1-txt2{
|
|
text-align: center;
|
|
font-size: 28rpx;
|
|
}
|
|
.type1-txt1{
|
|
line-height: 38rpx;
|
|
color: #000000;
|
|
margin-top: 24rpx;
|
|
}
|
|
.type1-txt2{
|
|
color: #6B7280;
|
|
margin-top: 6rpx;
|
|
}
|
|
}
|
|
}
|
|
.nav-type2-content{
|
|
padding: 48rpx 42rpx 0 42rpx;
|
|
margin: 24rpx 42rpx 46rpx 42rpx;
|
|
box-sizing: border-box;
|
|
height: auto;
|
|
overflow: hidden;
|
|
.step-header{
|
|
font-size: 36rpx;
|
|
color: #000000;
|
|
margin-bottom: 48rpx;
|
|
}
|
|
.step-item{
|
|
display: flex;
|
|
column-gap: 32rpx;
|
|
margin-bottom: 48rpx;
|
|
height: 84rpx;
|
|
.step-left{
|
|
width: 64rpx;
|
|
height: 64rpx;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
font-size: 28rpx;
|
|
color: #FFFFFF;
|
|
border-radius: 100%;
|
|
background: #39D067;
|
|
}
|
|
.step-right{
|
|
.type1-txt1{
|
|
font-size: 28rpx;
|
|
color: #000000;
|
|
}
|
|
.type1-txt2{
|
|
font-size: 28rpx;
|
|
color: #6B7280;
|
|
margin-top: 6rpx
|
|
}
|
|
}
|
|
}
|
|
}
|
|
.step-bottom{
|
|
width: 618rpx;
|
|
height: auto;
|
|
margin: 46rpx auto 0;
|
|
.step-bottom-desc{
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
img{
|
|
width: 98rpx;
|
|
height: 6rpx;
|
|
}
|
|
text{
|
|
font-size: 34rpx;
|
|
color: #82C989;
|
|
}
|
|
}
|
|
.step-bottom-list{
|
|
display: flex;
|
|
justify-content: space-between;
|
|
margin-top: 30rpx;
|
|
padding:0 38rpx;
|
|
.step-bottom-item{
|
|
display: flex;
|
|
align-items: center;
|
|
column-gap: 8rpx;
|
|
img{
|
|
width: 28rpx;
|
|
height: 28rpx;
|
|
}
|
|
text{
|
|
font-size: 28rpx;
|
|
color: #82C989;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</style>
|
|
|