卡片效果为标题，数字。

数字使用数字滚动组件。

静态效果

动态效果

标题渐变色

标题文字使用了从上到下的渐变色

font-size: 16px;
font-family: MicrosoftYaHei;
font-weight: bold;
color: #FFFFFF;

background: linear-gradient(0deg, #C7E1FF 0%, #E7F0FD 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;

数字滚动

使用了vue-number-roll-plus插件，来实现数字滚动，因为部分用户要求显示小数，插件不支持，所以对插件做了微调。

<template>
  <div class="numcard">
    <vue-number-roll-plus
        :number="number1"
        :speed="1.5"
        :isSemicolon="isSemicolon"
        v-if="show"
        background="transparent"
    >
    </vue-number-roll-plus>
    <div v-if="isFixed" class="numcard">
      <div class="dot">.</div>
      <vue-number-roll-plus
          :number="number2"
          :speed="1.5"
          :isSemicolon="false"
          v-if="show"
          background="transparent"
      >
      </vue-number-roll-plus>
    </div>
  </div>

</template>

<script>
import VueNumberRollPlus from "vue3-number-roll-plus"
import "vue3-number-roll-plus/main.css"

export default {
  components: {
    VueNumberRollPlus
  },
  props: {
    number: {
      type: [Number, String],
      default() {
        return 0;
      }
    },
    isFixed: {
      type: Boolean,
      default() {
        return false;
      }
    },
    isSemicolon: {
      type: Boolean,
      default() {
        return false;
      }
    },
  },
  computed: {
    number1: function () {
      var num = (this.number.toFixed(2)).toString()
      return num.split(".")[0]
    },
    number2: function () {
      var num = (this.number.toFixed(2)).toString()
      return num.split(".")[1]
    }
  },
  data() {
    return {
      show: false,
    }
  },
  watch: {
    number() {
      this.show = false
      this.$nextTick(() => {
        this.show = true
      })
    },
  },
  mounted() {
    this.show = false
    this.$nextTick(() => {
      this.show = true
    })
  },
}
</script>
<style lang="scss">
.numcard {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: nowrap;
  flex-direction: row;
  align-content: flex-start;
}

.dot {
  font-size: 30px;
  font-family: OPPOSans;
  font-weight: bold;
  color: rgba(17, 255, 254, 1);
  text-shadow: 0px 4px 10px rgba(0, 42, 108, 0.12);
}
</style>

效果代码

结合wow.js实现依次下落的动画效果。

<template>
  <div class="cardBody">
    <div class="cardBodyItem wow fadeInDown" v-for="(item,index) in list"
         :key="index">
      <div class="title"><span>{{ item.title }}</span></div>
      <div class="num">
        <numcard :number="data[item.id]"></numcard>
      </div>
    </div>
  </div>
</template>

<script>
import numcard from "@/components/numcard/numcard.vue";


export default {
  name: "title",
  data() {
    return {
      list: [{
        title: '今日签收事件',
        id: 'toDaysConfirmNum'
      }, {
        title: '代签收事件',
        id: "toBeConfirmedNum"
      }]
    }
  },
  props: {
    data: {
      type: Object,
      default() {
        return {
          processingNum: 60,
          toBeConfirmedNum: 60,
          toDaysConfirmNum: 60,
          toDaysAuditNum: 60,
        };
      }
    },
  },
  computed: {},
  components: {numcard},
  watch: {},
  mounted() {
  },
}
</script>

<style lang="scss" scoped>
.cardBody {
  position: relative;
  width: calc(100% - 52px);
  margin: 0 auto;
  height: calc(100% - 0px);
  margin-left: 32px;
  margin-right: 20px;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  flex-wrap: nowrap;
  flex-direction: row;
  align-content: flex-start;

  .cardBodyItem:first-child {
    margin-left: 0;
  }

  .cardBodyItem:last-child {
    margin-right: 0;
  }

  .cardBodyItem {
    flex: 1;
    width: 133px;
    max-width: 133px;
    height: 90px;
    margin-left: 15px;
    margin-right: 15px;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: nowrap;
    flex-direction: column;
    align-content: flex-start;
    background: url("./assets/cardbg.png") no-repeat;
    background-size: 100% 100%;

    .title {
      display: flex;
      justify-content: center;
      align-items: center;
      flex-wrap: nowrap;
      flex-direction: row;
      align-content: flex-start;
      height: 50px;

      span {
        font-size: 16px;
        font-family: MicrosoftYaHei;
        font-weight: bold;
        color: #FFFFFF;

        background: linear-gradient(0deg, #C7E1FF 0%, #E7F0FD 100%);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
      }
    }

    .num {
      display: flex;
      justify-content: center;
      align-items: center;
      flex-wrap: nowrap;
      flex-direction: row;
      align-content: flex-start;
      position: relative;
      z-index: 12;
      width: 100%;
      height: 40px;

    }

    :deep(.num) {
      .real-time-num {
        font-size: 18px;
        font-family: DIN-Bold;
        font-weight: normal;
        color: #FFFFFF;
        width: auto;
      }

      .real-time-num-item {
        font-size: 30px;
        font-family: YouSheBiaoTiHei;
        font-weight: 400;
        color: #02E4FF;
      }
    }
  }
}
</style>

更多卡片效果实例

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

完整实例代码下载

项目环境：vue3+vite+js nodejs 14