HTML中
<ul class="lists">
<li class="list-item" v-for="(item,index) in rank" :key="index">
<span class="name">
<i v-if="index < 3" class="icon" :class="`icon-rank${index}`"></i>
<i v-else class="rank-count">{{item.rank}}</i>
<em class="rank-name">{{item.name}}</em>
</span>
<span class="count">巡展{{item.time}}次</span>
</li>
</ul>
script
rank: [
{ rank: "1", name: "安尼塔", time: "18" },
{ rank: "2", name: "安尼塔", time: "18" },
{ rank: "3", name: "安尼塔", time: "18" },
{ rank: "4", name: "安尼塔", time: "18" }
{ rank: "5", name: "安尼塔", time: "18" },
css
.name {
display: flex;
align-items: center;
.icon {
display: inline-block;
rem(30);
height: rem(30);
}
.icon-rank0 {
@extend .icon;
background: url("../../images/rank_first.png") no-repeat;
background-size: 100% 100%;
}
.icon-rank1 {
@extend .icon;
background: url("../../images/rank_second.png") no-repeat;
background-size: 100% 100%;
}
.icon-rank2 {
@extend .icon;
background: url("../../images/rank_third.png") no-repeat;
background-size: 100% 100%;
}
.rank-count {
rem(30);
text-align: center;
font-size: 20px;
}
.rank-name {
margin-left: rem(22);
}
}
.count {
font-size: 14px;
}
页面
