ydd_front/mer_uniapp/pages/user/index.vue

<template>
	<view>
		<!-- 状态栏高度 -->
		<view :style="{ height: `${statusBarHeight}px` }"></view>

		<!-- 导航栏 -->
		<view :style="{ height: `${navigationBarHeight}px`,lineHeight: `${navigationBarHeight}px`}" class="order-nav">
			北京大学校园送
		</view>

		<view style="background-color: #FF6702;height: 60rpx;"></view>

		<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 class="phone-info">
					<text>绑定手机号：185-7033-6037</text>
					<image src="/static/img/ic-copy.png">
					</image>
				</view>
			</view>

			<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 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>

<script>
	var statusBarHeight = uni.getSystemInfoSync().statusBarHeight + 'px';
	let app = getApp();
	export default {
		data() {
			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) {
			let that = this;
			//首页数据加载
			// this.getIndexConfig();
			// #ifdef MP-WEIXIN
			// 获取微信胶囊的位置信息 width,height,top,right,left,bottom
			const custom = wx.getMenuButtonBoundingClientRect()
			// 导航栏高度(标题栏高度) = 胶囊高度 + (顶部距离 - 状态栏高度) * 2
			this.navigationBarHeight = custom.height + (custom.top - this.statusBarHeight) * 2
			// console.log("导航栏高度："+this.globalData.navigationBarHeight)
			// #endif

		},
		methods: {},
	}
</script>

<style scoped>
	.order-nav {
		font-weight: 500;
		font-size: 35rpx;
		color: #FFFFFF;
		background-color: #FF6702;
		text-align: center;
	}

	.item-settled {
		background: linear-gradient(135deg, #FED0A7 0%, #FFF3E2 52%, #FAEDD3 100%);
		border-radius: 8rpx;
		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>