dykj-football/pages/user/index.vue

<template>
	<view :style="{ backgroundPositionY: -44 + safeAreaInsets.top + 'px' }" class="index-page">
		<!-- 自定义导航 -->
		<view :style="{ paddingTop: safeAreaInsets.top + 'px' }" class="page-navbar">足球状元榜</view>
	</view>
	<view class="back-color">
		<view class="userInfo">
			<view class="userInfo-text">
				<span style="font-size: 20px; font-weight: 600;">{{'Mr.wang'}}</span>
				<span style="font-size: 10px;">{{'元宝：100.00'}}</span>
				<span style="font-size: 10px;">{{'积分:40'}}</span>
			</view>
			<view class="user-img">
				<u-avatar shape="circle" size="55" :src="src" customStyle="margin: -3px 5px -3px 0" />
				<u-icon name="arrow-right" color="#646668" size="28"></u-icon>
			</view>
		</view>
		<view class="contentInfo">
			<view class="gridBox">
				<view class="gridBox-top">
					<view class="gridBox-spuare">
						<u-avatar shape="circle" size="55" :src="srcOne" customStyle="margin: -3px 5px -3px 0" />
						<span>vip</span>
					</view>
					<view class="gridBox-spuare">
						<u-avatar shape="circle" size="55" :src="srcOne" customStyle="margin: -3px 5px -3px 0" />
						<span>充值</span>
					</view>
					<view class="gridBox-spuare">
						<u-avatar shape="circle" size="55" :src="srcOne" customStyle="margin: -3px 5px -3px 0" />
						<span>消息提醒</span>
					</view>
				</view>
				<view class="gridBox-bottom">
					<view class="gridBox-rectangle">
						<span>签到</span>
						<u-avatar shape="circle" size="35" :src="srcOne" customStyle="margin: -3px 5px -3px 0" />
					</view>
					<view class="gridBox-rectangle">
						<span>打折活动</span>
						<u-avatar shape="circle" size="35" :src="srcOne" customStyle="margin: -3px 5px -3px 0" />
					</view>
				</view>
			</view>
			<u-cell-group>
				<u-cell title="我的关注" @click="URLto" :titleStyle="{'font-size': '16px','font-weight': '600'}" :isLink="true"></u-cell>
				<u-cell title="方案购买记录" :titleStyle="{'font-size': '16px','font-weight': '600'}" :isLink="true"></u-cell>
				<u-cell title="积分兑换商城" :titleStyle="{'font-size': '16px','font-weight': '600'}" :isLink="true"></u-cell>
				<u-cell title="我的优惠卷" :titleStyle="{'font-size': '16px','font-weight': '600'}" :isLink="true"></u-cell>
				<u-cell title="绑定手机号" :titleStyle="{'font-size': '16px','font-weight': '600'}" value="绑定送168奖门令"
					:isLink="true"></u-cell>
				<u-cell title="客服微信/电话" :titleStyle="{'font-size': '16px','font-weight': '600'}" value="1300200000"
					:isLink="true"></u-cell>
				<u-cell title="退出登录" :titleStyle="{'font-size': '16px','font-weight': '600'}" :isLink="true"></u-cell>
			</u-cell-group>
		</view>
	</view>
</template>

<script setup>
	import {
		ref
	} from 'vue'
	const src = ref('https://cdn.uviewui.com/uview/album/1.jpg');
	const srcOne = ref();

	const {
		safeAreaInsets
	} = uni.getSystemInfoSync();
	
	const URLto = ()=>{
		uni.navigateTo({
		    url:'./compontents/attention'
		});
	}
</script>

<style lang="scss" scoped>
	.back-color {
		width: 100vw;
		height: 87.2vh;
		background-color: #051963;
	}

	.userInfo {
		width: 89vw;
		padding: 10% 5%;
		display: flex;
		justify-content: space-between;

		.userInfo-text {
			color: #fff;
			display: flex;
			flex-direction: column;
			justify-content: space-around;
		}

		.user-img {
			display: flex;
			align-items: center;
		}
	}

	.contentInfo {
		width: 100vw;
		height: 87%;
		background-color: #fff;
		border-radius: 15px 15px 0 0;

		.gridBox {
			width: 89.4vw;
			height: 25vh;
			padding: 5% 5%;
			display: flex;
			flex-direction: column;
			justify-content: space-between;

			.gridBox-top {
				display: flex;
				justify-content: space-between;

				.gridBox-spuare {
					width: 30%;
					height: 14vh;
					border: 1px solid #f0f0f0;
					border-radius: 10rpx;
					font-weight: 600;
					display: flex;
					justify-content: space-evenly;
					align-items: center;
					flex-direction: column;
				}
			}

			.gridBox-bottom {
				display: flex;
				justify-content: space-between;

				.gridBox-rectangle {
					width: 45%;
					height: 8vh;
					border: 1px solid #f0f0f0;
					font-size: 14px;
					font-weight: 600;
					display: flex;
					align-items: center;
					justify-content: space-around;
				}
			}
		}
	}
	
	:deep(.u-cell__value){
		font-size: 12px;
		font-weight: 600;
		color: #b0b0b0;
	}
	:deep(.u-cell-group){
		display: flex;
		    justify-content: center;
	}
	:deep(.u-cell-group__wrapper){
		width: 89vw;
	}
</style>