XEH-miniProgram/pages/self/info.vue

<template>
	<view class="page-wrap">
		<view class="row">
			<view class="label">头像</view>
			<image class="avatar" src="../../static/auth-icon.png" mode="aspectFill"></image>
		</view>
		<view class="row">
			<view class="label">姓名</view>
			<view class="text">Caocao</view>
		</view>
		<view class="row">
			<view class="label">绑定手机</view>
			<view class="text">18863100789</view>
		</view>
		<view class="space"></view>
		<view class="row">
			<view class="label">所属单位</view>
			<view class="text">天津超易达胜科技</view>
		</view>
		<view class="row">
			<view class="label">所属部门</view>
			<view class="text">办公室</view>
		</view>
		<view class="row">
			<view class="label">职务</view>
			<view class="text">经理</view>
		</view>
		<view class="space" style="height: 27.47rpx"></view>
		<view class="row">
			<view class="label">退出登录</view>
		</view>
	</view>
</template>

<script></script>

<style lang="scss" scoped>
.page-wrap {
	.row{
		min-height: 96.15rpx;
		font-size: 27.47rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 20.6rpx 41.21rpx;
		box-sizing: border-box;
		background: #fff;
		position: relative;
		&:first-child::before,
		&+.row::before{
			content: '';
			position: absolute;
			left: 0;
			right: 0;
			top: 0;
			height: 1px;
			background: #e0e0e0;
			transform: scaleY(.5);
		}
		.avatar{
			width: 82.42rpx;
			height: 82.42rpx;
			border-radius: 50%;
		}
	}
	.space{
		background: #f3f3f3;
		height: 13.74rpx;
	}
}
</style>