feat:重构模块

src/components/StatsCard.vue

@@ -0,0 +1,92 @@
+<template>
+  <div class="statistics-card card-item" :style="{color: props.color}">
+    <span class="icon">
+      <i :class="props.icon"></i>
+    </span>
+
+    <div class="item">
+      <span class="title">
+        {{ props.title }}
+      </span>
+
+      <div class="value">
+        <span class="amount">
+          {{ props.value }}
+        </span>
+        <span class="unit">
+          {{ props.unit }}
+        </span>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { defineProps } from 'vue'
+
+const props = defineProps({
+  icon: {
+    required: true,
+    type: String
+  },
+  title: {
+    required: true,
+    type: String
+  },
+  value: {
+    required: true,
+    type: [String, Number]
+  },
+  unit: {
+    required: true,
+    type: String
+  },
+  color: {
+    required: true,
+    type: String
+  }
+})
+</script>
+
+<style lang="scss">
+.statistics-card {
+  width: 100%;
+  padding: 10px;
+  display: grid;
+  grid-template-columns: 30% 1fr;
+  justify-items: center;
+  align-items: center;
+
+  .iconfont, .icon {
+    font-size: 2.5rem;
+  }
+
+  .item {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    gap: 1vh;
+
+    .title {
+      font-size: 1.5rem;
+    }
+
+    .value {
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      gap: 0.5vw;
+
+      .amount {
+        font-weight: bold;
+        font-size: 1.5rem;
+      }
+
+      .unit {
+        font-size: 1.5rem;
+      }
+    }
+  }
+}
+</style>