Yizhan-app/pages/doctor/index.vue

96 lines
2.1 KiB
Vue

<template>
<view class="doctor_main" :style="{height: screenHeight + 'px'}">
<nav-bar title='就医协助'></nav-bar>
<view class="content">
<view class="card_nav">
<view class="card_nav_item" v-for="(item,index) in list" :key="index" @click="jumpPage(item)">
<image :src="item.img"></image>
<view class="card_nav_tle">{{item.txt}}</view>
</view>
</view>
</view>
</view>
</template>
<script>
import {
callbackRequest
} from '@/common/util.js';
import {
deviceList
} from '@/common/api.js';
import navBar from "@/components/navBar/index.vue";
export default {
components: {
navBar
},
data() {
return {
list: [
{txt: '门诊咨询',url:'/pages/doctor/clinic',img:'/static/firstaid/menz.png'},
{txt: '就医预约',url:'/pages/doctor/reservation',img:'/static/firstaid/yuyue.png'},
{txt: '理疗预约',url:'/pages/doctor/physio',img:'/static/firstaid/liliao.png'},
{txt: '专家讲座',url:'/pages/device/notice',img:'/static/firstaid/jiangz.png'},
],
screenHeight: ''
}
},
onLoad() {
this.screenHeight = uni.getSystemInfoSync().safeArea.height
},
methods: {
jumpPage(item) {
uni.navigateTo({
url: item.url
})
}
}
}
</script>
<style scoped lang="scss">
.doctor_main {
width: 100%;
background: #F2F6FA;
padding-top: 100rpx;
}
.content {
height: calc(100% - 100rpx);
width: 100%;
background-image: url('@/static/firstaid/doctor.png');
background-size: 100% 420rpx;
background-repeat: no-repeat;
position: relative;
}
.card_nav {
width: calc(100% - 48rpx);
min-height: 224rpx;
background: #FFFFFF;
border-radius: 20rpx;
position: absolute;
top: 336rpx;
left: 50%;
transform: translateX(-50%);
display: flex;
align-items: center;
.card_nav_item {
flex: 1;
display: flex;
flex-direction: column;
align-items: center;
image {
width: 92rpx;
height: 92rpx;
display: block;
}
.card_nav_tle {
margin-top: 18rpx;
font-family: PingFang SC, PingFang SC;
font-weight: 400;
font-size: 30rpx;
color: #0E1A24;
}
}
}
</style>