refactor: 主页等内容优化

src/assets/styles/global.scss

@@ -1,9 +1,8 @@
 @use "animations/animations";
 @use "common/common";
-@use "views/views";
 
 :root {
-  --colot-primary: #027AFF;
+  --color-primary: #027AFF;
   --color-primary-secondary: #00FFFF;
   --color-info: #7CC1FF;
   --color-info-secondary: #707070;

src/assets/styles/views/src/manage-forms.scss

@@ -1,30 +0,0 @@
-.manage-forms {
-  padding: 19px 25px;
-  width: 100%;
-  height: 100%;
-
-  .manage-forms-slide {
-    width: 530px;
-    height: 100%;
-    color: #fff;
-  }
-
-  .common-bg {
-    padding: 10px 15px;
-    background: rgba(14, 95, 255, 0.2);
-  }
-
-  .title {
-    width: 172px;
-    height: 42px;
-    font-size: 22px;
-    color: #fff;
-    background: url('@/assets/images/manage-forms/bg/bg-frame-4.png') no-repeat;
-    background-size: cover;
-  }
-
-  .title-description {
-    font-size: 12px;
-    color: var(--color-info-secondary);
-  }
-}

src/assets/styles/views/views.scss

@@ -1 +0,0 @@
-@use "@/assets/styles/views/src/manage-forms";

src/components/CommonHeader/CommonHeader.vue

@@ -26,11 +26,11 @@ onMounted(() => {
 
 <template>
   <header>
-    <div class="time c-primary">{{ time }}</div>
+    <div class="header-time c-primary">{{ time }}</div>
 
-    <div class="title">
-      <h1 class="c-white">{{ route.meta.title }}</h1>
-      <h2 class="c-primary-secondary">{{ route.meta.subtitle }}</h2>
+    <div class="header-title">
+      <h1>{{ route.meta.title }}</h1>
+      <h2>{{ route.meta.subtitle }}</h2>
       <img
         alt="icon-setting"
         class="ml-[-284px]"
@@ -52,14 +52,14 @@ header {
   background-size: cover;
 }
 
-.time {
+.header-time {
   position: absolute;
   margin: 0 0 0 41px;
   line-height: 60px;
   font-size: 14px;
 }
 
-.title {
+.header-title {
   position: relative;
   text-align: center;
 
@@ -76,11 +76,13 @@ header {
   }
 
   h1 {
+    color: #fff;
     font-size: 42px;
     line-height: 60px;
   }
 
   h2 {
+    color: var(--color-primary-secondary);
     font-size: 24px;
     line-height: 45px;
     font-weight: lighter;

src/components/CommonHeader/HeaderBarOp.vue

@@ -2,12 +2,12 @@
 
 <template>
   <div class="bar-op">
-    <ul class="flex-x-around">
+    <ul>
       <li><img alt="icon-1" src="@/assets/images/common/icon/icon-1.png" /></li>
       <li><img alt="icon-2" src="@/assets/images/common/icon/icon-2.png" /></li>
       <li><img alt="icon-3" src="@/assets/images/common/icon/icon-3.png" /></li>
     </ul>
-    <span class="hover c-primary">王菠萝</span>
+    <span class="hover">王菠萝</span>
   </div>
 </template>
 
@@ -21,6 +21,9 @@
   height: 36px;
 
   ul {
+    display: flex;
+    justify-content: space-around;
+    align-items: center;
     float: left;
     width: 148px;
 
@@ -30,6 +33,7 @@
   }
 
   span {
+    color: var(--color-primary);
     float: left;
     font-size: 12px;
     cursor: pointer;

src/components/CommonHeader/LayoutHeader.vue

@@ -9,21 +9,22 @@ const route = useRoute();
 
 <template>
   <header>
-    <div class="title">
-      <h1 class="c-white">{{ route.meta.title }}</h1>
+    <div class="header-title">
+      <h1>{{ route.meta.title }}</h1>
       <BarOp />
     </div>
   </header>
 </template>
 
 <style lang="scss" scoped>
-.title {
+.header-title {
   width: 100%;
   height: 108px;
   background: url('@/assets/images/common/header/bg-layout-header.png') no-repeat center;
   background-size: cover;
 
   h1 {
+    color: #fff;
     text-align: center;
     line-height: 100px;
     font-size: 42px;

src/components/TimeSelect/index.vue

@@ -0,0 +1,32 @@
+<script lang="ts" setup>
+import { TimeSelectType } from '@/components/TimeSelect/type';
+
+defineProps({
+  timeList: Array<TimeSelectType>,
+});
+</script>
+
+<template>
+  <select class="time-select" name="timeSelect">
+    <option v-for="(item, index) in timeList" :key="index" :value="item.value">
+      {{ item.label }}
+    </option>
+  </select>
+</template>
+
+<style lang="scss" scoped>
+.time-select {
+  float: left;
+  width: 100px;
+  height: 26px;
+  font-size: 14px;
+  background: rgba(24, 69, 135, 0.55);
+  text-align: center;
+  cursor: pointer;
+  transition: all 0.3s;
+
+  &:hover {
+    background-color: rgba(14, 95, 255, 0.38);
+  }
+}
+</style>

src/components/TimeSelect/type.ts

@@ -0,0 +1,4 @@
+export interface TimeSelectType {
+  value: string | number;
+  label: string | number;
+}

src/router/modules/home.ts

@@ -10,16 +10,16 @@ const routes: RouteConfigsTable[] = [
   },
 
   {
-    path: '/manage-forms',
+    path: '/business-supervision',
     name: 'manageForms',
-    component: () => import('@/views/manage-forms/index.vue'),
+    component: () => import('@/views/business-supervision/index.vue'),
     meta: { title: '智慧经营监管中心', subtitle: '园区经营可视化' },
   },
 
   {
-    path: '/smart-parking',
+    path: '/smart-park',
     name: 'smartParking',
-    component: () => import('@/views/smart-parking/index.vue'),
+    component: () => import('@/views/smart-park/index.vue'),
     meta: { title: '智慧智能监管中心', subtitle: '车辆监控中心' },
   },
   {

src/views/business-supervision/business-supervision-content/index.vue

@@ -1,15 +1,15 @@
 <script lang="ts" setup></script>
 
 <template>
-  <div class="content-container">
-    <ul class="card-list">
+  <div class="manage-forms-content-container">
+    <ul class="manage-forms-card-list">
       <li>进出口</li>
     </ul>
   </div>
 </template>
 
 <style lang="scss" scoped>
-.content-container {
+.manage-forms-content-container {
   width: 759px;
   height: 100%;
   background-color: #fff;

src/views/business-supervision/business-supervision-left/compontens/enterprise-info.vue

@@ -0,0 +1,89 @@
+<script lang="ts" setup></script>
+
+<template>
+  <ul>
+    <li>
+      <h1>报税金额</h1>
+      <p class="c-warning-secondary">¥1551154545</p>
+    </li>
+    <li>
+      <div class="flex-x-between">
+        <div>
+          <h1>企业数量</h1>
+          <p class="c-primary-secondary">783</p>
+        </div>
+        <div>111</div>
+      </div>
+      <div class="enterprise-type">
+        <span class="mr-[13px]">
+          <i class="bg-primary-secondary" />
+          国营企业 345
+        </span>
+        <span>
+          <i class="bg-warning-secondary" />
+          私营企业 345
+        </span>
+      </div>
+    </li>
+    <li>
+      <div class="flex-x-between">
+        <h1>总投资金额</h1>
+        <span class="font-size-[12px]">环比变化</span>
+        <span class="font-size-[12px]">+123%</span>
+      </div>
+      <p class="c-primary-secondary">¥1551154545</p>
+    </li>
+    <li>
+      <div class="flex-x-between">
+        <h1>税收总金额</h1>
+        <span class="font-size-[12px]">环比变化</span>
+        <span class="font-size-[12px]">-123%</span>
+      </div>
+      <p class="c-primary-secondary">¥1551154545</p>
+    </li>
+  </ul>
+</template>
+
+<style lang="scss" scoped>
+ul {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: space-between;
+  align-content: flex-start;
+  width: 100%;
+  height: 100%;
+
+  li {
+    padding: 9px 16px 0 19px;
+    margin: 15px 0 0 0;
+    width: 242px;
+    height: 124px;
+    background: url('@/assets/images/business-supervision/bg/frame-1.png') no-repeat center;
+    background-size: cover;
+
+    h1 {
+      margin: 0 0 2px 0;
+      font-size: 18px;
+    }
+
+    p {
+      font-size: 30px;
+    }
+  }
+
+  .enterprise-type {
+    width: 100%;
+
+    span {
+      font-size: 13px;
+    }
+
+    i {
+      display: inline-block;
+      width: 9px;
+      height: 9px;
+      border-radius: 50%;
+    }
+  }
+}
+</style>

src/views/business-supervision/business-supervision-left/compontens/import-export-value.vue

@@ -0,0 +1,74 @@
+<script lang="tsx" setup>
+import { ref } from 'vue';
+
+import formatter from '@/utils/digte-formatter';
+
+const money = ref('1386114');
+
+/** 显示金额 */
+const displayContent = () => {
+  formatter(money);
+  return (
+    <>
+      <span>¥</span>
+      {money.value.split('').map((item, index) => (
+        <span key={index}>{item}</span>
+      ))}
+    </>
+  );
+};
+</script>
+
+<template>
+  <div class="money-digit">
+    <component :is="displayContent()" />
+  </div>
+  <div>
+    <div class="progress">111</div>
+    <ul class="import-export-value flex-x-between">
+      <li>
+        进口额
+        <i>¥1551154545</i>
+      </li>
+      <li class="thin-line h-[20px]" />
+      <li>
+        <i>¥1551154545</i>
+        出口额
+      </li>
+    </ul>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.money-digit {
+  display: flex;
+  justify-content: end;
+  margin: 26px 0 0 0;
+  color: var(--color-primary-secondary);
+  font-size: 45px;
+  text-align: center;
+
+  span {
+    float: left;
+    margin: 0 3.5px;
+    width: 49px;
+    height: 69px;
+    background: url('@/assets/images/business-supervision/bg/bg-count.png') no-repeat;
+    background-size: cover;
+  }
+}
+
+.progress {
+  margin: 21px 0 0 0;
+}
+
+.import-export-value {
+  font-size: 18px;
+
+  i {
+    font-style: normal;
+    font-size: 20px;
+    color: var(--color-primary-secondary);
+  }
+}
+</style>

src/views/business-supervision/business-supervision-left/compontens/manage-device.vue

@@ -0,0 +1,53 @@
+<script lang="ts" setup>
+import { PropType } from 'vue';
+
+defineProps<{
+  color: PropType<string>;
+  title: PropType<string | number>;
+  description: PropType<string>;
+}>();
+</script>
+
+<template>
+  <div class="manage-device">
+    <h1>{{ title.toString() }}</h1>
+    <p>{{ description }}</p>
+    <div class="device-carriage">
+      <i :style="{ color }" class="i-mdi:electricity" />
+    </div>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.manage-device {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  width: 120px;
+
+  h1 {
+    text-align: center;
+    font-size: 24px;
+  }
+
+  p {
+    margin: 0 0 2px 0;
+    text-align: center;
+    font-size: 14px;
+  }
+
+  .device-carriage {
+    display: flex;
+    justify-content: center;
+    width: 74px;
+    height: 46px;
+    background: url('@/assets/images/business-supervision/bg/device-carriage.png') no-repeat center;
+    background-size: cover;
+
+    i {
+      //color: #ff7e5f;
+      font-size: 26px;
+    }
+  }
+}
+</style>

src/views/business-supervision/business-supervision-left/index.vue

@@ -0,0 +1,73 @@
+<script lang="tsx" setup>
+import { ref } from 'vue';
+
+import TimeSelect from '@/components/TimeSelect/index.vue';
+import { TimeSelectType } from '@/components/TimeSelect/type';
+import EnterpriseInfo from '@/views/business-supervision/business-supervision-left/compontens/enterprise-info.vue';
+import ImportExportValue from '@/views/business-supervision/business-supervision-left/compontens/import-export-value.vue';
+import ManageDevice from '@/views/business-supervision/business-supervision-left/compontens/manage-device.vue';
+
+const devices = ref<any>([
+  [
+    { color: '#ff7e5f', title: 738, description: '设备总数1' },
+    { color: '#ff7e5f', title: 738, description: '设备总数' },
+    { color: '#fff', title: 738, description: '设备总数' },
+    { color: '#ff7e5f', title: 738, description: '设备总数' },
+  ],
+  [
+    { color: '#2a65ea', title: '7.3k㎡', description: '设备总数' },
+    { color: '#2a65ea', title: 738, description: '设备总数' },
+    { color: '#fff', title: 738, description: '设备总数' },
+    { color: '#2a65ea', title: 738, description: '设备总数' },
+  ],
+]);
+
+const timeList = ref<TimeSelectType[]>([
+  { label: '2020.09', value: '2021' },
+  { label: '2020.09', value: '2021' },
+  { label: '2020.09', value: '2021' },
+]);
+</script>
+
+<template>
+  <div class="business-supervision__sidebar">
+    <div class="business-supervision__sidebar-item h-[246px]">
+      <div class="flex-x-between">
+        <div class="business-supervision__sidebar-title">
+          <h1>园区进出口额</h1>
+        </div>
+        <div>
+          <span class="business-supervision__sidebar-tag">总数据</span>
+          <TimeSelect :time-list="timeList" />
+        </div>
+      </div>
+
+      <import-export-value />
+    </div>
+
+    <div class="business-supervision__sidebar-item h-[354px]">
+      <div class="flex-x-between">
+        <div class="business-supervision__sidebar-title">
+          <h1>企业信息</h1>
+        </div>
+        <span class="business-supervision__sidebar-title-describe">截止时间至2021.12.30</span>
+      </div>
+
+      <enterprise-info />
+    </div>
+
+    <div class="business-supervision__sidebar-item h-[294px]">
+      <div class="flex-x-between">
+        <div class="business-supervision__sidebar-title">
+          <h1>地理规划</h1>
+        </div>
+        <span class="business-supervision__sidebar-title-describe">截止时间至2021.12.30</span>
+      </div>
+      <ul v-for="(parent, pIndex) in devices" :key="pIndex" class="flex-x-around mt-[12px]">
+        <li v-for="(item, index) in parent" :key="index">
+          <manage-device :color="item.color" :description="item.description" :title="item.title" />
+        </li>
+      </ul>
+    </div>
+  </div>
+</template>

src/views/business-supervision/business-supervision-right/index.vue

@@ -0,0 +1,31 @@
+<script lang="ts" setup></script>
+
+<template>
+  <div class="business-supervision__sidebar flex-y-between">
+    <div class="business-supervision__sidebar-item h-[246px]">
+      <div class="flex-x-between">
+        <div class="business-supervision__sidebar-title">
+          <h1>园区进出口额</h1>
+        </div>
+      </div>
+    </div>
+
+    <div class="business-supervision__sidebar-item h-[354px]">
+      <div class="flex-x-between">
+        <div class="business-supervision__sidebar-title">
+          <h1>企业信息</h1>
+        </div>
+        <span class="business-supervision__sidebar-title-describe">截止时间至2021.12.30</span>
+      </div>
+    </div>
+
+    <div class="business-supervision__sidebar-item h-[294px]">
+      <div class="flex-x-between">
+        <div class="business-supervision__sidebar-title">
+          <h1>地理规划</h1>
+        </div>
+        <span class="business-supervision__sidebar-title-describe">截止时间至2021.12.30</span>
+      </div>
+    </div>
+  </div>
+</template>

src/views/business-supervision/index.vue

@@ -0,0 +1,17 @@
+<script lang="ts" setup>
+import MangeContent from '@/views/business-supervision/business-supervision-content/index.vue';
+import BusinessSupervisionLeft from '@/views/business-supervision/business-supervision-left/index.vue';
+import BusinessSupervisionRight from '@/views/business-supervision/business-supervision-right/index.vue';
+</script>
+
+<template>
+  <div class="business-supervision">
+    <business-supervision-left />
+    <mange-content />
+    <business-supervision-right />
+  </div>
+</template>
+
+<style>
+@import 'style.scss';
+</style>

src/views/business-supervision/style.scss

@@ -0,0 +1,52 @@
+.business-supervision {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 19px 25px;
+  width: 100%;
+  height: 100%;
+
+  &__sidebar {
+    display: flex;
+    flex-wrap: wrap;
+    flex-direction: column;
+    justify-content: space-between;
+    align-items: center;
+    width: 530px;
+    height: 100%;
+    color: #fff;
+
+    &-item {
+      padding: 9px 15px;
+      width: 100%;
+      background: rgba(14, 95, 255, 0.20);
+    }
+
+    &-tag {
+      float: left;
+      margin: 0 7px 0 0;
+      width: 62px;
+      height: 26px;
+      line-height: 26px;
+      font-size: 14px;
+      text-align: center;
+      background: rgba(24, 69, 135, 0.55);
+      color: #fff;
+      cursor: default;
+    }
+
+    &-title {
+      width: 172px;
+      height: 42px;
+      font-size: 22px;
+      color: #fff;
+      background: url('@/assets/images/business-supervision/bg/bg-frame-4.png') no-repeat;
+      background-size: cover;
+    }
+
+    &-title-describe {
+      font-size: 12px;
+      color: var(--color-info-secondary);
+    }
+  }
+}

src/views/manage-forms/components/manage-left/index.vue

@@ -1,201 +0,0 @@
-<script lang="tsx" setup>
-import { ref } from 'vue';
-
-import formatter from '@/utils/digte-formatter';
-
-const money = ref('1386114');
-
-const displayContent = () => {
-  formatter(money);
-  return (
-    <>
-      <span>¥</span>
-      {money.value.split('').map((item, index) => (
-        <span key={index}>{item}</span>
-      ))}
-    </>
-  );
-};
-</script>
-
-<template>
-  <div class="manage-forms-slide flex-y-between">
-    <div class="common-bg money">
-      <div class="title">
-        <h1>园区进出口额</h1>
-      </div>
-
-      <div class="money-digit">
-        <component :is="displayContent()" />
-      </div>
-
-      <div>
-        <div class="progress">111</div>
-        <ul class="import-export-value flex-x-between">
-          <li>
-            进口额
-            <i>¥1551154545</i>
-          </li>
-          <li class="thin-line h-[20px]" />
-          <li>
-            <i>¥1551154545</i>
-            出口额
-          </li>
-        </ul>
-      </div>
-    </div>
-
-    <div class="enterprise-info common-bg">
-      <div class="flex-x-between">
-        <div class="title">
-          <h1>企业信息</h1>
-        </div>
-        <span class="title-description">截止时间至2021.12.30</span>
-      </div>
-
-      <ul>
-        <li>
-          <h1>报税金额</h1>
-          <p class="c-warning-secondary">¥1551154545</p>
-        </li>
-        <li>
-          <div class="flex-x-between">
-            <div>
-              <h1>企业数量</h1>
-              <p class="c-primary-secondary">783</p>
-            </div>
-            <div>111</div>
-          </div>
-          <div class="enterprise-type">
-            <span class="mr-[13px]">
-              <i class="bg-primary-secondary" />
-              国营企业 345
-            </span>
-            <span>
-              <i class="bg-warning-secondary" />
-              私营企业 345
-            </span>
-          </div>
-        </li>
-        <li>
-          <div class="flex-x-between">
-            <h1>总投资金额</h1>
-            <span class="font-size-[12px]">环比变化</span>
-            <span class="font-size-[12px]">+123%</span>
-          </div>
-          <p class="c-primary-secondary">¥1551154545</p>
-        </li>
-        <li>
-          <div class="flex-x-between">
-            <h1>税收总金额</h1>
-            <span class="font-size-[12px]">环比变化</span>
-            <span class="font-size-[12px]">-123%</span>
-          </div>
-          <p class="c-primary-secondary">¥1551154545</p>
-        </li>
-      </ul>
-    </div>
-
-    <div class="common-bg plan">
-      <div class="flex-x-between">
-        <div class="title">
-          <h1>地理规划</h1>
-        </div>
-        <span class="title-description">截止时间至2021.12.30</span>
-      </div>
-    </div>
-  </div>
-</template>
-
-<style lang="scss" scoped>
-.money {
-  width: 100%;
-  height: 246px;
-
-  .money-digit {
-    display: flex;
-    justify-content: end;
-    margin: 26px 0 0 0;
-    color: var(--color-primary-secondary);
-    font-size: 45px;
-    text-align: center;
-
-    span {
-      float: left;
-      margin: 0 3.5px;
-      width: 49px;
-      height: 69px;
-      background: url('@/assets/images/manage-forms/bg/bg-count.png') no-repeat;
-      background-size: cover;
-    }
-  }
-
-  .progress {
-    margin: 21px 0 0 0;
-  }
-
-  .import-export-value {
-    font-size: 18px;
-
-    i {
-      font-style: normal;
-      font-size: 20px;
-      color: var(--color-primary-secondary);
-    }
-  }
-}
-
-.enterprise-info {
-  padding: 10px 15px;
-  width: 530px;
-  height: 354px;
-
-  ul {
-    display: flex;
-    flex-wrap: wrap;
-    justify-content: space-between;
-    align-content: flex-start;
-    width: 100%;
-    height: 100%;
-
-    li {
-      //margin: 15px 0 0 0;
-      padding: 9px 16px 0 19px;
-      margin: 15px 0 0 0;
-      width: 242px;
-      height: 124px;
-      background: url('@/assets/images/manage-forms/bg/frame-1.png') no-repeat center;
-      background-size: cover;
-
-      h1 {
-        margin: 0 0 2px 0;
-        font-size: 18px;
-      }
-
-      p {
-        font-size: 30px;
-      }
-    }
-
-    .enterprise-type {
-      width: 100%;
-
-      span {
-        font-size: 13px;
-      }
-
-      i {
-        display: inline-block;
-        width: 9px;
-        height: 9px;
-        border-radius: 50%;
-      }
-    }
-  }
-}
-
-.plan {
-  width: 530px;
-  height: 294px;
-}
-</style>

src/views/manage-forms/components/manage-right/index.vue

@@ -1,40 +0,0 @@
-<script lang="ts" setup></script>
-
-<template>
-  <div class="manage-forms-slide flex-y-between">
-    <div class="common-bg money">
-      <div class="title">
-        <h1>园区进出口额</h1>
-      </div>
-    </div>
-
-    <div class="common-bg enterprise-info">
-      <div class="title">
-        <h1>园区进出口额</h1>
-      </div>
-    </div>
-
-    <div class="common-bg plan">
-      <div class="title">
-        <h1>园区进出口额</h1>
-      </div>
-    </div>
-  </div>
-</template>
-
-<style lang="scss" scoped>
-.money {
-  width: 100%;
-  height: 246px;
-}
-
-.enterprise-info {
-  width: 530px;
-  height: 354px;
-}
-
-.plan {
-  width: 530px;
-  height: 294px;
-}
-</style>

src/views/manage-forms/index.vue

@@ -1,13 +0,0 @@
-<script lang="ts" setup>
-import MangeContent from '@/views/manage-forms/components/manage-content/index.vue';
-import ManageLeft from '@/views/manage-forms/components/manage-left/index.vue';
-import ManageRight from '@/views/manage-forms/components/manage-right/index.vue';
-</script>
-
-<template>
-  <div class="manage-forms flex-x-between">
-    <manage-left />
-    <mange-content />
-    <manage-right />
-  </div>
-</template>

src/views/smart-park/index.vue

@@ -0,0 +1,21 @@
+<script lang="ts" setup>
+import SmartPartFooter from '@/views/smart-park/smart-park-footer.vue';
+import SmartPartContent from '@/views/smart-park/smart-park-main/index.vue';
+</script>
+
+<template>
+  <div class="smart-park">
+    <div class="smart-park__arrow left-[38px]">
+      <img alt="左箭头" src="@/assets/images/smart-park/arrow/arrow-left.png" />
+    </div>
+    <smart-part-content />
+    <smart-part-footer />
+    <div class="smart-park__arrow right-[38px]">
+      <img alt="左箭头" src="@/assets/images/smart-park/arrow/arrow-right.png" />
+    </div>
+  </div>
+</template>
+
+<style>
+@import 'style.scss';
+</style>

src/views/smart-park/smart-park-footer.vue

@@ -0,0 +1,47 @@
+<script lang="ts" setup></script>
+
+<template>
+  <footer>
+    <ul class="smart-park__footer-nav">
+      <li v-for="index in new Array(5)" :key="index" class="smart-park__footer-item">
+        <img alt="车辆管理" src="@/assets/images/smart-park/car/car-39.png" />
+        <span class="text-white hover">车辆管理</span>
+      </li>
+    </ul>
+  </footer>
+</template>
+
+<style lang="scss" scoped>
+footer {
+  margin: 66px auto auto auto;
+  width: 772px;
+  height: 125px;
+}
+
+.smart-park__footer-nav {
+  display: flex;
+  justify-content: space-around;
+  align-items: center;
+
+  li {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    width: 138px;
+    height: 125px;
+    background: rgba(16, 11, 87, 0.55);
+    border-radius: 10px;
+
+    img {
+      width: 67px;
+      height: 67px;
+    }
+
+    span {
+      font-size: 15px;
+      font-weight: lighter;
+    }
+  }
+}
+</style>

src/views/smart-park/smart-park-main/components/central-item.vue

@@ -15,7 +15,7 @@ defineProps({
       <img
         alt="arrow-item"
         class="float-left h-[16px]"
-        src="@/assets/images/smart-parking/arrow/arrow-item.png"
+        src="@/assets/images/smart-park/arrow/arrow-item.png"
       />
     </div>
   </div>

src/views/smart-park/smart-park-main/components/central-percent.vue

@@ -3,8 +3,8 @@ defineProps({
   percent: Number,
 });
 
-import ArrowDown from '@/assets/images/smart-parking/arrow/arrow-down.png';
-import ArrowUp from '@/assets/images/smart-parking/arrow/arrow-up.png';
+import ArrowDown from '@/assets/images/smart-park/arrow/arrow-down.png';
+import ArrowUp from '@/assets/images/smart-park/arrow/arrow-up.png';
 
 const calPercentItem = (percent: number): Element => {
   return percent > 25 ? (
@@ -22,7 +22,7 @@ const calPercentItem = (percent: number): Element => {
 </script>
 
 <template>
-  <div class="main-center-percent">
+  <div class="smart-park__main-percent-item">
     <div class="flex-y-around mt-[16px] mr-[13px] mb-[20px] ml-[13px]">
       <component :is="calPercentItem(percent)" />
       <span class="font-size-[15px] text-center c-info">环比</span>
@@ -31,7 +31,7 @@ const calPercentItem = (percent: number): Element => {
 </template>
 
 <style lang="scss" scoped>
-.main-center-percent {
+.smart-park__main-percent-item {
   position: absolute;
   width: 86px;
   height: 86px;

src/views/smart-park/smart-park-main/index.vue

@@ -0,0 +1,13 @@
+<script lang="ts" setup>
+import SmartPartCenter from '@/views/smart-park/smart-park-main/smart-park-center.vue';
+import SmartPartSidebarLeft from '@/views/smart-park/smart-park-main/smart-park-sidebar-left.vue';
+import SmartPartSidebarRight from '@/views/smart-park/smart-park-main/smart-park-sidebar-right.vue';
+</script>
+
+<template>
+  <main class="pt-[78px] mx-auto flex-center w-[1620px] h-[650px]">
+    <smart-part-sidebar-left />
+    <smart-part-center />
+    <smart-part-sidebar-right />
+  </main>
+</template>

src/views/smart-park/smart-park-main/smart-park-center.vue

@@ -0,0 +1,104 @@
+<script lang="ts" setup>
+import CentralItem from '@/views/smart-park/smart-park-main/components/central-item.vue';
+import CentralPercent from '@/views/smart-park/smart-park-main/components/central-percent.vue';
+</script>
+
+<template>
+  <div class="smart-park__center">
+    <div class="h-[570px] flex-y-between">
+      <div class="smart-park__center-title">
+        <h1>卡口车辆监控</h1>
+      </div>
+
+      <!-- 中间布局 -->
+      <div class="smart-park__center-inner">
+        <div class="pos-relative">
+          <central-item :count="45" class="top-[37px] left-[40px] w-[175px]" door="西北门" />
+          <central-percent :percent="44" class="top-[73px] left-[193px]" />
+        </div>
+        <div class="pos-relative">
+          <central-item :count="67" class="top-[37px] left-[120px] w-[175px]" door="东北门" />
+          <central-percent :percent="25" class="top-[73px] right-[192px]" />
+        </div>
+        <div class="pos-relative">
+          <central-item :count="345" class="top-[45px] left-[34px] w-[175px]" door="西南门" />
+          <central-percent :percent="25" class="top-[40px] left-[193px]" />
+        </div>
+        <div class="pos-relative">
+          <central-item :count="145" class="top-[45px] left-[130px] w-[175px]" door="东南门" />
+          <central-percent :percent="44" class="top-[40px] left-[66px]" />
+        </div>
+
+        <div class="smart-park__center-content">
+          <div class="smart-park__center-content-headline flex-center">
+            <h1>智能管控</h1>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.smart-park__center {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  width: 824px;
+  height: 650px;
+  background: url('@/assets/images/smart-park/bg/bg-middle.png') no-repeat center;
+  background-size: cover;
+
+  // 中间部分标题
+  &-title {
+    height: 61px;
+    background: url('@/assets/images/smart-park/bg/bg-main-title.png') no-repeat center;
+    background-size: cover;
+
+    h1 {
+      color: #fff;
+      font-size: 22px;
+      text-align: center;
+    }
+  }
+
+  // 中间部分四个部分
+  &-inner {
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    grid-template-rows: 1fr 1fr;
+    position: relative;
+    margin: 28px 0 77px 0;
+    width: 666px;
+    height: 400px;
+    background: url('@/assets/images/smart-park/bg/bg-main-1.png') no-repeat center;
+    background-size: cover;
+  }
+
+  // 中心智能管控
+  &-content {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    width: 138px;
+    height: 138px;
+
+    &-headline {
+      width: 100%;
+      height: 100%;
+      background: url('@/assets/images/smart-park/bg/bg-main-center.png');
+      background-size: cover;
+      font-size: 19px;
+      animation: rotate 30s linear infinite;
+
+      h1 {
+        width: 53px;
+        color: var(--color-primary-secondary);
+        text-align: center;
+        animation: rotate-reverse 30s linear infinite;
+      }
+    }
+  }
+}
+</style>

src/views/smart-park/smart-park-main/smart-park-sidebar-left.vue

@@ -1,43 +1,43 @@
 <script lang="ts" setup></script>
 
 <template>
-  <div class="card-container">
+  <div class="smart-park__sidebar smart-park__sidebar--left">
     <div class="pt-[55px] pl-[25px]" style="transform: rotateY(180deg)">
       <!-- 路况 -->
-      <div class="road-condition">
-        <h1 class="c-white">实时道路情况</h1>
+      <div class="smart-park__sidebar-title">
+        <h1>实时道路情况</h1>
       </div>
 
       <!-- 汽车列表 -->
       <ul class="mt-[32px]">
-        <li class="car-item flex-x-around">
-          <img alt="car-1" src="@/assets/images/smart-parking/car/car-1.png" />
-          <p class="c-white">入卡口（西北门）</p>
+        <li class="smart-park__sidebar--left-item">
+          <img alt="car-1" src="@/assets/images/smart-park/car/car-1.png" />
+          <p>入卡口（西北门）</p>
           <span class="dashed-circle c-primary-secondary border-b-primary-secondary">畅通</span>
         </li>
-        <li class="car-item flex-x-around">
-          <img alt="car-1" src="@/assets/images/smart-parking/car/car-1.png" />
-          <p class="c-white">入卡口（东北门）</p>
+        <li class="smart-park__sidebar--left-item">
+          <img alt="car-1" src="@/assets/images/smart-park/car/car-1.png" />
+          <p>入卡口（东北门）</p>
           <span class="dashed-circle c-primary-secondary border-b-primary-secondary">畅通</span>
         </li>
-        <li class="car-item flex-x-around">
-          <img alt="car-1" src="@/assets/images/smart-parking/car/car-2.png" />
-          <p class="c-white">入卡口（东北门）</p>
+        <li class="smart-park__sidebar--left-item">
+          <img alt="car-1" src="@/assets/images/smart-park/car/car-2.png" />
+          <p>入卡口（东北门）</p>
           <span class="dashed-circle c-warning border-b-warning">拥堵</span>
         </li>
-        <li class="car-item flex-x-around">
-          <img alt="car-1" src="@/assets/images/smart-parking/car/car-1.png" />
-          <p class="c-white">入卡口（东南门）</p>
+        <li class="smart-park__sidebar--left-item">
+          <img alt="car-1" src="@/assets/images/smart-park/car/car-1.png" />
+          <p>入卡口（东南门）</p>
           <span class="dashed-circle c-primary-secondary border-b-primary-secondary">畅通</span>
         </li>
       </ul>
 
       <!-- 建议 -->
-      <div class="suggest c-white">
+      <div class="smart-park__sidebar--left-suggest">
         <h5>车流量建议</h5>
         <p>
           高峰时段大量车流量容易造成拥堵，主要由XXX企业、XXX企业的车辆构成，
-          <span class="c-warning-secondary">可建议XXX企业向后延迟15min错峰入园。</span>
+          <span>可建议XXX企业向后延迟15min错峰入园。</span>
           高峰时段大量车流量容易造成拥堵， 主要由XXX企业、XXX企业的车辆构成
         </p>
       </div>
@@ -46,15 +46,18 @@
 </template>
 
 <style lang="scss" scoped>
-.card-container {
+.smart-park__sidebar--left {
   margin: 0 20px 0 0;
   transform: rotateY(180deg);
 
-  .car-item {
+  &-item {
+    display: flex;
+    justify-content: space-around;
+    align-items: center;
     width: 330px;
     height: 61px;
     margin: 0 0 9px 0;
-    background: url('@/assets/images/smart-parking/bg/bg-frame.png') no-repeat center;
+    background: url('@/assets/images/smart-park/bg/bg-frame.png') no-repeat center;
     background-size: cover;
 
     img {
@@ -62,18 +65,24 @@
     }
 
     p {
+      color: #fff;
       font-size: 14px;
     }
   }
 
-  .suggest {
+  &-suggest {
     margin: 24px 0 0 0;
     padding: 15px 14px 17px 20px;
     width: 330px;
     height: 157px;
+    color: #fff;
     font-size: 14px;
-    background: url('@/assets/images/smart-parking/bg/bg-suggest.png') no-repeat center;
+    background: url('@/assets/images/smart-park/bg/bg-suggest.png') no-repeat center;
     background-size: cover;
+
+    span {
+      color: var(--color-warning-secondary);
+    }
   }
 }
 </style>

src/views/smart-park/smart-park-main/smart-park-sidebar-right.vue

@@ -1,7 +1,7 @@
 <script lang="ts" setup>
 import { onMounted, ref } from 'vue';
 
-import { renderEcharts } from '@/views/smart-parking/components/parking-content/data';
+import { renderEcharts } from '@/views/smart-park/smart-park-main/charts';
 
 const weekDataChart = ref<HTMLDivElement>();
 
@@ -11,35 +11,38 @@ onMounted(() => {
 </script>
 
 <template>
-  <div class="card-container ml-[20px]">
+  <div class="smart-park__sidebar ml-[20px]">
     <div class="pt-[55px] pl-[25px]">
       <!-- 路况 -->
-      <div class="road-condition">
-        <h1 class="c-white">近7天车流量概览</h1>
+      <div class="smart-park__sidebar-title">
+        <h1>近7天车流量概览</h1>
       </div>
 
       <!-- 汽车列表 -->
       <ul class="flex-x-around mt-[32px] w-[331px]">
-        <li class="detail-item flex-y-between">
-          <span class="bg-frame c-white">最高进园车流量</span>
-          <span class="bg-frame c-primary-secondary">897</span>
+        <li class="smart-park__sidebar-flow-item">
+          <span>最高进园车流量</span>
+          <span>897</span>
         </li>
-        <li class="detail-item flex-y-between">
-          <span class="bg-frame c-white">最高进园车流量</span>
-          <span class="bg-frame c-primary-secondary">494</span>
+        <li class="smart-park__sidebar-flow-item">
+          <span>最高进园车流量</span>
+          <span>494</span>
         </li>
       </ul>
 
       <!-- 七天数据 -->
       <div class="w-[325px] h-[205px]">
-        <div ref="weekDataChart" class="week-data" />
+        <div ref="weekDataChart" class="smart-park__sidebar-charts" />
       </div>
     </div>
   </div>
 </template>
 
 <style lang="scss" scoped>
-.detail-item {
+.smart-park__sidebar-flow-item {
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
   width: 162px;
   height: 111px;
   text-align: center;
@@ -47,27 +50,27 @@ onMounted(() => {
   span:nth-child(1) {
     width: 161px;
     height: 40px;
+    color: #fff;
     line-height: 40px;
     font-size: 16px;
-    background: url('@/assets/images/smart-parking/bg/bg-frame-2.png') no-repeat center;
+    background: url('@/assets/images/smart-park/bg/bg-frame-2.png') no-repeat center;
     background-size: cover;
   }
 
   span:nth-child(2) {
     width: 161px;
     height: 66px;
+    color: var(--color-primary-secondary);
     line-height: 66px;
     font-size: 34px;
-    background: url('@/assets/images/smart-parking/bg/bg-frame-3.png') no-repeat center;
+    background: url('@/assets/images/smart-park/bg/bg-frame-3.png') no-repeat center;
     background-size: cover;
   }
 }
 
-.week-data {
+.smart-park__sidebar-charts {
   margin: 71px 0 0 0;
   width: 100%;
   height: 100%;
-  transform: scale(1);
-  transform-origin: 0 0;
 }
 </style>

src/views/smart-park/style.scss

@@ -0,0 +1,36 @@
+.smart-park {
+  width: 100%;
+  height: 100%;
+
+  &__arrow {
+    position: absolute;
+    top: 50%;
+    transform: translateY(-50%);
+    cursor: pointer;
+
+    img {
+      width: 65px;
+    }
+  }
+
+  &__sidebar {
+    width: 380px;
+    height: 650px;
+    background: url('@/assets/images/smart-park/bg/bg-side.png') no-repeat center;
+    background-size: cover;
+    transition: transform 0.8s;
+    transform-style: preserve-3d;
+
+    .smart-park__sidebar-title {
+      width: 218px;
+      height: 59px;
+      background: url('@/assets/images/smart-park/bg/bg-road-condition.png') no-repeat center;
+      background-size: cover;
+
+      h1 {
+        color: #fff;
+        font-size: 18px;
+      }
+    }
+  }
+}

src/views/smart-parking/components/parking-content/index.vue

@@ -1,35 +0,0 @@
-<script lang="ts" setup>
-import RoadCondition from '@/views/smart-parking/components/parking-content/road-condition.vue';
-import TrafficOverview from '@/views/smart-parking/components/parking-content/traffic-overview.vue';
-import TruckMonitor from '@/views/smart-parking/components/parking-content/truck-monitor.vue';
-</script>
-
-<template>
-  <main class="pt-[78px] mx-auto flex-center w-[1620px] h-[650px]">
-    <road-condition />
-    <truck-monitor />
-    <traffic-overview />
-  </main>
-</template>
-
-<style lang="scss" scoped>
-.card-container {
-  width: 380px;
-  height: 650px;
-  background: url('@/assets/images/smart-parking/bg/bg-side.png') no-repeat center;
-  background-size: cover;
-  transition: transform 0.8s;
-  transform-style: preserve-3d;
-
-  ::v-deep(.road-condition) {
-    width: 218px;
-    height: 59px;
-    background: url('@/assets/images/smart-parking/bg/bg-road-condition.png') no-repeat center;
-    background-size: cover;
-
-    h1 {
-      font-size: 18px;
-    }
-  }
-}
-</style>

src/views/smart-parking/components/parking-content/truck-monitor.vue

@@ -1,115 +0,0 @@
-<script lang="ts" setup>
-import TruckMonitorCenterItem from '@/views/smart-parking/components/parking-content/truck-monitor-center-item.vue';
-import TruckMonitorCenterPercent from '@/views/smart-parking/components/parking-content/truck-monitor-center-percent.vue';
-</script>
-
-<template>
-  <div class="main-center flex-center">
-    <div class="h-[570px] flex-y-between">
-      <div class="main-center-title">
-        <h1 class="c-white">卡口车辆监控</h1>
-      </div>
-
-      <!-- 中间布局 -->
-      <div class="main-inner">
-        <div class="pos-relative">
-          <truck-monitor-center-item
-            :count="45"
-            class="top-[37px] left-[40px] w-[175px]"
-            door="西北门"
-          />
-          <truck-monitor-center-percent :percent="44" class="top-[73px] left-[193px]" />
-        </div>
-        <div class="pos-relative">
-          <truck-monitor-center-item
-            :count="67"
-            class="top-[37px] left-[120px] w-[175px]"
-            door="东北门"
-          />
-          <truck-monitor-center-percent :percent="25" class="top-[73px] right-[192px]" />
-        </div>
-        <div class="pos-relative">
-          <truck-monitor-center-item
-            :count="345"
-            class="top-[45px] left-[34px] w-[175px]"
-            door="西南门"
-          />
-          <truck-monitor-center-percent :percent="25" class="top-[40px] left-[193px]" />
-        </div>
-        <div class="pos-relative">
-          <truck-monitor-center-item
-            :count="145"
-            class="top-[45px] left-[130px] w-[175px]"
-            door="东南门"
-          />
-          <truck-monitor-center-percent :percent="44" class="top-[40px] left-[66px]" />
-        </div>
-
-        <div class="main-inner-center">
-          <div class="main-inner-middle flex-center">
-            <h1 class="c-primary-secondary">智能管控</h1>
-          </div>
-        </div>
-      </div>
-    </div>
-  </div>
-</template>
-
-<style lang="scss" scoped>
-.main-center {
-  width: 824px;
-  height: 650px;
-  background: url('@/assets/images/smart-parking/bg/bg-middle.png') no-repeat center;
-  background-size: cover;
-}
-
-// 中间部分标题
-.main-center-title {
-  height: 61px;
-  background: url('@/assets/images/smart-parking/bg/bg-main-title.png') no-repeat center;
-  background-size: cover;
-
-  h1 {
-    font-size: 22px;
-    text-align: center;
-  }
-}
-
-// 中间部分四个部分
-.main-inner {
-  display: grid;
-  grid-template-columns: 1fr 1fr;
-  grid-template-rows: 1fr 1fr;
-  position: relative;
-  margin: 28px 0 77px 0;
-  width: 666px;
-  height: 400px;
-  background: url('@/assets/images/smart-parking/bg/bg-main-1.png') no-repeat center;
-  background-size: cover;
-
-  // 中心智能管控
-  .main-inner-center {
-    position: absolute;
-    top: 50%;
-    left: 50%;
-    transform: translate(-50%, -50%);
-    width: 138px;
-    height: 138px;
-
-    .main-inner-middle {
-      width: 100%;
-      height: 100%;
-      background: url('@/assets/images/smart-parking/bg/bg-main-center.png');
-      background-size: cover;
-      font-size: 19px;
-      animation: rotate 30s linear infinite;
-    }
-
-    h1 {
-      width: 53px;
-      text-align: center;
-      animation: rotate-reverse 30s linear infinite;
-    }
-  }
-}
-</style>

src/views/smart-parking/components/parking-footer/index.vue

@@ -1,36 +0,0 @@
-<script lang="ts" setup></script>
-
-<template>
-  <footer>
-    <ul class="flex-x-around">
-      <li v-for="index in new Array(5)" :key="index" class="rectangle flex-y-center">
-        <img alt="车辆管理" src="@/assets/images/smart-parking/car/car-39.png" />
-        <span class="text-white hover">车辆管理</span>
-      </li>
-    </ul>
-  </footer>
-</template>
-
-<style lang="scss" scoped>
-footer {
-  margin: 66px auto auto auto;
-  width: 772px;
-  height: 125px;
-}
-
-.rectangle {
-  width: 138px;
-  height: 125px;
-  background: #0e094d55;
-
-  img {
-    width: 67px;
-    height: 67px;
-  }
-
-  span {
-    font-size: 15px;
-    font-weight: lighter;
-  }
-}
-</style>

src/views/smart-parking/index.vue

@@ -1,35 +0,0 @@
-<script lang="ts" setup>
-import ParkingContent from '@/views/smart-parking/components/parking-content/index.vue';
-import ParkingFooter from '@/views/smart-parking/components/parking-footer/index.vue';
-</script>
-
-<template>
-  <div class="layout">
-    <div class="arrow left-[38px]">
-      <img alt="左箭头" src="@/assets/images/smart-parking/arrow/arrow-left.png" />
-    </div>
-    <parking-content />
-    <parking-footer />
-    <div class="arrow right-[38px]">
-      <img alt="左箭头" src="@/assets/images/smart-parking/arrow/arrow-right.png" />
-    </div>
-  </div>
-</template>
-
-<style scoped>
-.layout {
-  width: 100%;
-  height: 100%;
-
-  .arrow {
-    position: absolute;
-    top: 50%;
-    transform: translateY(-50%);
-    cursor: pointer;
-
-    img {
-      width: 65px;
-    }
-  }
-}
-</style>

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

@@ -1,29 +0,0 @@
-<script lang="ts" setup>
-import PageList from '@/views/welcome/components/welcome-content/page-list.vue';
-</script>
-
-<template>
-  <div class="flex-y-around welcome">
-    <div class="mt-[158px]">
-      <p class="c-white">
-        <img alt="welcome" src="@/assets/images/welcome/icon/welcome.png" />
-        <i class="c-primary-secondary">xxxx</i>
-        你好 欢迎使用xxxxxxxzz
-      </p>
-    </div>
-    <page-list />
-  </div>
-</template>
-
-<style lang="scss  " scoped>
-.welcome {
-  p {
-    font-size: 16px;
-  }
-
-  img {
-    width: 239px;
-    height: 34px;
-  }
-}
-</style>

src/views/welcome/index.vue

@@ -1,21 +1,15 @@
 <script lang="ts" setup>
-import LayoutContent from '@/views/welcome/components/welcome-content/index.vue';
-import LayoutFooter from '@/views/welcome/components/welcome-footer/index.vue';
+import WelcomeContent from '@/views/welcome/welcome-content/index.vue';
+import WelcomeFooter from '@/views/welcome/welcome-footer.vue';
 </script>
 
 <template>
-  <div class="particle">
-    <layout-content />
-
-    <layout-footer />
+  <div class="welcome">
+    <welcome-content />
+    <welcome-footer />
   </div>
 </template>
 
-<style lang="scss" scoped>
-.particle {
-  width: 100%;
-  height: 100%;
-  background: url('@/assets/images/welcome/bg/bg-particle.png') no-repeat center;
-  background-size: cover;
-}
+<style>
+@import 'style.scss';
 </style>

src/views/welcome/style.scss

@@ -0,0 +1,28 @@
+.welcome {
+  width: 100%;
+  height: 100%;
+  background: url('@/assets/images/welcome/bg/bg-particle.png') no-repeat center;
+  background-size: cover;
+
+  &__content {
+    display: flex;
+    flex-direction: column;
+    flex-wrap: wrap;
+    justify-content: space-around;
+    align-items: center;
+
+    p {
+      color: #fff;
+      font-size: 16px;
+
+      i {
+        color: var(--color-primary-secondary);
+      }
+    }
+
+    img {
+      width: 239px;
+      height: 34px;
+    }
+  }
+}

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

@@ -5,24 +5,24 @@ const router = useRouter();
 </script>
 
 <template>
-  <ul class="page-list flex-x-between">
-    <li class="flex-y-center" @click="router.push('/smart-parking')">
+  <ul class="welcome__content-list">
+    <li @click="router.push('/smart-park')">
       <img alt="car" src="@/assets/images/welcome/icon/center/car.png" />
       <span>智慧停车</span>
     </li>
-    <li class="flex-y-center">
+    <li>
       <img alt="distribution" src="@/assets/images/welcome/icon/center/distribution.png" />
       <span>智慧配送</span>
     </li>
-    <li class="flex-y-center">
+    <li>
       <img alt="muck" src="@/assets/images/welcome/icon/center/muck.png" />
       <span>智慧渣土</span>
     </li>
-    <li class="flex-y-center">
+    <li>
       <img alt="clean-city" src="@/assets/images/welcome/icon/center/clean-city.png" />
       <span>智慧洁城</span>
     </li>
-    <li class="flex-y-center">
+    <li>
       <img alt="lamp" src="@/assets/images/welcome/icon/center/lamp.png" />
       <span>智慧路灯</span>
     </li>
@@ -30,13 +30,21 @@ const router = useRouter();
 </template>
 
 <style lang="scss" scoped>
-.page-list {
+.welcome__content-list {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
   margin: 104px 0 0 0;
   width: 1477px;
   height: 260px;
 
   li {
     position: relative;
+    display: flex;
+    flex-direction: column;
+    flex-wrap: wrap;
+    justify-content: center;
+    align-items: center;
     width: 280px;
     height: 260px;
     cursor: pointer;

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

@@ -0,0 +1,16 @@
+<script lang="ts" setup>
+import ContentList from '@/views/welcome/welcome-content/content-list.vue';
+</script>
+
+<template>
+  <div class="welcome__content flex-y-around">
+    <div class="mt-[158px]">
+      <p>
+        <img alt="welcome-bg" src="@/assets/images/welcome/icon/welcome.png" />
+        <i>xxxx</i>
+        你好 欢迎使用xxxxxxxzz
+      </p>
+    </div>
+    <content-list />
+  </div>
+</template>

src/views/welcome/welcome-footer.vue

@@ -7,14 +7,14 @@ const router = useRouter();
 const list = ref([
   { icon: 'i-material-symbols:home-and-garden', name: '园区', target: '/' },
   { icon: 'i-fa:building', name: '园区', target: '/' },
-  { icon: 'i-fa-solid:chart-line', name: '经营', target: '/manage-forms' },
+  { icon: 'i-fa-solid:chart-line', name: '经营', target: '/business-supervision' },
   { icon: 'i-ri:community-fill', name: '园区', target: '/' },
 ]);
 </script>
 
 <template>
-  <footer class="flex-y-around">
-    <ul class="flex-x-between">
+  <footer>
+    <ul>
       <li v-for="(item, index) in list" :key="index" @click="router.push(item.target)">
         <i :class="`${item.icon}`" />
         <span class="hover">{{ item.name }}</span>
@@ -25,9 +25,16 @@ const list = ref([
 
 <style lang="scss" scoped>
 footer {
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  align-items: center;
   margin: 190px 0 0 0;
 
   ul {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
     width: 431px;
     height: 90px;