construction_site_supervision/pages/personal/personal.vue

<template>
	<view>
		<view class="page-top">
			<u-navbar title="个人中心" placeholder bgColor="transparent" :leftIcon="null" titleStyle="color:white">
			</u-navbar>
		</view>
		<view class="sized-box" style="height:var(--status-bar-height);"></view>
		<view class="sizedbox" style="height: 88rpx;"></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>
	page {
		background-color: #f6f6f6;
	}
</style>
<style lang="scss">
	.page-top {
		z-index: 99;
		background: linear-gradient(to top right, #496df6, #2e9ee8);
		position: fixed;
		width: 100%;
		top: 0;
	}

	.avatar_name {
		border-bottom: 2rpx solid #f4f4f4;
		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;
			padding-left: 20rpx;
			align-items: center;
			border-bottom: 2rpx solid #f4f4f4;
		}
	}
</style>