diff --git a/src/style/card-animation.scss b/src/style/card-animation.scss
new file mode 100644
index 0000000..3b48d8b
--- /dev/null
+++ b/src/style/card-animation.scss
@@ -0,0 +1,20 @@
+@keyframes fade-up {
+  0% {
+    transform: translateY(60px);
+    opacity: 0;
+  }
+  100% {
+    transform: translateY(0);
+    opacity: 1;
+  }
+}
+
+@for $i from 0 through 20 {
+  .animated-fade-up-#{$i} {
+    opacity: 0; // 初始透明度
+    animation-name: fade-up; // 应用动画
+    animation-duration: 0.5s; // 动画持续时间
+    animation-fill-mode: forwards; // 保持结束后的动画状态
+    animation-delay: calc($i/10) + s; // 设置延迟-每次延迟0.1s
+  }
+}
diff --git a/src/style/global-style.scss b/src/style/global-style.scss
index 8f5af1e..206be52 100644
--- a/src/style/global-style.scss
+++ b/src/style/global-style.scss
@@ -1,4 +1,9 @@
 /* global style scss */
+.dc-page {
+  padding: $padding;
+  background: $color-bg-1;
+}
+
 // 左间距-行内文字
 .margin-left-text {
   margin-left: $margin-text;
@@ -8,23 +13,26 @@
   margin-right: $margin-text;
 }
 
-.flex-row-between-center {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-}
-
+// 中等卡片大小
 .card-middling {
   width: 200px;
 }
 
+// 一行完全居中
 .row-center {
   display: flex;
   justify-content: center;
   align-items: center;
 }
+// 垂直居中，从左到右
 .row-start-center {
   display: flex;
   justify-content: start;
   align-items: center;
 }
