h5/pages/userinfo/userinfo.vue

<template>
	<view>
		<view class="p-3">
			<view class="d-flex">
				<view class="w-100 fs-14 font-bold">
					<view class="centerY">
						<view class="bule_line" style="height: 26rpx;margin-top: -2rpx;"></view>
						<text class="font-bold text-dark ml-2 fs-16 line-height1">基本信息</text>
					</view>
					<view class="centerY border-bottom mb-2 mt-2" 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" 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/家族史.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/社保.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/身份证.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/电话.png" mode="widthFix" style="width: 40rpx;"></image>
					<view class=" ml-1 line-height1">
						手机号码：{{'18812345678'}}
					</view>
				</view>
				<view class="centerY py-2">
					<image src="../../static/家庭.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" 
						: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" 
						: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" 
						: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;color: #818181;">
				<view class="centerY">
					<view class="bule_line" style="height: 26rpx;margin-top: -2rpx;"></view>
					<text class="font-bold text-dark ml-2 fs-16 line-height1">其他信息</text>
				</view>
				<view class="centerY">
					
				</view>
			</view>
			
		</view>
	</view>
</template>

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

			};
		}
	}
</script>

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