我的页面,关注列表页面

This commit is contained in:
ycy 2024-04-18 15:58:25 +08:00
parent 745d67166c
commit c2abae50e9
4 changed files with 281 additions and 1 deletions

View File

@ -20,6 +20,20 @@
"navigationBarTitleText": "uni-app",
"navigationStyle": "custom"
}
},
{
"path": "pages/user/index",
"style": {
"navigationBarTitleText": "uni-app",
"navigationStyle": "custom"
}
},
{
"path": "pages/user/compontents/attention",
"style": {
"navigationBarTitleText": "uni-app",
"navigationStyle": "custom"
}
}
],
"globalStyle": {
@ -42,6 +56,10 @@
{
"pagePath": "pages/rankList/index",
"text": "排行榜"
},
{
"pagePath": "pages/user/index",
"text": "我的"
}
]
}

View File

@ -15,7 +15,6 @@
<u-list @scrolltolower="scrolltolower" style="height: 560px;">
<u-list-item v-for="(item, index) in indexList" :key="index">
<u-cell>
<template #title>
<view class="tableList">
<view class="table-left">

View File

@ -0,0 +1,98 @@
<template>
<view :style="{ backgroundPositionY: -44 + safeAreaInsets.top + 'px' }" class="index-page">
<!-- 自定义导航 -->
<view :style="{ paddingTop: safeAreaInsets.top + 'px' }" class="page-navbar">足球状元榜</view>
</view>
<view style="background-color: #ddd;">
<u-icon name="arrow-left" color="#646668" size="28" style="float: left;margin-top:2%;" @click="gotoBack" />
<view :style="{ paddingTop: safeAreaInsets.top + 'px' }" class="page-navbar">关注列表</view>
</view>
<view class="attentionList">
<view v-for="(index,item) in 3" :key="index">
<view class="ListStrip">
<view class="ListName">
<u-avatar shape="circle" size="55" :src="src" customStyle="margin: -3px 5px -3px 0" />
<span>{{'法无边'}}</span>
</view>
<view class="ListContent">
<view class="contentText">
<span>{{'二月探花'}}</span>
<span>{{'五连红'}}</span>
</view>
<view class="">
<u-tag text="法国" type="warning" size="mini" plain></u-tag>
</view>
<view class="">
<u-tag text="法国各级联赛" type="warning" size="mini" plain></u-tag>
</view>
</view>
</view>
</view>
<view class="listBottom">没有更多了</view>
</view>
</template>
<script setup>
import {
ref
} from 'vue'
const {
safeAreaInsets
} = uni.getSystemInfoSync();
const src = ref('https://cdn.uviewui.com/uview/album/1.jpg');
const gotoBack = () => {
uni.navigateBack({
delta: 1
})
}
</script>
<style lang="scss" scoped>
.attentionList {
width: 100%;
padding: 5%;
.ListStrip {
width: 90%;
height: 17vh;
border: 1px solid #f1f1f1;
border-radius: 10px;
margin-bottom: 5%;
display: flex;
justify-content: space-between;
.ListName {
width: 40%;
display: flex;
justify-content: space-evenly;
margin-top: 7%;
font-size: 12px;
}
.ListContent {
width: 60%;
display: flex;
flex-direction: column;
align-items: flex-end;
justify-content: space-around;
padding-right: 5%;
.contentText {
width: 80%;
display: flex;
justify-content: space-evenly;
color: #cc3e3e;
font-size: 14px;
font-weight: 700;
}
}
}
}
.listBottom {
text-align: center;
width: 90%;
font-weight: 600;
color: #c4c4c4;
}
</style>

165
pages/user/index.vue Normal file
View File

@ -0,0 +1,165 @@
<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>