xiaodou-ai-admin/src/components/StatisticsTemplate/index.vue

<template>
<a-card :title="title" >
  <a-row justify="center">
      <a-col
        v-for="item in list"
        :key="item.key"
        :xs="12"  :sm="12"  :md="6"  :lg="8"  :xl="4"
      >
        <div class="statistic" >
          <span class="count" :style="{color: item.color}" >
            <CountUp style="height: 64px" :end-val="item.value" :duration="duration(item.value)" />
          </span>
          <span>{{item.unit}}</span>
        </div>
        <div class="label" >
          {{item.label}}
        </div>
      </a-col>
      <!-- <vueCountTo :startVal='2' :endVal='2023' :duration='3000'  /> -->
    </a-row>
</a-card>
</template>
<script lang='ts' setup >
import CountUp from 'vue-countup-v3'
interface IProps {
  title: string,
  list: {value: string | number, key?: string, label: string, color: string, unit: string }[]
}

const duration = (duration: number | string) => {
  const count = Number(duration)
  if (count < 10) return 0
  else if (count < 100) return 2
  else if (count < 1000) return 3
  else if (count > 1000) return 5
}

const props = defineProps<IProps>()

</script>
<style lang='less' scoped >
@import '~@/styles/theme.less';
.statistic {
  color: @sublabel-color;
  height: 70px;
  .count {
    font-size: 48px;
    margin-right: 10px;

  }
}
.label {
  font-size: 18px;
  color: @sublabel-color;
}
</style>