+// 垂直居中，左右占满
+.flex-row-between-center {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
diff --git a/src/style/index.scss b/src/style/index.scss
index 53e7011..d2b8c6c 100644
--- a/src/style/index.scss
+++ b/src/style/index.scss
@@ -2,6 +2,7 @@
 @import "./global-transition.scss";
 @import "./global-style.scss";
 @import "./loading-page.scss";
+@import "./card-animation.scss";
 * {
   margin: 0;
   padding: 0;
diff --git a/src/views/home/components/data-box.vue b/src/views/home/components/data-box.vue
new file mode 100644
index 0000000..699b4ce
--- /dev/null
+++ b/src/views/home/components/data-box.vue
@@ -0,0 +1,51 @@
+<template>
+  <div class="data-box">
+    <div class="sell-histogram">
+      <div>
+        <span class="data-title">销售额趋势</span>
+        <span class="data-subtext">单位：元</span>
+      </div>
+      <SellHistogram />
+    </div>
+    <div class="monthly-analysis">
+      <div>
+        <span class="data-title">现金分析</span>
+        <span class="data-subtext">单位：元</span>
+      </div>
+      <MonthlyAnalysis />
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import SellHistogram from "@/views/home/components/sell-histogram.vue";
+import MonthlyAnalysis from "@/views/home/components/monthly-analysis.vue";
+</script>
+
+<style lang="scss" scoped>
+.data-box {
+  margin-top: calc($padding * 2);
+  display: flex;
+  justify-content: space-between;
+  .data-title {
+    font-size: $font-size-body-3;
+    color: $color-text-1;
+  }
+  .data-subtext {
+    font-size: $font-size-body-2;
+    color: $color-text-2;
+    margin-left: $margin-text;
+  }
+  .sell-histogram {
+    width: calc(100% - 600px - $padding);
+    height: 400px;
+    padding-bottom: $padding;
+  }
+  .monthly-analysis {
+    margin-left: $padding;
+    width: 600px;
+    height: 400px;
+    padding-bottom: $padding;
+  }
+}
+</style>
diff --git a/src/views/home/components/finance.vue b/src/views/home/components/finance.vue
new file mode 100644
index 0000000..553f761
--- /dev/null
+++ b/src/views/home/components/finance.vue
@@ -0,0 +1,109 @@
+<template>
+  <div class="finance-box">
+    <div class="box-title">
+      <div>财务指标</div>
+      <div>
+        <span><icon-edit /></span>
+        <span class="margin-left-text">自定义</span>
+      </div>
+    </div>
+    <a-divider :margin="16" />
+    <div class="finance-card">
+      <a-card
+        hoverable
+        v-for="(item, index) in financeData"
+        :key="index"
+        class="finance-a-card"
+        :class="'animated-fade-up-' + index"
+      >
+        <div class="finance-nav">
+          <div class="tag-dot" :style="{ border: `3px solid ${item.color}` }"></div>
+          <span class="finance-nav-title">{{ item.title }}</span>
+        </div>
+        <a-statistic
+          :value-style="{
+            fontSize: '13px',
+            marginLeft: '16px',
+            marginTop: '12px'
+          }"
+          :value="item.value"
+          :value-from="0"
+          :start="true"
+          animation
+          show-group-separator
+        />
+      </a-card>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+const financeData = ref([
+  {
+    id: 1,
+    title: "利润总额",
+    value: 100000,
+    color: "#ff8625"
+  },
+  {
+    id: 2,
+    title: "现金",
+    value: 750420,
+    color: "#165DFF"
+  },
+  {
+    id: 3,
+    title: "银行存款",
+    value: 100000,
+    color: "#39cbab"
+  },
+  {
+    id: 4,
+    title: "存贷",
+    value: 100000,
+    color: "#6c73ff"
+  },
+  {
+    id: 5,
+    title: "应收账款",
+    value: 100000,
+    color: "#2fd0ff"
+  }
+]);
+</script>
+
+<style lang="scss" scoped>
+.finance-box {
+  margin-top: calc($padding * 2);
+  .finance-card {
+    display: grid;
+    grid-template-columns: repeat(5, 1fr);
+    grid-template-rows: 1fr;
+    grid-column-gap: $padding;
+    grid-row-gap: 0px;
+    .finance-a-card {
+      .finance-nav {
+        display: flex;
+        align-items: center;
+        .tag-dot {
+          width: 8px;
+          height: 8px;
+          border-radius: 50%;
+          margin-right: $margin-text;
+          box-sizing: border-box;
+        }
+        .finance-nav-title {
+          font-size: $font-size-body-1;
+        }
+      }
+    }
+  }
+}
+.box-title {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  font-size: $font-size-body-3;
+  color: $color-text-1;
+}
+</style>
diff --git a/src/views/home/components/shortcut.vue b/src/views/home/components/shortcut.vue
new file mode 100644
index 0000000..8ec102e
--- /dev/null
+++ b/src/views/home/components/shortcut.vue
@@ -0,0 +1,72 @@
+<template>
+  <div class="shortcut-box">
+    <div class="box-title">
+      <div>常用功能</div>
+      <div>
+        <span><icon-edit /></span>
+        <span class="margin-left-text">自定义</span>
+      </div>
+    </div>
+    <a-divider :margin="16" />
+    <div class="flex-row-between-center">
+      <div v-for="(item, index) in shortcut" :key="item.id" class="card-middling row-center" :class="'animated-fade-up-' + index">
+        <div>
+          <SvgIcon :name="item.svg" :size="40" />
+          <span class="shortcut-card-label">{{ item.name }}</span>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+const shortcut = ref([
+  {
+    id: 1,
+    name: "数据查询",
+    svg: "data-queries"
+  },
+  {
+    id: 2,
+    name: "新增凭证",
+    svg: "add-voucher"
+  },
+  {
+    id: 3,
+    name: "余额查询",
+    svg: "balance-inquiry"
+  },
+  {
+    id: 4,
+    name: "财务报表",
+    svg: "financial-statement"
+  },
+  {
+    id: 5,
+    name: "数据统计",
+    svg: "data-analysis"
+  },
+  {
+    id: 6,
+    name: "更多",
+    svg: "more"
+  }
+]);
+</script>
+
+<style lang="scss" scoped>
+.shortcut-box {
+  .shortcut-card-label {
+    font-size: $font-size-body-3;
+    margin-left: 20px;
+    color: $color-text-2;
+  }
+}
+.box-title {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  font-size: $font-size-body-3;
+  color: $color-text-1;
+}
+</style>
diff --git a/src/views/home/components/target-box.vue b/src/views/home/components/target-box.vue
new file mode 100644
index 0000000..ca7a5d2
--- /dev/null
+++ b/src/views/home/components/target-box.vue
@@ -0,0 +1,129 @@
+<template>
+  <div class="target-box">
+    <div class="box-title">
+      <div>第三板指标</div>
+    </div>
+    <a-divider :margin="16" />
+    <div class="row-start-center">
+      <div class="target-grade" :class="'animated-fade-up-0'">
+        <div class="target-grade-innerbox">
+          <div class="grade-value">{{ targetData.all.value }}</div>
+          <div class="target-title">{{ targetData.all.title }}</div>
+        </div>
+      </div>
+      <div v-for="(item, index) in targetData.list" :key="index" class="target-other" :class="'animated-fade-up-' + index">
+        <div>
+          <div>
+            <span class="other-value">{{ item.value }}</span>
+            <span>
+              <icon-play-arrow-fill class="target-up" v-if="item.type === 'up'" />
+              <icon-play-arrow-fill class="target-down" v-else />
+            </span>
+          </div>
+          <div class="target-title">{{ item.title }}</div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+const targetData = reactive({
+  all: {
+    title: "综合评分",
+    value: 9.9
+  },
+  list: [
+    {
+      title: "资产负债率",
+      value: "78%",
+      type: "up"
+    },
+    {
+      title: "毛利率",
+      value: "88%",
+      type: "down"
+    },
+    {
+      title: "营业收入增长率",
+      value: "58%",
+      type: "up"
+    },
+    {
+      title: "净利润增长率",
+      value: "76%",
+      type: "up"
+    },
+    {
+      title: "净资产收益率",
+      value: "76%",
+      type: "down"
+    }
+  ]
+});
+</script>
+
+<style lang="scss" scoped>
+.target-box {
+  margin-top: calc($padding * 2);
+  .target-grade {
+    width: 180px;
+    height: 60px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    position: relative;
+    &::before {
+      position: absolute;
+      right: 0;
+      top: 50%;
+      transform: translateY(-50%);
+      content: "";
+      height: 30px;
+      width: 1px;
+      background: $color-border-2;
+    }
+    .target-grade-innerbox {
+      text-align: center;
+      .grade-value {
+        font-family: "AliFangYuanTi";
+        font-size: $font-size-title-2;
+        font-weight: bold;
+        color: $color-danger;
+      }
+    }
+  }
+  .target-other {
+    width: 180px;
+    height: 60px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    .other-value {
+      font-family: "AliFangYuanTi";
+      font-weight: bold;
+      margin-right: $margin-text;
+    }
+    .target-up {
+      transform: rotate(-90deg);
+      color: $color-danger;
+    }
+    .target-down {
+      transform: rotate(90deg);
+      color: $color-success;
+    }
+  }
+  .target-title {
+    margin-top: $margin-text;
+    color: $color-text-3;
+  }
+}
+
+.box-title {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  font-size: $font-size-body-3;
+  color: $color-text-1;
+}
+</style>
diff --git a/src/views/home/home.vue b/src/views/home/home.vue
index 2336827..bef0644 100644
--- a/src/views/home/home.vue
+++ b/src/views/home/home.vue
@@ -1,329 +1,21 @@
 <template>
-  <div class="home">
+  <div class="dc-page">
     <!-- 常用功能 -->
-    <div class="shortcut-box">
-      <div class="box-title">
-        <div>常用功能</div>
-        <div>
-          <span><icon-edit /></span>
-          <span class="margin-left-text">自定义</span>
-        </div>
-      </div>
-      <a-divider :margin="16" />
-      <div class="flex-row-between-center">
-        <div class="card-middling row-center" v-for="item in shortcut" :key="item.id">
-          <div>
-            <SvgIcon :name="item.svg" :size="40" />
-            <span class="shortcut-card-label">{{ item.name }}</span>
-          </div>
-        </div>
-      </div>
-    </div>
+    <Shortcut />
     <!-- 第三板指标 -->
-    <div class="target-box">
-      <div class="box-title">
-        <div>第三板指标</div>
-      </div>
-      <a-divider :margin="16" />
-      <div class="row-start-center">
-        <div class="target-grade">
-          <div class="target-grade-innerbox">
-            <div class="grade-value">{{ targetData.all.value }}</div>
-            <div class="target-title">{{ targetData.all.title }}</div>
-          </div>
-        </div>
-        <div class="target-other" v-for="(item, index) in targetData.list" :key="index">
-          <div>
-            <div>
-              <span class="other-value">{{ item.value }}</span>
-              <span>
-                <icon-play-arrow-fill class="target-up" v-if="item.type === 'up'" />
-                <icon-play-arrow-fill class="target-down" v-else />
-              </span>
-            </div>
-            <div class="target-title">{{ item.title }}</div>
-          </div>
-        </div>
-      </div>
-    </div>
+    <TargetBox />
     <!-- 财务指标 -->
-    <div class="finance-box">
-      <div class="box-title">
-        <div>财务指标</div>
-        <div>
-          <span><icon-edit /></span>
-          <span class="margin-left-text">自定义</span>
-        </div>
-      </div>
-      <a-divider :margin="16" />
-      <div class="finance-card">
-        <a-card class="finance-a-card" hoverable v-for="item in financeData" :key="item.id">
-          <div class="finance-nav">
-            <div class="tag-dot" :style="{ border: `3px solid ${item.color}` }"></div>
-            <span class="finance-nav-title">{{ item.title }}</span>
-          </div>
-          <a-statistic
-            :value-style="{
-              fontSize: '13px',
-              marginLeft: '16px',
-              marginTop: '12px'
-            }"
-            :value="item.value"
-            :value-from="0"
-            :start="true"
-            animation
-            show-group-separator
-          />
-        </a-card>
-      </div>
-    </div>
+    <Finance />
     <!-- 数据图 -->
