feat: 添加统计组件示例

locales/en.yaml

@@ -60,6 +60,7 @@ menus:
   hsDatePicker: Date Picker
   hsDateTimePicker: DateTimePicker
   hsTimePicker: TimePicker
+  hsStatistic: Statistic
   hsmenus: MultiLevel Menu
   hsmenu1: Menu1
   hsmenu1-1: Menu1-1

locales/zh-CN.yaml

@@ -60,6 +60,7 @@ menus:
   hsDatePicker: 日期选择器
   hsDateTimePicker: 日期时间选择器
   hsTimePicker: 时间选择器
+  hsStatistic: 统计组件
   hsmenus: 多级菜单
   hsmenu1: 菜单1
   hsmenu1-1: 菜单1-1

src/router/modules/components.ts

@@ -107,6 +107,14 @@ export default {
         title: $t("menus.hsbutton")
       }
     },
+    {
+      path: "/components/statistic",
+      name: "Statistic",
+      component: () => import("@/views/components/statistic.vue"),
+      meta: {
+        title: $t("menus.hsStatistic")
+      }
+    },
     {
       path: "/components/cascader",
       name: "Cascader",

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>