circulation_ancientCoins_new/pages/index/index.vue

<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" @click="toVisitors">
					预约看诊
				</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" @click="toPrebookList">
					查看全部<img :src="cssUrl+'index_comback2.svg'" alt="">
				</view>
			</view>
			
			<view class="con">
				<view class="item flex" @click="toPrebookDetail">
					<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
				  });
			},
			toVisitors(){
				uni.navigateTo({
					url:"/pages/visitors/visitors?type=1"
				})
			},
			toPrebookList(){
				uni.navigateTo({
					url:"/pages/prebook_list/prebook_list"
				})
			},
			toPrebookDetail(){
				uni.navigateTo({
					url:"/pages/book_detail/book_detail"
				})
			}
		}
	}
</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>