feat: 修改页面显示bug;使用公共头部

src/assets/styles/common/common.scss

@@ -23,4 +23,6 @@
 
 body {
   background: var(--background-color);
+  //user-select: none;
+  //overflow: hidden;
 }

src/components/CommonHeader/CommonHeader.vue

@@ -1,19 +1,36 @@
 <script lang="ts" setup>
-import { useRouter } from 'vue-router';
+import { onMounted, ref } from 'vue';
+import { useRoute, useRouter } from 'vue-router';
 
 import BarOp from '@/components/CommonHeader/HeaderBarOp.vue';
+import dayjs from '@/plugins/dayjs';
 import { resetRouter } from '@/router';
 
 const router = useRouter();
+const route = useRoute();
+
+const time = ref('');
+
+/** 显示时间 */
+const displayTime = () => {
+  time.value = dayjs(new Date()).format('YYYY-MM-DD dddd HH:mm:ss');
+  setInterval(() => {
+    time.value = dayjs(new Date()).format('YYYY-MM-DD dddd HH:mm:ss');
+  }, 1000);
+};
+
+onMounted(() => {
+  displayTime();
+});
 </script>
 
 <template>
-  <header class="h-[105px]">
+  <header>
-    <div class="time c-primary">2025年2月25日22:45:14</div>
+    <div class="time c-primary">{{ time }}</div>
 
     <div class="title">
-      <h1 class="c-white">智慧智能监管中心</h1>
+      <h1 class="c-white">{{ route.meta.title }}</h1>
-      <h2 class="c-primary-secondary">车辆监控中心</h2>
+      <h2 class="c-primary-secondary">{{ route.meta.subtitle }}</h2>
       <img
         alt="icon-setting"
         class="ml-[-284px]"
@@ -30,6 +47,7 @@ const router = useRouter();
 <style lang="scss" scoped>
 header {
   position: relative;
+  height: 108px;
   background: url('@/assets/images/header/bg-parking-header.png') no-repeat center;
   background-size: cover;
 }

src/layout/index.vue

@@ -1,18 +1,21 @@
 <script lang="ts" setup>
+import { useRoute, useRouter } from 'vue-router';
+
+import CommonHeader from '@/components/CommonHeader/CommonHeader.vue';
 import LayoutHeader from '@/components/CommonHeader/LayoutHeader.vue';
-import LayoutContent from '@/layout/components/layout-content/index.vue';
+
-import LayoutFooter from '@/layout/components/layout-footer/index.vue';
+const router = useRouter();
+const route = useRoute();
 </script>
 
 <template>
   <div class="layout-container">
-    <div class="particle">
+    <layout-header v-if="route.name === 'welcome'" />
-      <layout-header />
+    <common-header v-else />
 
-      <layout-content />
+    <main>
-
+      <router-view />
-      <layout-footer />
+    </main>
-    </div>
   </div>
 </template>
 
@@ -23,14 +26,5 @@ import LayoutFooter from '@/layout/components/layout-footer/index.vue';
   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/router/index.ts

@@ -2,11 +2,10 @@ import type { App } from 'vue';
 import { createRouter, createWebHashHistory, type RouteRecordRaw } from 'vue-router';
 
 import error from '@/router/modules/error';
-import home from '@/router/modules/home';
 import remaining from '@/router/modules/remaining';
 
 // 静态路由
