feat: 数据分析-左边开始

package.json

@@ -71,7 +71,7 @@
     "@vue/tsconfig": "^0.7.0",
     "eslint-plugin-simple-import-sort": "^12.1.1",
     "typescript": "~5.7.2",
-    "vite": "^6.1.0",
+    "vite": "6.2.6",
     "vite-plugin-compression": "^0.5.1",
     "vue-tsc": "^2.2.0"
   },

pnpm-lock.yaml

@@ -31,7 +31,7 @@ importers:
         version: 66.0.0
       '@vitejs/plugin-vue-jsx':
         specifier: ^4.1.1
-        version: 4.1.1(vite@6.1.1(@types/node@22.13.10)(jiti@2.4.2)(sass@1.85.0)(terser@5.39.0))(vue@3.5.13(typescript@5.7.3))
+        version: 4.1.1(vite@6.2.6(@types/node@22.13.10)(jiti@2.4.2)(sass@1.85.0)(terser@5.39.0))(vue@3.5.13(typescript@5.7.3))
       '@vueuse/core':
         specifier: ^12.8.2
         version: 12.8.2(typescript@5.7.3)
@@ -130,10 +130,10 @@ importers:
         version: 5.39.0
       unocss:
         specifier: ^66.0.0
-        version: 66.0.0(postcss@8.5.3)(vite@6.1.1(@types/node@22.13.10)(jiti@2.4.2)(sass@1.85.0)(terser@5.39.0))(vue@3.5.13(typescript@5.7.3))
+        version: 66.0.0(postcss@8.5.3)(vite@6.2.6(@types/node@22.13.10)(jiti@2.4.2)(sass@1.85.0)(terser@5.39.0))(vue@3.5.13(typescript@5.7.3))
       vite-plugin-cdn-import:
         specifier: ^1.0.1
-        version: 1.0.1(rollup@4.34.8)(vite@6.1.1(@types/node@22.13.10)(jiti@2.4.2)(sass@1.85.0)(terser@5.39.0))
+        version: 1.0.1(rollup@4.34.8)(vite@6.2.6(@types/node@22.13.10)(jiti@2.4.2)(sass@1.85.0)(terser@5.39.0))
       vite-plugin-fake-server:
         specifier: ^2.2.0
         version: 2.2.0
@@ -142,7 +142,7 @@ importers:
         version: 2.2.0
       vite-plugin-vue-inspector:
         specifier: ^5.3.1
-        version: 5.3.1(vite@6.1.1(@types/node@22.13.10)(jiti@2.4.2)(sass@1.85.0)(terser@5.39.0))
+        version: 5.3.1(vite@6.2.6(@types/node@22.13.10)(jiti@2.4.2)(sass@1.85.0)(terser@5.39.0))
       vue:
         specifier: ^3.5.13
         version: 3.5.13(typescript@5.7.3)
@@ -170,7 +170,7 @@ importers:
         version: 6.9.18
       '@vitejs/plugin-vue':
         specifier: ^5.2.1
-        version: 5.2.1(vite@6.1.1(@types/node@22.13.10)(jiti@2.4.2)(sass@1.85.0)(terser@5.39.0))(vue@3.5.13(typescript@5.7.3))
+        version: 5.2.1(vite@6.2.6(@types/node@22.13.10)(jiti@2.4.2)(sass@1.85.0)(terser@5.39.0))(vue@3.5.13(typescript@5.7.3))
       '@vue/tsconfig':
         specifier: ^0.7.0
         version: 0.7.0(typescript@5.7.3)(vue@3.5.13(typescript@5.7.3))
@@ -181,11 +181,11 @@ importers:
         specifier: ~5.7.2
         version: 5.7.3
       vite:
-        specifier: ^6.1.0
+        specifier: 6.2.6
-        version: 6.1.1(@types/node@22.13.10)(jiti@2.4.2)(sass@1.85.0)(terser@5.39.0)
+        version: 6.2.6(@types/node@22.13.10)(jiti@2.4.2)(sass@1.85.0)(terser@5.39.0)
       vite-plugin-compression:
         specifier: ^0.5.1
