排名序号样式

大屏展示会对一些数据进行排行

dom部分：

<div class="rank" v-for="(item, index) in rankData" :key="item.id">
    <div><span :class="'rank' + index">{{ index + 1 }}</span></div>
    <div>{{ item.name }}</div>
</div>

css部分：

.rank0, .rank1, .rank2 {
   display: inline-block;
   width: 20px;
   height: 16px;
   line-height: 16px;
   border-radius: 10px;
   font-size: 14px;
}

.rank0 {
   background-image: linear-gradient(to bottom, #FCA293, #D95B51);
}

.rank1 {
   background-image: linear-gradient(to bottom, #FED963, #FFB207);
}

.rank2 {
   background-image: linear-gradient(to bottom, #33CAD7, #1A9FAF);
}