init

2025-09-30 15:00:32 +08:00
parent 1b262f06b8
commit b4e759cf69
202 changed files with 22035 additions and 0 deletions
@@ -0,0 +1,31 @@
+<template>
+  <div class="mini-statistic-card overflow-hidden relative min-h-[112px] bg-container inline-flex items-center justify-between drop-shadow-sm p-md border-border rounded-lg">
+    <div class="statistic-main flex-1">
+      <div class="statistic-title text-subtext text-xs">{{ title }}</div>
+      <div class="statistic-content flex items-baseline">
+        <span class="value text-title text-xxl font-bold">{{ value }}</span>
+        <span class="suffix ml-1 text-xs text-green-500 font-bold">+30%</span>
+      </div>
+    </div>
+    <div class="statistic-icon absolute bottom-0 right-0">
+      <slot name="icon"></slot>
+    </div>
+  </div>
+</template>
+
+<script lang="ts">
+import { defineComponent, PropType } from 'vue';
+
+export default defineComponent({
+  props: {
+    title: String,
+    value: [String, Number] as PropType<string | number>,
+  },
+  name: 'MiniStatisticCard',
+});
+</script>
+
+<style lang="less" scoped>
+.mini-statistic-card {
+}
+</style>
@@ -0,0 +1,41 @@
+<template>
+  <div class="overview-title">
+    {{ title }}
+    <div class="subtitle">
+      {{ subtitle }}
+      <span :class="{ change: true, up, down }">{{ change }}</span>
+    </div>
+  </div>
+</template>
+<script lang="ts">
+  import { defineComponent, PropType } from 'vue';
+
+  export default defineComponent({
+    name: 'OverviewTitle',
+    props: {
+      title: String,
+      subtitle: String,
+      change: [String, Number] as PropType<string | number>,
+      up: { type: Boolean, required: false },
+      down: { type: Boolean, required: false },
+    },
+    setup(props, { attrs, slots, emit }) {},
+  });
+</script>
+<style scoped lang="less">
+  .overview-title {
+    @apply text-title font-bold text-base;
+    .subtitle {
+      @apply text-subtext text-xs;
+      .change {
+        @apply text-primary-500 text-sm ml-xs;
+        &.up {
+          @apply text-success-500;
+        }
+        &.down {
+          @apply text-error-500;
+        }
+      }
+    }
+  }
+</style>