-        version: 0.5.1(vite@6.1.1(@types/node@22.13.10)(jiti@2.4.2)(sass@1.85.0)(terser@5.39.0))
+        version: 0.5.1(vite@6.2.6(@types/node@22.13.10)(jiti@2.4.2)(sass@1.85.0)(terser@5.39.0))
       vue-tsc:
         specifier: ^2.2.0
         version: 2.2.4(typescript@5.7.3)
@@ -2686,8 +2686,8 @@ packages:
     peerDependencies:
       vite: ^3.0.0-0 || ^4.0.0-0 || ^5.0.0-0 || ^6.0.0-0
 
-  vite@6.1.1:
+  vite@6.2.6:
-    resolution: {integrity: sha512-4GgM54XrwRfrOp297aIYspIti66k56v16ZnqHvrIM7mG+HjDlAwS7p+Srr7J6fGvEdOJ5JcQ/D9T7HhtdXDTzA==}
+    resolution: {integrity: sha512-9xpjNl3kR4rVDZgPNdTL0/c6ao4km69a/2ihNQbcANz8RuCOK3hQBmLSJf3bRKVQjVMda+YvizNE8AwvogcPbw==}
     engines: {node: ^18.0.0 || ^20.0.0 || >=22.0.0}
     hasBin: true
     peerDependencies:
@@ -3555,13 +3555,13 @@ snapshots:
       '@typescript-eslint/types': 8.24.1
       eslint-visitor-keys: 4.2.0
 
-  '@unocss/astro@66.0.0(vite@6.1.1(@types/node@22.13.10)(jiti@2.4.2)(sass@1.85.0)(terser@5.39.0))(vue@3.5.13(typescript@5.7.3))':
+  '@unocss/astro@66.0.0(vite@6.2.6(@types/node@22.13.10)(jiti@2.4.2)(sass@1.85.0)(terser@5.39.0))(vue@3.5.13(typescript@5.7.3))':
     dependencies:
       '@unocss/core': 66.0.0
       '@unocss/reset': 66.0.0
-      '@unocss/vite': 66.0.0(vite@6.1.1(@types/node@22.13.10)(jiti@2.4.2)(sass@1.85.0)(terser@5.39.0))(vue@3.5.13(typescript@5.7.3))
+      '@unocss/vite': 66.0.0(vite@6.2.6(@types/node@22.13.10)(jiti@2.4.2)(sass@1.85.0)(terser@5.39.0))(vue@3.5.13(typescript@5.7.3))
     optionalDependencies:
-      vite: 6.1.1(@types/node@22.13.10)(jiti@2.4.2)(sass@1.85.0)(terser@5.39.0)
+      vite: 6.2.6(@types/node@22.13.10)(jiti@2.4.2)(sass@1.85.0)(terser@5.39.0)
     transitivePeerDependencies:
       - vue
 
@@ -3686,7 +3686,7 @@ snapshots:
     dependencies:
       '@unocss/core': 66.0.0
 
-  '@unocss/vite@66.0.0(vite@6.1.1(@types/node@22.13.10)(jiti@2.4.2)(sass@1.85.0)(terser@5.39.0))(vue@3.5.13(typescript@5.7.3))':
+  '@unocss/vite@66.0.0(vite@6.2.6(@types/node@22.13.10)(jiti@2.4.2)(sass@1.85.0)(terser@5.39.0))(vue@3.5.13(typescript@5.7.3))':
     dependencies:
       '@ampproject/remapping': 2.3.0
       '@unocss/config': 66.0.0
@@ -3696,23 +3696,23 @@ snapshots:
       magic-string: 0.30.17
       tinyglobby: 0.2.12
       unplugin-utils: 0.2.4
