**设计图效果：**  **代码：** ``` <!-- 学习活跃度 --> <template> <div class="learnActivityContainer"> <div class="learnActivityitem"> <div class="learnActivity_warp"> <div class="learnActivity_img_warp"> <img :src="require('@/assets/img/learnActivity.png')" class="learnActivity_img" style="" alt=""> </div> <div> <div class="learnActivity_desc">当日人次</div> <div class="learnActivity_datavalue" style="color:#FFD659"> {{ nowPeopleCount }} </div> <!-- <div><dv-digital-flop class="learnActivity_datavalue" :config="numberData.labroom" /></div> --> </div> </div> </div> <div class="learnActivityitem" > <div class="learnActivity_warp"> <div class="learnActivity_img_warp"> <img :src="require('@/assets/img/learnActivity2.png')" class="learnActivity_img" style="" alt=""> </div> <div> <div class="learnActivity_desc">昨日人次</div> <div class="learnActivity_datavalue" style="color: #36FB66;"> {{ nowPeopleCount }} </div> </div> </div> </div> <div class="learnActivityitem" > <div class="learnActivity_warp"> <div class="learnActivity_img_warp"> <img :src="require('@/assets/img/learnActivity3.png')" class="learnActivity_img" style="" alt=""> </div> <div> <div class="learnActivity_desc">今日人次</div> <div class="learnActivity_datavalue" style="color: #48ECE7;"> {{ nowPeopleCount }} </div> </div> </div> </div> <div class="learnActivityitem" style=""> <div class="learnActivity_warp"> <div class="learnActivity_img_warp"> <img :src="require('@/assets/img/learnActivity4.png')" class="learnActivity_img" style="" alt=""> </div> <div> <div class="learnActivity_desc">学期累计人次</div> <div class="learnActivity_datavalue" style="color: #FFD659;"> {{ termPeopleCount }} </div> </div> </div> </div> <div class="learnActivityitem"> <div class="learnActivity_warp"> <div class="learnActivity_img_warp"> <img :src="require('@/assets/img/learnActivity5.png')" class="learnActivity_img" style="" alt=""> </div> <div> <div class="learnActivity_desc">周环比</div> <div class="learnActivity_datavalue" style="color: #36FB66;"> {{ nowPeopleCount }} </div> </div> </div> </div> <div class="learnActivityitem"> <div class="learnActivity_warp"> <div class="learnActivity_img_warp"> <img :src="require('@/assets/img/learnActivity6.png')" class="learnActivity_img" style="" alt=""> </div> <div> <div class="learnActivity_desc">月环比</div> <div class="learnActivity_datavalue" style="color: #FF3737;"> {{ nowPeopleCount }} </div> </div> </div> </div> </div> </template> <script lang="ts"> export default { // 组件名字 name: 'LearnActivity', // 组件参数 props: { }, data() { return { nowPeopleCount: 2895, termPeopleCount: 1025905,//学期累计人次 numberData: { labroom: { number: [2895], content: '{nt}', textAlign: 'left', style: { fontSize: 20, fill: '#FFD659' } }, // 评估 eval: { number: [30.6], content: '{nt}%', toFixed: 1, textAlign: 'left', style: { fontSize: 18, fill: '#23FFFC' } }, // 产教 prod: { number: [30.6], content: '{nt}%', toFixed: 1, textAlign: 'left', style: { fontSize: 18, fill: '#23FFFC' } }, }, } }, mounted() { setInterval(() => { let val = this.numberData.labroom.number[0] this.numberData.labroom.number[0] = val + 10 //相当于复制了一份新的对象在给自己 this.numberData.labroom = { ...this.numberData.labroom } let prodval = this.numberData.prod.number[0] this.numberData.prod.number[0] = prodval + 2 this.numberData.prod = { ...this.numberData.prod } console.log(val) console.log("------------------") }, 3800) }, beforeDestroy() { }, methods: { } } </script> <style lang="scss" scoped> .learnActivityContainer { margin-top: 20px; // margin-left: -10px; display: flex; justify-content: space-between; height: 100px; // 微调两边的间距，左边图片默认有点间距，所以设置比右边少了10px padding-left: 10px; padding-right: 20px; .learnActivityitem:last-child { margin-right: 0px; } .learnActivityitem { // flex: 1; // margin-right: 20px; .learnActivity_warp { height: 100px; display: flex; align-items: center; } .learnActivity_img_warp { margin-right: 12px; // margin-right: 12px; // margin-left: -10px; // background: #ffabcd; .learnActivity_img { width: 59px; height: 67px; // margin-left: -6px; // margin-top: -26px; } } .learnActivity_desc { font-size: 14px; margin-top: 7px; } .learnActivity_datavalue { // width: 100%; margin-top: 7px; font-size: 20px; } } } </style> ```