个人中心UI

mer_uniapp/pages/user/index.vue

@@ -8,34 +8,65 @@
 			北京大学校园送
 		</view>
 
-		<view style="background-color: #ffffff; border-radius: 23rpx;padding: 30rpx 20rpx 40rpx 20rpx;">
+		<view style="background-color: #FF6702;height: 60rpx;"></view>
 
-			<view style="display: flex;padding: 20rpx;">
-				<view style="flex: 1;font-size: 21rpx;color: #999999;">
-					<text style="margin-right: 14rpx;">绑定手机号：185-7033-6037</text>
-					<image src="/static/img/ic-copy.png" style="width: 27rpx;height: 27rpx;vertical-align: middle;"></image>
+		<view class="card">
+			<view class="card-left">
+				<img class="avatar" src="/static/img/ic-buy.png" alt="用户头像">
+				<view class="username">老番茄333 <image src="/static/img/ic-code.png" class="code"></image>
 				</view>
-				
-				<view style="flex: 1;text-align: right;color: #141414;font-size: 23rpx;font-weight: 600;">
-					个人中心 >
+
+				<view class="phone-info">
+					<text>绑定手机号：185-7033-6037</text>
+					<image src="/static/img/ic-copy.png">
+					</image>
 				</view>
-				
 			</view>
 
-			<view class="item-settled">
-					<view style="flex: 1;">
-						<image src="/static/img/ic-merchant-settled.png" style="width: 116rpx;height: 116rpx;"></image>
-						<text style="margin-right: 14rpx;">商家入驻</text>
+			<view class="card-right">
+				<view class="card-content">
+					<view class="content-item">
+						<img class="content-icon" src="/static/img/ic-tickets.png" alt="我的票劵">
+						<view class="content-text1">我的票劵</view>
+					</view>
+					<view class="content-item">
+						<img class="content-icon" src="/static/img/ic-order.png" alt="我的订单">
+						<view class="content-text2">我的订单</view>
 					</view>
-					
-					<view style="flex: 1;">
-						
+					<view class="content-item">
+						<img class="content-icon" src="/static/img/ic-gold.png" alt="我的金币">
+						<view class="content-text3">我的金币</view>
 					</view>
+				</view>
+
+				<view class="profile-link">
+					<text>个人中心</text>
+					<img src="/static/img/ic-right.png" />
+				</view>
 			</view>
+		</view>
+
+		<view class="item-settled">
+			<image src="/static/img/ic-settled-left.png" style="width: 350rpx;height: 116rpx;"></image>
+
+			<image src="/static/img/ic-bg-line.png" style="width: 4rpx;height: 154rpx;margin: 0 20rpx;"></image>
 
+			<image src="/static/img/ic-settled-right.png" style="width: 350rpx;height: 116rpx;"></image>
+		</view>
+
+		<view class="item-features">
+			<view class="item-features-title">我的功能</view>
+			<div class="grid-container">
+				<!-- 示例：12 个格子（3行x4列） -->
+				<div class="grid-item" v-for="item in featuresList" :key="item.id">
+					<img class="grid-img" :src="item.icon">
+					<div class="grid-text">{{item.text}}</div>
+				</div>
+			</div>
 		</view>
 
 
+
 	</view>
 </template>
 
