可视化数据大屏 项目卡片效果，图标数字加文字描述。

效果截图

效果代码

<template>
  <div class="list">
    <div class="listItem wow fadeInLeft" :data-wow-delay="index*0.3+'s'" v-for="(item,index) in list" :key="index">
      <div class="listIteml"><img :src="item.icon" alt=""></div>
      <div class="listItemr">
        <div class="numBody">
          <numcard :number="item.num"></numcard>
        </div>
        <p>{{ item.name }}</p>
      </div>
    </div>
  </div>
</template>

<script>
import icon_1 from './components/assets/icon_1.png'
import icon_2 from './components/assets/icon_2.png'
import icon_3 from './components/assets/icon_3.png'
import icon_4 from './components/assets/icon_4.png'
import numcard from "@/components/numcard/numcard.vue";

import WOW from "wow.js";

export default {
  data() {
    return {
      list: [
        {
          name: '总人数 (人)',
          icon: icon_1,
          num: 5481
        }, {
          name: '剩余车位 (个)',
          icon: icon_2,
          num: 351
        }, {
          name: '紧急告警 (个)',
          icon: icon_3,
          num: 5
        }, {
          name: '异常设备 (个)',
          icon: icon_4,
          num: 24
        }],
    }
  },
  components: {numcard},
  computed: {},
  mounted() {
    var that = this;
    var wow = new WOW({
      boxClass: "wow",
      animateClass: "animated",
      offset: 0,
      mobile: true,
      live: true,
      callback: function (box) {
      },
      scrollContainer: null,
      resetAnimation: true,
    });
    wow.init();
  },
}
</script>

<style lang="scss" scoped>
.list {
  width: 257px;
  .listItem {
    width: 257px;
    height: 88px;
    background: url("./components/assets/bg.png") no-repeat;
    background-size: 100% 100%;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    flex-wrap: nowrap;
    flex-direction: row;
    align-content: flex-start;
    margin-bottom: 15px;

    .listIteml {
      width: 82px;
      height: 88px;
      display: flex;
      justify-content: center;
      align-items: center;
      flex-wrap: nowrap;
      flex-direction: row;
      align-content: flex-start;

      img {
        height: 46px;
      }
    }

    .listItemr {
      display: flex;
      justify-content: center;
      align-items: flex-start;
      flex-wrap: nowrap;
      flex-direction: column;
      align-content: flex-start;
      width: 175px;
      height: 88px;

      :deep(.numBody) {
        font-size: 34px;
        font-family: AppleSystemUIFont;
        color: #00F8F4;
        height: 40px;
        margin-left: 20px;
        overflow: hidden;

        .real-time-num {
          width: auto;
        }
      }

      p {
        font-size: 16px;
        font-family: AppleSystemUIFont;
        color: #A5D8FC;
        margin-left: 20px;
      }
    }
  }
}
</style>

更多卡片效果实例

数据可视化大屏卡片效果实例

完整运行实例代码下载

上面已经将实现代码整理出来了，下面的代码是为项目快速集成而整理的。