angelo
/
web-base-h5
3
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

fix(rankingPopup): 列表样式调整

This commit is contained in:
woody 2025-09-25 15:44:51 +08:00
parent 495d23317d
commit f59e54b08b
1 changed files with 72 additions and 47 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

119
components/RankingPopup.vue
View File

@ -23,15 +23,16 @@
<view class="rank-number"> <view class="rank-number">
<img src="@/static/images/rank-2.svg" alt="" /> <img src="@/static/images/rank-2.svg" alt="" />
</view> </view>
<view class="member-code">{{
peopleTopThree[1].memberCode
}}</view>
<view <view
class="member-name" class="member-name"
:class="{ highlight: peopleTopThree[1].isLoginMember == 1 }" :class="{ highlight: peopleTopThree[1].isLoginMember == 1 }"
> >
{{ peopleTopThree[1].memberName }} {{ peopleTopThree[1].memberName | formatMemberName }}
</view> </view>
<view class="member-code">{{
peopleTopThree[1].memberCode
}}</view>
<view class="score">{{ peopleTopThree[1].count }}人</view> <view class="score">{{ peopleTopThree[1].count }}人</view>
</view> </view>
</view> </view>
@ -42,15 +43,16 @@
<view class="rank-number"> <view class="rank-number">
<img src="@/static/images/rank-1.svg" alt="" /> <img src="@/static/images/rank-1.svg" alt="" />
</view> </view>
<view class="member-code">
{{ peopleTopThree[0].memberCode }}
</view>
<view <view
class="member-name" class="member-name"
:class="{ highlight: peopleTopThree[0].isLoginMember == 1 }" :class="{ highlight: peopleTopThree[0].isLoginMember == 1 }"
> >
{{ peopleTopThree[0].memberName }} {{ peopleTopThree[0].memberName | formatMemberName }}
</view> </view>
<view class="member-code">{{
peopleTopThree[0].memberCode
}}</view>
<view class="score">{{ peopleTopThree[0].count }}人</view> <view class="score">{{ peopleTopThree[0].count }}人</view>
</view> </view>
</view> </view>
@ -61,15 +63,16 @@
<view class="rank-number"> <view class="rank-number">
<img src="@/static/images/rank-3.svg" alt="" /> <img src="@/static/images/rank-3.svg" alt="" />
</view> </view>
<view class="member-code">{{
peopleTopThree[2].memberCode
}}</view>
<view <view
class="member-name" class="member-name"
:class="{ highlight: peopleTopThree[2].isLoginMember == 1 }" :class="{ highlight: peopleTopThree[2].isLoginMember == 1 }"
> >
{{ peopleTopThree[2].memberName }} {{ peopleTopThree[2].memberName | formatMemberName }}
</view> </view>
<view class="member-code">{{
peopleTopThree[2].memberCode
}}</view>
<view class="score">{{ peopleTopThree[2].count }}人</view> <view class="score">{{ peopleTopThree[2].count }}人</view>
</view> </view>
</view> </view>
@ -78,9 +81,6 @@
<!-- 4-30名滚动列表 --> <!-- 4-30名滚动列表 -->
<view class="ranking-list"> <view class="ranking-list">
<!-- <view class="list-header">
<text class="list-title">完整排行榜</text>
</view> -->
<scroll-view <scroll-view
class="scroll-container" class="scroll-container"
scroll-y="true" scroll-y="true"
@ -93,15 +93,18 @@
> >
<view class="item-rank">{{ index + 4 }}</view> <view class="item-rank">{{ index + 4 }}</view>
<view class="item-info"> <view class="item-info">
<view class="item-code">{{ item.memberCode }}</view>
<view <view
class="item-name" class="item-name"
:class="{ highlight: item.isLoginMember == 1 }" :class="{ highlight: item.isLoginMember == 1 }"
> >
{{ item.memberName }} {{ item.memberName | formatMemberName }}
</view> </view>
<view class="item-code">{{ item.memberCode }}</view>
</view> </view>
<view class="item-score">{{ item.count }}人</view> <view class="item-score">
<span>{{ item.count }}</span>
<span>人</span>
</view>
</view> </view>
<view class="list-footer" v-if="peopleRemainingList.length === 0"> <view class="list-footer" v-if="peopleRemainingList.length === 0">
<text class="empty-text">暂无更多数据</text> <text class="empty-text">暂无更多数据</text>
@ -147,7 +150,7 @@
class="member-name" class="member-name"
:class="{ highlight: amountTopThree[1].isLoginMember == 1 }" :class="{ highlight: amountTopThree[1].isLoginMember == 1 }"
> >
{{ amountTopThree[1].memberName }} {{ amountTopThree[1].memberName | formatMemberName }}
</view> </view>
<view class="member-code">{{ <view class="member-code">{{
amountTopThree[1].memberCode amountTopThree[1].memberCode
@ -168,7 +171,7 @@
class="member-name" class="member-name"
:class="{ highlight: amountTopThree[0].isLoginMember == 1 }" :class="{ highlight: amountTopThree[0].isLoginMember == 1 }"
> >
{{ amountTopThree[0].memberName }} {{ amountTopThree[0].memberName | formatMemberName }}
</view> </view>
<view class="member-code">{{ <view class="member-code">{{
amountTopThree[0].memberCode amountTopThree[0].memberCode
@ -189,7 +192,7 @@
class="member-name" class="member-name"
:class="{ highlight: amountTopThree[2].isLoginMember == 1 }" :class="{ highlight: amountTopThree[2].isLoginMember == 1 }"
> >
{{ amountTopThree[2].memberName }} {{ amountTopThree[2].memberName | formatMemberName }}
</view> </view>
<view class="member-code">{{ <view class="member-code">{{
amountTopThree[2].memberCode amountTopThree[2].memberCode
@ -219,15 +222,17 @@
> >
<view class="item-rank">{{ index + 4 }}</view> <view class="item-rank">{{ index + 4 }}</view>
<view class="item-info"> <view class="item-info">
<view class="item-code">{{ item.memberCode }}</view>
<view <view
class="item-name" class="item-name"
:class="{ highlight: item.isLoginMember == 1 }" :class="{ highlight: item.isLoginMember == 1 }"
> >
{{ item.memberName }} {{ item.memberName | formatMemberName }}
</view> </view>
<view class="item-code">{{ item.memberCode }}</view>
</view> </view>
<view class="item-score">{{ formatAmount(item.amount) }}</view> <view class="item-score">
<span>{{ item.amount }}</span>
</view>
</view> </view>
<view class="list-footer" v-if="amountRemainingList.length === 0"> <view class="list-footer" v-if="amountRemainingList.length === 0">
<text class="empty-text">暂无更多数据</text> <text class="empty-text">暂无更多数据</text>
@ -278,7 +283,11 @@ export default {
userInfo: uni.getStorageSync('User') || {}, userInfo: uni.getStorageSync('User') || {},
} }
}, },
filters: {
formatMemberName(val) {
return val?.slice(0, 8) || ''
},
},
methods: { methods: {
// 显示排行榜弹窗（先显示人数排行） // 显示排行榜弹窗（先显示人数排行）
async showRankingPopups() { async showRankingPopups() {
@ -542,7 +551,7 @@ export default {
font-size: 24rpx; font-size: 24rpx;
color: #fff; color: #fff;
text-align: center; text-align: center;
margin-bottom: 8rpx;
font-weight: bold; font-weight: bold;
max-width: 110rpx; max-width: 110rpx;
overflow: hidden; overflow: hidden;
@ -556,7 +565,7 @@ export default {
.member-code { .member-code {
color: #fff; color: #fff;
text-align: center; text-align: center;
margin-bottom: 8rpx; margin-top: 8rpx;
font-size: 24rpx; font-size: 24rpx;
font-weight: 600; font-weight: 600;
overflow: hidden; overflow: hidden;
@ -589,6 +598,18 @@ export default {
background: linear-gradient(135deg, #c0c0c0 0%, #e8e8e8 50%, #c0c0c0 100%); background: linear-gradient(135deg, #c0c0c0 0%, #e8e8e8 50%, #c0c0c0 100%);
} }
// .member-name {
// font-size: 26rpx;
// }
// .member-code {
// font-size: 26rpx;
// }
// .score {
// font-size: 26rpx;
// }
.rank-number img { .rank-number img {
height: 70rpx; height: 70rpx;
width: 70rpx; width: 70rpx;
@ -625,16 +646,15 @@ export default {
} }
.member-code { .member-code {
font-size: 22rpx; font-size: 28rpx;
color: #ffd700; color: #ffd700;
font-weight: 600; font-weight: 600;
} }
.score { .score {
color: #ffd700; color: #ffd700;
font-size: 24rpx; font-size: 28rpx;
font-weight: 900; font-weight: 900;
min-width: 70rpx;
} }
} }
@ -643,17 +663,23 @@ export default {
.player-area { .player-area {
transform: translateY(10rpx); transform: translateY(10rpx);
} }
&::after {
width: 110rpx;
height: 80rpx;
background: linear-gradient(135deg, #cd7f32 0%, #deb887 50%, #cd7f32 100%);
}
.rank-number img { .rank-number img {
height: 65rpx; height: 65rpx;
width: 65rpx; width: 65rpx;
animation: bronze-glow 2s ease-in-out infinite alternate; animation: bronze-glow 2s ease-in-out infinite alternate;
} }
// .member-name {
// font-size: 22rpx;
// }
// .member-code {
// font-size: 22rpx;
// }
// .score {
// font-size: 22rpx;
// }
} }
@keyframes title-bling { @keyframes title-bling {
@ -794,7 +820,7 @@ export default {
.list-item { .list-item {
display: flex; display: flex;
align-items: center; align-items: center;
padding: 24rpx 40rpx; padding: 24rpx 30rpx;
border-bottom: 1rpx solid rgba(226, 232, 240, 0.8); border-bottom: 1rpx solid rgba(226, 232, 240, 0.8);
position: relative; position: relative;
transition: all 0.3s ease; transition: all 0.3s ease;
@ -820,8 +846,8 @@ export default {
margin-right: 20rpx; margin-right: 20rpx;
background: linear-gradient(135deg, #f1f5f9 0%, #e2e8f0 100%); background: linear-gradient(135deg, #f1f5f9 0%, #e2e8f0 100%);
border-radius: 50%; border-radius: 50%;
width: 60rpx; width: 40rpx;
height: 60rpx; height: 40rpx;
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
@ -829,10 +855,10 @@ export default {
} }
.item-info { .item-info {
flex: 1; flex: 2;
display: flex; display: flex;
flex-direction: column; align-items: center;
margin-left: 15rpx; justify-content: space-between;
} }
.item-name { .item-name {
@ -841,7 +867,6 @@ export default {
overflow: hidden; overflow: hidden;
text-overflow: ellipsis; text-overflow: ellipsis;
white-space: nowrap; white-space: nowrap;
margin-bottom: 6rpx;
font-weight: 600; font-weight: 600;
&.highlight { &.highlight {
@ -870,19 +895,19 @@ export default {
.item-code { .item-code {
font-size: 22rpx; font-size: 22rpx;
color: #64748b; color: #64748b;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap; white-space: nowrap;
} }
.item-score { .item-score {
flex: 1;
font-size: 24rpx; font-size: 24rpx;
color: #374151; color: #374151;
font-weight: bold; font-weight: bold;
min-width: 100rpx; min-width: 100rpx;
text-align: center; text-align: center;
padding: 8rpx 16rpx;
border-radius: 20rpx; border-radius: 20rpx;
display: flex;
justify-content: flex-end;
} }
} }
@ -898,7 +923,7 @@ export default {
} }
.popup-footer { .popup-footer {
padding: 25rpx 40rpx 35rpx; padding: 20rpx;
flex-shrink: 0; flex-shrink: 0;
position: relative; position: relative;
z-index: 2; z-index: 2;
@ -911,7 +936,7 @@ export default {
); );
color: #005bac; color: #005bac;
text-align: center; text-align: center;
padding: 28rpx 50rpx; padding: 20rpx 50rpx;
border-radius: 50rpx; border-radius: 50rpx;
font-size: 30rpx; font-size: 30rpx;
font-weight: bold; font-weight: bold;