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}" >{{item.value}}</span>
          <span>{{item.unit}}</span>
        </div>
        <div class="label" >
          {{item.label}}
        </div>
      </a-col>
    </a-row>
</a-card>
</template>
<script lang='ts' setup >

interface IProps {
  title: string,
  list: {value: string | number, key?: string, label: string, color: string, unit: string }[]
}

const props = defineProps<IProps>()

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

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