shuimu-dashboard-h5/src/views/dashboard/components/DataCard.vue

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

const props = defineProps({
  classes: {
    type: Number,
    default: 0,
    required: true,
  },
  teachers: {
    type: Number,
    default: 0,
    required: true,
  },
  students: {
    type: Number,
    default: 0,
    required: true,
  },
  equipments: {
    type: Number,
    default: 0,
    required: true,
  },
  trainings: {
    type: Number,
    default: 0,
    required: true,
  },
});
// 卡片数字动效
function countNumber(number) {
  return useTransition(number, {
    duration: 2000,
    transition: TransitionPresets.easeOutExpo,
  });
}
// 全部班级
const classCount = ref(0);
const classCountOutput = countNumber(classCount);
// 全部教师
const teacherCount = ref(0);
const teacherCountOutput = countNumber(teacherCount);
// 全部学生
const studentCount = ref(0);
const studentCountOutput = countNumber(studentCount);
// 设备套数
const equipmentCount = ref(0);
const equipmentCountOutput = countNumber(equipmentCount);
// 累计训练次数
const trainingCount = ref(0);
const trainingCountOutput = countNumber(trainingCount);
// 监听数据变化
watchEffect(() => {
  classCount.value = <number>props.classes;
  teacherCount.value = <number>props.teachers;
  studentCount.value = <number>props.students;
  equipmentCount.value = <number>props.equipments;
  trainingCount.value = <number>props.trainings;
});
</script>
<template>
  <el-row :gutter="40" class="data-card">
    <el-col :xs="24" :sm="12" :md="8" :lg="5">
      <div class="card c1">
        <span class="n">{{ Math.round(classCountOutput) }}</span
        ><span>全部班级</span>
      </div>
    </el-col>
    <el-col :xs="24" :sm="12" :md="8" :lg="5">
      <div class="card c2">
        <span class="n">{{ Math.round(teacherCountOutput) }}</span
        ><span>全部教师</span>
      </div>
    </el-col>
    <el-col :xs="24" :sm="12" :md="8" :lg="5">
      <div class="card c3">
        <span class="n">{{ Math.round(studentCountOutput) }}</span
        ><span>全部学生</span>
      </div>
    </el-col>
    <el-col :xs="24" :sm="12" :md="8" :lg="5">
      <div class="card c4">
        <span class="n">{{ Math.round(equipmentCountOutput) }}</span
        ><span>设备套数</span>
      </div>
    </el-col>
    <el-col :xs="24" :sm="12" :md="8" :lg="5">
      <div class="card c5">
        <span class="n">{{ Math.round(trainingCountOutput) }}</span
        ><span>累计训练次数</span>
      </div>
    </el-col>
  </el-row>
</template>
<style lang="scss" scoped>
@media only screen and (min-width: 1200px) {
  .el-col-lg-5 {
    display: block;
    max-width: 20%;
    min-width: 285px;
    flex: 0 0 20%;
  }
}
.data-card {
  margin: 0 auto !important;
  padding: 22px 42px;
  background: #ffffff;
  border-radius: 30px;
  border: 1px solid #e6e8eb;
  .card {
    box-sizing: border-box;
    width: 265px;
    height: 134px;
    max-width: 100%;
    padding: 32px 0 0 145px;
    margin: 20px 0;
    background-size: 100% auto;
    background-repeat: no-repeat;
    &.c1 {
      background-image: url("../../../assets/index/classes.png");
    }
    &.c2 {
      background-image: url("../../../assets/index/teachers.png");
    }
    &.c3 {
      background-image: url("../../../assets/index/students.png");
    }
    &.c4 {
      background-image: url("../../../assets/index/equipments.png");
    }
    &.c5 {
      background-image: url("../../../assets/index/trainings.png");
    }
    span {
      display: block;
      color: #142141;
      &.n {
        font-size: 26px;
        font-weight: bold;
      }
    }
  }
}
@media only screen and (max-width: 1200px) {
  .data-card .card {
    padding: 32px 0 0 74px;
    text-align: center;
    white-space: nowrap;
  }
}
</style>