dykj-football/pages/user/index.vue

165 lines
4.4 KiB
Vue
Raw Normal View History

2024-04-18 15:58:25 +08:00
<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>