src/assets/styles/common/common.scss

@@ -1,6 +1,3 @@
 @use "src/element";
 
 
-body {
-  background: var(--background-color);
-}

src/assets/styles/global.scss

@@ -1,6 +1,2 @@
 @use "animations/animations";
-@use "common/common";
-
-:root {
-  --background-color: #051135;
-}
+@use "common/common";

src/components/Common/BarOp.vue

@@ -1,37 +0,0 @@
-<script lang="ts" setup></script>
-
-<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-2" src="@/assets/images/icon/icon-2.png" /></li>
-      <li><img alt="icon-3" src="@/assets/images/icon/icon-3.png" /></li>
-    </ul>
-    <span class="c-primary">王菠萝</span>
-  </div>
-</template>
-
-<style lang="scss" scoped>
-.bar-op {
-  display: flex;
-  align-items: center;
-  position: absolute;
-  top: 11px;
-  right: 20px;
-  height: 36px;
-
-  ul {
-    float: left;
-    width: 148px;
-
-    img {
-      width: 36px;
-    }
-  }
-
-  span {
-    float: left;
-    font-size: 12px;
-  }
-}
-</style>

src/components/Layout/MainCenterItem.vue

@@ -11,11 +11,11 @@ defineProps({
     <div class="mt-[-12px] font-size-[16px] c-white">今日 进出车辆数/辆</div>
     <div class="mt-[7px] font-size-[18px] c-primary">{{ door }}</div>
     <div class="flex-center mt-[8px] c-primary">
-      <span class="float-left font-size-[14px] c-primary-secondary cursor-pointer">查看</span>
+      <span class="float-left font-size-[14px] c-primary-secondary">查看</span>
       <img
         alt="arrow-item"
         class="float-left h-[16px]"
-        src="../../../../assets/images/arrow/arrow-item.png"
+        src="@/assets/images/arrow/arrow-item.png"
       />
     </div>
   </div>

src/layout/components/layout-content/index.vue

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

src/layout/components/layout-content/page-list.vue

@@ -1,90 +0,0 @@
-<script lang="ts" setup>
-import { useRouter } from 'vue-router';
-
-const router = useRouter();
-</script>
-
-<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" />
-      <span>智慧停车</span>
-    </li>
-    <li class="flex-y-center">
-      <img alt="distribution" src="@/assets/images/icon/smart/distribution.png" />
-      <span>智慧配送</span>
-    </li>
-    <li class="flex-y-center">
-      <img alt="muck" src="@/assets/images/icon/smart/muck.png" />
-      <span>智慧渣土</span>
-    </li>
-    <li class="flex-y-center">
-      <img alt="clean-city" src="@/assets/images/icon/smart/clean-city.png" />
-      <span>智慧洁城</span>
-    </li>
-    <li class="flex-y-center">
-      <img alt="lamp" src="@/assets/images/icon/smart/lamp.png" />
-      <span>智慧路灯</span>
-    </li>
-  </ul>
-</template>
-
-<style lang="scss" scoped>
-.page-list {
-  margin: 104px 0 0 0;
-  width: 1477px;
-  height: 260px;
-
-  li {
-    position: relative;
-    width: 280px;
-    height: 260px;
-    cursor: pointer;
-
-    &:nth-child(n):hover {
-      background: linear-gradient(to bottom, #164ec2c9, #1fa3dec9);
-    }
-
-    &:nth-child(1) {
-      background: linear-gradient(to bottom, #006efec9, #494affc9);
-    }
-
-    &:nth-child(2) {
-      background: linear-gradient(to bottom, #2ad3acc9, #037a9cc9);
-    }
-
-    &:nth-child(3) {
-      background: linear-gradient(to bottom, #4c09bec9, #870effc9);
-    }
-
-    &:nth-child(4) {
-      background: linear-gradient(to bottom, #00b9ffc9, #034f7ec9);
-    }
-
-    &:nth-child(5) {
-      background: linear-gradient(to bottom, #0ad1d1c9, #10607cc9);
-    }
-
-    span {
-      position: relative;
-      display: block;
-      margin: 38px 0 0 0;
-      font-size: 28px;
-      color: #ffffff;
-
-      &::after {
-        content: '';
-        position: absolute;
-        bottom: -9px;
-        left: 50%;
-        transform: translateX(-50%);
-        width: 37px;
-        height: 5px;
-        background: #fff;
-        border-radius: 3px;
-        box-shadow: inset #707070 0 0 3px 1px;
-      }
-    }
-  }
-}
-</style>

src/layout/components/layout-footer/index.vue

@@ -1,56 +0,0 @@
-<script lang="ts" setup>
-import { useRouter } from 'vue-router';
-
-const router = useRouter();
-</script>
-
-<template>
-  <footer class="flex-y-around">
-    <ul class="flex-x-between">
-      <li>
-        <img alt="" src="@/assets/images/icon/icon-4.png" />
-        <span>园区</span>
-      </li>
-      <li>
-        <img alt="" src="@/assets/images/icon/icon-5.png" />
-        <span>园区</span>
-      </li>
-      <li>
-        <img alt="" src="@/assets/images/icon/icon-6.png" />
-        <span>园区</span>
-      </li>
-      <li>
-        <img alt="" src="@/assets/images/icon/icon-7.png" />
-        <span>园区</span>
-      </li>
-    </ul>
-  </footer>
-</template>
-
-<style lang="scss" scoped>
-footer {
-  margin: 190px 0 0 0;
-  z-index: 6;
-
-  ul {
-    width: 431px;
-    height: 90px;
-
-    li {
-      display: flex;
-      flex-direction: column;
-      flex-wrap: wrap;
-      align-items: center;
-      justify-content: center;
-      width: 90px;
-      height: 90px;
-      color: #7cc1ff;
-      background: url('@/assets/images/bg/bg-main-2.png');
-
-      span {
-        margin: 4px 0 0 0;
-      }
-    }
-  }
-}
-</style>

src/layout/components/layout-header/index.vue

@@ -1,27 +0,0 @@
-<script lang="ts" setup>
-import BarOp from '@/components/Common/BarOp.vue';
-</script>
-
-<template>
-  <header>
-    <div class="title">
-      <h1 class="c-white">后台管理系统大标题</h1>
-      <BarOp />
-    </div>
-  </header>
-</template>
-
-<style lang="scss" scoped>
-.title {
-  width: 100%;
-  height: 108px;
-  background: url('@/assets/images/header/bg-layout-header.png') no-repeat center;
-  background-size: cover;
-
-  h1 {
-    text-align: center;
-    line-height: 108px;
-    font-size: 42px;
-  }
-}
-</style>

src/layout/index.vue

@@ -1,34 +1,5 @@
-<script lang="ts" setup>
-import LayoutContent from '@/layout/components/layout-content/index.vue';
-import LayoutFooter from '@/layout/components/layout-footer/index.vue';
-import LayoutHeader from '@/layout/components/layout-header/index.vue';
-</script>
+<script lang="ts" setup></script>
 
-<template>
-  <div class="layout-container">
-    <div class="particle" />
-    <layout-header />
+<template>111</template>
 
-    <layout-content />
-
-    <layout-footer />
-  </div>
-</template>
-
-<style lang="scss" scoped>
-.layout-container {
-  width: 100%;
-  height: 100%;
-  background: url('@/assets/images/bg/bg-layout.png') no-repeat center;
-  background-size: cover;
-
-  .particle {
-    position: absolute;
-    top: 0;
-    width: 100%;
-    height: 100%;
-    background: url('@/assets/images/bg/bg-particle.png') no-repeat center;
-    background-size: cover;
-  }
-}
-</style>
+<style lang="scss" scoped></style>

src/main.ts

@@ -2,7 +2,6 @@ import 'animate.css';
 import '@unocss/reset/tailwind-compat.css';
 import 'uno.css';
 import 'virtual:unocss-devtools';
-import '@/assets/styles/global.scss';
 
 import { createApp } from 'vue';
 

src/views/index.vue

@@ -0,0 +1,5 @@
+<script lang="ts" setup></script>
+
+<template>初始化页面</template>
+
+<style scoped></style>

src/views/smart-parking/components/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/layout/footer-39.png" />
         <span class="text-white">车辆管理</span>
       </li>
     </ul>

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

@@ -1,19 +1,20 @@
 <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';
+import MainCenter from '@/views/smart-parking/components/main/main-center.vue';
+import RoadCondition from '@/views/smart-parking/components/main/road-condition.vue';
+import TrafficOverview from '@/views/smart-parking/components/main/traffic-overview.vue';
 </script>
 
 <template>
   <main class="mt-[78px] mx-auto flex-center w-[1620px] h-[650px]">
     <road-condition />
-    <truck-monitor />
+    <main-center />
     <traffic-overview />
   </main>
 </template>
 
 <style lang="scss" scoped>
-.card-container {
+.left,
+.right {
   width: 380px;
   height: 650px;
   background: url('@/assets/images/bg/bg-side.png') no-repeat center;
@@ -22,8 +23,6 @@ import TruckMonitor from '@/views/smart-parking/components/parking-content/truck
   transform-style: preserve-3d;
 
   ::v-deep(.road-condition) {
-    width: 218px;
-    height: 59px;
     background: url('@/assets/images/bg/bg-road-condition.png') no-repeat center;
     background-size: cover;
 

src/views/smart-parking/components/main/main-center.vue

@@ -1,6 +1,6 @@
 <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';
+import MainCenterItem from '@/components/Layout/MainCenterItem.vue';
+import MainCenterPercent from '@/components/Layout/MainCenterPercent.vue';
 </script>
 
 <template>
@@ -13,36 +13,20 @@ import TruckMonitorCenterPercent from '@/views/smart-parking/components/parking-
       <!-- 中间布局 -->
       <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]" />
+          <MainCenterItem :count="45" class="top-[37px] left-[40px] w-[175px]" door="西北门" />
+          <MainCenterPercent :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]" />
+          <MainCenterItem :count="67" class="top-[37px] left-[120px] w-[175px]" door="东北门" />
+          <MainCenterPercent :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]" />
+          <MainCenterItem :count="345" class="top-[45px] left-[34px] w-[175px]" door="西南门" />
+          <MainCenterPercent :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]" />
+          <MainCenterItem :count="145" class="top-[45px] left-[130px] w-[175px]" door="东南门" />
+          <MainCenterPercent :percent="44" class="top-[40px] left-[66px]" />
         </div>
 
         <div class="main-inner-center">

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

@@ -1,7 +1,7 @@
 <script lang="ts" setup></script>
 
 <template>
-  <div class="card-container">
+  <div class="left">
     <div class="pt-[55px] pl-[25px]" style="transform: rotateY(180deg)">
       <!-- 路况 -->
       <div class="road-condition">
@@ -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/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/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/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/car/car-1.png" />
           <p class="c-white">入卡口（东南门）</p>
           <span class="dashed-circle c-primary-secondary border-b-primary-secondary">畅通</span>
         </li>
@@ -46,7 +46,7 @@
 </template>
 
 <style lang="scss" scoped>
-.card-container {
+.left {
   margin: 0 20px 0 0;
   transform: rotateY(180deg);
 

src/views/smart-parking/components/main/traffic-overview.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-parking/components/main/data';
 
 const weekDataChart = ref<HTMLDivElement>();
 
@@ -11,7 +11,7 @@ onMounted(() => {
 </script>
 
 <template>
-  <div class="card-container ml-[20px]">
+  <div class="right ml-[20px]">
     <div class="pt-[55px] pl-[25px]">
       <!-- 路况 -->
       <div class="road-condition">

src/views/smart-parking/components/nav-bar/index.vue

@@ -0,0 +1,74 @@
+<script lang="ts" setup></script>
+
+<template>
+  <header class="h-[105px]">
+    <div class="time c-primary">2025年2月25日22:45:14</div>
+
+    <div class="title">
+      <h1 class="c-white">智慧智能监管中心</h1>
+      <h2 class="c-primary-secondary">车辆监控中心</h2>
+    </div>
+
+    <div class="bar-op">
+      <ul class="flex-x-around">
+        <li><img alt="icon-1" src="../../../../assets/images/layout/icon-1.png" /></li>
+        <li><img alt="icon-2" src="../../../../assets/images/layout/icon-2.png" /></li>
+        <li><img alt="icon-3" src="../../../../assets/images/layout/icon-3.png" /></li>
+      </ul>
+      <span class="c-primary">王菠萝</span>
+    </div>
+  </header>
+</template>
+
+<style lang="scss" scoped>
+header {
+  position: relative;
+  background: url('@/assets/images/bg/bg-header.png') no-repeat center;
+  background-size: cover;
+}
+
+.time {
+  position: absolute;
+  margin: 0 0 0 41px;
+  line-height: 60px;
+  font-size: 14px;
+}
+
+.title {
+  text-align: center;
+
+  h1 {
+    font-size: 42px;
+    line-height: 60px;
+  }
+
+  h2 {
+    font-size: 24px;
+    line-height: 45px;
+    font-weight: lighter;
+  }
+}
+
+.bar-op {
+  display: flex;
+  align-items: center;
+  position: absolute;
+  top: 11px;
+  right: 20px;
+  height: 36px;
+
+  ul {
+    float: left;
+    width: 148px;
+
+    img {
+      width: 36px;
+    }
+  }
+
+  span {
+    float: left;
+    font-size: 12px;
+  }
+}
+</style>

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

@@ -1,75 +0,0 @@
-<script lang="ts" setup>
-import { useRouter } from 'vue-router';
-
-import BarOp from '@/components/Common/BarOp.vue';
-
-const router = useRouter();
-
-/** 点击家目录 */
-const onHomeClick = () => {
-  router.push('/');
-};
-</script>
-
-<template>
-  <header class="h-[105px]">
-    <div class="time c-primary">2025年2月25日22:45:14</div>
-
-    <div class="title">
-      <h1 class="c-white">智慧智能监管中心</h1>
-      <h2 class="c-primary-secondary">车辆监控中心</h2>
-      <img
-        alt="icon-setting"
-        class="ml-[-284px]"
-        src="@/assets/images/icon/icon-home.png"
-        @click="onHomeClick"
-      />
-      <img alt="icon-home" class="ml-[284px]" src="@/assets/images/icon/icon-setting.png" />
-    </div>
-
-    <BarOp />
-  </header>
-</template>
-
-<style lang="scss" scoped>
-header {
-  position: relative;
-  background: url('@/assets/images/header/bg-parking-header.png') no-repeat center;
-  background-size: cover;
-}
-
-.time {
-  position: absolute;
-  margin: 0 0 0 41px;
-  line-height: 60px;
-  font-size: 14px;
-}
-
-.title {
-  position: relative;
-  text-align: center;
-
-  img {
-    position: absolute;
-    bottom: 0;
-    left: 50%;
-    transform: translateX(-50%);
-    width: 60px;
-    height: 60px;
-    object-fit: cover;
-    z-index: 1;
-    cursor: pointer;
-  }
-
-  h1 {
-    font-size: 42px;
-    line-height: 60px;
-  }
-
-  h2 {
-    font-size: 24px;
-    line-height: 45px;
-    font-weight: lighter;
-  }
-}
-</style>

src/views/smart-parking/index.vue

@@ -1,19 +1,19 @@
 <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';
-import ParkingHeader from '@/views/smart-parking/components/parking-header/index.vue';
+import Footer from '@/views/smart-parking/components/footer/index.vue';
+import AppMain from '@/views/smart-parking/components/main/index.vue';
+import NavBar from '@/views/smart-parking/components/nav-bar/index.vue';
 </script>
 
 <template>
   <div class="layout">
     <div class="arrow left-[38px]">
-      <img alt="左箭头" src="@/assets/images/arrow/arrow-left.png" />
+      <img alt="左箭头" src="../../assets/images/arrow/arrow-left.png" />
     </div>
-    <parking-header />
-    <parking-content />
-    <parking-footer />
+    <NavBar />
+    <AppMain />
+    <Footer />
     <div class="arrow right-[38px]">
-      <img alt="左箭头" src="@/assets/images/arrow/arrow-right.png" />
+      <img alt="左箭头" src="../../assets/images/arrow/arrow-right.png" />
     </div>
   </div>
 </template>
@@ -31,8 +31,6 @@ import ParkingHeader from '@/views/smart-parking/components/parking-header/index
   position: absolute;
   top: 50%;
   transform: translateY(-50%);
-  cursor: pointer;
-  z-index: 1;
 
   img {
     width: 65px;