-      vite: 6.1.1(@types/node@22.13.10)(jiti@2.4.2)(sass@1.85.0)(terser@5.39.0)
+      vite: 6.2.6(@types/node@22.13.10)(jiti@2.4.2)(sass@1.85.0)(terser@5.39.0)
     transitivePeerDependencies:
       - vue
 
-  '@vitejs/plugin-vue-jsx@4.1.1(vite@6.1.1(@types/node@22.13.10)(jiti@2.4.2)(sass@1.85.0)(terser@5.39.0))(vue@3.5.13(typescript@5.7.3))':
+  '@vitejs/plugin-vue-jsx@4.1.1(vite@6.2.6(@types/node@22.13.10)(jiti@2.4.2)(sass@1.85.0)(terser@5.39.0))(vue@3.5.13(typescript@5.7.3))':
     dependencies:
       '@babel/core': 7.26.9
       '@babel/plugin-transform-typescript': 7.26.8(@babel/core@7.26.9)
       '@vue/babel-plugin-jsx': 1.2.5(@babel/core@7.26.9)
-      vite: 6.1.1(@types/node@22.13.10)(jiti@2.4.2)(sass@1.85.0)(terser@5.39.0)
+      vite: 6.2.6(@types/node@22.13.10)(jiti@2.4.2)(sass@1.85.0)(terser@5.39.0)
       vue: 3.5.13(typescript@5.7.3)
     transitivePeerDependencies:
       - supports-color
 
-  '@vitejs/plugin-vue@5.2.1(vite@6.1.1(@types/node@22.13.10)(jiti@2.4.2)(sass@1.85.0)(terser@5.39.0))(vue@3.5.13(typescript@5.7.3))':
+  '@vitejs/plugin-vue@5.2.1(vite@6.2.6(@types/node@22.13.10)(jiti@2.4.2)(sass@1.85.0)(terser@5.39.0))(vue@3.5.13(typescript@5.7.3))':
     dependencies:
-      vite: 6.1.1(@types/node@22.13.10)(jiti@2.4.2)(sass@1.85.0)(terser@5.39.0)
+      vite: 6.2.6(@types/node@22.13.10)(jiti@2.4.2)(sass@1.85.0)(terser@5.39.0)
       vue: 3.5.13(typescript@5.7.3)
 
   '@volar/language-core@2.4.11':
@@ -5272,9 +5272,9 @@ snapshots:
 
   universalify@2.0.1: {}
 
-  unocss@66.0.0(postcss@8.5.3)(vite@6.1.1(@types/node@22.13.10)(jiti@2.4.2)(sass@1.85.0)(terser@5.39.0))(vue@3.5.13(typescript@5.7.3)):
+  unocss@66.0.0(postcss@8.5.3)(vite@6.2.6(@types/node@22.13.10)(jiti@2.4.2)(sass@1.85.0)(terser@5.39.0))(vue@3.5.13(typescript@5.7.3)):
     dependencies:
-      '@unocss/astro': 66.0.0(vite@6.1.1(@types/node@22.13.10)(jiti@2.4.2)(sass@1.85.0)(terser@5.39.0))(vue@3.5.13(typescript@5.7.3))
+      '@unocss/astro': 66.0.0(vite@6.2.6(@types/node@22.13.10)(jiti@2.4.2)(sass@1.85.0)(terser@5.39.0))(vue@3.5.13(typescript@5.7.3))
       '@unocss/cli': 66.0.0
       '@unocss/core': 66.0.0
       '@unocss/postcss': 66.0.0(postcss@8.5.3)
@@ -5291,9 +5291,9 @@ snapshots:
       '@unocss/transformer-compile-class': 66.0.0
       '@unocss/transformer-directives': 66.0.0
       '@unocss/transformer-variant-group': 66.0.0
-      '@unocss/vite': 66.0.0(vite@6.1.1(@types/node@22.13.10)(jiti@2.4.2)(sass@1.85.0)(terser@5.39.0))(vue@3.5.13(typescript@5.7.3))
+      '@unocss/vite': 66.0.0(vite@6.2.6(@types/node@22.13.10)(jiti@2.4.2)(sass@1.85.0)(terser@5.39.0))(vue@3.5.13(typescript@5.7.3))
     optionalDependencies:
