siyu_app/pages/index/specialist-appointment.vue

<template>
	<view>
		<es-nav-bg ref="esNavBg" title="专家约诊"></es-nav-bg>

		<view class="es-view-w-x">
			<view class="es-br-20 es-c es es-pc es-ver es-oh es-view-w-x es-mt-20 es-icon-auto es-icon-specialist-1"
				style="height: 223rpx;">
				<view class="es-fs-46 es-fw" style="font-family: Alimama ShuHeiTi;">名医工作室</view>
				<view class="es-fs-24">轻松找到权威专家</view>
			</view>

			<view class="es es-ac es-mt-20 es-pl-10 es-pr-10">
				<view class="es-icon-auto es-icon-specialist-2 banner-item es es-ac">
					<view class="es-ml-15">
						<view class="es-fs-26 es-fw-600">老年病</view>
						<view class="es-fs-20">权威知名专家</view>
						<view class="es-w-110 es-mt-8 es-fs-19 es-h-30 es-br es es-ac es-pc es-bc-white">
							咨询名医>
						</view>
					</view>
				</view>
				<view class="es-f1"></view>
				<view class="es-icon-auto es-icon-specialist-3 banner-item es es-ac">
					<view class="es-ml-15">
						<view class="es-fs-26 es-fw-600">快速问诊</view>
						<view class="es-fs-20">全国名老中医</view>
						<view class="es-w-110 es-mt-8 es-fs-19 es-h-30 es-br es es-ac es-pc es-bc-white">
							咨询名医>
						</view>
					</view>
				</view>
			</view>

			<view class=" es-mt-20">
				<view class="es-f1 es-bc-white es-h-70 es-br es es-ac">
					<view class="es-icon-26 es-ml-27 es-icon-search-search"></view>
					<view class="es-f1 es-ipt es-bc-white">
						<input placeholder="请输入关键字搜索" class="es-fs-24" placeholder-class="es-c-b4" />
					</view>
					<view class="es-w-108 es-h-58 es-br es-bc es-mr-7  es es-ac es-pc es-fw-500 es-fs-26 es-on-act">搜索
					</view>
				</view>
			</view>

		</view>

		<view class="es-pl-21 es-pr-21 es-mt-5">
			<view class="es es-b-b es-h-90 es-ac es-fs-28" style="border-bottom: #E5E5E5 solid 1px;">
				<view class="es-f1"></view>
				<block v-for="v,i in ['全部','癌症肿瘤','疑难杂症','妇科气血','男性生殖',]">
					<view class="es-f1" v-if="i"></view>
					<view class="es es-ver es-ac es-pc">
						<view :class="i==0?'es-c es-fw-600':'es-c-99'">{{v}}</view>
						<view class="es-h-6 es-w-54 es-br es-mt-6" :class="i==0?'es-bc':''"></view>
					</view>
				</block>
				<view class="es-f1"></view>
			</view>
		</view>

		<view class="es-view-w-x">
			<view class="es-mt-30 es-bc-white es-br-20 es-pl-35 es-pr-35 es-pt-30 es-pb-30" v-for="v,i in 10">
				<view class="es">
					<view class="es-icon-120 es-br-20 es-oh es-p-r">
						<image src="/static/logo.png"></image>
						<view class="es-c es es-ac es-pc es-h-30 es-fs-22 status">在线</view>
					</view>
					<view class="es-f1 es-ml-15 es es-ver" style="justify-content: space-between;">
						<view class="es es-ae">
							<view class="es-omit es-fs-30 es-fw-600" style="max-width: 6em;">王馨瑶</view>
							<view class="es-f1 es-omit es-fs-26 es-c es-pb-2">
								<text class="es-ml-22">主治医师</text>
								<text class="es-ml-22">中医科</text>
							</view>
						</view>
						<view class="es es-ac">
							<view class="es-w-70 es-h-34 es es-ac es-pc es-brc es-br-4 es-fs-22 es-fw-500 es-c label">一级</view>
							<view class="es-f1 es-ml-37 es-omit es-fw-500 es-fs-26">御君方互联网医院</view>
						</view>
						<view class="es-omit es-fs-26 es-c-6a">
							治疗胃炎等消化系统疾病，慢性咳嗽
						</view>
					</view>
				</view>
				<view class="es-pt-20 es  es-ac">
					<view class="es-f1 es-c-6a es-fs-22">
						好评:5分  接诊量:326  平均响应:35S
					</view>
					<view class="es-br es-bc es-w-200 es es-ac es-pc es-h-52 es-fs-26 es-fw-500">咨询医生 ￥15</view>
				</view>
				
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {



			}
		},
		onLoad(options) {


		},
		onPageScroll: function(e) {
			this.$refs.esNavBg.scrollBody(e);
		},
		methods: {


		}
	}
</script>

<style>
	.es-icon-specialist-1 {
		background-image: url(/static/images/other/specialist/1.png);
	}

	.es-icon-specialist-2 {
		background-image: url(/static/images/other/specialist/2.png);
	}

	.es-icon-specialist-3 {
		background-image: url(/static/images/other/specialist/3.png);
	}

	.es-icon-search-search {
		background-image: url(/static/images/other/search/search.png);
	}

	.banner-item {
		width: calc(50% - 19rpx);
		height: 140rpx;
	}

	.banner-item:nth-child(1) view:nth-child(1) {
		color: #3A0A08;
	}

	.banner-item:nth-child(1) view:nth-child(2) {
		color: #61211E;
	}

	.banner-item:nth-child(2) view:nth-child(1) {
		color: #113237;
	}

	.banner-item:nth-child(2) view:nth-child(2) {
		color: #587276;
	}
	
	.status{
		position: absolute;
		bottom:0;
		width: 100%;
		
	}
	.status,.label{
		background-color: #FFE8DC;
	}
	
</style>