积分排行样式

这个排名需要考虑不同child的位置

   <view class="pm-top">
   <!--背景  podiumtree  或 podium-->
      <image class="podium-bg" :src="podium" mode="widthFix"></image>
      <view class="podium-list">
        <view
          class="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） -->
          <!-- <image
            class="podium-vip"
            :src="
              '/static/img/bigPlayer/' +
              ['VIP1', 'VIP2', 'VIP3'][index] +
              '.png'
            "
            mode="widthFix"
          ></image> -->
          <image
            class="podium-avatar"
            :src="
              item.url
                ? item.url
                : 'https://hiin-file.cztv.com/d87900a7a7fa491ab0deaead666c9f71.png'
            "
            mode="aspectFill"
          ></image>
          <view
            class="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，3
          this.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">
        <view
          class="rank-number"
          :style="
            index < 3
              ? rankImageStyle(index)
              : { backgroundColor: rankBg[index] }
          "
        >
          <image
            v-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">
            <image
              class="image"
              :src="
                item.url
                  ? item.url
                  : 'https://hiin-file.cztv.com/d87900a7a7fa491ab0deaead666c9f71.png'
              "
              lazy-load
              mode=""
            >
            </image>
          </view>
          <view class="text"> {{ item.name }} </view>
          <view class="text text-bor">
            <image
              class="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">
                <image
                  src="/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", //颁奖台
  ```
![页面预览](https://i-blog.csdnimg.cn/direct/8a12f7fa671c4a9e8d41f9110a61fe86.png)