我的页面,关注列表页面
This commit is contained in:
ycy
parent
745d67166c
commit
c2abae50e9
18
pages.json
18
pages.json
|
|
@ -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": "我的"
|
||||
}
|
||||
]
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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">
|
||||
|
|
|
|||
98
pages/user/compontents/attention.vue
Normal file
98
pages/user/compontents/attention.vue
Normal 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
165
pages/user/index.vue
Normal 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>
|
||||
Loading…
Reference in New Issue
Block a user