-      vite: 6.1.1(@types/node@22.13.10)(jiti@2.4.2)(sass@1.85.0)(terser@5.39.0)
+      vite: 6.2.6(@types/node@22.13.10)(jiti@2.4.2)(sass@1.85.0)(terser@5.39.0)
     transitivePeerDependencies:
       - postcss
       - supports-color
@@ -5316,30 +5316,30 @@ snapshots:
 
   util-deprecate@1.0.2: {}
 
-  vite-plugin-cdn-import@1.0.1(rollup@4.34.8)(vite@6.1.1(@types/node@22.13.10)(jiti@2.4.2)(sass@1.85.0)(terser@5.39.0)):
+  vite-plugin-cdn-import@1.0.1(rollup@4.34.8)(vite@6.2.6(@types/node@22.13.10)(jiti@2.4.2)(sass@1.85.0)(terser@5.39.0)):
     dependencies:
       rollup-plugin-external-globals: 0.10.0(rollup@4.34.8)
-      vite-plugin-externals: 0.6.2(vite@6.1.1(@types/node@22.13.10)(jiti@2.4.2)(sass@1.85.0)(terser@5.39.0))
+      vite-plugin-externals: 0.6.2(vite@6.2.6(@types/node@22.13.10)(jiti@2.4.2)(sass@1.85.0)(terser@5.39.0))
     transitivePeerDependencies:
       - rollup
       - vite
 
-  vite-plugin-compression@0.5.1(vite@6.1.1(@types/node@22.13.10)(jiti@2.4.2)(sass@1.85.0)(terser@5.39.0)):
+  vite-plugin-compression@0.5.1(vite@6.2.6(@types/node@22.13.10)(jiti@2.4.2)(sass@1.85.0)(terser@5.39.0)):
     dependencies:
       chalk: 4.1.2
       debug: 4.4.0
       fs-extra: 10.1.0
-      vite: 6.1.1(@types/node@22.13.10)(jiti@2.4.2)(sass@1.85.0)(terser@5.39.0)
+      vite: 6.2.6(@types/node@22.13.10)(jiti@2.4.2)(sass@1.85.0)(terser@5.39.0)
     transitivePeerDependencies:
       - supports-color
 
-  vite-plugin-externals@0.6.2(vite@6.1.1(@types/node@22.13.10)(jiti@2.4.2)(sass@1.85.0)(terser@5.39.0)):
+  vite-plugin-externals@0.6.2(vite@6.2.6(@types/node@22.13.10)(jiti@2.4.2)(sass@1.85.0)(terser@5.39.0)):
     dependencies:
       acorn: 8.14.0
       es-module-lexer: 0.4.1
       fs-extra: 10.1.0
       magic-string: 0.25.9
-      vite: 6.1.1(@types/node@22.13.10)(jiti@2.4.2)(sass@1.85.0)(terser@5.39.0)
+      vite: 6.2.6(@types/node@22.13.10)(jiti@2.4.2)(sass@1.85.0)(terser@5.39.0)
 
   vite-plugin-fake-server@2.2.0:
     dependencies:
@@ -5351,7 +5351,7 @@ snapshots:
 
   vite-plugin-remove-console@2.2.0: {}
 
-  vite-plugin-vue-inspector@5.3.1(vite@6.1.1(@types/node@22.13.10)(jiti@2.4.2)(sass@1.85.0)(terser@5.39.0)):
+  vite-plugin-vue-inspector@5.3.1(vite@6.2.6(@types/node@22.13.10)(jiti@2.4.2)(sass@1.85.0)(terser@5.39.0)):
     dependencies:
       '@babel/core': 7.26.9
       '@babel/plugin-proposal-decorators': 7.25.9(@babel/core@7.26.9)
