refactor: 调整图标

build/plugins.ts

@@ -1,7 +1,7 @@
 import UnoCssIcons from '@unocss/preset-icons';
 import vue from '@vitejs/plugin-vue';
 import vueJsx from '@vitejs/plugin-vue-jsx';
-import { presetIcons, presetUno } from 'unocss';
+import { presetIcons } from 'unocss';
 import UnoCSS from 'unocss/vite';
 import type { PluginOption } from 'vite';
 import { vitePluginFakeServer } from 'vite-plugin-fake-server';
@@ -26,18 +26,19 @@ export const plugins = (mode): PluginOption[] => {
       inspector: true, // 控制台是否打印 UnoCSS inspector
       presets: [
         presetIcons({
+          prefix: '',
           extraProperties: {
             display: 'inline-block',
             'vertical-align': 'middle',
           },
         }),
         UnoCssIcons({
-          prefix: 'i-',
+          prefix: '',
           extraProperties: {
             display: 'inline-block',
+            'vertical-align': 'middle',
           },
         }),
-        presetUno(),
       ],
     }),
     compressPack(mode),

src/assets/styles/animations/src/transition.scss

@@ -53,14 +53,26 @@
   transition: var(--pure-transition-duration) all !important;
 }
 
-//.slide-enter-active,
+.slide-left-enter-active,
-//.slide-leave-active {
+.slide-left-leave-active {
-//  transition: opacity 0.3s,
+  transition: opacity 0.3s,
-//  transform 0.3s;
+  transform 0.3s;
-//}
+}
-//
+
-//.slide-enter-from,
+.slide-left-enter-from,
-//.slide-leave-to {
+.slide-left-leave-to {
-//  opacity: 0;
+  opacity: 0;
-//  transform: translateX(-30%);
+  transform: translateX(-30%);
-//}
+}
+
+.slide-right-enter-active,
+.slide-right-leave-active {
+  transition: opacity 0.3s,
+  transform 0.3s;
+}
+
+.slide-right-enter-from,
+.slide-right-leave-to {
+  opacity: 0;
+  transform: translateX(30%);
+}

src/assets/styles/common/src/element.scss

@@ -18,3 +18,19 @@
     color: var(--color-hover);
   }
 }
+
+.thin-line {
+  position: relative;
+}
+
+.thin-line::before {
+  content: '';
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 1px;
+  height: 100%;
+  background-color: var(--color-primary-secondary);
+  transform: scaleX(0.8);
+  transform-origin: 0 0;
+}

src/assets/styles/global.scss

@@ -1,10 +1,12 @@
 @use "animations/animations";
 @use "common/common";