-    <div class="data-box">
-      <div class="sell-histogram">
-        <div>
-          <span class="data-title">销售额趋势</span>
-          <span class="data-subtext">单位：元</span>
-        </div>
-        <SellHistogram />
-      </div>
-      <div class="monthly-analysis">
-        <div>
-          <span class="data-title">现金分析</span>
-          <span class="data-subtext">单位：元</span>
-        </div>
-        <MonthlyAnalysis />
-      </div>
-    </div>
+    <DataBox />
   </div>
 </template>
 
 <script setup lang="ts">
-import SellHistogram from "@/views/home/components/sell-histogram.vue";
-import MonthlyAnalysis from "@/views/home/components/monthly-analysis.vue";
-
-const shortcut = ref([
-  {
-    id: 1,
-    name: "数据查询",
-    svg: "data-queries"
-  },
-  {
-    id: 2,
-    name: "新增凭证",
-    svg: "add-voucher"
-  },
-  {
-    id: 3,
-    name: "余额查询",
-    svg: "balance-inquiry"
-  },
-  {
-    id: 4,
-    name: "财务报表",
-    svg: "financial-statement"
-  },
-  {
-    id: 5,
-    name: "数据统计",
-    svg: "data-analysis"
-  },
-  {
-    id: 6,
-    name: "更多",
-    svg: "more"
-  }
-]);
-
-const targetData = reactive({
-  all: {
-    title: "综合评分",
-    value: 9.9
-  },
-  list: [
-    {
-      title: "资产负债率",
-      value: "78%",
-      type: "up"
-    },
-    {
-      title: "毛利率",
-      value: "88%",
-      type: "down"
-    },
-    {
-      title: "营业收入增长率",
-      value: "58%",
-      type: "up"
-    },
-    {
-      title: "净利润增长率",
-      value: "76%",
-      type: "up"
-    },
-    {
-      title: "净资产收益率",
-      value: "76%",
-      type: "down"
-    }
-  ]
-});
-
-const financeData = ref([
-  {
-    id: 1,
-    title: "利润总额",
-    value: 100000,
-    color: "#ff8625"
-  },
-  {
-    id: 2,
-    title: "现金",
-    value: 750420,
-    color: "#165DFF"
-  },
-  {
-    id: 3,
-    title: "银行存款",
-    value: 100000,
-    color: "#39cbab"
-  },
-  {
-    id: 4,
-    title: "存贷",
-    value: 100000,
-    color: "#6c73ff"
-  },
-  {
-    id: 5,
-    title: "应收账款",
-    value: 100000,
-    color: "#2fd0ff"
-  }
-]);
+import Shortcut from "@/views/home/components/shortcut.vue";
+import TargetBox from "@/views/home/components/target-box.vue";
+import Finance from "@/views/home/components/finance.vue";
+import DataBox from "@/views/home/components/data-box.vue";
 </script>
 
