pages/sub_medical/outpatient.vue

<template>
	<view class="outpatient">
		<view class="outpatient-headerbox">
			<view class="outpatient-header">
				<view class="outpatient-header-img">
					<u-image src="/static/images/active/mrlfl.png" width="120" mode="widthFix"></u-image>
				</view>
				<view class="outpatient-header-msg">
					<text class="outpatient-header-msg-title">大理市第一人民医院</text>
					<text class="outpatient-header-msg-logo">三甲</text>
					<text class="outpatient-header-msg-to">热门科室：皮肤科、普外科</text>
				</view>
			</view>
			<u-icon name="map" color="#52B6E6" size="36" :label="local" class="outpatient-headerbox-icon" label-color="#A1A1A1"></u-icon>
			<u-icon name="clock" color="#52B6E6" size="36" :label="time" class="outpatient-headerbox-icon" label-color="#A1A1A1"></u-icon>
			<u-icon name="phone" color="#52B6E6" size="36" :label="tel" class="outpatient-headerbox-icon" label-color="#A1A1A1"></u-icon>
		</view>
		<view class="outpatient-search">
			<u-search placeholder="搜索科室名称" v-model="part" :show-action="false" bg-color="#ffffff"></u-search>
		</view>
		<view class="outpatient-kinds">
			<view class="outpatient-kinds-left">
				<scroll-view scroll-y="true" class="scrollView" :style="{height:height+'px'}">
					<view class="outpatient-kinds-left-item">
						<view class="outpatient-kinds-left-item-line"> </view>
						<u-cell-item title="全部" :arrow="false" bg-color="#ffffff" :title-style="style"></u-cell-item>
					</view>
				</scroll-view>
			</view>
			<view class="outpatient-kinds-right">
				<scroll-view scroll-y="true" class="scrollView" :style="{height:height+'px'}">
					<view class="outpatient-kinds-right-item" @click="toPath('/pages/sub_medical/queryDate')">
						<u-cell-item title="心内科" :arrow="false"></u-cell-item>
					</view>
					<view class="outpatient-kinds-right-item">
						<u-cell-item title="心内科" :arrow="false"></u-cell-item>
					</view>
					<view class="outpatient-kinds-right-item">
						<u-cell-item title="心内科" :arrow="false"></u-cell-item>
					</view>
					<view class="outpatient-kinds-right-item">
						<u-cell-item title="心内科" :arrow="false"></u-cell-item>
					</view>
					<view class="outpatient-kinds-right-item">
						<u-cell-item title="心内科" :arrow="false"></u-cell-item>
					</view>
				</scroll-view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				local: '云南省大理市下关泰安路36号',
				time: '上午8:00-11:30;下午14:00-17:30 周六、日照常。',
				tel: '021-3123320',
				part: '',
				height: '',
				style: {
					color: '#40AFE3',
					fontWeight: 'bold'
				}
			}
		},
		onLoad() {
			this.getSrcollViewHeight()
		},
		methods: {
			getSrcollViewHeight() {
				let winHeight
				let that = this
				uni.getSystemInfo({
					success: function(res) {
						winHeight = res.windowHeight
					}
				});
				//console.log(winHeight)
				const query = uni.createSelectorQuery().in(that);
				query.select('.outpatient-search').boundingClientRect(data => {
					console.log(data)
					if (!data) {
						setTimeout(() => {
							that.getSrcollViewHeight()
						}, 10)
						return
					}
					that.height = winHeight - data.top - data.height
					// that.height = (data.bottom - data.height)*2
				}).exec();
			},
		}
	}
</script>

<style lang="scss" scoped>
	.u-cell{
		padding: 20rpx 32rpx;
	}
	.outpatient {
		font-family: "PingFang-SC-Medium";

		&-headerbox {
			background-color: #FFFFFF;
			padding: 30rpx 20rpx;

			&-icon {
				margin-bottom: 10rpx;
				font-size: 28rpx;
			}
		}

		&-header {
			display: flex;
			align-items: center;
			margin-bottom: 30rpx;

			&-img {
				justify-content: center;

			}

			&-msg {
				margin-left: 20rpx;
				display: flex;
				flex-direction: column;

				&-title {
					font-size: 32rpx;
				}

				&-logo {
					display: inline-block;
					background-color: #17C46F;
					padding: 4rpx;
					width: 80rpx;
					color: #FFFFFF;
					text-align: center;
					font-size: 20rpx;
					border-radius: 5rpx;
					margin: 10rpx 0;
				}

				&-to {
					color: #A1A1A1;
				}
			}

		}

		&-search {
			padding: 30rpx;
		}
		&-kinds {
			display: flex;
			&-left {
				flex: 1;
				&-item {
					display: flex;
					background-color: #FFFFFF;
					&-line {
						width: 10rpx;
						height: 110rpx;
						background-color: #40AFE3;
					}
				}
			}

			&-right {
				flex: 3;
				background-color: #FFFFFF;
			}
		}

	}
</style>