mechanicStore-app/pages/myEdit/myEdit.uvue

<template>
	<view class="container">
		<!-- 内容区 -->
		<scroll-view class="content-box" scroll-y>
			<!-- 头像+基础信息区 -->
			<view class="avatar-section">
				<view class="avatar-wrap">
					<image class="avatar-img" :src="userAvatar" mode="aspectFill">
					</image>
					<image class="avatar-tag" src="/static/imagesInfo/xiangji-icon.png" mode="aspectFit">
					</image>
					<!-- 头像角标 -->
				</view>
				<text class="user-name">
					刘大锤
				</text>
				<text class="user-phone">
					16709890987
				</text>
			</view>

			<!-- 信息列表容器 -->
			<view class="info-list">
				<!-- 年龄项（带开关） -->
				<view class="info-item" style="flex-direction: row;">
					<text class="info-label">
						年龄
					</text>
					<view class="info-content" style="flex-direction: row;">
						<text class="content-text">
							24岁
						</text>
						<switch class="info-switch" checked color="#FFCC00">
						</switch>
					</view>
				</view>

				<!-- 昵称项 -->
				<view class="info-item" style="flex-direction: row;">
					<text class="info-label">
						昵称
					</text>
					<view class="info-content" style="flex-direction: row;">
						<text class="content-text">
							熙熙
						</text>
						<image class="arrow-icon" src="/static/arrow.png" mode="aspectFit">
						</image>
					</view>
				</view>

				<!-- 生活照片项 -->
				<view class="info-item" style="flex-direction: row;">
					<text class="info-label">
						生活照片
					</text>
					<view class="info-content" style="flex-direction: row;">
						<text class="content-text text-gray">
							未添加
						</text>
						<image class="arrow-icon" src="/static/arrow.png" mode="aspectFit">
						</image>
					</view>
				</view>

				<!-- 商户简介项（审核失败） -->
				<view class="info-item" style="flex-direction: row;">
					<text class="info-label">
						商户简介
					</text>
					<view class="info-content" style="flex-direction: row;">
						<text class="content-text text-red">
							审核失败
						</text>
						<image class="arrow-icon" src="/static/arrow.png" mode="aspectFit">
						</image>
					</view>
				</view>

				<!-- 证件上传项（待审核+待处理） -->
				<view class="info-item" style="flex-direction: row;">
					<text class="info-label">
						证件上传
					</text>
					<view class="info-content" style="flex-direction: row;">
						<view class="status-tag-wrap" style="flex-direction: row;">
							<text class="status-tag tag-gray">
								待审核
							</text>
							<text class="status-tag tag-orange">
								待处理
							</text>
						</view>
						<image class="arrow-icon" src="/static/arrow.png" mode="aspectFit">
						</image>
					</view>
				</view>

				<!-- 紧急联系人项 -->
				<view class="info-item" style="flex-direction: row;">
					<text class="info-label">
						紧急联系人
					</text>
					<view class="info-content" style="flex-direction: row;">
						<image class="arrow-icon" src="/static/arrow.png" mode="aspectFit">
						</image>
					</view>
				</view>

				<!-- 我的负责人项 -->
				<view class="info-item" style="flex-direction: row;">
					<text class="info-label">
						我的负责人
					</text>
					<view class="info-content" style="flex-direction: row;">
						<text class="content-text">
							李景才-18709873290
						</text>
						<image class="arrow-icon" src="/static/arrow.png" mode="aspectFit">
						</image>
					</view>
				</view>

				<!-- 从业年份项 -->
				<view class="info-item" style="flex-direction: row;">
					<text class="info-label">
						从业年份
					</text>
					<view class="info-content" style="flex-direction: row;">
						<image class="arrow-icon" src="/static/arrow.png" mode="aspectFit">
						</image>
					</view>
				</view>
			</view>
		</scroll-view>
	</view>
</template>