-const routes: RouteRecordRaw[] = [...remaining, ...home, ...error];
+const routes: RouteRecordRaw[] = [...remaining, ...error];
 const router = createRouter({
   history: createWebHashHistory(),
   routes,

src/router/modules/home.ts

@@ -1,11 +1,10 @@
-import Layout from '@/layout/index.vue';
 import type { RouteConfigsTable } from '@/types/router/Route';
 
 const routes: RouteConfigsTable[] = [
   {
-    path: '/',
+    path: '/welcome',
-    name: '/',
+    name: 'welcome',
-    component: Layout,
+    component: () => import('@/views/home/index.vue'),
     meta: { transition: 'fade', title: '后台管理系统大标题' },
   },
   {

src/router/modules/remaining.ts

@@ -1,8 +1,16 @@
 import type { RouteRecordRaw } from 'vue-router';
 
 import Layout from '@/layout/index.vue';
+import home from '@/router/modules/home';
 
 const routes: RouteRecordRaw[] = [
+  {
+    path: '/',
+    name: 'layout',
+    component: Layout,
+    redirect: 'welcome',
+    children: [...home],
+  },
   {
     path: '/redirect',
     component: Layout,

src/views/home/index.vue

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

src/views/home/layout-content/index.vue

@@ -1,5 +1,5 @@
 <script lang="ts" setup>
-import PageList from '@/layout/components/layout-content/page-list.vue';
+import PageList from '@/views/home/layout-content/page-list.vue';
 </script>
 
 <template>

src/views/home/layout-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/icon/smart/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/icon/smart/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/icon/smart/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/icon/smart/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/icon/smart/lamp.png" />
       <span>智慧路灯</span>
     </li>
   </ul>

src/views/home/layout-footer/index.vue

@@ -2,26 +2,21 @@
 import { useRouter } from 'vue-router';
 
 const router = useRouter();
+
+const list = [
+  { icon: 'material-symbols:home-and-garden', name: '园区', target: '/' },
+  { icon: 'ri:community-fill', name: '园区', target: '/' },
+  { icon: 'ri:community-fill', name: '园区', target: '/' },
+  { icon: 'ri:community-fill', name: '园区', target: '/' },
+];
 </script>
 
 <template>
   <footer class="flex-y-around">
     <ul class="flex-x-between">
-      <li>
+      <li v-for="(item, index) in list" :key="index">
-        <img alt="" src="@/assets/images/icon/icon-4.png" />
+        <i :class="`i-${item.icon}`" />
-        <span>园区</span>
+        <span class="hover">{{ item.name }}</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>
@@ -47,6 +42,12 @@ footer {
       background: url('@/assets/images/bg/bg-main-2.png') no-repeat center;
       background-size: cover;
 
+      i {
+        width: 26px;
+        height: 26px;
+        font-size: 26px;
+      }
+
       img {
         width: 26px;
         height: 26px;

src/views/management-forms/index.vue

@@ -0,0 +1,5 @@
+<script lang="ts" setup></script>
+
+<template></template>
+
+<style lang="scss" scoped></style>

src/views/smart-parking/index.vue

@@ -1,5 +1,4 @@
 <script lang="ts" setup>
-import CommonHeader from '@/components/CommonHeader/CommonHeader.vue';
 import ParkingContent from '@/views/smart-parking/components/parking-content/index.vue';
 import ParkingFooter from '@/views/smart-parking/components/parking-footer/index.vue';
 </script>
@@ -9,7 +8,7 @@ import ParkingFooter from '@/views/smart-parking/components/parking-footer/index
     <div class="arrow left-[38px]">
       <img alt="左箭头" src="@/assets/images/arrow/arrow-left.png" />
     </div>
-    <common-header />
+    <!--<common-header />-->
     <parking-content />
     <parking-footer />
     <div class="arrow right-[38px]">
@@ -20,22 +19,18 @@ import ParkingFooter from '@/views/smart-parking/components/parking-footer/index
 
 <style scoped>
 .layout {
-  position: relative;
   width: 100%;
   height: 100%;
-  background: url('@/assets/images/bg/bg.png') no-repeat center;
-  background-size: cover;
-}
 
-.arrow {
+  .arrow {
-  position: absolute;
+    position: absolute;
-  top: 50%;
+    top: 50%;
-  transform: translateY(-50%);
+    transform: translateY(-50%);
-  cursor: pointer;
+    cursor: pointer;
-  z-index: 1;
 
-  img {
+    img {
-    width: 65px;
+      width: 65px;
+    }
   }
 }
 </style>