h5/pages/eye_ground/eye_ground.vue

<template>
	<view>
		<view class="position-relative bghead">
			<image style="opacity: 0;" src="@/static/other/ydjc.png" mode="widthFix" class="w-100"></image>
			<view class="position-absolute text-white px-3 mx-3 positionY-50" style="">
				<view class="centerY">
					<view class="bw_line line-height1"></view>
					<view class="ml-1 fs-18 font-bold">
						眼底检查
					</view>
				</view>
				<view class="mt-2 fs-14">
					患者检查的眼底片和医生建议记录
				</view>
			</view>
		</view>
		<view class="px-3 pb-3 mt-n2">
			<view class="bg-white px-3 py-2 mt-3" style="border-radius: 16rpx;" v-for="(item,index) in 5">
				<view class="centerY mb-2 text-gry">
					<text class="iconfont Clock fs-20"></text>
					<view class="">
						{{'2022-11-01'}}
					</view>
				</view>
				<view class="">
					<view class="centerY">
						<view class="w-50 mx-1">
							<view class="centerY">
								<image class="w-15" src="@/static/other/zuo.png" mode="widthFix"></image>
								<view class="d-inline-block ml-1 fs-14 text-dark">
									左眼
								</view>
							</view>
							<view class="border mt-2"
								style="background: #F6F9FE;border-radius: 16rpx;padding: 14rpx;box-sizing: border-box;">
								<view class="picbox1"
									style="border: 1px dotted  #E3E3E3;border-radius: 16rpx;box-sizing: border-box;">
									<view style="background: #F6F9FE;" class="picimg1">
										<image class="w-100" style="height: 100%;" src="@/static/defult/pic.png"
											mode="aspectFit"></image>
									</view>
								</view>
							</view>
						</view>
						<view class="w-50 mx-2">
							<view class="centerY">
								<image class="w-15" src="@/static/other/you.png" mode="widthFix"></image>
								<view class="d-inline-block ml-1 fs-14 text-dark">
									右眼
								</view>
							</view>
							<view class="border mt-2"
								style="background: #F6F9FE;border-radius: 16rpx;padding: 14rpx;box-sizing: border-box;">
								<view class="picbox1"
									style="border: 1px dotted  #E3E3E3;border-radius: 16rpx;box-sizing: border-box;">
									<view style="background: #F6F9FE;" class="picimg1">
										<image class="w-100" style="height: 100%;" src="@/static/defult/pic.png"
											mode="aspectFit"></image>
									</view>
								</view>
							</view>
						</view>
					</view>
					<view class="mt-3 p-2" style="box-shadow: 0px 2px 13px 2px rgba(211,212,214,0.45);border-radius: 8px;">
						<view class="centerY">
							<image class="w-15" src="@/static/other/zjjy.png" mode="widthFix"></image>
							<view class="fs-14 font-bold ml-2">
								专家建议
							</view>
							<view class=" ml-2 fs-12" style="color: #868687;">
									无异常。请保持
							</view>
						</view>
						<view class="centerY mt-2">
							<image class="w-15" src="@/static/other/jcyy.png" mode="widthFix"></image>
							<view class="fs-14 font-bold ml-2">
								专家建议
							</view>
							<view class=" ml-2 fs-12" style="color: #868687;">
									宁波第一人民医院
							</view>
						</view>
					</view>
				</view>
				<view class="text-center text-gry2 fs-10 mt-2">
					注：本报告内容只针对眼底照片可见范围
				</view>
			</view>
		</view>
		<view class="">

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

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

			};
		},
		onPullDownRefresh() {
			setTimeout(()=>{
				uni.stopPullDownRefresh()
			},1000)
		}
	}
</script>

<style lang="scss">
	page {
		background: #F5F9FF;
	}

	.picbox1 {
		width: 100% !important;
		height: 0;
		padding-bottom: 70%;
		margin: 0;
		position: relative;
		overflow: hidden;
	}

	.picbox1 .picimg1 {
		width: 100%;
		height: 100%;
		position: absolute;
	}

	.bw_line {
		width: 10rpx;
		height: 30rpx;
		background-color: #fff;
		border-radius: 6rpx;

	}

	.bghead {
		background-image: url('@/static/other/ydjc.png');
		background-size: 100% 100%;
		background-repeat: no-repeat;
		background-position: center;

	}

</style>