<!--排行榜-->
<ion-header>

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

</ion-header>


<ion-content>
    <!--下拉刷新-->
    <ion-refresher (ionRefresh)="doRefresh($event)">
        <ion-refresher-content pullingText="下拉刷新"
                               pullingIcon="arrow-dropdown"
                               refreshingSpinner="bubbles">
        </ion-refresher-content>
    </ion-refresher>

    <ion-list>
        <div class="main-container">
            <div class="learn-item">
                <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">
                                <span *ngIf="i > 2" class="span-rank">{{i +1}}</span>
                            </ion-col>
                            <ion-col col-5>{{item.username}}</ion-col>
                            <ion-col col-5>{{item.score}}</ion-col>
                        </ion-row>
                    </ion-grid>
                </div>
            </div>
        </div>
    </ion-list>

    <!--<p class="tips">备注：分数相同的情况下，先交卷者排名在前</p>-->

    <!--上滑加载数据-->
    <ion-infinite-scroll (ionInfinite)="doInfinite($event)">
        <ion-infinite-scroll-content></ion-infinite-scroll-content>
    </ion-infinite-scroll>

</ion-content>
