h5/pages/userinfo/userinfo.vue

<template>
	<view>
		<view class="p-3">
			<view class="d-flex">
				<view class="w-100 font-bold">
					<view class="centerY  mb-3">
						<view class="bule_line" style="height: 26rpx;"></view>
						<text class="font-bold text-dark ml-2 fs-18 line-height1">基本信息</text>
					</view>
					<view class="centerY border-bottom mb-2 fs-14" style="color: #818181;">
						<view class="w-50 mb-2">
							<view class="mb-2">
								姓名：{{'王老爷爷'}}
							</view>
							<view class="">
								出生日期：{{'1864.02.09'}}
							</view>
						</view>
						<view class="w-50 mb-2">
							<view class="mb-2">
								年龄：{{'160'}}
							</view>
							<view class="">
								性别：{{'男'}}
							</view>
						</view>
					</view>
					<view class="centerY mb-2 fs-14" style="color: #818181;">
						<view class="w-50 mb-2">
							<view class=" mb-2">
								文化程度：{{'文盲'}}
							</view>
							<view class="">
								职业：{{'导盲犬训练员'}}
							</view>
						</view>
						<view class="w-50 mb-2">
							<view class=" mb-2">
								民族：{{'维吾尔族人'}}
							</view>
							<view class="">
								婚姻状况：{{'未婚'}}
							</view>
						</view>
					</view>
				</view>
				<view style="position: absolute;right: 20rpx;top: 20rpx;width: 100rpx;">
					<view class="picbox">
						<image src="@/static/userinfo/jzs.png" mode="widthFix" class="picimg"></image>
					</view>
				</view>
			</view>
			<view class="bg-white px-3 fs-14  font-bold" style="border-radius: 16rpx;color: #818181;">
				<view class="centerY border-bottom py-2">
					<image src="@/static/userinfo/sb.png" mode="widthFix" style="width: 40rpx;"></image>
					<view class=" ml-1 line-height1">
						社保卡号：{{'A1122233333'}}
					</view>
				</view>
				<view class="centerY border-bottom py-2">
					<image src="@/static/userinfo/sfz.png" mode="widthFix" style="width: 40rpx;"></image>
					<view class=" ml-1 line-height1">
						身份证号：{{'542250213151651511'}}
					</view>
				</view>
				<view class="centerY border-bottom py-2">
					<image src="@/static/userinfo/dh.png" mode="widthFix" style="width: 40rpx;"></image>
					<view class=" ml-1 line-height1">
						手机号码：{{'18812345678'}}
					</view>
				</view>
				<view class="centerY py-2">
					<image src="@/static/userinfo/jt.png" mode="widthFix" style="width: 40rpx;"></image>
					<view class=" ml-1 line-height1">
						家庭住址：{{'浙江省杭州市西湖区XX街道'}}
					</view>
				</view>
			</view>
			<view class="d-flex mt-2  font-bold"  style="color: #818181;">
				<view class="py-1 mt-1 fs-14 space-nowrap">
					医保类型：
				</view>
				<view class="fs-10 w-100">
					<span class="mr-1 text-center py-1 mt-2 d-inline-block w-20 line-height1" 
						:style="{borderRadius:'50rpx',background:index==1?'#1890FF':'#EBEBEB',color:index==1?'#fff':'#A4A4A4'}"
					 v-for="(item,index) in ['城镇医保','公费医保','系农村','商业保险','自费']">
						{{item}}
					</span>
				</view>
			</view>
			<view class="d-flex mt-2 font-bold"  style="color: #818181;">
				<view class="mt-1 py-1 fs-14 space-nowrap font-bold">
					慢病类型：
				</view>
				<view class="fs-10 w-100">
					<span class="mr-1 text-center py-1 mt-2 d-inline-block w-20 line-height1" 
						:style="{borderRadius:'50rpx',background:index==1?'#1890FF':'#EBEBEB',color:index==1?'#fff':'#A4A4A4'}"
					 v-for="(item,index) in ['高血压','糖尿病','合并症','无']">
						{{item}}
					</span>
				</view>
			</view>
			<view class="d-flex mt-2 font-bold"  style="color: #818181;">
				<view class="mt-1 py-1 fs-14 space-nowrap font-bold">
					糖尿病病龄：
				</view>
				<view class="fs-10 w-100">
					<span class="mr-1 text-center py-1 mt-2 d-inline-block w-20 line-height1" 
						:style="{borderRadius:'50rpx',background:index==1?'#1890FF':'#EBEBEB',color:index==1?'#fff':'#A4A4A4'}"
					 v-for="(item,index) in ['30年']">
						{{item}}
					</span>
				</view>
			</view>
			<view class=" mt-2 bg-white p-3 fs-14  font-bold" style="border-radius: 16rpx;">
				<view class="centerY mb-2">
					<view class="bule_line" style="height: 26rpx;margin-top: -2rpx;"></view>
					<text class="font-bold text-dark ml-2 fs-18 line-height1">其他信息</text>
				</view>
				<view class=" border-bottom pt-2">
					<view class="w-50 d-inline-block mb-2">
						<view class="centerY">
								<view class="w-40">
										<view class="picbox">
											<image class="picimg" src="@/static/userinfo/jbs.png" mode=""></image>
										</view>
									</view>
									<view class="w-60 ml-1">
										<view class="fs-16">
											疾病史
										</view>
										<view class="mt-1"  style="color: #818181;">
											心脏病
										</view>
									</view>
						</view>
					</view>
					
						<view class="w-50 d-inline-block mb-2">
							<view class="centerY">
									<view class="w-40">
											<view class="picbox">
												<image class="picimg" src="@/static/userinfo/jzs.png" mode=""></image>
											</view>
										</view>
										<view class="w-60 ml-1">
											<view class="fs-16">
												家族史
											</view>
											<view class="mt-1"  style="color: #818181;">
												心脏病
											</view>
										</view>
									
							</view>
						</view>
						<view class="w-50 d-inline-block mb-2">
							<view class="centerY">
									<view class="w-40">
											<view class="picbox">
												<image class="picimg" src="@/static/userinfo/xd.png" mode=""></image>
											</view>
										</view>
										<view class="w-60 ml-1">
											<view class="fs-16">
												咸淡情况
											</view>
											<view class="mt-1"  style="color: #818181;">
												心脏病
											</view>
										</view>
							</view>
						</view>
						<view class="w-50 d-inline-block mb-2">
							<view class="centerY">
									<view class="w-40">
											<view class="picbox">
												<image class="picimg" src="@/static/userinfo/hb.png" mode=""></image>
											</view>
										</view>
										<view class="w-60 ml-1">
											<view class="fs-16">
												合并症
											</view>
											<view class="mt-1"  style="color: #818181;">
												心脏病
											</view>
										</view>
							</view>
						</view>
					</view>
				<view class="mt-2">
					<view class="fs-14 font-bold text-dark">
							并发症
					</view>
					<view class="fs-10 w-100">
						<span class="mr-1 text-center py-1 px-2 mt-2 d-inline-block line-height1" 
							:style="{borderRadius:'50rpx',background:'#EBEBEB',color:'#A4A4A4',border:'1px solid #A4A4A4'}"
						 v-for="(item,index) in ['30年','dasdsaadassa']">
							{{item}}
						</span>
					</view>
				</view>
			</view>
			
		</view>
	</view>
</template>

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

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

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