积分排行样式
这个排名需要考虑不同child的位置
<view class="pm-top"><!--背景 podiumtree 或 podium--><image class="podium-bg" :src="podium" mode="widthFix"></image><view class="podium-list"><viewclass="podium-item"v-for="(item, index) in paimingList":key="index":style="{backgroundImage: `url(/static/img/bigPlayer/VIP-${index + 1}.png)`,backgroundSize: '100% 100%',backgroundRepeat: 'no-repeat',}"><!-- 如果领奖台没有排名，添加 --><!-- 名次徽章（VIP1、VIP2、VIP3） --><!-- <imageclass="podium-vip":src="'/static/img/bigPlayer/' +['VIP1', 'VIP2', 'VIP3'][index] +'.png'"mode="widthFix"></image> --><imageclass="podium-avatar":src="item.url? item.url: 'https://hiin-file.cztv.com/d87900a7a7fa491ab0deaead666c9f71.png'"mode="aspectFill"></image><viewclass="podium-info":style="index === 0? 'color: #7985ab': index === 1? 'color: #fdb441': 'color: #e58f5c'"><view class="podium-name">{{ item.name }}</view><view class="podium-score"><view>{{ item.taskCompletedNum }}</view></view></view></view></view></view> let params = { userId: uni.getStorageSync("memberid") };getTheCurrentUSersort(params).then((res) => {if (res.code === 200) {let list2 = JSON.parse(res.data.list); //排名列表let list3 = [];list3.push(JSON.parse(res.data.user)); // 当前用户信息console.log("排序信息：", list2);this.list2 = list2.map((item) => {return {...item,url: item.liMember?.face || "",name: item.liMember?.nickName || "匿名用户",};});// 创建tempList为了避免list2这个排名列表有查询时变化影响let tempList = list2.map((item) => {return {...item,url: item.liMember?.face || "",name: item.liMember?.nickName || "匿名用户",};});// 截取前三名const top3Original = tempList.slice(0, 3);// 排名位置调换，按图片的1，2，3 对应排名2，1，3this.paimingList = [top3Original[1] || null,top3Original[0] || null,top3Original[2] || null,].filter(Boolean);// 处理当前用户信息this.list3 = list3.map((item) => {return {...item,rank: res.data.rank,url: item.liMember?.face || "",name: item.liMember?.nickName || "匿名用户",};});}});},
.pm-top {position: relative;width: 85%;margin: -354rpx auto 0;z-index: 10;.podium-bg {width: 100%;height: auto;display: block;}.podium-list {position: absolute;top: 30rpx;left: 0;width: 100%;display: flex;justify-content: space-around;padding: 0 20rpx;box-sizing: border-box;.podium-item {display: flex;flex-direction: column;align-items: center;width: 28%;/* 动态控制不同名次的高度 */&:nth-child(2) {/* 第 2 名（ */margin-top: 0rpx; /* 整体上移，对应最高台阶 */}&:nth-child(1) {/* 第 1 名 */margin-top: 50rpx;}&:nth-child(3) {/* 第 3 名*/margin-top: 60rpx;}.podium-avatar {width: 90rpx;height: 90rpx;border-radius: 50%;// border: 4rpx solid #fff;overflow: hidden;z-index: 2;object-fit: cover;/* 可根据名次微调头像大小（可选） */&:nth-child(1) {width: 98rpx;height: 98rpx;object-fit: cover;}}.podium-info {text-align: center;margin-top: 10rpx;width: 100%;font-weight: 900;/* 动态控制信息的垂直位置（可选） */&:nth-child(2) {margin-top: 50rpx;}.podium-name {font-size: 28rpx;font-weight: bold;line-height: 40rpx;//white-space: nowrap;overflow: hidden;text-overflow: ellipsis;padding: 0 10rpx;box-sizing: border-box;}.podium-score {font-size: 24rpx;margin-top: 5rpx;line-height: 32rpx;}}}}
}
如果需要在排名列表中，突出表现前三名，可以把索引换成图片，并且判断显示，动态给src赋值
<view class="mosan"><view class="list" v-for="(item, index) in list2"><viewclass="rank-number":style="index < 3? rankImageStyle(index): { backgroundColor: rankBg[index] }"><imagev-if="index < 3"class="rank-image":src="rankImages[index]"mode="widthFix"alt="排名图标"></image><text class="number-text rank-image" v-else>{{ index + 1 }}</text></view><view class="left"><view class="url"><imageclass="image":src="item.url? item.url: 'https://hiin-file.cztv.com/d87900a7a7fa491ab0deaead666c9f71.png'"lazy-loadmode=""></image></view><view class="text"> {{ item.name }} </view><view class="text text-bor"><imageclass="text-bor-icon"src="https://hiin-file.cztv.com/0ed138336df64124969653f04d9af7d2.png"mode=""></image><view>参与{{ item.taskCompletedNum }}次</view></view></view><view class="right"><view class="quwancheng"><view class="text"><view v-if="item.type == 2">当前积分:</view><view v-else>已助力:</view><view class="arrow-icon"><imagesrc="/static/img/bigPlayer/jiangbei.png"mode=""></image></view><view>{{ item.points }}</view></view></view></view></view></view>``` rankBg: ["#FFD700", "#C0C0C0", "#CD7F32"],rankImages: ["/static/img/bigPlayer/1.png", // 第一名图片"/static/img/bigPlayer/2.png", // 第二名图片"/static/img/bigPlayer/3.png", // 第三名图片],podium: "/static/img/bigPlayer/podiumtree.png", //颁奖台```