+@use "views/views";
 
 :root {
   --colot-primary: #027AFF;
   --color-primary-secondary: #00FFFF;
   --color-info: #7CC1FF;
+  --color-info-secondary: #707070;
   --color-hover: #1C8ADF;
   --color-warning: #FFBE44;
   --color-warning-secondary: #FEDB65;

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

@@ -0,0 +1,30 @@
+.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

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

src/components/CommonHeader/CommonHeader.vue

@@ -34,10 +34,10 @@ onMounted(() => {
       <img
         alt="icon-setting"
         class="ml-[-284px]"
-        src="@/assets/images/icon/icon-home.png"
+        src="@/assets/images/common/icon/icon-home.png"
         @click="resetRouter()"
       />
-      <img alt="icon-home" class="ml-[284px]" src="@/assets/images/icon/icon-setting.png" />
+      <img alt="icon-home" class="ml-[284px]" src="@/assets/images/common/icon/icon-setting.png" />
     </div>
 
     <BarOp />
@@ -48,7 +48,7 @@ onMounted(() => {
 header {
   position: relative;
   height: 108px;
-  background: url('@/assets/images/header/bg-parking-header.png') no-repeat center;
+  background: url('@/assets/images/common/header/bg-parking-header.png') no-repeat center;
   background-size: cover;
 }
 

src/components/CommonHeader/HeaderBarOp.vue

@@ -3,9 +3,9 @@
 <template>
   <div class="bar-op">
     <ul class="flex-x-around">
-      <li><img alt="icon-1" src="@/assets/images/icon/icon-1.png" /></li>
+      <li><img alt="icon-1" src="@/assets/images/common/icon/icon-1.png" /></li>
-      <li><img alt="icon-2" src="@/assets/images/icon/icon-2.png" /></li>
+      <li><img alt="icon-2" src="@/assets/images/common/icon/icon-2.png" /></li>
-      <li><img alt="icon-3" src="@/assets/images/icon/icon-3.png" /></li>
+      <li><img alt="icon-3" src="@/assets/images/common/icon/icon-3.png" /></li>
     </ul>
     <span class="hover c-primary">王菠萝</span>
   </div>

src/components/CommonHeader/LayoutHeader.vue

@@ -20,7 +20,7 @@ const route = useRoute();
 .title {
   width: 100%;
   height: 108px;
-  background: url('@/assets/images/header/bg-layout-header.png') no-repeat center;
+  background: url('@/assets/images/common/header/bg-layout-header.png') no-repeat center;
   background-size: cover;
 
   h1 {

src/layout/index.vue

@@ -24,7 +24,7 @@ const route = useRoute();
   position: relative;
   width: 100%;
   height: 100%;
-  background: url('@/assets/images/bg/bg-layout.png') no-repeat center;
+  background: url('@/assets/images/common/bg/bg-layout.png') no-repeat center;
   background-size: cover;
 }
 

src/router/index.ts

@@ -9,7 +9,7 @@ const routes: RouteRecordRaw[] = [...remaining, ...error];
 const router = createRouter({
   history: createWebHashHistory(),
   routes,
-  scrollBehavior: () => ({ top: 0, behavior: 'smooth' }),
+  scrollBehavior: () => ({ left: 0, top: 0, behavior: 'smooth' }),
 });
 
 /** 全局注册 router */
@@ -22,10 +22,4 @@ export const resetRouter = () => {
   router.replace({ path: '/' }).then();
 };
 
-// router.afterEach((to, from) => {
-//   const toDepth = to.path.split('/').length;
-//   const fromDepth = from.path.split('/').length;
-//   to.meta.transition = toDepth < fromDepth ? 'slide-right' : 'slide-left';
-// });
-
 export default router;

src/router/modules/home.ts

@@ -1,3 +1,4 @@
+import Layout from '@/layout/index.vue';
 import type { RouteConfigsTable } from '@/types/router/Route';
 
 const routes: RouteConfigsTable[] = [
@@ -7,6 +8,14 @@ const routes: RouteConfigsTable[] = [
     component: () => import('@/views/welcome/index.vue'),
     meta: { transition: 'fade', title: '后台管理系统大标题' },
   },
+
+  {
+    path: '/manage-forms',
+    name: 'manageForms',
+    component: () => import('@/views/manage-forms/index.vue'),
+    meta: { title: '智慧经营监管中心', subtitle: '园区经营可视化' },
+  },
+
   {
     path: '/smart-parking',
     name: 'smartParking',
@@ -14,10 +23,15 @@ const routes: RouteConfigsTable[] = [
     meta: { title: '智慧智能监管中心', subtitle: '车辆监控中心' },
   },
   {
-    path: '/manage-forms',
+    path: '/redirect',
-    name: 'manageForms',
+    component: Layout,
-    component: () => import('@/views/manage-forms/index.vue'),
+    meta: { hidden: true },
-    meta: { title: '智慧经营监管中心', subtitle: '园区经营可视化' },
+    children: [
+      {
+        path: '/redirect/:path(.*)',
+        component: () => import('@/views/redirect/index.vue'),
+      },
+    ],
   },
 ];
 

src/utils/digte-formatter.ts

@@ -0,0 +1,10 @@
+export function formatter(number) {
+  const numbers = number.toString().split('').reverse();
+  const segs = [];
+
+  while (numbers.length) segs.push(numbers.splice(0, 3).join(''));
+
+  return segs.join(',').split('').reverse().join('');
+}
+
+export default formatter;

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

@@ -1,42 +1,201 @@
-<script lang="ts" setup></script>
+<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-container flex-y-between">
+  <div class="manage-forms-slide flex-y-between">
-    <div class="money">
+    <div class="common-bg money">
-      <h1>园区进出口金额</h1>
+      <div class="title">
+        <h1>园区进出口额</h1>
       </div>
 
-    <div class="enterprise-info">
+      <div class="money-digit">
-      <h1>园区进出口金额</h1>
+        <component :is="displayContent()" />
       </div>
 
-    <div class="plan">
+      <div>
-      <h1>园区进出口金额</h1>
+        <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>
-.manage-container {
+.money {
-  width: 530px;
-  height: 100%;
-
-  .money {
   width: 100%;
   height: 246px;
-    background: mediumpurple;
+
+  .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;
+    }
   }
 
-  .enterprise-info {
+  .progress {
-    width: 530px;
+    margin: 21px 0 0 0;
-    height: 354px;
-    background: mediumpurple;
   }
 
-  .plan {
+  .import-export-value {
-    width: 530px;
+    font-size: 18px;
-    height: 294px;
+
-    background: mediumpurple;
+    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,42 +1,40 @@
 <script lang="ts" setup></script>
 
 <template>
-  <div class="manage-container flex-y-between">
+  <div class="manage-forms-slide flex-y-between">
-    <div class="money">
+    <div class="common-bg money">
-      <h1>园区进出口金额</h1>
+      <div class="title">
+        <h1>园区进出口额</h1>
+      </div>
     </div>
 
-    <div class="enterprise-info">
+    <div class="common-bg enterprise-info">
-      <h1>园区进出口金额</h1>
+      <div class="title">
+        <h1>园区进出口额</h1>
+      </div>
     </div>
 
-    <div class="plan">
+    <div class="common-bg plan">
-      <h1>园区进出口金额</h1>
+      <div class="title">
+        <h1>园区进出口额</h1>
+      </div>
     </div>
   </div>
 </template>
 
 <style lang="scss" scoped>
-.manage-container {
+.money {
-  width: 530px;
-  height: 100%;
-
-  .money {
   width: 100%;
   height: 246px;
-    background: mediumpurple;
+}
-  }
 
-  .enterprise-info {
+.enterprise-info {
   width: 530px;
   height: 354px;
-    background: mediumpurple;
+}
-  }
 
-  .plan {
+.plan {
   width: 530px;
   height: 294px;
-    background: mediumpurple;
-  }
 }
 </style>

src/views/manage-forms/index.vue

@@ -5,18 +5,9 @@ import ManageRight from '@/views/manage-forms/components/manage-right/index.vue'
 </script>
 
 <template>
-  <div class="manage flex-x-between">
+  <div class="manage-forms flex-x-between">
     <manage-left />
     <mange-content />
     <manage-right />
   </div>
 </template>
-
-<style lang="scss" scoped>
-.manage {
-  padding: 19px 25px;
-  width: 100%;
-  height: 100%;
-  background: #20a0ff;
-}
-</style>

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

@@ -16,7 +16,7 @@ import TruckMonitor from '@/views/smart-parking/components/parking-content/truck
 .card-container {
   width: 380px;
   height: 650px;
-  background: url('@/assets/images/bg/bg-side.png') no-repeat center;
+  background: url('@/assets/images/smart-parking/bg/bg-side.png') no-repeat center;
   background-size: cover;
   transition: transform 0.8s;
   transform-style: preserve-3d;
@@ -24,7 +24,7 @@ import TruckMonitor from '@/views/smart-parking/components/parking-content/truck
   ::v-deep(.road-condition) {
     width: 218px;
     height: 59px;
-    background: url('@/assets/images/bg/bg-road-condition.png') no-repeat center;
+    background: url('@/assets/images/smart-parking/bg/bg-road-condition.png') no-repeat center;
     background-size: cover;
 
     h1 {

src/views/smart-parking/components/parking-content/road-condition.vue

@@ -11,22 +11,22 @@
       <!-- 汽车列表 -->
       <ul class="mt-[32px]">
         <li class="car-item flex-x-around">
-          <img alt="car-1" src="@/assets/images/car/car-1.png" />
+          <img alt="car-1" src="@/assets/images/smart-parking/car/car-1.png" />
           <p class="c-white">入卡口（西北门）</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/car/car-1.png" />
+          <img alt="car-1" src="@/assets/images/smart-parking/car/car-1.png" />
           <p class="c-white">入卡口（东北门）</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/car/car-2.png" />
+          <img alt="car-1" src="@/assets/images/smart-parking/car/car-2.png" />
           <p class="c-white">入卡口（东北门）</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/car/car-1.png" />
+          <img alt="car-1" src="@/assets/images/smart-parking/car/car-1.png" />
           <p class="c-white">入卡口（东南门）</p>
           <span class="dashed-circle c-primary-secondary border-b-primary-secondary">畅通</span>
         </li>
@@ -54,7 +54,7 @@
     width: 330px;
     height: 61px;
     margin: 0 0 9px 0;
-    background: url('@/assets/images/bg/bg-frame.png') no-repeat center;
+    background: url('@/assets/images/smart-parking/bg/bg-frame.png') no-repeat center;
     background-size: cover;
 
     img {
@@ -72,7 +72,7 @@
     width: 330px;
     height: 157px;
     font-size: 14px;
-    background: url('@/assets/images/bg/bg-suggest.png') no-repeat center;
+    background: url('@/assets/images/smart-parking/bg/bg-suggest.png') no-repeat center;
     background-size: cover;
   }
 }

src/views/smart-parking/components/parking-content/traffic-overview.vue

@@ -49,7 +49,7 @@ onMounted(() => {
     height: 40px;
     line-height: 40px;
     font-size: 16px;
-    background: url('@/assets/images/bg/bg-frame-2.png') no-repeat center;
+    background: url('@/assets/images/smart-parking/bg/bg-frame-2.png') no-repeat center;
     background-size: cover;
   }
 
@@ -58,7 +58,7 @@ onMounted(() => {
     height: 66px;
     line-height: 66px;
     font-size: 34px;
-    background: url('@/assets/images/bg/bg-frame-3.png') no-repeat center;
+    background: url('@/assets/images/smart-parking/bg/bg-frame-3.png') no-repeat center;
     background-size: cover;
   }
 }

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

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

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

@@ -3,8 +3,8 @@ defineProps({
   percent: Number,
 });
 
-import ArrowDown from '@/assets/images/arrow/arrow-down.png';
+import ArrowDown from '@/assets/images/smart-parking/arrow/arrow-down.png';
-import ArrowUp from '@/assets/images/arrow/arrow-up.png';
+import ArrowUp from '@/assets/images/smart-parking/arrow/arrow-up.png';
 
 const calPercentItem = (percent: number): Element => {
   return percent > 25 ? (
@@ -35,7 +35,7 @@ const calPercentItem = (percent: number): Element => {
   position: absolute;
   width: 86px;
   height: 86px;
-  background: url('@/assets/images/bg/bg-main-2.png') no-repeat center;
+  background: url('@/assets/images/common/bg/bg-main-2.png') no-repeat center;
   background-size: cover;
 }
 </style>

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

@@ -59,14 +59,14 @@ import TruckMonitorCenterPercent from '@/views/smart-parking/components/parking-
 .main-center {
   width: 824px;
   height: 650px;
-  background: url('@/assets/images/bg/bg-middle.png') no-repeat center;
+  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/bg/bg-main-title.png') no-repeat center;
+  background: url('@/assets/images/smart-parking/bg/bg-main-title.png') no-repeat center;
   background-size: cover;
 
   h1 {
@@ -84,7 +84,7 @@ import TruckMonitorCenterPercent from '@/views/smart-parking/components/parking-
   margin: 28px 0 77px 0;
   width: 666px;
   height: 400px;
-  background: url('@/assets/images/bg/bg-main-1.png') no-repeat center;
+  background: url('@/assets/images/smart-parking/bg/bg-main-1.png') no-repeat center;
   background-size: cover;
 
   // 中心智能管控
@@ -99,7 +99,7 @@ import TruckMonitorCenterPercent from '@/views/smart-parking/components/parking-
     .main-inner-middle {
       width: 100%;
       height: 100%;
-      background: url('@/assets/images/bg/bg-main-center.png');
+      background: url('@/assets/images/smart-parking/bg/bg-main-center.png');
       background-size: cover;
       font-size: 19px;
       animation: rotate 30s linear infinite;

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

@@ -4,7 +4,7 @@
   <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/car/car-39.png" />
+        <img alt="车辆管理" src="@/assets/images/smart-parking/car/car-39.png" />
         <span class="text-white hover">车辆管理</span>
       </li>
     </ul>

src/views/smart-parking/index.vue

@@ -6,13 +6,12 @@ import ParkingFooter from '@/views/smart-parking/components/parking-footer/index
 <template>
   <div class="layout">
     <div class="arrow left-[38px]">
-      <img alt="左箭头" src="@/assets/images/arrow/arrow-left.png" />
+      <img alt="左箭头" src="@/assets/images/smart-parking/arrow/arrow-left.png" />
     </div>
-    <!--<common-header />-->
     <parking-content />
     <parking-footer />
     <div class="arrow right-[38px]">
-      <img alt="左箭头" src="@/assets/images/arrow/arrow-right.png" />
+      <img alt="左箭头" src="@/assets/images/smart-parking/arrow/arrow-right.png" />
     </div>
   </div>
 </template>

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

@@ -6,7 +6,7 @@ import PageList from '@/views/welcome/components/welcome-content/page-list.vue';
   <div class="flex-y-around welcome">
     <div class="mt-[158px]">
       <p class="c-white">
-        <img alt="welcome" src="@/assets/images/icon/welcome.png" />
+        <img alt="welcome" src="@/assets/images/welcome/icon/welcome.png" />
         <i class="c-primary-secondary">xxxx</i>
         你好 欢迎使用xxxxxxxzz
       </p>

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

@@ -7,23 +7,23 @@ const router = useRouter();
 <template>
   <ul class="page-list flex-x-between">
     <li class="flex-y-center" @click="router.push('/smart-parking')">
-      <img alt="car" src="@/assets/images/icon/smart/car.png" />
+      <img alt="car" src="@/assets/images/welcome/icon/center/car.png" />
       <span>智慧停车</span>
     </li>
     <li class="flex-y-center">
-      <img alt="distribution" src="@/assets/images/icon/smart/distribution.png" />
+      <img alt="distribution" src="@/assets/images/welcome/icon/center/distribution.png" />
       <span>智慧配送</span>
     </li>
     <li class="flex-y-center">
-      <img alt="muck" src="@/assets/images/icon/smart/muck.png" />
+      <img alt="muck" src="@/assets/images/welcome/icon/center/muck.png" />
       <span>智慧渣土</span>
     </li>
     <li class="flex-y-center">
-      <img alt="clean-city" src="@/assets/images/icon/smart/clean-city.png" />
+      <img alt="clean-city" src="@/assets/images/welcome/icon/center/clean-city.png" />
       <span>智慧洁城</span>
     </li>
     <li class="flex-y-center">
-      <img alt="lamp" src="@/assets/images/icon/smart/lamp.png" />
+      <img alt="lamp" src="@/assets/images/welcome/icon/center/lamp.png" />
       <span>智慧路灯</span>
     </li>
   </ul>

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

@@ -1,21 +1,22 @@
 <script lang="ts" setup>
+import { ref } from 'vue';
 import { useRouter } from 'vue-router';
 
 const router = useRouter();
 
-const list = [
+const list = ref([
-  { icon: 'material-symbols:home-and-garden', name: '园区', target: '/' },
+  { icon: 'i-material-symbols:home-and-garden', name: '园区', target: '/' },
-  { icon: 'fa:building', name: '园区', target: '/' },
+  { icon: 'i-fa:building', name: '园区', target: '/' },
-  { icon: 'fa-solid:chart-line', name: '经营', target: '/manage-forms' },
+  { icon: 'i-fa-solid:chart-line', name: '经营', target: '/manage-forms' },
-  { icon: 'ri:community-fill', name: '园区', target: '/' },
+  { icon: 'i-ri:community-fill', name: '园区', target: '/' },
-];
+]);
 </script>
 
 <template>
   <footer class="flex-y-around">
     <ul class="flex-x-between">
       <li v-for="(item, index) in list" :key="index" @click="router.push(item.target)">
-        <i :class="`i-${item.icon}`" />
+        <i :class="`${item.icon}`" />
         <span class="hover">{{ item.name }}</span>
       </li>
     </ul>
@@ -39,7 +40,7 @@ footer {
       width: 90px;
       height: 90px;
       color: #7cc1ff;
-      background: url('@/assets/images/bg/bg-main-2.png') no-repeat center;
+      background: url('@/assets/images/common/bg/bg-main-2.png') no-repeat center;
       background-size: cover;
 
       i {

src/views/welcome/index.vue

@@ -15,7 +15,7 @@ import LayoutFooter from '@/views/welcome/components/welcome-footer/index.vue';
 .particle {
   width: 100%;
   height: 100%;
-  background: url('@/assets/images/bg/bg-particle.png') no-repeat center;
+  background: url('@/assets/images/welcome/bg/bg-particle.png') no-repeat center;
   background-size: cover;
 }
 </style>

uno.config.ts

@@ -24,6 +24,7 @@ export default defineConfig({
       primary: '#027AFF',
       'primary-secondary': '#00FFFF',
       info: '#7CC1FF',
+      'info-secondary': '#707070',
       warning: '#FFBE44',
       'warning-secondary': '#FEDB65',
     },