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.
 
 
 
 
 
 

368 lines
8.5 KiB

<template>
<view class="index-page btPadding">
<view class="header-wrapper flex">
<view class="left">
<view class="flex top PfScMedium">
<view class="ft50 over2">李静</view>
<view class="">
<view class="over2">中医针灸科</view>
</view>
</view>
<view class="bt over2">
北京中医药大学硕士 从业10年
</view>
</view>
<img class="right" src="https://qny.xmz.yitongtang66.com/uploads/20240202/4c91b27887ee12a29beb015ef4dfe71f.jpg" alt="" @click="enlargePicture('https://qny.xmz.yitongtang66.com/uploads/20240202/4c91b27887ee12a29beb015ef4dfe71f.jpg')">
</view>
<view class="block desc-wrapper">
<view class="title-wrapper flex">
<view class="title">
医生简介
</view>
<img :src="cssUrl+'right_bg.png'" alt="">
</view>
<view class="con over2 over4">
北京中医药大学硕士研究生中国针灸学会会员中国中医药信息学会专科专病诊疗分会理事擅长针药并用治疗内科疾病取穴少用药精擅长月经不调痛经带下症妇科炎症胃炎
</view>
</view>
<view class="block hospital-wrapper">
<view class="item">
<view class="top flex">
<view class="left">
<view class="title flex">
<text class="over2">中国中医科学院</text>
<img :src="cssUrl+'index_comback.svg'" alt="">
</view>
<view class="date over2">
出诊周三下午周六上午
</view>
</view>
<view class="right">
<view class="flex right-wrapper" style="justify-content:flex-end;">
<view class="">
<img :src="cssUrl+'index_nav.svg'" alt="">
<view>导航</view>
</view>
</view>
</view>
</view>
<view class="bot primary btn btn2" hover-class="hover">
预约看诊
</view>
</view>
<view class="item">
<view class="top flex">
<view class="left">
<view class="title flex">
<text class="over2">中国中医科学院</text>
<img :src="cssUrl+'index_comback.svg'" alt="">
</view>
<view class="date over2">
出诊周三下午周六上午
</view>
</view>
<view class="right">
<view class="flex right-wrapper" style="justify-content:flex-end;">
<view class="">
<img :src="cssUrl+'index_nav.svg'" alt="">
<view>导航</view>
</view>
</view>
</view>
</view>
<view class="bot primary btn btn2" hover-class="hover">
预约看诊
</view>
</view>
</view>
<view class="block visit-wrapper">
<view class="header flex">
<view class="title-wrapper flex booklist">
<view class="title">
最近预约
</view>
<img :src="cssUrl+'right_bg.png'" alt="">
</view>
<view class="opt flex">
查看全部<img :src="cssUrl+'index_comback2.svg'" alt="">
</view>
</view>
<view class="con">
<view class="item flex">
<view class="left">
<view class="PfScMedium over2">上官梓涵</view>
<view class="done">待就诊</view>
</view>
<view class="right">
<view>2024.01.09 周二 09:30-12:00</view>
<view class="over2">广安门中医医院西单门广安门中医医院西单门 针灸科</view>
</view>
</view>
<view class="item flex">
<view class="left">
<view class="PfScMedium over2">上官梓涵</view>
<view class="wait">待就诊</view>
</view>
<view class="right">
<view>2024.01.09 周二 09:30-12:00</view>
<view class="over2">广安门中医医院西单门诊部 针灸科</view>
</view>
</view>
</view>
</view>
<tabbar current="1"></tabbar>
</view>
</template>
<script>
import tabbar from '@/components/tabbar.vue';
export default {
data() {
return {
cssUrl:this.cssUrl
}
},
onLoad() {
uni.setNavigationBarTitle({
title:'李静医生预约就诊'
});
},
components:{
tabbar:tabbar
},
methods: {
enlargePicture(imgUrl) {
var list = new Array();
list[0] = imgUrl;
uni.previewImage({
loop: true,
urls: list
});
}
}
}
</script>
<style lang="scss" scoped>
.index-page{
.header-wrapper{
min-height: 208rpx;
padding: 24rpx 40rpx 24rpx;
box-sizing: border-box;
.left{
width: 510rpx;
.top{
overflow: hidden;
margin-top: 31rpx;
& view:first-of-type{
color: #000000;
letter-spacing: 1rpx;
margin-right: 27rpx;
max-width: 250rpx;
}
& view:last-of-type{
view{
width: auto;
padding: 0 15rpx;
margin-top: 14rpx;
line-height: 42rpx;
font-size: 28rpx;
text-align: left;
background: linear-gradient( 288deg, #FFEED2 0%, #FED9A6 100%);
border-radius: 8rpx;
color: #7D501F;
}
}
}
.bt{
width: 480rpx;
line-height: 40rpx;
font-size: 28rpx;
color: #38503F;
margin-top: 21rpx;
}
}
.right{
flex-grow: 1;
display: block;
border-radius: 100%;
height: 160rpx;
width: 160rpx;
}
}
.block{
background: #FFFFFF;
border-radius: 8rpx;
padding: 36rpx 24rpx;
box-sizing: border-box;
margin: 0 auto;
width: 714rpx;
margin-bottom: 20rpx;
}
.desc-wrapper{
box-shadow: 0rpx 2rpx 24rpx 0rpx rgba(0,0,0,0.03);
color: #949699;
font-size: 30rpx;
line-height: 50rpx;
.con{
height: 200rpx;
}
}
.title-wrapper{
.title{
width: 117rpx;
height: 42rpx;
padding-left: 13rpx;
margin-bottom: 36rpx;
font-size: 26rpx;
color: #FFFFFF;
line-height: 42rpx;
text-align: center;
border-radius: 8rpx 0rpx 0rpx 8rpx;
background: linear-gradient( 98deg, #53C184 0%, #5CD378 100%);
}
&.booklist .title{
margin-bottom: 0rpx;
}
img{
width: 48rpx;
height: 42rpx;
}
}
.hospital-wrapper{
.item{
&:last-child{
margin-bottom: 0rpx;
}
min-height: 207rpx;
width: 100%;
margin-bottom: 36rpx;
.top{
.left{
flex-grow: 1;
.title{
align-items: center;
img{
width: 20rpx;
height: 32rpx;
}
}
.date{
line-height: 40rpx;
font-size: 28rpx;
color: #666666;
margin-top: 14rpx;
margin-bottom: 16rpx;
}
}
.right{
width: 300rpx;
width: 300rpx;
height: 100%;
img{
width: 52rpx;
height: 52rpx;
background: #F4F4F4;
border-radius: 6rpx;
margin-right: 7rpx;
}
text{
width: 60rpx;
height: 54rpx;
display: block;
font-size: 26rpx;
color: #666666;
line-height: 37rpx;
text-align: center;
margin-top: 5rpx;
}
}
}
}
}
.visit-wrapper{
.header{
justify-content: space-between;
.opt{
align-items: top;
overflow: hidden;
img{
width: 20rpx;
height: 32rpx;
margin-top: 8rpx;
margin-left: 8rpx;
}
}
}
.con{
width: 100%;
justify-content: center;
.item{
width: 669rpx;
min-height: 92rpx;
margin-bottom: 60rpx;
margin-top: 60rpx;
.left{
width: 180rpx;
flex-shrink: 1;
& view:first-of-type{
width: 140rpx;
font-size: 30rpx;
color: #000000;
min-height: 42rpx;
line-height: 42rpx;
}
& view:last-of-type{
border-radius: 6rpx;
font-size: 22rpx;
text-align:center;
width: 90rpx;
height: 32rpx;
line-height: 32rpx;
margin-top: 18rpx;
}
& view.wait:last-of-type{
border: 1rpx solid #AEB0B8;
background: #FCFCFC;
color: #AEB0B8;
}
& view.done:last-of-type{
color: #58CA7F;
background: #F8FFF7;
border: 1rpx solid #5BD07A;
}
}
.right{
flex-grow:1;
text-align:right;
& view:first-of-type{
font-size: 28rpx;
color: #000000;
height: 42rpx;
line-height: 42rpx;
}
& view:last-of-type{
min-height: 32rpx;
line-height: 32rpx;
color: #A1A1A1;
font-size: 28rpx;
margin-top: 18rpx;
}
}
}
}
}
}
</style>