shuimu-dashboard-h5/src/views/admin/area/components/AreaDataCard.vue

<!-- 数据卡片 -->
<script setup lang="ts">
import {TransitionPresets, useTransition} from "@vueuse/core";

const props = defineProps({
  students: {
    type: Number,
    default: 0,
    required: true,
  },
  games: {
    type: Number,
    default: 0,
    required: true,
  },
  schools: {
    type: Number,
    default: 0,
    required: true,
  },
});
// 卡片数字动效
function countNumber(number: any) {
  return useTransition(number, {
    duration: 5000,
    transition: TransitionPresets.easeOutExpo,
  });
}
// 样本人数
const studentsCount = ref(0);
const studentsCountOutput = countNumber(studentsCount);
// 累计训练次数
const gamesCount = ref(0);
const gamesCountOutput = countNumber(gamesCount);
// 全部学校
const schoolsCount = ref(0);
const schoolsCountOutput = countNumber(schoolsCount);
// 监听数据变化
watchEffect(() => {
  studentsCount.value = <number>props.students;
  gamesCount.value = <number>props.games;
  schoolsCount.value = <number>props.schools;
});
</script>
<template>
  <div class="clear">
    <div class="data-card c1">
      <span class="n">{{ Math.round(Number(studentsCountOutput)) }}</span
      ><span>样本人数</span>
    </div>
    <div class="data-card c2">
      <span class="n">{{ Math.round(Number(gamesCountOutput)) }}</span
      ><span>累计训练次数</span>
    </div>
    <div class="data-card c3">
      <span class="n">{{ Math.round(Number(schoolsCountOutput)) }}</span
      ><span>全部学校</span>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.data-card {
  box-sizing: border-box;
  float: left;
  width: 300px;
  height: 140px;
  padding: 30px 0 0 30px;
  margin: 0 20px 20px 0;
  border: 1px solid #e6e8eb;
  border-radius: 30px;

  span {
    display: block;
    font-size: 18px;
    color: #23283c;

    &.n {
      margin-bottom: 15px;
      font-size: 24px;
      font-weight: bold;
    }
  }

  &.c1 {
    background: #fef6e9 url("../../../../assets/areaboard/students.png") 90% 50% no-repeat;

    span.n {
      color: #e08e0a;
    }
  }

  &.c2 {
    background: #feeeee url("../../../../assets/areaboard/games.png") 90% 50% no-repeat;

    span.n {
      color: #ca7676;
    }
  }

  &.c3 {
    background: #d0f6f1 url("../../../../assets/areaboard/schools.png") 90% 50% no-repeat;

    span.n {
      color: #45a498;
    }
  }
}
</style>