@@ -47,6 +78,57 @@
 			return {
 				statusBarHeight: app.globalData.statusBarHeight,
 				navigationBarHeight: 0,
+				featuresList: [{
+						id: 1,
+						icon: '/static/img/ic-express.png',
+						text: '我的快递'
+					},
+					{
+						id: 2,
+						icon: '/static/img/ic-address.png',
+						text: '通用地址'
+					},
+					{
+						id: 3,
+						icon: '/static/img/ic-comments.png',
+						text: '我的评论'
+					},
+					{
+						id: 4,
+						icon: '/static/img/ic-collection.png',
+						text: '我的收藏'
+					},
+					{
+						id: 5,
+						icon: '/static/img/ic-buy.png',
+						text: '我的团购'
+					},
+					{
+						id: 6,
+						icon: '/static/img/ic-vouchers.png',
+						text: '我的卡券'
+					},
+					{
+						id: 7,
+						icon: '/static/img/ic-distribution.png',
+						text: '我的分销'
+					},
+					{
+						id: 8,
+						icon: '/static/img/ic-friend.png',
+						text: '邀请好友'
+					},
+					{
+						id: 9,
+						icon: '/static/img/ic-feedback.png',
+						text: '帮助反馈'
+					},
+					{
+						id: 10,
+						icon: '/static/img/ic-security-settings.png',
+						text: '安全设置'
+					}
+				],
 			}
 		},
 		onLoad(options) {
@@ -78,8 +160,192 @@
 	.item-settled {
 		background: linear-gradient(135deg, #FED0A7 0%, #FFF3E2 52%, #FAEDD3 100%);
 		border-radius: 8rpx;
-		border: 2rpx solid;
-		border-image: linear-gradient(200deg, rgba(255, 220, 135, 1), rgba(255, 172, 33, 1), rgba(255, 201, 24, 1)) 2 2;
-		padding: 40rpx;
+		padding: 20rpx;
+		box-shadow: 0 0 0 2rpx rgba(255, 220, 135, 1);
+		position: relative;
+		top: -90rpx;
+		margin: 0 20rpx;
+		display: flex;
+		align-items: center;
+	}
+
+	.item-settled::after {
+		content: "";
+		position: absolute;
+		top: -2rpx;
+		left: -2rpx;
+		right: -2rpx;
+		bottom: -2rpx;
+		background: linear-gradient(200deg, rgba(255, 220, 135, 1), rgba(255, 172, 33, 1), rgba(255, 201, 24, 1));
+		border-radius: 10rpx;
+		z-index: -1;
+		pointer-events: none;
+	}
+
+	.card {
+		position: relative;
+		display: flex;
+		/* 启用flex布局 */
+		box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.1);
+		padding: 40rpx 30rpx 120rpx 30rpx;
+		box-sizing: border-box;
+		background: linear-gradient(225deg, #ECF3FE 0%, #FEFEFE 100%);
+		border-radius: 23rpx;
+		top: -20rpx;
+	}
+
+	.card-left {
+		position: relative;
+	}
+
+	.card-right {
+		flex: 1;
+	}
+
+	.avatar {
+		position: absolute;
+		top: -80rpx;
+		left: 0;
+		width: 131rpx;
+		height: 131rpx;
+		background-color: #D8D8D8;
+		border: 4rpx solid #FFFFFF;
+		border-radius: 50%;
+		object-fit: cover;
+	}
+
+	.username {
+		margin-top: 70rpx;
+		color: #141414;
+		font-size: 35rpx;
+		font-weight: bold;
+	}
+
+	.code {
+		width: 31rpx;
+		height: 31rpx;
+		margin-left: 20rpx;
+	}
+
+	.card-content {
+		display: flex;
+		justify-content: space-between;
+	}
+
+	.content-item {
+		display: flex;
+		flex-direction: column;
+		align-items: center;
+		width: 33%;
+	}
+
+	.content-icon {
+		width: 70rpx;
+		height: 70rpx;
+		margin-bottom: 15rpx;
+	}
+
+	.content-text1 {
+		font-size: 23rpx;
+		background: linear-gradient(90deg, #FFB908 0%, #DC7A11 100%);
+		-webkit-background-clip: text;
+		background-clip: text;
+		color: transparent;
+	}
+
+	.content-text2 {
+		font-size: 23rpx;
+		background: linear-gradient(90deg, #93B0FF 0%, #1B4EFF 100%);
+		-webkit-background-clip: text;
+		background-clip: text;
+		color: transparent;
+	}
+
+	.content-text3 {
+		font-size: 23rpx;
+		background: linear-gradient(90deg, #F4D600 0%, #FF9100 100%);
+		-webkit-background-clip: text;
+		background-clip: text;
+		color: transparent;
+	}
+
+	.phone-info {
+		font-size: 21rpx;
+		padding-top: 10rpx;
+	}
+
+	.phone-info text {
+		margin-right: 14rpx;
+	}
+
+	.phone-info image {
+		width: 27rpx;
+		height: 27rpx;
+		vertical-align: middle;
+	}
+
+	.profile-link {
+		margin-top: 20rpx;
+		font-size: 23rpx;
+		font-weight: 600;
+		line-height: 21rpx;
+		text-align: right;
+	}
+
+	.profile-link img {
+		width: 24rpx;
+		height: 24rpx;
+		vertical-align: middle;
+		margin-left: 12rpx;
+	}
+
+	.grid-container {
+		display: flex;
+		flex-wrap: wrap;
+		gap: 0;
+		/* 改用 margin 控制间距 */
+		padding: 20rpx;
+		/* 父容器内边距 */
+		box-sizing: border-box;
+		/* 包含 padding 在宽度内 */
+	}
+
+	.grid-item {
+		width: 25%;
+		/* 直接 25% 无需 calc */
+		display: flex;
+		flex-direction: column;
+		align-items: center;
+		margin-bottom: 30rpx;
+		/* 行间距 */
+		padding: 0 10rpx;
+		/* 左右间隙（替代 gap） */
+		box-sizing: border-box;
+		/* 关键 */
+	}
+
+	.grid-img {
+		width: 58rpx;
+		height: 58rpx;
+		margin-bottom: 8rpx;
+	}
+
+	.grid-text {
+		font-size: 24rpx;
+		color: #333;
+	}
+
+	.item-features {
+		background: #FFFFFF;
+		border-radius: 23rpx;
+		margin: -60rpx 20rpx 20rpx 20rpx;
+	}
+
+	.item-features-title {
+		padding: 20rpx;
+		font-weight: 600;
+		font-size: 27rpx;
+		color: #2E261E;
+		line-height: 38rpx;
 	}
 </style>