<template>
	<view class="index-page">
		<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="">
		</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">
					预约看诊
				</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">
					预约看诊
				</view>
			</view>
		</view>
		
		<view class="block visit-wrapper">
			<view class="header">
				<view class="title-wrapper flex">
					<view class="title">
						医生简介
					</view>
					<img :src="cssUrl+'right_bg.png'" alt="">
				</view>
				
				<view class="opt">
					查看全部<img :src="cssUrl+'index_comback2.svg'" alt="">
				</view>
			</view>
			
			<view class="con">
				<view class="item flex">
					<view class="left">
						<view>上官梓涵</view>
						<view>待就诊</view>
					</view>
					
					<view class="right">
						<view>2024.01.09 周二  09:30-12:00</view>
						<view>广安门中医医院西单门诊部  针灸科</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				cssUrl:this.cssUrl
			}
		},
		onLoad() {
			uni.setNavigationBarTitle({
				title:'李静医生预约就诊'
			});
		},
		methods: {
		}
	}
</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%);
			}
			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;
						}
					}
				}
			}
		}
		
		// <view class="con">
		// 	<view class="item">
		// 		<view class="left">
		// 			<view>上官梓涵</view>
		// 			<view>待就诊</view>
		// 		</view>
				
		// 		<view class="right">
		// 			<view>2024.01.09 周二  09:30-12:00</view>
		// 			<view>广安门中医医院西单门诊部  针灸科</view>
		// 		</view>
		// 	</view>
		// </view>
		.visit-wrapper{
			.con{
				width: 100%;
				display: flex;
				justify-content: center;
				.item{
					width: 669rpx;
					min-height: 92rpx;
					margin-bottom: 60rpx;
					.left{
						width: 150rpx;
						flex-shrink: 1;
					}
					.right{
						flex-grow: 1;
					}
				}
			}
		}
	}
</style>
