feat: 首页大屏完成

src/assets/styles/common/common.scss

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

src/assets/styles/global.scss

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

src/components/Common/BarOp.vue

@@ -0,0 +1,37 @@
+<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/layout/components/layout-content/index.vue

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

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

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

@@ -0,0 +1,27 @@
+<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,5 +1,34 @@
-<script lang="ts" setup></script>
+<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>
 
-<template>111</template>
+<template>
+  <div class="layout-container">
+    <div class="particle" />
+    <layout-header />
 
-<style lang="scss" scoped></style>
+    <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>

src/main.ts

@@ -2,6 +2,7 @@ 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

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

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

@@ -1,74 +0,0 @@
-<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-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;
@@ -23,6 +22,8 @@ import TrafficOverview from '@/views/smart-parking/components/main/traffic-overv
   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/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-content/truck-monitor-center-item.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">查看</span>
+      <span class="float-left font-size-[14px] c-primary-secondary cursor-pointer">查看</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/views/smart-parking/components/parking-content/truck-monitor.vue

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

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

@@ -0,0 +1,75 @@
+<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 Footer from '@/views/smart-parking/components/footer/index.vue';
+import ParkingContent from '@/views/smart-parking/components/parking-content/index.vue';
-import AppMain from '@/views/smart-parking/components/main/index.vue';
+import ParkingFooter from '@/views/smart-parking/components/parking-footer/index.vue';
-import NavBar from '@/views/smart-parking/components/nav-bar/index.vue';
+import ParkingHeader 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 />
+    <parking-header />
-    <AppMain />
+    <parking-content />
-    <Footer />
+    <parking-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;