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/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/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 MainCenterPercent from '@/components/Layout/MainCenterPercent.vue';
+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';
 </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="西北门" />
-          <MainCenterPercent :percent="44" class="top-[73px] left-[193px]" />
+          <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]" />
         </div>
         <div class="pos-relative">
-          <MainCenterItem :count="67" class="top-[37px] left-[120px] w-[175px]" door="东北门" />
-          <MainCenterPercent :percent="25" class="top-[73px] right-[192px]" />
+          <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]" />
         </div>
         <div class="pos-relative">
-          <MainCenterItem :count="345" class="top-[45px] left-[34px] w-[175px]" door="西南门" />
-          <MainCenterPercent :percent="25" class="top-[40px] left-[193px]" />
+          <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]" />
         </div>
         <div class="pos-relative">
-          <MainCenterItem :count="145" class="top-[45px] left-[130px] w-[175px]" door="东南门" />
-          <MainCenterPercent :percent="44" class="top-[40px] left-[66px]" />
+          <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]" />
         </div>
 
         <div class="main-inner-center">

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

@@ -1,4 +1,15 @@
-<script lang="ts" setup></script>
+<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]">
@@ -7,16 +18,16 @@
     <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>
 
-    <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>
+    <BarOp />
   </header>
 </template>
 
@@ -35,8 +46,21 @@ header {
 }
 
 .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;
@@ -48,27 +72,4 @@ header {
     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>