h5/pages/medication/medication.vue

<template>
	<view>
		<view class="position-relative bghead">
			<image style="opacity: 0;" src="@/static/other/med.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-2 py-3 mt-3" style="border-radius: 16rpx;" v-for="(item,index) in 5">
				<view class="centerY mb-2 text-gry">
					<view class="bule_line"></view>
					<view class="ml-2">
						{{'糖尿病随访'}}
					</view>
					<text class="ml-auto iconfont Clock fs-20"></text>
					<view class="">
						{{'2022-11-01'}}
					</view>
				</view>
				<view class="">
					<view class="mtable-title centerY bg-primary text-white fs-12">
						<view class="text-left" style="width: 23%;">
							药名
						</view>
						<view class=" text-center" style="width: 15%;">
							剂量
						</view>
						<view class="w-10 text-center">
							用法
						</view>
						<view class="text-center" style="width: 17%;">
							用药频次
						</view>
						<view class="text-center" style="width: 17%;">
							不良反应
						</view>
						<view class=" text-center" style="width: 17%;">
							用药类型
						</view>
					</view>
					<view class="mtable-body-item centerY fs-12" v-for="(item,index) in 5" style="color: #868687;">
						<view class="text-left" style="width: 23%;">
							{{'培哚普利吲达帕胺片4mg'}}
						</view>
						<view class=" text-center" style="width: 15%;">
							{{'1.05mg'}}
						</view>
						<view class="w-10 text-center">
							{{'口服'}}
						</view>
						<view class="text-center" style="width: 17%;">
							{{'1日1次'}}
						</view>
						<view class="text-center" style="width: 17%;">
							{{'无'}}
						</view>
						<view class="text-center" style="width: 17%;">
							{{'糖尿病'}}
						</view>
					</view>
				</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;
	}

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

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

	}

	.mtable {
		&-title {
			border-radius: 50rpx;
			padding: 20rpx 0 20rpx 20rpx;
		}

		&-body {
			&-item {
				margin-top: 20rpx;
				border-radius: 50rpx;
				padding: 14rpx 0 14rpx 20rpx;
				background-color: #F6F9FE;
				color: #868687;
			}
		}
	}
</style>