refactor: 调整图标

build/plugins.ts

@@ -26,15 +26,17 @@ 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',
           },
         }),
       ],

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

@@ -19,7 +19,7 @@
     height: 42px;
     font-size: 22px;
     color: #fff;
-    background: url('@/assets/images/bg/bg-frame-4.png') no-repeat;
+    background: url('@/assets/images/manage-forms/bg/bg-frame-4.png') no-repeat;
     background-size: cover;
   }
 

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/views/manage-forms/components/manage-left/index.vue

@@ -125,7 +125,7 @@ const displayContent = () => {
       margin: 0 3.5px;
       width: 49px;
       height: 69px;
-      background: url('@/assets/images/bg/bg-count.png') no-repeat;
+      background: url('@/assets/images/manage-forms/bg/bg-count.png') no-repeat;
       background-size: cover;
     }
   }
@@ -164,7 +164,7 @@ const displayContent = () => {
       margin: 15px 0 0 0;
       width: 242px;
       height: 124px;
-      background: url('@/assets/images/manage-forms/frame-1.png') no-repeat center;
+      background: url('@/assets/images/manage-forms/bg/frame-1.png') no-repeat center;
       background-size: cover;
 
       h1 {

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>