<ion-header [translucent]="true" class="header">
  <ion-toolbar class="toolbar">
    <!-- <ion-buttons slot="start">
      <ion-icon
        name="chevron-back-outline"
        style="width: 6.4vw; height: 6.4vw; color: #ffffff"
      ></ion-icon>
    </ion-buttons> -->
    <ion-title class="title">排名</ion-title>
  </ion-toolbar>
</ion-header>
<ion-content class="content"> 

  <div class="order">
    <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].name }}
            </div>
          </div>
          <div class="user-detail">
            <div class="num">{{orderList[1].num}}</div>
            <div class="pm">TOP2</div>
          </div>
        </div>
        <div class="top1">
          <div class="user-block">
            <div class="user-avatar">
              <img src="/img/2.png" alt="" class="tag" />
              <img [src]="orderList[0].avatar" class="avatar" alt="" />
            </div>
            <div class="user-name">
              {{ orderList[0].name }}
            </div>
          </div>
          <div class="user-detail">
            <div class="num">{{orderList[0].num}}</div>
            <div class="pm">TOP1</div>
          </div>
        </div>
        <div class="top3">
          <div class="user-block">
            <div class="user-avatar">
              <img src="/img/2.png" alt="" class="tag" />
              <img [src]="orderList[2].avatar" class="avatar" alt="" />
            </div>
            <div class="user-name">
              {{ orderList[2].name }}
            </div>
          </div>
          <div class="user-detail">
            <div class="num">{{orderList[2].num}}</div>
            <div class="pm">TOP2</div>
          </div>
        </div>
      </div>
    </div>
    @for (item of orderList.slice(2); track $index) {
    <div class="row">
      <div class="row-left">
        <span class="row-index">{{$index}}</span>
        <img [src]="item.avatar" alt="" class="row-avatar" />
        <div class="row-name">{{ item.name }}</div>
      </div>
      <div class="row-right">
        <div class="row-tpis">距离第一名</div>
        <div class="row-tpis-num">{{item.num}} <span></span></div>
      </div>
    </div>
    }
  </div>
</ion-content>
