wanzai_school_app/pages/myMsg/myMsg.vue

<template>
	<view class="container">
		<view class="box">
			<!-- 编号区域 -->
			<view class="box_item">
				<view class="item_key">编号</view>
				<view class="item_value">202356562</view>
			</view>

			<!-- 姓名区域 -->
			<view class="box_item">
				<view class="item_key">姓名</view>
				<view class="item_value">张三</view>
			</view>
			<!-- 身份区域 -->
			<view class="box_item">
				<view class="item_key">身份</view>
				<view class="item_value">家长</view>
			</view>
			<!-- 身份证区域 -->
			<view class="box_item">
				<view class="item_key">身份证</view>
				<view class="item_value">360525689656521612</view>
			</view>
			<!-- 性别区域 -->
			<view class="box_item">
				<view class="item_key">性别</view>
				<view class="item_value">男</view>
			</view>
			<!-- 部门区域 -->
			<view class="box_item">
				<view class="item_key">部门</view>
				<view class="item_value">万载三中初一二班</view>
			</view>
			<!-- 角色区域 -->
			<view class="box_item">
				<view class="item_key">角色</view>
				<view class="item_value">超级管理员</view>
			</view>
			<!-- 人脸照片区域 -->
			<view class="box_item no_border">
				<view class="item_key">人脸照片</view>
				<view class="item_value">暂无</view>
			</view>
		</view>

		<view class="box">
			<!-- 年级区域 -->
			<view class="box_item">
				<view class="item_key">年级</view>
				<view class="item_value">
					暂无
					<img class="value_img" src="../../static/images/right.png" />
				</view>
			</view>
			<!-- 学院区域 -->
			<view class="box_item">
				<view class="item_key">学院</view>
				<view class="item_value">
					暂无
					<img class="value_img" src="../../static/images/right.png" />
				</view>
			</view>
			<!--  班级区域 -->
			<view class="box_item no_border">
				<view class="item_key">班级</view>
				<view class="item_value">
					暂无
					<img class="value_img" src="../../static/images/right.png" />
				</view>
			</view>
		</view>

		<view class="box">
			<!-- 校区区域 -->
			<view class="box_item">
				<view class="item_key">校区</view>
				<view class="item_value">暂无</view>
			</view>
			<!-- 宿舍号区域 -->
			<view class="box_item">
				<view class="item_key">宿舍号</view>
				<view class="item_value">暂无</view>
			</view>
			<!--  手机号区域 -->
			<view class="box_item no_border">
				<view class="item_key">手机号</view>
				<view class="item_value">13689568978</view>
			</view>
		</view>

		<view class="box">
			<!-- 关联人区域 -->
			<view class="box_item">
				<view class="item_key">关联人</view>
				<view class="item_value">张三</view>
			</view>
			<!-- 职称区域 -->
			<view class="box_item">
				<view class="item_key">职称</view>
				<view class="item_value">暂无</view>
			</view>
			<!--  家庭地址区域 -->
			<view class="box_item">
				<view class="item_key">家庭地址</view>
				<view class="item_value">暂无</view>
			</view>
			<!-- 民族区域 -->
			<view class="box_item">
				<view class="item_key">民族</view>
				<view class="item_value">汉</view>
			</view>
			<!-- 生源地区域 -->
			<view class="box_item">
				<view class="item_key">生源地</view>
				<view class="item_value">暂无</view>
			</view>
			<!--  毕业学校区域 -->
			<view class="box_item">
				<view class="item_key">毕业学校</view>
				<view class="item_value">暂无</view>
			</view>
			<!--  职务区域 -->
			<view class="box_item no_border">
				<view class="item_key">职务</view>
				<view class="item_value">暂无</view>
			</view>
		</view>
	</view>
</template>

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

<style lang="scss" scoped>
.container {
	display: flex;
	flex-direction: column;
	box-sizing: border-box;
	padding-bottom: 10rpx;
	min-height: 100vh;
	background-color: #f1f6fe;

	.box {
		margin-top: 20rpx;
		padding: 0 18rpx;
		background-color: #fff;

		.box_item {
			display: flex;
			justify-content: space-between;
			align-items: center;
			height: 85rpx;
			font-size: 28rpx;
			border-bottom: 1rpx solid #e6e6e6;

			.item_key {
				font-weight: bold;
			}

			.item_value {
				display: flex;
				align-items: center;
				color: #808080;

				.value_img {
					margin-left: 10rpx;
					width: 31rpx;
					height: 31rpx;
				}
			}
		}

		.no_border {
			border: none;
		}
	}
}
</style>