18 changed files with 492 additions and 84 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