zoukankan      html  css  js  c++  java
  • 解决排行榜前三与后面数字样式不同的方法

    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;
    }
     
    页面
  • 相关阅读:
    A1052. Linked List Sorting (25)
    A1032. Sharing (25)
    A1022. Digital Library (30)
    A1071. Speech Patterns (25)
    A1054. The Dominant Color (20)
    A1060. Are They Equal (25)
    A1063. Set Similarity (25)
    电子码表
    矩阵键盘
    对象追踪、临时对象追踪、绝对坐标与相对坐标
  • 原文地址:https://www.cnblogs.com/dcj2018/p/10605576.html
Copyright © 2011-2022 走看看