kubbo/dvcp_v2_wxcp_app
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

bug

Browse Source
This commit is contained in:
yanran200730
2023-01-11 15:20:04 +08:00
parent 10d75b39cd
commit 254f179c9a
4 changed files with 107 additions and 73 deletions
Download Patch File Download Diff File Expand all files Collapse all files

180
src/project/fd/AppAnswer/component/Ranking.vue
View File

@@ -1,24 +1,35 @@
<template>
<div class="ranking">
<div class="list-wrapper">
<div class="item my" @click="linkTo">
<span>{{ info['积分排行'] }}</span>
<div class="userinfo">
<image :src="user.avatar || 'https://cdn.cunwuyun.cn/wxmp/tianfuxing/avatar.png'" />
<h3>{{ user.name }}</h3>
</div>
<i>{{ info['累计获取积分'] }}</i>
<image class="right" src="../img/right.png" />
</div>
<div class="list-data">
<div class="item" v-for="(item, index) in list" :key="index">
<span>{{ index + 1 }}</span>
<div class="userinfo">
<image :src="item.avatar || 'https://cdn.cunwuyun.cn/wxmp/tianfuxing/avatar.png'" />
<h3>{{ item.name }}</h3>
<div class="flex-left">
<div class="item-rank">
<img :src="imgList[index]" alt="" v-if="index < 3">
<span v-else>{{index+1}}</span>
</div>
<div class="item-user">
<img :src="item.avatar || 'https://cdn.cunwuyun.cn/wxmp/tianfuxing/avatar.png'" alt="">{{item.name}}
</div>
</div>
<div class="flex-right">{{item.score}}</div>
</div>
</div>
<AiEmpty description="暂无数据" v-if="!list.length"/>
<div class="list-data footer">
<div class="item" @click="linkTo">
<div class="flex-left">
<div class="item-rank">
<span>{{ info['积分排行'] }}</span>
</div>
<div class="item-user">
<img :src="user.avatar || 'https://cdn.cunwuyun.cn/wxmp/tianfuxing/avatar.png'" alt="">{{ user.name }}
</div>
</div>
<div class="flex-right">
<span>{{ info['累计获取积分'] }}</span>
<image class="right" src="../img/right.png" />
</div>
<i>{{ item.score }}</i>
</div>
<AiEmpty v-if="!list.length && isMore"></AiEmpty>
</div>
</div>
</template>
@@ -34,6 +45,18 @@
size: 100
},
isMore: false,
barStyle: {
'width': '24px',
'height': '3px',
'border-radius': '2px',
'bottom': '0px',
'background-color': '#3399FF'
},
activeStyle: {
'font-weight' : '400',
'color': '#000000'
},
imgList: [require('../img/top0.png'),require('../img/top1.png'),require('../img/top2.png')],
info: {},
list: []
}
@@ -100,80 +123,91 @@
<style scoped lang="scss">
.ranking {
padding-bottom: 20px;
.list-wrapper {
margin: 0 32px;
min-height: 100%;
background-color: #F3F5F9;
padding-bottom: 32px;
.list-data {
padding: 32px;
margin-bottom: 80px;
.item {
width: 100%;
display: flex;
align-items: center;
justify-content: space-between;
height: 80px;
padding: 24px 48px 24px 32px;
box-sizing: border-box;
background-color: #fff;
border-radius: 32px;
margin-bottom: 16px;
padding: 0 32px;
background: #FFFFFF;
box-shadow: 0 0 8px 0 rgba(0,0,0,0.02);
border-radius: 16px;
span {
width: 130px;
font-size: 34px;
color: #DDDDDD;
font-style: oblique;
font-weight: 600;
}
&:nth-of-type(1) span {
color: #2D7DFF;
}
&:nth-of-type(2) span {
color: #3BBC37;
}
&:nth-of-type(3) span {
color: #FF883C;
}
image {
width: 48px;
height: 48px;
}
.userinfo {
.flex-left {
display: flex;
align-items: center;
flex: 1;
h3 {
margin-left: 16px;
font-size: 28px;
color: #333333;
.item-rank {
width: 152px;
img {
padding-top: 12px;
width: 56px;
height: 56px;
vertical-align: middle;
}
span {
line-height: 80px;
font-family: SFPro-SNaNpxiboldItalic;
font-weight: SemiboldItalic;
font-size: 40px;
color: #DDD;
}
}
.item-user {
line-height: 80px;
font-family: PingFangSC-Medium;
font-weight: 500;
font-size: 32px;
color: #333;
img {
width: 80px;
height: 80px;
border-radius: 50%;
margin-right: 16px;
vertical-align: middle;
}
}
}
i {
width: 100px;
font-size: 32px;
color: #FFB94C;
font-style: normal;
.flex-right {
font-family: SFPro-SNaNpxibold;
font-weight: 600;
text-align: center;
font-size: 36px;
color: #FF9343;
line-height: 42px;
padding-top: 20px;
}
}
}
.footer {
padding: 0;
margin-bottom: 0;
width: 100%;
position: fixed;
bottom: 0;
left: 0;
.my {
padding-right: 16px!important;
.item {
border-radius: 0;
margin-bottom: 0;
padding: 24px 14px 24px 32px;
i {
width: auto!important;
&:active {
background: #eee;
}
}
.flex-right {
display: flex;
align-items: center;
}
.right {
width: 64px;
height: 64px;
width: 50px;
height: 50px;
}
}
}