refactor: 智能车辆监控修改

src/components/Layout/MainCenterItem.vue

@@ -11,7 +11,7 @@ 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">查看</span>
+      <span class="float-left font-size-[14px] c-primary-secondary cursor-pointer">查看</span>
       <img
         alt="arrow-item"
         class="float-left h-[16px]"

src/views/index.vue

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

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

@@ -1,20 +1,19 @@
 <script lang="ts" setup>
-import MainCenter from '@/views/smart-parking/components/main/main-center.vue';
+import RoadCondition from '@/views/smart-parking/components/parking-content/road-condition.vue';
-import RoadCondition from '@/views/smart-parking/components/main/road-condition.vue';
+import TrafficOverview from '@/views/smart-parking/components/parking-content/traffic-overview.vue';
-import TrafficOverview from '@/views/smart-parking/components/main/traffic-overview.vue';
+import TruckMonitor from '@/views/smart-parking/components/parking-content/truck-monitor.vue';
 </script>
 
 <template>
   <main class="mt-[78px] mx-auto flex-center w-[1620px] h-[650px]">
     <road-condition />
-    <main-center />
+    <truck-monitor />
     <traffic-overview />
   </main>
 </template>
 
 <style lang="scss" scoped>
-.left,
+.card-container {
-.right {
   width: 380px;
   height: 650px;
   background: url('@/assets/images/bg/bg-side.png') no-repeat center;

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

@@ -1,7 +1,7 @@
 <script lang="ts" setup></script>
 
 <template>
-  <div class="left">
+  <div class="card-container">
     <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>
-.left {
+.card-container {
   margin: 0 20px 0 0;
   transform: rotateY(180deg);
 

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

@@ -1,7 +1,7 @@
 <script lang="ts" setup>
 import { onMounted, ref } from 'vue';
 
-import { renderEcharts } from '@/views/smart-parking/components/main/data';
+import { renderEcharts } from '@/views/smart-parking/components/parking-content/data';
 
 const weekDataChart = ref<HTMLDivElement>();
 
@@ -11,7 +11,7 @@ onMounted(() => {
 </script>
 
 <template>
-  <div class="right ml-[20px]">
+  <div class="card-container ml-[20px]">
     <div class="pt-[55px] pl-[25px]">
       <!-- 路况 -->
       <div class="road-condition">

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

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

@@ -11,9 +11,9 @@
 
     <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-1" src="@/assets/images/icon/icon-1.png" /></li>
-        <li><img alt="icon-2" src="../../../../assets/images/layout/icon-2.png" /></li>
+        <li><img alt="icon-2" src="@/assets/images/icon/icon-2.png" /></li>
-        <li><img alt="icon-3" src="../../../../assets/images/layout/icon-3.png" /></li>
+        <li><img alt="icon-3" src="@/assets/images/icon/icon-3.png" /></li>
       </ul>
       <span class="c-primary">王菠萝</span>
     </div>

src/views/smart-parking/index.vue

@@ -1,19 +1,19 @@
 <script lang="ts" setup>
-import Footer from '@/views/smart-parking/components/footer/index.vue';
+import AppMain from '@/views/smart-parking/components/parking-content/index.vue';
-import AppMain from '@/views/smart-parking/components/main/index.vue';
+import Footer from '@/views/smart-parking/components/parking-footer/index.vue';
-import NavBar from '@/views/smart-parking/components/nav-bar/index.vue';
+import NavBar from '@/views/smart-parking/components/parking-header/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>
     <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,6 +31,8 @@ import NavBar from '@/views/smart-parking/components/nav-bar/index.vue';
   position: absolute;
   top: 50%;
   transform: translateY(-50%);
+  cursor: pointer;
+  z-index: 1;
 
   img {
     width: 65px;