解决排行榜前三与后面数字样式不同的方法

Posted 2021-11-10 dcj2018

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;

width: 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 {

width: rem(30);

text-align: center;

font-size: 20px;

}

.rank-name {

margin-left: rem(22);

}

}

.count {

font-size: 14px;

}

 

页面