<template>
    <div class="dashbord-list">
        <ul>
            <li v-for="(item, index) in list">
                <img :src="'/images/screen/'+ item.urlName+ '.png'" alt="">
                <div class="title">
                    <div class="title-name">{{item.label}}</div>
                    <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: {
      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=scss>
.dashbord-list{
    width: 100%;
    position: absolute;
    top: -0.3rem;
    ul{
        display: flex;
        font-size: 0;
        justify-content: space-around;
        li{
            position: relative;
        }
        img{
            width: 1.76rem;
        }
        .title{
            position: absolute;
            right: 0.2rem;
            bottom: 0;
            color: rgba(78,255,253,1);
            p{
                margin: 0;
                padding: 0;
            }
            .title-name{
                font-size: 0.18rem;
                margin-bottom: 0.13rem;
            }
            .num{
                font-size: 0.28rem;
            }
            .unit{
                font-size: 0.16rem;
                margin-left: 0.05rem;
            }
        }
    }
}
</style>
