construction_site_supervision/pages/personal/personal.vue

<template>
	<view>
		<view class="avatar_name">
			<view class="avatar">
				<image src="../../static/personal/avatar_sample.png" mode=""></image>
			</view>
			<text class="username">
				张三
			</text>
		</view>
		<view class="user-info">
			<view class="user-info-item">
				<text class="key">
					性别:&nbsp;
				</text>
				<text class="value">
					{{userInfo.gender}}
				</text>
			</view>
			<view class="user-info-item">
				<text class="key">
					年龄:&nbsp;
				</text>
				<text class="value">
					{{userInfo.age}}
				</text>
			</view>
			<view class="user-info-item">
				<text class="key">
					所属单位:&nbsp;
				</text>
				<text class="value">
					{{userInfo.unit}}
				</text>
			</view>
			<view class="user-info-item">
				<text class="key">
					部门:&nbsp;
				</text>
				<text class="value">
					{{userInfo.department}}
				</text>
			</view>
			<view class="user-info-item">
				<text class="key">
					岗位:&nbsp;
				</text>
				<text class="value">
					{{userInfo.post}}
				</text>
			</view>
			<view class="user-info-item">
				<text class="key">
					负责项目:&nbsp;
				</text>
				<text class="value">
					{{userInfo.project}}
				</text>
			</view>
			<view class="user-info-item">
				<text class="key">
					项目角色:&nbsp;
				</text>
				<text class="value">
					{{userInfo.role}}
				</text>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				userInfo: {
					name: '张三',
					gender: '男',
					age: 26,
					unit: '航天科工六院',
					department: '**部',
					post: '**经理',
					project: '负责项目',
					role: '**项目经理'
				}
			}
		},
		methods: {

		}
	}
</script>

<style lang="scss">
	.avatar_name {
		border: 1px solid rgb(186, 186, 186);
		display: flex;
		align-items: center;
		height: 180rpx;
		padding-left: 38rpx;

		.avatar {
			display: flex;
			align-items: center;

			uni-image {
				width: 114rpx;
				height: 114rpx;
			}
		}

		.username {
			margin-left: 100rpx;
			font-size: 28px;
		}
	}

	.user-info {
		.user-info-item {
			display: flex;
			height: 120rpx;
			align-items: center;
			border: 1px solid #bbb;
		}
	}
</style>