borderNums.vue

<template>
    <div class="dashbord-list">
      <p class="tip">
        <span class="tip-title">页面说明:</span>
        <span>可查看当前系统各项数据统计情况。互动频次及点播趋势图展示部分数据，可进入互动统计及趋势分析详情页查看全部数据。</span>
      </p>
        <ul>
            <li v-for="(item, index) in list" :key="index">
                <div class="title-name">{{item.label}}</div>
                <img :src="getImg(item.urlName)" alt="">
                <!-- <img src="@/assets/overview/play.png" alt=""> -->
                <div class="title">                  
                    <span>
                        <a class="num">{{item.num}}</a>
                        <a class="unit">{{item.unit}}</a>
                    </span>
                </div>
            </li>
        </ul>
    </div>
</template>

<script>
  export default {
    name: 'nums',
    data() {
      return {
        list:[
          {label:'总播放量',num: 1000, unit: '次',urlName:'play'},
          {label:'单位组织',num: 688, unit: '家',urlName:'org'},
          {label:'展板总量',num: 20, unit: '个',urlName:'boardsTotal'},
          {label:'互动总量',num: 899, unit: '次',urlName:'interaction'},
        ]
      }
    },
    mounted() {
        // this.initData()
    },
    methods: {
      getImg(imgUrl){
        return require('@/assets/overview/'+ imgUrl + '.png')
      },
      initData(){
        const _this = this
        setInterval(()=>{
          let num = Math.floor(Math.random()*4)
           num = num > 2 ? 3:0
          _this.$set(_this.list[num],'num', ++_this.list[num]['num'] )
        },3000)
      }
    }
  }
</script>

<style lang="less">
.dashbord-list{
    width: 100%;
    position: absolute;
    padding: 0 10px;
    z-index: 100;
    .tip{
      color: @font-color;
      .tip-title{
        font-weight: bold;
        padding-right: 10px;
      }
    }
    ul{
        display: flex;
        font-size: 0;
        justify-content: space-around;
        li{
            position: relative;
            width: 9vw;
            margin-top: 15px;
        }
        img{
            width: 100%;
        }
       .title-name{
            font-size: 18px;
            color: @font-color;
            position: absolute;
            top: -8px;
            right: 0;
        }
        .title{
            position: absolute;
            right: 0.2rem;
            bottom: 5px;
            color: @party-white;
            .num{
                font-size: 28px;
            }
            .unit{
                font-size:16px;
                margin-left: 5px;
            }
        }
    }
}
</style>