wx_pbzc/pages/leaderboard/leaderboard.wxml

<view class="container page-enter" style="{{themeStyle}}">
  <!-- Period tabs: pill-style segmented control, consistent with settings -->
  <view class="period-seg-wrap">
    <view class="period-seg">
      <view
        wx:for="{{periods}}"
        wx:key="key"
        class="period-seg-item {{activePeriod === item.key ? 'active' : ''}}"
        data-period="{{item.key}}"
        bindtap="switchPeriod"
      >{{item.label}}</view>
    </view>
  </view>

  <!-- Loading skeleton -->
  <view class="leaderboard-skeleton" wx:if="{{loading}}">
    <ui-skeleton variant="list-row" count="{{5}}" />
  </view>

  <!-- Empty with CSS illustration -->
  <view class="empty-state" wx:elif="{{empty}}">
    <view class="empty-illus">
      <view class="empty-illus-body"></view>
      <view class="empty-illus-arm empty-illus-arm--l"></view>
      <view class="empty-illus-arm empty-illus-arm--r"></view>
      <view class="empty-illus-bubble">加油</view>
    </view>
    <text class="empty-text">暂无排行数据</text>
    <text class="empty-sub">快去训练吧,争当第一名!</text>
  </view>

  <block wx:else>
    <!-- Podium: top 3 (only when there are at least 3 entries) -->
    <view class="podium" wx:if="{{rankedList.length >= 3}}">
      <!-- 2nd -->
      <view class="podium-slot podium-slot--second rank-item--enter" style="animation-delay: 60ms;">
        <view class="podium-avatar-wrap">
          <view class="avatar avatar--md {{rankedList[1].avatarUrl ? 'has-avatar' : ''}}"><image class="avatar__img" src="{{rankedList[1].avatarUrl || icons.peopleFill}}" mode="{{rankedList[1].avatarUrl ? 'aspectFill' : 'aspectFit'}}"></image></view>
          <view class="podium-medal podium-medal--silver">2</view>
        </view>
        <text class="podium-name">{{rankedList[1].name}}</text>
        <text class="podium-dur">{{rankedList[1].durationText}}</text>
        <view class="podium-base podium-base--second"><text class="podium-base__label">{{rankedList[1].sessions}}次</text></view>
      </view>
      <!-- 1st -->
      <view class="podium-slot podium-slot--first rank-item--enter" style="animation-delay: 0ms;">
        <image class="podium-crown" src="{{icons.crownFill}}" mode="aspectFit"></image>
        <view class="podium-avatar-wrap">
          <view class="avatar avatar--md avatar--lg {{rankedList[0].avatarUrl ? 'has-avatar' : ''}}"><image class="avatar__img" src="{{rankedList[0].avatarUrl || icons.peopleFill}}" mode="{{rankedList[0].avatarUrl ? 'aspectFill' : 'aspectFit'}}"></image></view>
          <view class="podium-medal podium-medal--gold">1</view>
        </view>
        <text class="podium-name podium-name--first">{{rankedList[0].name}}</text>
        <text class="podium-dur podium-dur--first">{{rankedList[0].durationText}}</text>
        <view class="podium-base podium-base--first"><text class="podium-base__label">{{rankedList[0].sessions}}次</text></view>
      </view>
      <!-- 3rd -->
      <view class="podium-slot podium-slot--third rank-item--enter" style="animation-delay: 120ms;">
        <view class="podium-avatar-wrap">
          <view class="avatar avatar--md {{rankedList[2].avatarUrl ? 'has-avatar' : ''}}"><image class="avatar__img" src="{{rankedList[2].avatarUrl || icons.peopleFill}}" mode="{{rankedList[2].avatarUrl ? 'aspectFill' : 'aspectFit'}}"></image></view>
          <view class="podium-medal podium-medal--bronze">3</view>
        </view>
        <text class="podium-name">{{rankedList[2].name}}</text>
        <text class="podium-dur">{{rankedList[2].durationText}}</text>
        <view class="podium-base podium-base--third"><text class="podium-base__label">{{rankedList[2].sessions}}次</text></view>
      </view>
    </view>

    <!-- Rank list: top-3 shown on the podium are skipped when podium exists -->
    <view class="rank-list">
      <view
        wx:for="{{rankedList}}"
        wx:key="openid"
        wx:if="{{rankedList.length < 3 || index >= 3}}"
        class="rank-item {{myEntry && item.openid === myEntry.openid ? 'is-me' : ''}} rank-item--enter"
        style="animation-delay: {{index < 10 ? index * 60 : 0}}ms;"
      >
        <view class="rank-num {{item.rank === 1 ? 'gold' : item.rank === 2 ? 'silver' : item.rank === 3 ? 'bronze' : ''}}">
          <text>{{item.rank}}</text>
        </view>
        <view class="avatar avatar--sm {{item.avatarUrl ? 'has-avatar' : ''}}"><image class="avatar__img" src="{{item.avatarUrl || icons.peopleFill}}" mode="{{item.avatarUrl ? 'aspectFill' : 'aspectFit'}}"></image></view>
        <view class="rank-info">
          <text class="rank-name">{{item.name}}</text>
          <text class="rank-sessions">{{item.sessions}}次</text>
        </view>
        <text class="rank-dur">{{item.durationText}}</text>
      </view>
    </view>
  </block>

  <!-- My entry pinned at bottom (if not already in list) -->
  <view class="my-bar" wx:if="{{myEntry && myEntry.rank > rankedList.length}}">
    <view class="rank-num my-bar__num">{{myEntry.rank}}</view>
    <view class="avatar avatar--sm my-bar__avatar {{myEntry.avatarUrl ? 'has-avatar' : ''}}"><image class="avatar__img" src="{{myEntry.avatarUrl || icons.peopleFill}}" mode="{{myEntry.avatarUrl ? 'aspectFill' : 'aspectFit'}}"></image></view>
    <view class="rank-info">
      <text class="rank-name">我 ({{myEntry.name}})</text>
      <text class="rank-sessions">{{myEntry.sessions}}次</text>
    </view>
    <text class="rank-dur">{{myEntry.durationText}}</text>
  </view>
</view>