每日签到样式布局

HTML

 <div class="page--demo">
    <div class="sign-func">
      <!-- 签到 -->
      <div class="sign-block"
           v-for="(item,index) in dayList"
           :key="index">
        <!-- 已签到点亮 -->
        <div :class="index < days - 1 ? 'red':'grey'"
             v-if="index < days && index !== dayList.length - 1">
          <img class="sign-finish-img"
               src="https://img-blog.csdnimg.cn/20201019085412808.png#pic_center"
               alt="">
        </div>
        <div v-else-if="index === dayList.length - 1">
          <!-- 最后一天点亮 -->
          <img v-if="days === dayList.length"
               class="sign-finish-img"
               src="https://img-blog.csdnimg.cn/20201019090241385.png#pic_center"
               alt="">
          <img v-else
               class="sign-finish-img"
               src="https://img-blog.csdnimg.cn/20201019090522196.png#pic_center"
               alt="">
        </div>
        <div class="grey"
             v-else>
          <!-- 未签到置灰 -->
          <p>{{item.integral}}</p>
        </div>
        <p>{{item.data}}</p>
      </div>
    </div>
  </div>

CSS

.page--demo
  .sign-func
    display flex
    .sign-block
      div
        width 52rpx
        height 52rpx
        background #E6E6E6
        border-radius 50%
        text-align center
        color #999999
      .red
        position relative
        &:after
          content ''
          position absolute
          top 0
          bottom 0
          margin auto 0
          right -100rpx
          width 100rpx
          height 10rpx
          background #FFE1B3
      .grey
        position relative
        &:after
          content ''
          position absolute
          top 0
          bottom 0
          margin auto 0
          right -100rpx
          width 100rpx
          height 10rpx
          background #E6E6E6
      .sign-finish-img
        width 100%
        height 100%
        position relative
        z-index 2

JSON

data () {
    return {
      days: 3,   //  days 是几  就点亮几个小图标
      dayList: [{     //  模拟后台返过来的数据 
        data: '10.17',
        integral: 20
      },
      {
        data: '10.18',
        integral: 20
      },
      {
        data: '10.19',
        integral: 20
      },
      {
        data: '10.20',
        integral: 20
      },
      {
        data: '10.21',
        integral: 20
      },
      {
        data: '10.22',
        integral: 20
      },
      {
        data: '10.23',
        integral: 33
      }]
    }
  },

over ~