rank.html

<ion-header>
  <ion-navbar>
    <ion-title>TOP5排行榜</ion-title>
  </ion-navbar>
</ion-header>

<ion-content>
  <div class="main-container">
    <img class="bgc" src="./assets/imgs/learn/learning_background.png">
    <div class="learn-item">
      <div class="learn-title" (click)="root()">TOP5排行榜</div>
      <div class="top-container">
        <ion-grid>
          <ion-row class="top-row">
            <ion-col col-2>排名</ion-col>
            <ion-col col-5>姓名</ion-col>
            <ion-col col-5>分数</ion-col>
          </ion-row>
          <ion-row class="top-col" *ngFor="let item of list;let i = index;">
            <ion-col col-2>
              <img *ngIf="i == 0" src="./assets/imgs/learn/one.png">
              <img *ngIf="i == 1" src="./assets/imgs/learn/two.png">
              <img *ngIf="i == 2" src="./assets/imgs/learn/three.png">
              <img *ngIf="i == 3" src="./assets/imgs/learn/four.png">
              <img *ngIf="i == 4" src="./assets/imgs/learn/five.png">
            </ion-col>
            <ion-col col-5>{{item.username}}</ion-col>
            <ion-col col-5>{{item.score}}</ion-col>
          </ion-row>
        </ion-grid>
        <p class="tips">备注：分数相同的情况下，先交卷者排名在前</p>
      </div>
    </div>
  </div>
</ion-content>