<script setup>
	import { ref } from 'vue';

	const userAvatar = ref('/static/imagesInfo/avatar.png');
</script>

<style>
	/* 页面容器：解决100vh兼容，全屏适配 */
	.page-container {
		/* min-height: 100%; */
		height: 100%;
		background-color: #f8f8f8;
	}

	/* 顶部导航栏：显式flex-direction:row，横向排版 */
	.nav-bar {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 20rpx 20rpx;
		background-color: #fff;
		border-bottom: 1px solid #eee;
	}

	/* 关闭图标 */
	.close-icon {
		width: 40rpx;
		height: 40rpx;
	}

	/* 导航标题 */
	.nav-title {
		font-size: 36rpx;
		font-weight: 700;
		/* 替换font-weight:600 */
		color: #333;
	}

	/* 占位空盒 */
	.empty-box {
		width: 40rpx;
		height: 40rpx;
	}

	/* 头像+基础信息区：居中排版 */
	.avatar-section {

		align-items: center;
		padding: 40rpx 20rpx;
		background-color: #f5f5f5;
		margin-bottom: 10rpx;

	}

	/* 头像容器：相对定位，容纳角标 */
	.avatar-wrap {
		position: relative;
		margin-bottom: 16rpx;

	}

	/* 头像图片 */
	.avatar-img {
		width: 120rpx;
		height: 120rpx;
		border-radius: 60rpx;
	}

	/* 头像角标 */
	.avatar-tag {
		position: absolute;
		bottom: 0;
		right: 0;
		width: 32rpx;
		height: 32rpx;
	}

	/* 用户名 */
	.user-name {
		font-size: 32rpx;
		font-weight: 700;
		color: #333;
		margin-bottom: 8rpx;

	}

	/* 手机号 */
	.user-phone {
		font-size: 24rpx;
		color: #666;
		/* 替换font-weight:500 */
	}

	/* 信息列表容器 */
	.info-list {
		display: flex;
		flex-direction: column;
		background-color: #fff;
		margin: 0 20rpx;
		/* 左右间距 */
		border-radius: 12rpx;
		box-shadow: 0 0 10rpx 2rpx rgba(0, 0, 0, 0.05);
		/* 四周阴影 */
		overflow: hidden;
	}

	/* 信息项：显式flex-direction:row，横向排版 */
	.info-item {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 24rpx 20rpx;
		border-bottom: 1px solid #f0f0f0;
	}

	/* 最后一个信息项去掉下边框 */
	.info-list .info-item:last-child {
		border-bottom: none;
	}

	/* 信息标签 */
	.info-label {
		font-size: 28rpx;
		color: #333;
		font-weight: 400;
	}

	/* 信息内容容器：显式flex-direction:row，横向排版 */
	.info-content {
		display: flex;
		align-items: center;
		justify-content: flex-end;
	}

	/* 内容文本 */
	.content-text {
		font-size: 28rpx;
		color: #333;
		margin-right: 12rpx;
	}

	/* 灰色文本（未添加） */
	.text-gray {
		color: #999;
	}

	/* 红色文本（审核失败） */
	.text-red {
		color: #ff4444;
	}

	/* 箭头图标 */
	.arrow-icon {
		width: 24rpx;
		height: 24rpx;
	}

	/* 开关样式 */
	.info-switch {
		transform: scale(0.9);
	}

	/* 状态标签容器：显式flex-direction:row，横向排版 */
	.status-tag-wrap {
		display: flex;
		margin-right: 12rpx;
	}

	/* 状态标签通用样式 */
	.status-tag {
		font-size: 22rpx;
		padding: 4rpx 8rpx;
		border-radius: 4rpx;
		margin-right: 8rpx;
	}

	/* 待审核标签（灰色） */
	.tag-gray {
		color: #999;
		background-color: #f0f0f0;
	}

	/* 待处理标签（橙色） */
	.tag-orange {
		color: #fff;
		background-color: #ff9900;
	}
</style>