@@ -5362,13 +5362,13 @@ snapshots:
       '@vue/compiler-dom': 3.5.13
       kolorist: 1.8.0
       magic-string: 0.30.17
-      vite: 6.1.1(@types/node@22.13.10)(jiti@2.4.2)(sass@1.85.0)(terser@5.39.0)
+      vite: 6.2.6(@types/node@22.13.10)(jiti@2.4.2)(sass@1.85.0)(terser@5.39.0)
     transitivePeerDependencies:
       - supports-color
 
-  vite@6.1.1(@types/node@22.13.10)(jiti@2.4.2)(sass@1.85.0)(terser@5.39.0):
+  vite@6.2.6(@types/node@22.13.10)(jiti@2.4.2)(sass@1.85.0)(terser@5.39.0):
     dependencies:
-      esbuild: 0.24.2
+      esbuild: 0.25.1
       postcss: 8.5.3
       rollup: 4.34.8
     optionalDependencies:

src/components/CommonHeader/LayoutHeader.vue

@@ -1,9 +1,8 @@
 <script lang="ts" setup>
-import { useRoute, useRouter } from 'vue-router';
+import { useRoute } from 'vue-router';
 
 import BarOp from '@/components/CommonHeader/HeaderBarOp.vue';
 
-const router = useRouter();
 const route = useRoute();
 </script>
 

src/components/PanelItem/PanelTitle/PanelTitle1.vue

@@ -0,0 +1,39 @@
+<script lang="ts" setup>
+defineProps({
+  title: {
+    type: String,
+    default: '',
+  },
+});
+</script>
+
+<template>
+  <h1>{{ title }}</h1>
+</template>
+
+<style lang="scss" scoped>
+h1 {
+  position: relative;
+  line-height: 40px;
+  font-size: 20px;
+
+  &::before {
+    content: '';
+    position: absolute;
+    bottom: 0;
+    width: 100%;
+    height: 2px;
+    background: #707070;
+  }
+
+  &::after {
+    content: '';
+    position: absolute;
+    left: 0;
+    bottom: 0;
+    width: 38%;
+    height: 2px;
+    background: var(--color-primary-secondary);
+  }
+}
+</style>

src/components/PanelItem/Progress/Progress1.vue

@@ -0,0 +1,27 @@
+<script lang="ts" setup>
+defineProps({
+  progress: {
+    type: Number,
+    default: 0,
+  },
+});
+</script>
+
+<template>
+  <div class="progress">
+    <div :style="{ width: `${progress}%` }" class="progress-inner" />
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.progress {
+  width: 100%;
+  height: 11px;
+  border: 1px solid var(--color-primary-secondary);
+
+  &-inner {
+    height: 100%;
+    background: var(--color-primary);
+  }
+}
+</style>

src/layout/index.vue

@@ -1,18 +1,17 @@
 <script lang="ts" setup>
 import { onBeforeMount } from 'vue';
-import { useRoute, useRouter } from 'vue-router';
+import { useRoute } from 'vue-router';
 
 import CommonHeader from '@/components/CommonHeader/CommonHeader.vue';
 import LayoutHeader from '@/components/CommonHeader/LayoutHeader.vue';
 import { HeaderTypeEnum } from '@/enums/HeaderTypeEnum';
 import { useAppStore } from '@/store/app';
 
-const router = useRouter();
 const route = useRoute();
 const appStore = useAppStore();
 
 onBeforeMount(() => {
-  appStore.setBackground('/images/common/bg/bg-layout.png');
+  appStore.setBackground('/images/bg/bg-layout.png');
 });
 </script>
 

src/router/modules/home.ts

@@ -6,7 +6,7 @@ const routes: RouteConfigsTable[] = [
     path: '/welcome',
     name: 'welcome',
     component: () => import('@/views/welcome/index.vue'),
-    meta: { transition: 'fade', title: '后台管理系统大标题', headerType: HeaderTypeEnum.default },
+    meta: { transition: 'fade', title: '后台管理系统标题', headerType: HeaderTypeEnum.default },
   },
   {
     path: '/smart-park',
@@ -18,6 +18,16 @@ const routes: RouteConfigsTable[] = [
       headerType: HeaderTypeEnum.subtitle,
     },
   },
