nova-live/projects/live-app/src/modules/user/ranking/ranking.component.html

<nav title="排名"></nav>
<ion-content class="content">
  <ion-segment
    [scrollable]="true"
    (ionChange)="segmentChanged($event)"
    layout="icon-bottom"
    value="anchor"
    mode="md"
  >
    <ion-segment-button value="anchor" class="tabs" content-id="anchor">
      <ion-label>主播排行</ion-label>
    </ion-segment-button>
    <ion-segment-button value="user" class="tabs" content-id="user">
      <ion-label>用户排行</ion-label>
    </ion-segment-button>
  </ion-segment>

  <div class="order" [style.background-image]="'url(img/用户榜底.png)'">
    <div class="title">
      <div class="link"></div>
      <div class="btns">
        <div class="btn" (click)="changeTop($event, 'day')">日榜</div>
        <div class="btn" (click)="changeTop($event, 'week')">周榜</div>
        <div class="btn" (click)="changeTop($event, 'month')">月榜</div>
      </div>
    </div>
    <div class="ladder">
      <div class="top-block">
        <div class="top2">
          <div class="user-block">
            <div class="user-avatar">
              <img src="img/2.png" alt="" class="tag" />
              <img [src]="orderList[1]?.avatar" class="avatar" alt="" />
            </div>
            <div class="user-name">
              {{ orderList[1]?.nickname }}
            </div>
          </div>
          <div class="user-detail user-detail2">
            <div class="num">{{ orderList[1]?.credit }}</div>
            <div class="pm">TOP2</div>
          </div>
        </div>
        <div class="top1">
          <div class="user-block">
            <div class="user-avatar">
              <img
                src="img/1.png"
                alt=""
                class="tag"
              />
              <img [src]="orderList[0]?.avatar" class="avatar" alt="" />
            </div>
            <div class="user-name">
              {{ orderList[0]?.nickname }}
            </div>
          </div>
          <div class="user-detail user-detail1">
            <div class="num">{{ orderList[0]?.credit }}</div>
            <div class="pm">TOP2</div>
          </div>
        </div>
        <div class="top3">
          <div class="user-block">
            <div class="user-avatar">
              <img src="img/3.png" alt="" class="tag" />
              <img [src]="orderList[2]?.avatar" class="avatar" alt="" />
            </div>
            <div class="user-name">
              {{ orderList[2]?.nickname }}
            </div>
          </div>
          <div class="user-detail user-detail3">
            <div class="num">{{ orderList[2]?.credit }}</div>
            <div class="pm">TOP2</div>
          </div>
        </div>
      </div>
    </div>
    @for (item of orderList.slice(3,4); track $index) {
    <div class="row">
      <div class="row-left">
        <span class="row-index">4</span>
        <img [src]="item.avatar" alt="" class="row-avatar" />
        <div class="row-name">{{ item?.nickname }}</div>
      </div>
      <div class="row-right">
        <div class="row-tpis">距离第一名</div>
        <div class="row-tpis-num">
          {{ (orderList[0].credit - item.credit).toFixed(2) }}
        </div>
      </div>
    </div>
    }
  </div>
</ion-content>