四种颜色的椭圆罩子数字底座，组件使用到了数字滚动效果以及wowjs入场动画效果 。让页面看起来更灵动。

组件代码

<template>
  <div class="list">
    <div class="listItem wow bounceIn" :data-wow-delay="(0.8+0.3*index)+'s'" v-for="(item,index) in list" :key="index">
      <div class="numbers">
        <numcard :number="item.num" :is-fixed="false" :is-semicolon="false"></numcard>
      </div>
      <div class="title">{{ item.title }}</div>
    </div>
  </div>
</template>

<script>

import numcard from "@/components/numcard/numcard.vue";

export default {
  name: "item6",
  components: {numcard},
  data() {
    return {
      list: [
        {
          title: '运行',
          num: 40
        }, {
          title: '通讯中断',
          num: 40
        }, {
          title: '故障',
          num: 40
        }, {
          title: '停电',
          num: 40
        },
      ]
    }
  },
  watch: {},
  mounted() {
  },
  methods: {}
}
</script>

<style lang="scss" scoped>
.list {
  width: calc(100% - 40px);
  margin-left: 20px;
  position: relative;
  height: 100%;
  overflow: hidden;
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
  flex-wrap: wrap;
  flex-direction: row;
  align-content: flex-start;
  //margin-top: 25px;

  :deep(.listItem) {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: nowrap;
    flex-direction: column;
    align-content: flex-start;
    background: url("./assets/item1.png") center center no-repeat;
    background-size: 159px 122px;
    height: 100%;
    width: 25%;


    .title {
      font-size: 14px;
      font-family: MicrosoftYaHei;
      font-weight: 400;
      color: #aabecc;
      margin-top: -5px;
    }

    .numbers {
      height: 15px;
    }

    .real-time-num {
      width: auto;
      margin: 0;
      font-size: 28px;
      font-family: DIN-Bold;
      font-weight: bold;
      color: #19FFC1;
      margin-top: -30px;
      //height: auto;
      text-shadow: 0px 4px 10px rgba(0, 42, 108, 0.12);
    }
  }

  :deep(.listItem:nth-child(2)) {
    background: url("./assets/item2.png") center center no-repeat;
    background-size: 159px 122px;

    .real-time-num {
      color: rgba(255, 167, 63, 1);
    }
  }

  :deep(.listItem:nth-child(3)) {
    background: url("./assets/item3.png") center center no-repeat;
    background-size: 159px 122px;

    .real-time-num {
      color: rgba(255, 104, 104, 1);
    }
  }

  :deep(.listItem:nth-child(4)) {
    background: url("./assets/item4.png") center center no-repeat;
    background-size: 159px 122px;

    .real-time-num {
      color: rgba(167, 181, 222, 1);
    }
  }
}
</style>

更多底座效果

vue3 数据可视化大屏底座效果实例集合

实例代码

代码基于vue3 vite js node.js 开发 请确保有相关的开发经验