+  {
+    path: '/data-analyse',
+    name: 'dataAnalyse',
+    component: () => import('@/views/data-analyse/index.vue'),
+    meta: {
+      title: '数据分析',
+      subtitle: '车辆监控中心',
+      headerType: HeaderTypeEnum.subtitle,
+    },
+  },
   {
     path: '/business-supervision',
     name: 'businessSupervision',

src/store/app.ts

@@ -5,7 +5,7 @@ import { isCSSColor, isPath } from '@/utils/regexp/regexpBackground';
 const useAppStore = defineStore('appStore', {
   state() {
     return {
-      background: '',
+      background: '/images/bg/bg-layout.png',
     };
   },
   getters: {},
@@ -17,7 +17,7 @@ const useAppStore = defineStore('appStore', {
         const href = new URL(background, import.meta.url).href;
         this.background = `url(${href})`;
       } else {
-        const href = new URL('/images/common/bg/bg-layout.png', import.meta.url).href;
+        const href = new URL('/images/bg/bg-layout.png', import.meta.url).href;
         this.background = `url(${href})`;
       }
     },

src/views/big-data/index.vue

@@ -9,7 +9,7 @@ import BigDataRight from '@/views/big-data/components/big-data-right/index.vue';
 const appStore = useAppStore();
 
 onBeforeMount(async () => {
-  appStore.setBackground('/images/common/bg/bg-secondary.png');
+  appStore.setBackground('/images/bg/bg03.png');
 });
 </script>
 

src/views/business-supervision/index.vue

@@ -9,7 +9,7 @@ import BusinessSupervisionRight from '@/views/business-supervision/components/bu
 const appStore = useAppStore();
 
 onBeforeMount(() => {
-  appStore.setBackground('/images/common/bg/bg-secondary.png');
+  appStore.setBackground('/images/bg/bg02.png');
 });
 </script>
 

src/views/data-analyse/components/data-analyse-content/index.vue

@@ -0,0 +1,15 @@
+<script lang="ts" setup></script>
+
+<template>
+  <div class="data-analyse-content">data-analyse-content</div>
+</template>
+
+<style lang="scss" scoped>
+.data-analyse-content {
+  margin: 0 35px;
+  width: 803px;
+  height: 970px;
+
+  background: darkgrey;
+}
+</style>

src/views/data-analyse/components/data-analyse-left/components/left-center.vue

@@ -0,0 +1,60 @@
+<script lang="ts" setup>
+import PanelTitle1 from '@/components/PanelItem/PanelTitle/PanelTitle1.vue';
+import Progress1 from '@/components/PanelItem/Progress/Progress1.vue';
+
+const list = [
+  { name: '科技有限公司', amount: 18888, percent: '50' },
+  { name: '科技有限公司', amount: 18888, percent: '50' },
+  { name: '科技有限公司', amount: 18888, percent: '50' },
+  { name: '科技有限公司', amount: 18888, percent: '50' },
+  { name: '科技有限公司', amount: 18888, percent: '50' },
+];
+</script>
+
+<template>
+  <div class="data-analyse-left__center">
+    <PanelTitle1 title="销售公司销售设备数量占比" />
+
+    <ul>
+      <li v-for="(item, index) in list" :key="index">
+        <div class="info">
+          <span>{{ item.name }}</span>
+          <div class="info-left">
+            <span class="mr-[14px]">{{ item.amount }}台</span>
+            <span class="mr-[9px] c-primary-secondary">环比 {{ item.percent }} %</span>
+            <i class="i-mdi-trending-up">s</i>
+          </div>
+        </div>
+        <Progress1 :progress="50" />
+      </li>
+    </ul>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.data-analyse-left__center {
+  li {
+    margin: 0 0 27px 0;
+
+    &:nth-child(1) {
+      margin: 35px 0 27px 0;
+    }
+  }
+}
+
+.info {
+  display: flex;
+  justify-content: space-between;
+
+  .info-left {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+
+    i {
+      fonst-size: 15px;
+      color: var(--color-primary-secondary);
+    }
+  }
+}
+</style>

src/views/data-analyse/components/data-analyse-left/components/left-top.vue

@@ -0,0 +1,37 @@
+<script lang="ts" setup></script>
+
+<template>
+  <div class="data-analyse-left__top">
+    <div>
+      <h1>销售设备总量（台）</h1>
+      <span>
+        环比去年增长 52%
+        <i class="i-mdi-trending-up">s</i>
+      </span>
+    </div>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.data-analyse-left__top {
+  width: 248px;
+  height: 53px;
+
+  h1 {
+    font-size: 20px;
+  }
+
+  span {
+    font-size: 15px;
+    color: var(--color-primary-secondary);
+  }
+
+  i {
+    position: absolute;
+    top: 18px;
+    left: 23px;
+    font-size: 24px;
+    color: var(--color-primary-secondary);
+  }
+}
+</style>

src/views/data-analyse/components/data-analyse-left/index.vue

@@ -0,0 +1,19 @@
+<script lang="ts" setup>
+import LeftCenter from '@/views/data-analyse/components/data-analyse-left/components/left-center.vue';
+import LeftTop from '@/views/data-analyse/components/data-analyse-left/components/left-top.vue';
+</script>
+
+<template>
+  <div class="data-analyse-left">
+    <left-top />
+    <left-center />
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.data-analyse-left {
+  width: 496px;
+  height: 970px;
+  color: white;
+}
+</style>

src/views/data-analyse/components/data-analyse-right/index.vue

@@ -0,0 +1,13 @@
+<script lang="ts" setup></script>
+
+<template>
+  <div class="data-analyse-right">data-analyse-right</div>
+</template>
+
+<style lang="scss" scoped>
+.data-analyse-right {
+  width: 496px;
+  height: 970px;
+  background: palegoldenrod;
+}
+</style>

src/views/data-analyse/index.vue

@@ -0,0 +1,26 @@
+<script lang="ts" setup>
+import DataAnalyseContent from '@/views/data-analyse/components/data-analyse-content/index.vue';
+import DataAnalyseLeft from '@/views/data-analyse/components/data-analyse-left/index.vue';
+import DataAnalyseRight from '@/views/data-analyse/components/data-analyse-right/index.vue';
+</script>
+
+<template>
+  <div class="data-analyse">
+    <data-analyse-left />
+    <data-analyse-content />
+    <data-analyse-right />
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.data-analyse {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 0 20px;
+  width: 100%;
+  height: 100%;
+
+  background: cadetblue;
+}
+</style>

src/views/welcome/components/welcome-content.vue

@@ -5,7 +5,7 @@ const router = useRouter();
 
 const list = [
   { title: '智慧停车', image: '/images/welcome/car.png', target: '/smart-park' },
-  { title: '智慧配送', image: '/images/welcome/distribution.png', target: '/smart-park' },
+  { title: '智慧配送', image: '/images/welcome/distribution.png', target: '/data-analyse' },
   { title: '智慧渣土', image: '/images/welcome/muck.png', target: '/smart-park' },
   { title: '智慧洁城', image: '/images/welcome/clean-city.png', target: '/smart-park' },
   { title: '智慧路灯', image: '/images/welcome/lamp.png', target: '/smart-park' },

src/views/welcome/index.vue

@@ -14,8 +14,6 @@ import WelcomeFooter from '@/views/welcome/components/welcome-footer.vue';
 .welcome {
   width: 100%;
   height: 100%;
-  background: url('@/assets/images/welcome/bg/bg-particle.png') no-repeat center;
-  background-size: cover;
   animation: bounceInUp 1s;
 }
 </style>