feat: 添加统计组件示例

src/views/components/statistic.vue

@@ -0,0 +1,84 @@
+<script setup lang="ts">
+import { ref } from "vue";
+import dayjs from "dayjs";
+import ReCol from "@/components/ReCol";
+import { useTransition } from "@vueuse/core";
+
+defineOptions({
+  name: "Statistic"
+});
+
+const value = ref(Date.now() + 1000 * 60 * 60 * 7);
+const value1 = ref(Date.now() + 1000 * 60 * 60 * 24 * 2);
+const value2 = ref(dayjs().add(1, "month").startOf("month"));
+
+const source = ref(0);
+const outputValue = useTransition(source, {
+  duration: 1500
+});
+source.value = 36000;
+
+function reset() {
+  value1.value = Date.now() + 1000 * 60 * 60 * 24 * 2;
+}
+</script>
+
+<template>
+  <div>
+    <el-card shadow="never">
+      <template #header>
+        <div class="card-header">
+          <el-link
+            v-tippy="{
+              content: '点击查看详细文档'
+            }"
+            href="https://element-plus.org/zh-CN/component/statistic.html"
+            target="_blank"
+            style="font-size: 16px; font-weight: 800"
+          >
+            统计组件
+          </el-link>
+        </div>
+      </template>
+
+      <el-row :gutter="24">
+        <re-col :value="6" :xs="24" :sm="24">
+          <el-statistic title="需求人数" :value="outputValue" />
+        </re-col>
+
+        <re-col :value="6" :xs="24" :sm="24">
+          <el-countdown title="距离答疑结束还剩" :value="value" />
+        </re-col>
+
+        <re-col :value="6" :xs="24" :sm="24">
+          <el-countdown
+            title="VIP到期时间还剩"
+            format="HH:mm:ss"
+            :value="value1"
+          />
+          <el-button class="mt-2" type="primary" @click="reset">
+            Reset
+          </el-button>
+        </re-col>
+
+        <re-col :value="6" :xs="24" :sm="24">
+          <el-countdown format="DD 天 HH 时 mm 分 ss 秒" :value="value2">
+            <template #title>
+              <div style="display: inline-flex; align-items: center">
+                <IconifyIconOnline icon="ep:calendar" class="mr-2" />
+                距离下个月还剩
+              </div>
+            </template>
+          </el-countdown>
+          <div class="mt-2">{{ value2.format("YYYY-MM-DD") }}</div>
+        </re-col>
+      </el-row>
+    </el-card>
+  </div>
+</template>
+
+<style scoped>
+.el-col {
+  text-align: center;
+}
+</style>