nurseWeChatAppletUI/pages/medicine/medicine.vue

<template>
	<view class="app">
		<view class="background">
			<image src="/static/poserhealth .png" mode=""></image>
		</view>
		<view class="hospital">
			<view class="appointmenthospital">预约医生</view>
			<view class="tabbar">
				<view class="lefttabbar">
					<view class="lefttabbarlist">
						<view class="item" @tap='tapscroll()'>
							<view :class="tabIndex==index?'actives':'active'">
								内科
							</view>
							<view :class="tabIndex==index?'actives':'active'">
								神经内科
							</view>
							<view :class="tabIndex==index?'actives':'active'">
								皮肤科
							</view>
						</view>
					</view>
				</view>
				<view class="righttabbar">
					<view class="content">
						<view class="hospitalimage">
							<image src="/static/header .png" mode=""></image>
						</view>
						<view class="physicianinformation">
							<view class="hospitalteacher">某某某</view>
							<view class="physician">主任医师</view>
							<view class="words">
								熟悉呼吸系统疾病的诊治，尤其擅
								长肺栓塞、肺动脉高压和慢性气道疾
								病的研究。
							</view>
							<view class="appointment" @tap="goappointment">
								预约
							</view>
						</view>
					</view>
					<view class="content">
						<view class="hospitalimage">
							<image src="/static/header .png" mode=""></image>
						</view>
						<view class="physicianinformation">
							<view class="hospitalteacher">某某某</view>
							<view class="physician">主任医师</view>
							<view class="words">
								熟悉呼吸系统疾病的诊治，尤其擅
								长肺栓塞、肺动脉高压和慢性气道疾
								病的研究。
							</view>
							<view class="appointment">
								预约
							</view>
						</view>

					</view>

				</view>
			</view>





		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				tabIndex: 0,
			};
		},
		methods: {
goappointment(){
	uni.navigateTo({
		url: '/pages/Informationconfirmation/Informationconfirmation'
	})
},
			// 跳转预约医生界面
			godoctorslist() {
				// uni.navigateTo({
				// 	url: '/pages/doctorslist/doctorslist'
				// })
			},
		},
		//1.分享给朋友
		onShareAppMessage(res) {
			let pages = getCurrentPages();
			let url = pages[pages.length - 1].$page.fullPath
			return {
				title: '泉医到家',
				path: url,
			}
		},
		//2.分享到朋友圈
		onShareTimeline(res) {
			let pages = getCurrentPages();
			let url = pages[pages.length - 1].$page.fullPath
			return {
				title: '泉医到家',
				path: url,
			}
		},
	}
</script>

<style lang="scss">
	.app {
		padding: 0%;

		.background {
			image {
				width: 100%;
				height: 381rpx;

			}
		}

		.hospital {
			width: 100%;
			height: 100%;
			background-color: #fff;

			.appointmenthospital {
				height: 90rpx;
				font-size: 35rpx;
				line-height: 90rpx;
				border-bottom: 1rpx solid #D8D4D4;
				width: 95%;
				margin: 0 auto;
			}

			.tabbar {
				display: flex;
				height: 100vh;
				width: 100%;


				.lefttabbar {
					width: 30%;
					// display: inline-block;
					height: 100%;
					padding-top: 20rpx;

					.lefttabbarlist {
						overflow: scroll;
						-webkit-overflow-scrolling: touch;
						height: 100%;

						.item {
							color: #000000;
							height: 80rpx;
							line-height: 80rpx;
							text-align: center;
							font-size: 30rpx;
							width: 100%;

							.actives {
								color: red;
								font-size: 34rpx;
								overflow: hidden;
								text-overflow: ellipsis;
								white-space: nowrap;
								background-color: #ffffff;
								// border-radius: 25rpx 0 0 25rpx;
							}

							.active {
								overflow: hidden;
								text-overflow: ellipsis;
								white-space: nowrap;
								border-bottom: 1rpx solid #D8D4D4;
								width: 90%;
							}

						}
					}

				}

				.righttabbar {
					width: 70%;
					height: 100%;
					.content {
						position: relative;
						height: 400rpx;
					
						border-bottom: 1rpx solid #D8D4D4;
						.hospitalimage {
									position: absolute;
									width: 190rpx;
									height: 200rpx;
									padding: 3%;
						
									image {
										// line-height: 20rpx;
										width: 109rpx;
										height: 111rpx;
									}
								}
						
								.physicianinformation {
									position: absolute;
									width: 90%;
									// background-color: #F44B2F;
									height: 100rpx;
									left: 27%;
									top: 5%;
						
									.hospitalteacher {
										font-size: 36rpx;
									}
						
									.physician {
										// margin-top: 3%;
										font-size: 30rpx;
										color: #666666;
						
									}
						
									.words {
										position: absolute;
										// margin: 20px auto;
										left: -25%;
										width: 100%;
										top: 150rpx;
										text-indent: 2em;
										font-size: 30rpx;
										color: #000000;
										line-height: 55rpx;
									}
						
									.appointment {
										position: absolute;
										left: 50%;
										top: 300rpx;
										width: 125rpx;
										height: 52rpx;
										background: #F44B2F;
										border-radius: 26rpx;
										color: #fff;
										line-height: 52rpx;
										text-align: center;
						
						
									}
								}
						
						
							}
						}
					}
				}

			

			


	}
</style>