4 changed files with 371 additions and 7 deletions
@ -0,0 +1,89 @@ |
|||||
|
<template> |
||||
|
<view class=""> |
||||
|
<view class="headerbg"></view> |
||||
|
<view class="header-com" :style="{paddingTop:headerArea.status_height+'px'}"> |
||||
|
<img class="logo" :src="cssUrl+'explain_logo.png'"> |
||||
|
<view class="txt1 PfScSemibold">仁心大医·中医预约系统</view> |
||||
|
<view class="txt2 PfScMedium">打造智慧中医个人工作室</view> |
||||
|
</view> |
||||
|
</view> |
||||
|
</template> |
||||
|
|
||||
|
<script> |
||||
|
export default { |
||||
|
name:'explainPageHeader', |
||||
|
data() { |
||||
|
return { |
||||
|
cssUrl:this.cssUrl |
||||
|
} |
||||
|
}, |
||||
|
props:{ |
||||
|
|
||||
|
}, |
||||
|
computed:{ |
||||
|
headerArea() { |
||||
|
let area = uni.getSystemInfoSync(); |
||||
|
// #ifdef MP-WEIXIN |
||||
|
return this.getHeaderInfo(); |
||||
|
// #endif |
||||
|
// #ifndef MP-WEIXIN |
||||
|
return { |
||||
|
status_height: area.statusBarHeight |
||||
|
}; |
||||
|
// #endif |
||||
|
} |
||||
|
}, |
||||
|
methods: { |
||||
|
getHeaderInfo() { |
||||
|
let area = uni.getSystemInfoSync(); |
||||
|
// #ifdef MP-WEIXIN |
||||
|
let menu = uni.getMenuButtonBoundingClientRect(); |
||||
|
return { |
||||
|
status_height: menu.top |
||||
|
}; |
||||
|
// #endif |
||||
|
}, |
||||
|
getbarHeight() { |
||||
|
|
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
</script> |
||||
|
|
||||
|
<style scoped lang="scss"> |
||||
|
.headerbg{ |
||||
|
position: fixed; |
||||
|
left: 0; |
||||
|
top: 0; |
||||
|
width: 100vw; |
||||
|
height: 398rpx; |
||||
|
background: linear-gradient(180deg, #4CAF50 1%, #62CA66 88%); |
||||
|
} |
||||
|
.header-com{ |
||||
|
overflow: hidden; |
||||
|
width: 100%; |
||||
|
position: fixed; |
||||
|
z-index: 189; |
||||
|
.logo { |
||||
|
width: 100rpx; |
||||
|
height: 100rpx; |
||||
|
margin: 0 auto; |
||||
|
display: block; |
||||
|
} |
||||
|
.txt1{ |
||||
|
font-size: 46rpx; |
||||
|
line-height: 42rpx; |
||||
|
color: #FFFFFF; |
||||
|
line-height: 46rpx; |
||||
|
text-align: center; |
||||
|
margin-top: 23rpx; |
||||
|
} |
||||
|
.txt2{ |
||||
|
text-align: center; |
||||
|
margin-top: 14rpx; |
||||
|
font-size: 28rpx; |
||||
|
line-height: 42rpx; |
||||
|
color: #FFFFFF; |
||||
|
} |
||||
|
} |
||||
|
</style> |
||||
@ -0,0 +1,265 @@ |
|||||
|
<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> |
||||
Loading…
Reference in new issue