diff --git a/public/platform-config.json b/public/platform-config.json
index 38db928..56a03c7 100644
--- a/public/platform-config.json
+++ b/public/platform-config.json
@@ -15,7 +15,7 @@
   "HideFooter": false,
   "Stretch": false,
   "SidebarStatus": true,
-  "EpThemeColor": "#409EFF",
+  "EpThemeColor": "#5070f2",
   "ShowLogo": true,
   "ShowModel": "smart",
   "MenuArrowIconNoTransition": false,
diff --git a/src/assets/home/Data_template_btn.png b/src/assets/home/Data_template_btn.png
new file mode 100644
index 0000000..f63bebc
Binary files /dev/null and b/src/assets/home/Data_template_btn.png differ
diff --git a/src/assets/home/OCR_template.png b/src/assets/home/OCR_template.png
new file mode 100644
index 0000000..8b9d9c5
Binary files /dev/null and b/src/assets/home/OCR_template.png differ
diff --git a/src/assets/home/OCR_template_btn.png b/src/assets/home/OCR_template_btn.png
new file mode 100644
index 0000000..6879e52
Binary files /dev/null and b/src/assets/home/OCR_template_btn.png differ
diff --git a/src/assets/home/analysis_icon.png b/src/assets/home/analysis_icon.png
new file mode 100644
index 0000000..455ccb0
Binary files /dev/null and b/src/assets/home/analysis_icon.png differ
diff --git a/src/assets/home/data_analysis.gif b/src/assets/home/data_analysis.gif
new file mode 100644
index 0000000..b64039b
Binary files /dev/null and b/src/assets/home/data_analysis.gif differ
diff --git a/src/assets/home/data_template.png b/src/assets/home/data_template.png
new file mode 100644
index 0000000..6b7d503
Binary files /dev/null and b/src/assets/home/data_template.png differ
diff --git a/src/assets/home/empty_icon.png b/src/assets/home/empty_icon.png
new file mode 100644
index 0000000..4cb2359
Binary files /dev/null and b/src/assets/home/empty_icon.png differ
diff --git a/src/assets/home/excel_icon.svg b/src/assets/home/excel_icon.svg
new file mode 100644
index 0000000..de6fb27
--- /dev/null
+++ b/src/assets/home/excel_icon.svg
@@ -0,0 +1,12 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_389_519)">
+<path d="M3.19998 6.11671e-06C3.04281 -0.00050621 2.8872 0.0311704 2.74273 0.0930842C2.59826 0.154998 2.46801 0.245838 2.35998 0.360006C2.14 0.600006 2.00001 0.900006 2.00001 1.20001V22.8C1.99949 22.9572 2.03117 23.1128 2.09308 23.2572C2.155 23.4017 2.24584 23.532 2.36001 23.64C2.46921 23.7526 2.5997 23.8425 2.74389 23.9043C2.88809 23.9661 3.04313 23.9986 3.20001 24H20.8C20.9571 24.0005 21.1128 23.9688 21.2572 23.9069C21.4017 23.845 21.5319 23.7542 21.64 23.64C21.7526 23.5308 21.8424 23.4003 21.9042 23.2561C21.966 23.1119 21.9986 22.9569 22 22.8V6.80002L15.2 6.11671e-06H3.19998Z" fill="#00B632"/>
+<path d="M22.0002 6.79999H16.4002C16.0844 6.7923 15.7836 6.6634 15.5602 6.44001C15.3368 6.21661 15.2079 5.91583 15.2002 5.59999V0L22.0002 6.79999Z" fill="#7FDA98"/>
+<path d="M10.5119 13.8316L6.09546 7.80469H9.14805L12.0375 12.1188L15.0595 7.80469H18.0148L13.4987 13.8316L18.2402 20.2439H15.1571L11.9718 15.6725L8.7945 20.2734H5.77148L10.5119 13.8316Z" fill="white"/>
+</g>
+<defs>
+<clipPath id="clip0_389_519">
+<rect width="24" height="24" fill="white"/>
+</clipPath>
+</defs>
+</svg>
diff --git a/src/assets/home/export_icon.svg b/src/assets/home/export_icon.svg
new file mode 100644
index 0000000..ef0f5f0
--- /dev/null
+++ b/src/assets/home/export_icon.svg
@@ -0,0 +1,5 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M7.59974 1.99999C7.59974 2.33136 7.33111 2.59999 6.99974 2.59999C6.11562 2.59999 4.9273 2.89854 3.97064 3.70803C3.03506 4.49967 2.26641 5.82535 2.26641 7.99999C2.26641 10.1746 3.03506 11.5003 3.97064 12.292C4.9273 13.1014 6.11562 13.4 6.99974 13.4C7.33111 13.4 7.59974 13.6686 7.59974 14C7.59974 14.3314 7.33111 14.6 6.99974 14.6C5.88386 14.6 4.40551 14.2319 3.19551 13.208C1.96442 12.1663 1.06641 10.492 1.06641 7.99999C1.06641 5.50797 1.96442 3.83365 3.19551 2.79196C4.40551 1.76811 5.88386 1.39999 6.99974 1.39999C7.33111 1.39999 7.59974 1.66862 7.59974 1.99999Z" fill="#5070F2"/>
+<path d="M14.8995 8.00259C14.8995 8.33396 14.6309 8.60259 14.2995 8.60259H4.99971C4.66834 8.60259 4.39971 8.33396 4.39971 8.00259C4.39971 7.67122 4.66834 7.40259 4.99971 7.40259H14.2995C14.6309 7.40259 14.8995 7.67122 14.8995 8.00259Z" fill="#5070F2"/>
+<path d="M14.7573 7.57573C14.9917 7.81004 14.9917 8.18994 14.7573 8.42426L10.7573 12.4243C10.523 12.6586 10.1431 12.6586 9.90881 12.4243C9.67449 12.1899 9.67449 11.81 9.90881 11.5757L13.4845 7.99999L9.90881 4.42426C9.67449 4.18994 9.67449 3.81004 9.90881 3.57573C10.1431 3.34142 10.523 3.34142 10.7573 3.57573L14.7573 7.57573Z" fill="#5070F2"/>
+</svg>
diff --git a/src/assets/home/home_bg.png b/src/assets/home/home_bg.png
new file mode 100644
index 0000000..20b5fe8
Binary files /dev/null and b/src/assets/home/home_bg.png differ
diff --git a/src/assets/home/resultDefaultAvatar.png b/src/assets/home/resultDefaultAvatar.png
new file mode 100644
index 0000000..da2e4b8
Binary files /dev/null and b/src/assets/home/resultDefaultAvatar.png differ
diff --git a/src/assets/home/upload_bg.png b/src/assets/home/upload_bg.png
new file mode 100644
index 0000000..56e88db
Binary files /dev/null and b/src/assets/home/upload_bg.png differ
diff --git a/src/layout/components/lay-content/index.vue b/src/layout/components/lay-content/index.vue
index 84d1396..a7d4ae7 100644
--- a/src/layout/components/lay-content/index.vue
+++ b/src/layout/components/lay-content/index.vue
@@ -148,7 +148,7 @@ const transitionMain = defineComponent({
                   />
                 </transitionMain>
               </div>
-              <LayFooter v-if="!hideFooter" />
+              <!-- <LayFooter v-if="!hideFooter" /> -->
             </el-scrollbar>
             <div v-else class="grow">
               <transitionMain :route="route">
diff --git a/src/main.ts b/src/main.ts
index f9bcbdd..16d040c 100644
--- a/src/main.ts
+++ b/src/main.ts
@@ -3,7 +3,7 @@ import router from "./router";
 import { setupStore } from "@/store";
 import { getPlatformConfig } from "./config";
 import { MotionPlugin } from "@vueuse/motion";
-// import { useEcharts } from "@/plugins/echarts";
+import { useEcharts } from "@/plugins/echarts";
 import { createApp, type Directive } from "vue";
 import { useElementPlus } from "@/plugins/elementPlus";
 import { injectResponsiveStorage } from "@/utils/responsive";
@@ -55,7 +55,7 @@ getPlatformConfig(app).then(async config => {
   app.use(router);
   await router.isReady();
   injectResponsiveStorage(app, config);
-  app.use(MotionPlugin).use(useElementPlus).use(Table);
+  app.use(MotionPlugin).use(useElementPlus).use(Table).use(useEcharts);
   // .use(PureDescriptions)
   // .use(useEcharts);
   app.mount("#app");
diff --git a/src/plugins/echarts.ts b/src/plugins/echarts.ts
index cb62d96..12d6315 100644
--- a/src/plugins/echarts.ts
+++ b/src/plugins/echarts.ts
@@ -1,6 +1,6 @@
 import type { App } from "vue";
 import * as echarts from "echarts/core";
-import { PieChart, BarChart, LineChart } from "echarts/charts";
+import { PieChart, BarChart, LineChart, CustomChart } from "echarts/charts";
 import { CanvasRenderer, SVGRenderer } from "echarts/renderers";
 import {
   GridComponent,
@@ -30,7 +30,8 @@ use([
   ToolboxComponent,
   TooltipComponent,
   DataZoomComponent,
-  VisualMapComponent
+  VisualMapComponent,
+  CustomChart
 ]);
 
 /**
diff --git a/src/views/welcome/components/AccountChartBar.vue b/src/views/welcome/components/AccountChartBar.vue
new file mode 100644
index 0000000..e3de169
--- /dev/null
+++ b/src/views/welcome/components/AccountChartBar.vue
@@ -0,0 +1,505 @@
+<script setup lang="ts">
+import { useECharts } from "@pureadmin/utils";
+import { type PropType, ref, computed, watch, nextTick } from "vue";
+import * as echarts from "echarts/core";
+
+const props = defineProps({
+  requireData: {
+    type: Array as PropType<Array<number>>,
+    default: () => []
+  },
+  questionData: {
+    type: Array as PropType<Array<number>>,
+    default: () => []
+  }
+});
+
+const accountChartBar = ref();
+const { setOptions } = useECharts(accountChartBar);
+
+// 定义 random 函数
+const random = (min: number, max: number): number => {
+  return Math.floor(Math.random() * (max - min)) + min;
+};
+
+// 注册形状绘制函数
+const registerShapeFun = () => {
+  const offsetX = 10;
+  const offsetY = 5;
+
+  // 绘制左侧面
+  const CubeLeft = echarts.graphic.extendShape({
+    shape: {
+      x: 0,
+      y: 0
+    },
+    buildPath: (
+      ctx: CanvasRenderingContext2D,
+      shape: { xAxisPoint: number[]; x: number; y: number }
+    ) => {
+      const xAxisPoint = shape.xAxisPoint;
+      const c0 = [shape.x, shape.y];
+      const c1 = [shape.x - offsetX, shape.y - offsetY];
+      const c2 = [xAxisPoint[0] - offsetX, xAxisPoint[1] - offsetY];
+      const c3 = [xAxisPoint[0], xAxisPoint[1]];
+      ctx.moveTo(c0[0], c0[1]);
+      ctx.lineTo(c1[0], c1[1]);
+      ctx.lineTo(c2[0], c2[1]);
+      ctx.lineTo(c3[0], c3[1]);
+      ctx.closePath();
+    }
+  });
+
+  // 绘制右侧面
+  const CubeRight = echarts.graphic.extendShape({
+    shape: {
+      x: 0,
+      y: 0
+    },
+    buildPath: (
+      ctx: CanvasRenderingContext2D,
+      shape: { xAxisPoint: number[]; x: number; y: number }
+    ) => {
+      const xAxisPoint = shape.xAxisPoint;
+      const c1 = [shape.x, shape.y];
+      const c2 = [xAxisPoint[0], xAxisPoint[1]];
+      const c3 = [xAxisPoint[0] + offsetX, xAxisPoint[1] - offsetY];
+      const c4 = [shape.x + offsetX, shape.y - offsetY];
+      ctx.moveTo(c1[0], c1[1]);
+      ctx.lineTo(c2[0], c2[1]);
+      ctx.lineTo(c3[0], c3[1]);
+      ctx.lineTo(c4[0], c4[1]);
+      ctx.closePath();
+    }
+  });
+
+  // 绘制顶面
+  const CubeTop = echarts.graphic.extendShape({
+    shape: {
+      x: 0,
+      y: 0
+    },
+    buildPath: (
+      ctx: CanvasRenderingContext2D,
+      shape: { x: number; y: number }
+    ) => {
+      const c1 = [shape.x, shape.y];
+      const c2 = [shape.x + offsetX, shape.y - offsetY];
+      const c3 = [shape.x, shape.y - offsetX];
+      const c4 = [shape.x - offsetX, shape.y - offsetY];
+      ctx.moveTo(c1[0], c1[1]);
+      ctx.lineTo(c2[0], c2[1]);
+      ctx.lineTo(c3[0], c3[1]);
+      ctx.lineTo(c4[0], c4[1]);
+      ctx.closePath();
+    }
+  });
+
+  return [CubeLeft, CubeRight, CubeTop];
+};
+
+// 生成形状函数
+const [CubeLeft, CubeRight, CubeTop] = registerShapeFun();
+// 注册三个面图形
+echarts.graphic.registerShape("CubeLeft", CubeLeft);
+echarts.graphic.registerShape("CubeRight", CubeRight);
+echarts.graphic.registerShape("CubeTop", CubeTop);
+
+// 数据
+const colorArr = [
+  ["#3B9FFE", "#5070F2", "#5070F2"],
+  ["#FFAC06", "#FFDA8D", "#FFB114"]
+];
+
+const seriesArr: number[][] = [];
+const xAxisData: string[] = [];
+const seriesData: any[] = [];
+
+// 生成数据
+for (let d = 0; d < 6; d++) {
+  xAxisData.push("2023年" + d + 1 + "月");
+}
+
+for (let i = 0; i < 2; i++) {
+  seriesArr[i] = [];
+  for (let x = 0; x < 6; x++) {
+    seriesArr[i].push(random(10, 80));
+  }
+}
+
+for (let index = 0; index < 2; index++) {
+  seriesData.push({
+    type: "custom",
+    name: index === 0 ? "出账金额" : "进账金额",
+    renderItem: (params: any, api: any) => {
+      const location = api.coord([api.value(0), api.value(1)]);
+      return {
+        type: "group",
+        x: index === 1 ? 18 : -12,
+        label: {
+          show: true
+        },
+        children: [
+          {
+            type: "CubeLeft",
+            shape: {
+              api,
+              xValue: api.value(0),
+              yValue: api.value(1),
+              x: location[0],
+              y: location[1],
+              xAxisPoint: api.coord([api.value(0), 0])
+            },
+            style: {
+              fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                {
+                  offset: 0,
+                  color: colorArr[index][0]
+                },
+                {
+                  offset: 1,
+                  color: colorArr[index][1]
+                }
+              ])
+            }
+          },
+          {
+            type: "CubeRight",
+            shape: {
+              api,
+              xValue: api.value(0),
+              yValue: api.value(1),
+              x: location[0],
+              y: location[1],
+              xAxisPoint: api.coord([api.value(0), 0])
+            },
+            style: {
+              fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                {
+                  offset: 0,
+                  color: colorArr[index][0]
+                },
+                {
+                  offset: 1,
+                  color: colorArr[index][1]
+                }
+              ])
+            }
+          },
+          {
+            type: "CubeTop",
+            shape: {
+              api,
+              xValue: api.value(0),
+              yValue: api.value(1),
+              x: location[0],
+              y: location[1],
+              xAxisPoint: api.coord([api.value(0), 0])
+            },
+            style: {
+              fill: colorArr[index][2]
+            }
+          }
+        ]
+      };
+    },
+    data: seriesArr[index]
+  });
+}
+const yData1 = [100, 70, 20, 90, 50, 180];
+const yData2 = [10, 50, 20, 30, 50, 100];
+
+watch(
+  () => props,
+  async () => {
+    await nextTick(); // 确保DOM更新完成后再执行
+    setOptions({
+      // container: ".bar-card",
+      // backgroundColor: "rgba(154,174,255,0.1)",
+      tooltip: {
+        // show: false
+        trigger: "axis",
+        textStyle: {
+          fontSize: 20 // 字体大小
+        },
+        axisPointer: {
+          type: "shadow"
+        }
+      },
+      toolbox: {
+        right: 15,
+        feature: {
+          // dataZoom: { yAxisIndex: "none" }, // 数据区域缩放
+          // restore: { show: true }, // 重置
+          myFull: {
+            // 全屏
+            show: false,
+            title: "全屏",
+            icon: "path://M432.45,595.444c0,2.177-4.661,6.82-11.305,6.82c-6.475,0-11.306-4.567-11.306-6.82s4.852-6.812,11.306-6.812C427.841,588.632,432.452,593.191,432.45,595.444L432.45,595.444z M421.155,589.876c-3.009,0-5.448,2.495-5.448,5.572s2.439,5.572,5.448,5.572c3.01,0,5.449-2.495,5.449-5.572C426.604,592.371,424.165,589.876,421.155,589.876L421.155,589.876z M421.146,591.891c-1.916,0-3.47,1.589-3.47,3.549c0,1.959,1.554,3.548,3.47,3.548s3.469-1.589,3.469-3.548C424.614,593.479,423.062,591.891,421.146,591.891L421.146,591.891zM421.146,591.891",
+            onclick: e => {
+              // 全屏查看
+              if (accountChartBar.value.requestFullScreen) {
+                // HTML W3C 提议
+                accountChartBar.value.requestFullScreen();
+              } else if (accountChartBar.value.msRequestFullscreen) {
+                // IE11
+                accountChartBar.value.msRequestFullScreen();
+              } else if (accountChartBar.value.webkitRequestFullScreen) {
+                // Webkit
+                accountChartBar.value.webkitRequestFullScreen();
+              } else if (accountChartBar.value.mozRequestFullScreen) {
+                // Firefox
+                accountChartBar.value.mozRequestFullScreen();
+              }
+              // 退出全屏
+              if (accountChartBar.value.requestFullScreen) {
+                document.exitFullscreen();
+              } else if (accountChartBar.value.msRequestFullScreen) {
+                document.exitFullscreen();
+              } else if (accountChartBar.value.webkitRequestFullScreen) {
+                document.webkitCancelFullScreen();
+              } else if (accountChartBar.value.mozRequestFullScreen) {
+                document.mozCancelFullScreen();
+              }
+            }
+          },
+          saveAsImage: {
+            show: false,
+            title: "保存"
+          } // 导出图片
+        }
+      },
+      color: ["#5070F2", "#FFAC06", "#00B58C", "#082FF8"],
+      legend: {
+        show: true,
+        // right: 30,
+        bottom: 6,
+        itemGap: 30,
+        itemWidth: 12,
+        itemHeight: 8,
+        data: ["出账金额", "进账金额", "出账笔数", "进账笔数"],
+        textStyle: {
+          fontSize: 12,
+          color: "#666"
+        }
+      },
+      grid: {
+        top: 60,
+        left: 20,
+        right: 20,
+        bottom: 40,
+        containLabel: true
+      },
+      xAxis: [
+        {
+          type: "category",
+          axisLine: {
+            show: true,
+            lineStyle: {
+              color: "rgba(80,112,242,1)"
+            }
+          },
+          boundaryGap: true,
+          axisTick: {
+            show: false
+          },
+          splitArea: {
+            show: false
+          },
+          axisLabel: {
+            inside: false,
+            interval: 0,
+            rotate: 0,
+            // textStyle: {
+            color: "#8C8C8C",
+            fontWeight: 400,
+            fontSize: 12,
+            // },
+            margin: 15
+          },
+          data: xAxisData
+        }
+      ],
+      yAxis: [
+        {
+          type: "value",
+          name: `{a|} {b|出入账趋势}`,
+          nameTextStyle: {
+            color: "#333",
+            // align: "center",
+            padding: [15, 0, 0, 20],
+            // fontSize: 16,
+            // fontWeight: "bold",
+            verticalAlign: "middle",
+            rich: {
+              a: {
+                backgroundColor: "#5070F2",
+                width: 2,
+                height: 17,
+                verticalAlign: "middle"
+              },
+              b: {
+                padding: [2, 0, 0, 0],
+                fontSize: 16,
+                fontWeight: "bold"
+              }
+            }
+          },
+          nameGap: 40,
+          axisTick: {
+            show: false
+          },
+          axisLine: {
+            show: false,
+            lineStyle: {
+              color: "#333"
+            }
+          },
+          splitLine: {
+            show: true,
+            lineStyle: {
+              type: "dashed",
+              color: "rgba(80,112,242,0.3)"
+            }
+          },
+          axisLabel: {
+            // textStyle: {
+            color: "#8C8C8C",
+            fontWeight: 400,
+            fontSize: 12,
+            // },
+            formatter: "{value}",
+            margin: 15
+          }
+        },
+        {
+          type: "value",
+          // name: "%",
+          nameGap: 30,
+          position: "right",
+          nameTextStyle: {
+            color: "#ffffff",
+            fontWeight: 400,
+            fontSize: 16
+          },
+          axisLine: {
+            show: true,
+            lineStyle: {
+              width: 1,
+              color: "rgba(239, 247, 253, .1)"
+            }
+          },
+          splitLine: {
+            show: true,
+            lineStyle: {
+              color: "rgba(239, 247, 253, .1)"
+            }
+          },
+          axisTick: {
+            show: false
+          },
+          axisLabel: {
+            fontSize: 12,
+            color: "#8C8C8C"
+          },
+          min: 0,
+          max: Math.ceil(Math.max.apply(null, yData1) / 5) * 5,
+          interval: Math.ceil(Math.max.apply(null, yData1) / 4)
+        }
+      ],
+      series: [
+        ...seriesData,
+        {
+          type: "bar",
+          name: "出账金额",
+          itemStyle: {
+            color: "transparent"
+          },
+          tooltip: {
+            show: false
+          },
+          data: seriesArr[0]
+        },
+        {
+          type: "bar",
+          itemStyle: {
+            color: "transparent"
+          },
+          tooltip: {
+            show: false
+          },
+          data: seriesArr[1]
+        },
+        {
+          name: "出账笔数",
+          type: "line",
+          showSymbol: true,
+          // smooth: true,
+          symbol: "circle",
+          symbolSize: 8,
+          yAxisIndex: 1,
+          itemStyle: {
+            color: "#00B58C"
+          },
+          lineStyle: {
+            width: 2
+          },
+          // areaStyle: {
+          //   normal: {
+          //     color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+          //       {
+          //         offset: 0,
+          //         color: "rgba(67, 239, 255, .3)"
+          //       },
+          //       {
+          //         offset: 1,
+          //         color: "rgba(1, 17, 49, .3)"
+          //       }
+          //     ])
+          //   }
+          // },
+          data: yData1
+        },
+        {
+          name: "进账笔数",
+          type: "line",
+          showSymbol: true,
+          // smooth: true,
+          symbol: "circle",
+          symbolSize: 8,
+          yAxisIndex: 1,
+          itemStyle: {
+            color: "#082FF8"
+          },
+          lineStyle: {
+            width: 2
+          },
+          // areaStyle: {
+          //   normal: {
+          //     color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+          //       {
+          //         offset: 0,
+          //         color: "rgba(67, 239, 255, .3)"
+          //       },
+          //       {
+          //         offset: 1,
+          //         color: "rgba(1, 17, 49, .3)"
+          //       }
+          //     ])
+          //   }
+          // },
+          data: yData2
+        }
+      ]
+    });
+  },
+  {
+    deep: true,
+    immediate: true
+  }
+);
+</script>
+
+<template>
+  <div ref="accountChartBar" style="width: 100%; height: 100%" />
+</template>
diff --git a/src/views/welcome/components/AccountChartPie.vue b/src/views/welcome/components/AccountChartPie.vue
new file mode 100644
index 0000000..053fcfd
--- /dev/null
+++ b/src/views/welcome/components/AccountChartPie.vue
@@ -0,0 +1,176 @@
+<script setup lang="ts">
+import { useECharts } from "@pureadmin/utils";
+import { type PropType, ref, computed, watch, nextTick } from "vue";
+import * as echarts from "echarts/core";
+
+const props = defineProps({
+  requireData: {
+    type: Array as PropType<Array<number>>,
+    default: () => []
+  },
+  questionData: {
+    type: Array as PropType<Array<number>>,
+    default: () => []
+  }
+});
+
+const accountChartPie = ref();
+const { setOptions } = useECharts(accountChartPie);
+
+// 定义 random 函数
+const random = (min: number, max: number): number => {
+  return Math.floor(Math.random() * (max - min)) + min;
+};
+const yData = [
+  { value: "36", name: "银联入账" },
+  { value: "48", name: "支付机构提现" },
+  { value: "31", name: "电子汇入" },
+  { value: "29", name: "消费" },
+  { value: "59", name: "转账存入" }
+];
+const yData2 = [10, 50, 20, 30, 50, 100];
+
+watch(
+  () => props,
+  async () => {
+    await nextTick(); // 确保DOM更新完成后再执行
+    setOptions({
+      // container: ".bar-card",
+      // backgroundColor: "rgba(154,174,255,0.1)",
+      tooltip: {
+        trigger: "item",
+        formatter: function (params) {
+          console.log(params);
+          return params.name + ":" + params.value + "元";
+        }
+      },
+      title: {
+        text: "{a|} {b|资金用途}",
+        left: 20,
+        top: 12,
+        textStyle: {
+          lineHeight: 24,
+          rich: {
+            a: {
+              backgroundColor: "#5070F2",
+              width: 2,
+              height: 17,
+              verticalAlign: "middle"
+            },
+            b: {
+              padding: [2, 0, 0, 0],
+              fontSize: 16,
+              color: "#333",
+              // color: "333",
+              fontWeight: "bold"
+            }
+          }
+        }
+      },
+      grid: {
+        top: 60,
+        left: 20,
+        right: 20,
+        bottom: 40,
+        containLabel: true
+      },
+      series: [
+        {
+          type: "pie",
+          radius: ["20%", "60%"],
+          center: ["50%", "50%"],
+          itemStyle: {
+            // borderRadius: 10,
+            // borderWidth: 2,
+            color: function (params) {
+              const colorList = [
+                {
+                  c1: "#FFCC4A",
+                  c2: "#FF7C09"
+                },
+                {
+                  c1: "#028FF5",
+                  c2: "#0032FF"
+                },
+                {
+                  c1: "#06EA7C",
+                  c2: "#04FFF2"
+                },
+                {
+                  c1: "#FF7D05",
+                  c2: "#FF0103"
+                },
+                {
+                  c1: "#D19EFF",
+                  c2: "#8500FF"
+                }
+              ];
+              return new echarts.graphic.LinearGradient(0, 0, 1, 0, [
+                {
+                  offset: 0,
+                  color: colorList[params.dataIndex].c1
+                },
+                {
+                  offset: 1,
+                  color: colorList[params.dataIndex].c2
+                }
+              ]);
+            }
+          },
+          label: {
+            lineHeight: 25,
+            formatter: function (params) {
+              console.log(params);
+              return (
+                "{title|" +
+                params.name +
+                "}\n" +
+                "{value|" +
+                params.value +
+                "元" +
+                "}"
+              );
+            },
+            rich: {
+              title: {
+                fontSize: 14,
+                fontFamily: "PingFang SC",
+                fontWeight: 500,
+                color: "#333"
+              },
+              value: {
+                fontSize: 14,
+                fontFamily: "PingFang SC",
+                fontWeight: 500,
+                color: "#333"
+              }
+            },
+            edgeDistance: 10
+          },
+          labelLine: {
+            show: true,
+            length2: 10,
+            length: 30
+          },
+          data: yData as any
+        }
+      ],
+      emphasis: {
+        itemStyle: {
+          shadowBlur: 10,
+          shadowOffsetX: 0,
+          shadowColor: "rgba(0, 0, 0, 0.5)"
+        }
+      }
+    });
+  },
+  {
+    deep: true,
+    immediate: true
+  }
+);
+</script>
+
+<template>
+  <div ref="accountChartPie" style="width: 100%; height: 100%" />
+</template>
diff --git a/src/views/welcome/components/index.ts b/src/views/welcome/components/index.ts
new file mode 100644
index 0000000..df3cb10
--- /dev/null
+++ b/src/views/welcome/components/index.ts
@@ -0,0 +1,2 @@
+export { default as AccountChartBar } from "./AccountChartBar.vue";
+export { default as AccountChartPie } from "./AccountChartPie.vue";
diff --git a/src/views/welcome/index.vue b/src/views/welcome/index.vue
index 100d435..d54f680 100644
--- a/src/views/welcome/index.vue
+++ b/src/views/welcome/index.vue
@@ -1,9 +1,688 @@
 <script setup lang="ts">
+import { ref, reactive, toRaw, onMounted, onBeforeUnmount } from "vue";
+import type { UploadProps, UploadUserFile } from "element-plus";
+import { Search } from "@element-plus/icons-vue";
+import excelIcon from "@/assets/home/excel_icon.svg?component";
+import exportIcon from "@/assets/home/export_icon.svg?component";
+import emptyIcon from "@/assets/home/empty_icon.png";
+import { AccountChartBar, AccountChartPie } from "./components";
+
 defineOptions({
   name: "Welcome"
 });
+const textarea = ref("");
+const activeName = ref("1");
+const inputValue = ref("");
+const checkedValue = ref(false);
+const checkAll = ref(false);
+
+const format = percentage => (percentage === 100 ? "分析完成" : "数据分析中");
+const fileList = ref<UploadUserFile[]>([
+  {
+    name: "food.jpeg",
+    url: "https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100"
+  }
+]);
+
+const handleChange: UploadProps["onChange"] = (uploadFile, uploadFiles) => {
+  fileList.value = fileList.value.slice(-3);
+};
+const handleChangeCollapse = (val: string) => {
+  console.log(val);
+  activeName.value = val;
+};
+const handleCheckAllChange = (val: boolean) => {
+  console.log(val);
+};
+const barChartData = [
+  {
+    requireData: [2101, 5288, 4239, 4962, 6752, 5208, 7450],
+    questionData: [2216, 1148, 1255, 1788, 4821, 1973, 4379]
+  },
+  {
+    requireData: [2101, 3280, 4400, 4962, 5752, 6889, 7600],
+    questionData: [2116, 3148, 3255, 3788, 4821, 4970, 5390]
+  }
+];
+const pageNum = ref(3);
 </script>
 
 <template>
-  <h1>Pure-Admin-Thin（非国际化版本）1</h1>
+  <div class="home-page">
+    <div v-if="pageNum === 1" class="home-page-type">
+      <div class="home-page-type-title">欢迎使用智能情报分析系统</div>
+      <div class="home-page-type-tip">请上传需要分析的文件</div>
+      <div class="home-page-type-upload">
+        <el-upload
+          class="upload-box"
+          drag
+          action="https://run.mocky.io/v3/9d059bf9-4660-45f2-925d-ce80ad6c4d15"
+        >
+          <div>
+            <img src="@/assets/home/data_template.png" />
+          </div>
+          <div class="mt-14 mb-5">
+            <img src="@/assets/home/Data_template_btn.png" />
+          </div>
+          <div class="el-upload__text"><em>点击上传</em>或拖拽支持的文件</div>
+        </el-upload>
+        <el-upload
+          class="upload-box"
+          drag
+          action="https://run.mocky.io/v3/9d059bf9-4660-45f2-925d-ce80ad6c4d15"
+        >
+          <div>
+            <img src="@/assets/home/OCR_template.png" />
+          </div>
+          <div class="mt-14 mb-5">
+            <img src="@/assets/home/OCR_template_btn.png" />
+          </div>
+          <div class="el-upload__text"><em>点击上传</em>或拖拽支持的文件</div>
+        </el-upload>
+      </div>
+      <div class="home-page-type-footer">
+        上传资金明细数据请确保有如下信息的表头:交易卡号、交易账号、交易证件号码、交易户名、交易日期、交易金额、交易余额、收付标志、对手户名、对手账号、对手卡号、对手开户银行、摘要说明、IP地址、MAC地址、备注、案件编号，且已将交易证件号码补充完整。
+      </div>
+    </div>
+    <div v-else-if="pageNum === 2">
+      <div class="home-page-analysis">
+        <div class="analysis-box">
+          <div class="analysis-box-top">
+            <div class="analysis-box-top-left">
+              <div class="mr-3">
+                <component :is="toRaw(excelIcon)" />
+              </div>
+              <div class="analysis-box-top-file-name">
+                当前文件：<span>{{ fileList[0].name }}</span>
+              </div>
+            </div>
+            <div class="analysis-box-top-right">
+              <el-upload
+                v-model:file-list="fileList"
+                :show-file-list="false"
+                class="upload-btn"
+                action="https://run.mocky.io/v3/9d059bf9-4660-45f2-925d-ce80ad6c4d15"
+                :limit="1"
+                :on-change="handleChange"
+              >
+                <el-button type="primary" color="#5070F2" plain
+                  >上传文件</el-button
+                >
+              </el-upload>
+            </div>
+          </div>
+          <div class="analysis-box-middle">
+            <div class="mr-3">
+              <el-input
+                v-model="textarea"
+                style="width: 1263px"
+                :autosize="{ minRows: 1, maxRows: 4 }"
+                type="textarea"
+                placeholder="请输入证件号进行分析"
+              />
+            </div>
+            <div>
+              <el-button type="primary" color="#5070F2">开始分析</el-button>
+            </div>
+          </div>
+          <div class="analysis-box-bottom">
+            可输入单个证件号码进行分析，若需分析多个主体，请将证件号码用“|”隔开
+          </div>
+          <div class="analysis-box-icon">
+            <img src="@/assets/home/analysis_icon.png" />
+          </div>
+        </div>
+      </div>
+    </div>
+    <div v-else class="home-page-result">
+      <div class="home-page-result-top">
+        <el-collapse
+          v-model="activeName"
+          accordion
+          @change="handleChangeCollapse"
+        >
+          <el-collapse-item name="1">
+            <template #title>
+              <div class="collapse-header">
+                <div class="collapse-header-left">
+                  <div class="mr-3">
+                    <component :is="toRaw(excelIcon)" />
+                  </div>
+                  <div class="collapse-header-file-name">
+                    当前文件：<span>{{ fileList[0].name }}</span>
+                  </div>
+                  <div class="collapse-header-top-right">
+                    <el-upload
+                      v-model:file-list="fileList"
+                      :show-file-list="false"
+                      class="upload-btn"
+                      action="https://run.mocky.io/v3/9d059bf9-4660-45f2-925d-ce80ad6c4d15"
+                      :limit="1"
+                      :on-change="handleChange"
+                    >
+                      <el-button
+                        type="primary"
+                        color="#5070F2"
+                        class="w[100px] h-8"
+                        plain
+                        @click.stop="
+                          () => {
+                            console.log('111');
+                          }
+                        "
+                        >上传文件</el-button
+                      >
+                    </el-upload>
+                  </div>
+                </div>
+                <div class="collapse-header-right">
+                  {{ activeName === "1" ? "收起文件" : "展开文件" }}
+                </div>
+              </div>
+            </template>
+            <div class="collapse-box">
+              <div class="collapse-box-middle">
+                <div class="mr-3">
+                  <el-input
+                    v-model="textarea"
+                    style="width: 1263px"
+                    :autosize="{ minRows: 1, maxRows: 4 }"
+                    type="textarea"
+                    placeholder="请输入证件号进行分析"
+                  />
+                </div>
+                <div>
+                  <el-button type="primary" color="#5070F2">开始分析</el-button>
+                </div>
+              </div>
+              <div class="collapse-box-bottom">
+                可输入单个证件号码进行分析，若需分析多个主体，请将证件号码用“|”隔开
+              </div>
+            </div>
+          </el-collapse-item>
+        </el-collapse>
+      </div>
+      <div class="home-page-result-middle">
+        <div class="home-page-result-content">
+          <div class="home-page-result-content-left">
+            <div class="home-page-result-content-left-top">
+              <el-input
+                v-model="inputValue"
+                size="large"
+                class="border-0"
+                placeholder="搜索"
+                :prefix-icon="Search"
+              />
+            </div>
+            <div class="home-page-result-content-left-middle">
+              <div class="result-content-left-middle-box">
+                <el-checkbox v-model="checkedValue" />
+                <div class="left-middle-box">
+                  <div class="w[48px] h[48px] mr-3">
+                    <img src="@/assets/home/resultDefaultAvatar.png" />
+                  </div>
+                  <div class="flex-1 left-middle-box-bottom">
+                    <img src="@/assets/home/data_analysis.gif" />
+                    <span>数据分析中...</span>
+                  </div>
+                </div>
+              </div>
+            </div>
+            <div class="home-page-result-content-left-bottom">
+              <div>
+                <el-checkbox v-model="checkAll" @change="handleCheckAllChange">
+                  全选
+                </el-checkbox>
+              </div>
+              <el-button
+                link
+                class="result-content-left-bottom-btn"
+                :icon="exportIcon"
+                >导出已分析文件</el-button
+              >
+            </div>
+          </div>
+          <div class="home-page-result-content-right">
+            <div class="home-page-result-content-right-header">
+              <el-button type="primary" color="#5070F2">查看文档</el-button>
+            </div>
+            <div class="home-page-result-content-right-content">
+              <el-empty
+                v-if="false"
+                :image="emptyIcon"
+                :image-size="372"
+                description="资金数据分析中~"
+                class="mt-52"
+              />
+              <div v-else class="result-content-right-content-box">
+                <div class="in-and-out-account-box-first">
+                  <div class="account-box-first-left w-[52%] h-[370px]">
+                    <AccountChartBar
+                      :requireData="barChartData[0].requireData"
+                      :questionData="barChartData[1].questionData"
+                    />
+                  </div>
+                  <div class="account-box-first-right w-[47%] h-[370px]">
+                    <AccountChartPie />
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
 </template>
+<style lang="scss" scoped>
+.home-page {
+  width: 100%;
+  height: 100%;
+  margin: 0 !important;
+  background-image: url("@/assets/home/home_bg.png");
+  background-repeat: no-repeat;
+  background-size: 100% 100%;
+}
+
+.home-page-type {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+  height: 100%;
+
+  .home-page-type-title {
+    font-size: 32px;
+    font-style: normal;
+    font-weight: bold;
+    line-height: 38px;
+    color: #333;
+    text-align: left;
+    text-transform: none;
+  }
+
+  .home-page-type-tip {
+    margin: 16px 0 32px;
+    font-size: 20px;
+    font-style: normal;
+    // font-family: "PingFang SC";
+    font-weight: 500;
+    line-height: 23px;
+    color: #333;
+    text-align: left;
+    text-transform: none;
+  }
+
+  .home-page-type-upload {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    margin-bottom: 16px;
+
+    .upload-box {
+      width: 710px;
+      height: 360px;
+
+      :deep(.el-upload-dragger) {
+        width: 710px;
+        height: 360px;
+        background-color: transparent;
+        background-image: url("@/assets/home/upload_bg.png");
+        background-repeat: no-repeat;
+        background-size: 100% 100%;
+        border-radius: 14px;
+      }
+
+      .el-upload__text {
+        font-size: 16px;
+        font-style: normal;
+        // font-family: "PingFang SC";
+        font-weight: 500;
+        color: #333;
+        text-transform: none;
+
+        em {
+          color: #5070f2;
+          text-decoration-line: underline;
+        }
+      }
+    }
+
+    & > :first-child {
+      margin-right: 20px;
+    }
+  }
+
+  .home-page-type-footer {
+    width: 1440px;
+    font-size: 16px;
+    font-style: normal;
+    // font-family: "PingFang SC";
+    font-weight: 500;
+    line-height: 24px;
+    color: #666;
+    text-align: left;
+    text-transform: none;
+  }
+}
+
+.home-page-analysis {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+  height: 100%;
+
+  .analysis-box {
+    position: relative;
+    box-sizing: border-box;
+    width: 1440px;
+    height: 240px;
+    padding: 64px 32px;
+    margin-top: 222px;
+    background: linear-gradient(180deg, #d6deff 0%, #fff 19%);
+    border: 2px solid rgb(80 112 242 / 30%);
+    border-radius: 12px;
+
+    .analysis-box-top {
+      display: flex;
+      place-items: center center;
+
+      .analysis-box-top-left {
+        display: flex;
+        place-items: center center;
+        margin-right: 24px;
+
+        .analysis-box-top-file-name {
+          font-size: 16px;
+          font-style: normal;
+          // font-family: "PingFang SC";
+          font-weight: bold;
+          line-height: 19px;
+          color: #666;
+          text-align: left;
+          text-transform: none;
+
+          span {
+            font-weight: bold;
+            color: #333;
+          }
+        }
+      }
+    }
+
+    .analysis-box-middle {
+      display: flex;
+      place-items: center center;
+      margin: 16px 0 12px;
+    }
+
+    .analysis-box-bottom {
+      font-size: 14px;
+      font-style: normal;
+      // font-family: "PingFang SC";
+      font-weight: 500;
+      line-height: 24px;
+      color: #666;
+      text-align: left;
+      text-transform: none;
+    }
+
+    .analysis-box-icon {
+      position: absolute;
+      top: -70px;
+      right: 0;
+    }
+  }
+}
+
+.home-page-result {
+  width: 100%;
+  height: 100%;
+
+  .home-page-result-top {
+    width: 100%;
+    margin-top: 1px;
+    background: #fff;
+
+    :deep(.el-collapse-item__header) {
+      box-sizing: border-box;
+      height: 80px;
+      padding: 24px 32px;
+    }
+
+    :deep(.el-collapse-item__arrow) {
+      color: #5070f2;
+    }
+
+    .collapse-header {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      width: 100%;
+
+      .collapse-header-left {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+
+        .collapse-header-file-name {
+          margin-right: 24px;
+          font-size: 16px;
+          font-style: normal;
+          // font-family: "PingFang SC";
+          font-weight: bold;
+          line-height: 19px;
+          color: #666;
+          text-align: left;
+          text-transform: none;
+
+          span {
+            font-weight: bold;
+            color: #333;
+          }
+        }
+      }
+
+      .collapse-header-right {
+        margin-right: 8px;
+        font-size: 16px;
+        font-style: normal;
+        // font-family: "PingFang SC";
+        font-weight: 500;
+        line-height: 19px;
+        color: #5070f2;
+        text-align: left;
+        text-transform: none;
+      }
+    }
+
+    .collapse-box {
+      box-sizing: border-box;
+      padding: 0 32px;
+
+      .collapse-box-middle {
+        display: flex;
+        place-items: center center;
+        margin-bottom: 8px;
+      }
+
+      .collapse-box-bottom {
+        font-size: 14px;
+        font-style: normal;
+        // font-family: "PingFang SC";
+        font-weight: 500;
+        line-height: 24px;
+        color: #666;
+        text-align: left;
+        text-transform: none;
+      }
+    }
+  }
+
+  .home-page-result-middle {
+    box-sizing: border-box;
+    width: 100%;
+    height: calc(100% - 170px);
+    padding: 20px 32px 24px;
+
+    .home-page-result-content {
+      box-sizing: border-box;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      width: 100%;
+      height: 100%;
+      background: #fff;
+      border-radius: 8px;
+
+      .home-page-result-content-left {
+        z-index: 99;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        justify-content: center;
+        width: 340px;
+        height: 100%;
+        border-radius: 8px 0 0 8px;
+        box-shadow: 1px 0 0 0 #dcdcdc;
+
+        .home-page-result-content-left-top {
+          width: 100%;
+          height: 40px;
+
+          :deep(.el-input__wrapper) {
+            border: none !important; /* 使用 !important 来确保覆盖默认样式 */
+            box-shadow: none !important;
+          }
+        }
+
+        .home-page-result-content-left-middle {
+          box-sizing: border-box;
+          flex: 1;
+          width: 100%;
+          padding: 16px;
+
+          .result-content-left-middle-box {
+            display: flex;
+            align-items: center;
+            justify-content: space-between;
+            width: 100%;
+            height: 86px;
+
+            .left-middle-box {
+              box-sizing: border-box;
+              display: flex;
+              align-items: center;
+              justify-content: space-between;
+              width: 282px;
+              height: 100%;
+              padding: 0 16px;
+              background: #eef1fe;
+              border: 1px solid #5070f2;
+              border-radius: 4px;
+
+              .left-middle-box-bottom {
+                display: flex;
+                align-items: center;
+                justify-content: center;
+
+                span {
+                  margin-left: 4px;
+                  font-size: 12px;
+                  font-style: normal;
+                  // font-family: "PingFang SC";
+                  font-weight: 500;
+                  line-height: 22px;
+                  color: #000;
+                  text-align: left;
+                  text-transform: none;
+                }
+              }
+              // :deep(.el-progress-bar__outer) {
+              // }
+            }
+          }
+        }
+
+        .home-page-result-content-left-bottom {
+          box-sizing: border-box;
+          display: flex;
+          align-items: center;
+          justify-content: space-between;
+          width: 100%;
+          height: 46px;
+          padding-inline: 16px;
+          background: #fcfdff;
+          border-radius: 0 0 8px 8px;
+          box-shadow: 0 -4px 8px 0 #f1f5fe;
+
+          .result-content-left-bottom-btn {
+            color: #5070f2;
+          }
+        }
+      }
+
+      .home-page-result-content-right {
+        flex: 1;
+        width: 100%;
+        height: 100%;
+
+        .home-page-result-content-right-header {
+          box-sizing: border-box;
+          display: flex;
+          align-items: center;
+          justify-content: flex-end;
+          width: 100%;
+          height: 64px;
+          padding: 16px;
+          background: #fcfdff;
+          border-radius: 0 8px 0 0;
+          box-shadow: 0 1px 0 0 #e0e0e0;
+        }
+
+        .home-page-result-content-right-content {
+          box-sizing: border-box;
+          width: 100%;
+          height: 100%;
+
+          :deep(.el-empty__description p) {
+            font-size: 16px;
+            font-style: normal;
+            // font-family: " PingFang SC";
+            font-weight: 500;
+            line-height: 19px;
+            color: #666;
+            text-align: left;
+            text-transform: none;
+          }
+
+          .result-content-right-content-box {
+            box-sizing: border-box;
+            padding: 16px 16px 24px;
+
+            .in-and-out-account-box-first {
+              display: flex;
+              align-items: center;
+              justify-content: space-between;
+              width: 100%;
+              height: 370px;
+
+              .account-box-first-left {
+                background: rgb(154 174 255 / 10%);
+                border-radius: 4px;
+              }
+
+              .account-box-first-right {
+                background: rgb(154 174 255 / 10%);
+                border-radius: 4px;
+              }
+            }
+          }
+        }
+      }
+    }
+  }
+}
+</style>