-<style lang="scss" scoped>
-.home {
-  padding: $padding;
-  background: $color-bg-1;
-}
-.box-title {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  font-size: $font-size-body-3;
-  color: $color-text-1;
-}
-.shortcut-box {
-  .shortcut-card-label {
-    font-size: $font-size-body-3;
-    margin-left: 20px;
-    color: $color-text-2;
-  }
-}
-.target-box {
-  margin-top: calc($padding * 2);
-  .target-grade {
-    width: 180px;
-    height: 60px;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    position: relative;
-    &::before {
-      position: absolute;
-      right: 0;
-      top: 50%;
-      transform: translateY(-50%);
-      content: "";
-      height: 30px;
-      width: 1px;
-      background: $color-border-2;
-    }
-    .target-grade-innerbox {
-      text-align: center;
-      .grade-value {
-        font-family: "AliFangYuanTi";
-        font-size: $font-size-title-2;
-        font-weight: bold;
-        color: $color-danger;
-      }
-    }
-  }
-  .target-other {
-    width: 180px;
-    height: 60px;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    .other-value {
-      font-family: "AliFangYuanTi";
-      font-weight: bold;
-      margin-right: $margin-text;
-    }
-    .target-up {
-      transform: rotate(-90deg);
-      color: $color-danger;
-    }
-    .target-down {
-      transform: rotate(90deg);
-      color: $color-success;
-    }
-  }
-  .target-title {
-    margin-top: $margin-text;
-    color: $color-text-3;
-  }
-}
-.finance-box {
-  margin-top: calc($padding * 2);
-  .finance-card {
-    display: grid;
-    grid-template-columns: repeat(5, 1fr);
-    grid-template-rows: 1fr;
-    grid-column-gap: $padding;
-    grid-row-gap: 0px;
-    .finance-a-card {
-      .finance-nav {
-        display: flex;
-        align-items: center;
-        .tag-dot {
-          width: 8px;
-          height: 8px;
-          border-radius: 50%;
-          margin-right: $margin-text;
-          box-sizing: border-box;
-        }
-        .finance-nav-title {
-          font-size: $font-size-body-1;
-        }
-      }
-    }
-  }
-}
-.data-box {
-  margin-top: calc($padding * 2);
-  display: flex;
-  justify-content: space-between;
-  .data-title {
-    font-size: $font-size-body-3;
-    color: $color-text-1;
-  }
-  .data-subtext {
-    font-size: $font-size-body-2;
-    color: $color-text-2;
-    margin-left: $margin-text;
-  }
-  .sell-histogram {
-    width: calc(100% - 600px - $padding);
-    height: 400px;
-    padding-bottom: $padding;
-  }
-  .monthly-analysis {
-    margin-left: $padding;
-    width: 600px;
-    height: 400px;
-    padding-bottom: $padding;
-  }
-}
-</style>
+<style lang="scss" scoped></style>