修改首页

src/layout/Layout.vue

@@ -15,13 +15,16 @@
 <script lang="ts">
 /*可以设置默认的名字*/
 export default {
-  name: 'Layout'
+  name: 'Layout',
 }
 </script>
 
 <script setup lang="ts">
 import { Sidebar, AppMain, Navbar } from './components'
 import NavBarTop from './components/NavBarTop/index.vue'
+//import ResizeHook to   listen  page size that   open or close
+import ResizeHook from './hook/ResizeHandler'
+import { useAppStore } from '@/store/app'
 const appStore = useAppStore()
 const opened = computed(() => {
   return appStore.sidebar.opened
@@ -33,12 +36,9 @@ const settings = computed(() => {
 const classObj = computed(() => {
   return {
     closeSidebar: !opened.value,
-    hideSidebar: !settings.value.showLeftMenu
+    hideSidebar: !settings.value.showLeftMenu,
   }
 })
-//import ResizeHook to   listen  page size that   open or close
-import ResizeHook from './hook/ResizeHandler'
-import { useAppStore } from '@/store/app'
 ResizeHook()
 </script>
 
@@ -48,11 +48,11 @@ ResizeHook()
   transition: margin-left 0.28s;
   margin-left: var(--side-bar-width);
   position: relative;
-  border-left: 1px solid var(--layout-border-left-color);
+  // border-left: 1px solid var(--layout-border-left-color);
 }
 .sidebar-container {
   transition: width 0.28s;
-  width: var(--side-bar-width) !important;
+  width: var(--side-bar-width);
   background-color: var(--el-menu-bg-color);
   height: calc(100% - 48px);
   position: fixed;
@@ -65,15 +65,18 @@ ResizeHook()
 }
 .closeSidebar {
   .sidebar-container {
-    width: 54px !important;
+    width: 54px;
+    :deep .menuIcon {
+      margin-right: 0;
+    }
   }
   .main-container {
-    margin-left: 54px !important;
+    margin-left: 54px;
   }
 }
 .hideSidebar {
   .sidebar-container {
-    width: 0 !important;
+    width: 0;
   }
   .main-container {
     margin-left: 0;

src/router/routes/routes-file-one.ts

@@ -1,55 +1,71 @@
-import Layout from "@/layout";
+import Layout from '@/layout'
 
-const HomeRoutes = {
-  path: "/",
-  component: Layout,
-  redirect: "/dashboard",
-  children: [
-    {
-      path: "dashboard",
-      name: "Dashboard",
-      redirect: "/homeOut",
-      component: {
-        render: () => h(resolveComponent("router-view")),
+const HomeRoutes = [
+  {
+    path: '/',
+    component: Layout,
+    hidden: true,
+    children: [
+      {
+        path: '',
+        name: 'HomePage',
+        component: () => import('@/views/HomePage/index.vue'),
       },
-      //using el svg icon, the elSvgIcon first when at the same time using elSvgIcon and icon
-      meta: {
-        title: "决策管理驾驶舱",
-        elSvgIcon: "Histogram",
-        roles: ["decision_management_cockpit_menu"],
-      },
-      children: [
-        {
-          path: "/homein",
-          name: "Homein",
-          component: () => import("@/views/dashboard/index.vue"),
-          meta: { title: "国内进港", roles: ["domestic_arrival_page"] },
-        },
-        {
-          path: "/homeOut",
-          name: "HomeOut",
-          component: () => import("@/views/dashboard/indexHomeOut.vue"),
-          meta: {
-            title: "国内出港",
-            roles: ["domestic_departure_page"],
-          },
+    ],
+  },
+  {
+    path: '/dashboard',
+    component: Layout,
+    children: [
+      {
+        path: '/dashboard',
+        name: 'Dashboard',
+        redirect: '/dashboard/homeOut',
+        component: {
+          render: () => h(resolveComponent('router-view')),
         },
-        {
-          path: "/indexIn",
-          name: "IndexIn",
-          component: () => import("@/views/dashboard/indexIn.vue"),
-          meta: { title: "国际进港", roles: ["international_arrival_page"] },
+        //using el svg icon, the elSvgIcon first when at the same time using elSvgIcon and icon
+        meta: {
+          title: '决策管理驾驶舱',
+          elSvgIcon: 'Histogram',
+          roles: ['decision_management_cockpit_menu'],
         },
-        {
-          path: "/indexOut",
-          name: "IndexOut",
-          component: () => import("@/views/dashboard/indexOut.vue"),
-          meta: { title: "国际出港", roles: ["international_departure_page"] },
-        },
-      ],
-    },
-  ],
-};
+        children: [
+          {
+            path: '/dashboard/homein',
+            name: 'Homein',
+            component: () => import('@/views/dashboard/index.vue'),
+            meta: { title: '国内进港', roles: ['domestic_arrival_page'] },
+          },
+          {
+            path: '/dashboard/homeOut',
+            name: 'HomeOut',
+            component: () => import('@/views/dashboard/indexHomeOut.vue'),
+            meta: {
+              title: '国内出港',
+              roles: ['domestic_departure_page'],
+            },
+          },
+          {
+            path: '/dashboard/indexIn',
+            name: 'IndexIn',
+            component: () => import('@/views/dashboard/indexIn.vue'),
+            meta: { title: '国际进港', roles: ['international_arrival_page'] },
+          },
+          {
+            path: '/dashboard/indexOut',
+            name: 'IndexOut',
+            component: () => import('@/views/dashboard/indexOut.vue'),
+            meta: {
+              title: '国际出港',
+              roles: ['international_departure_page'],
+            },
+          },
+        ],
+      },
+    ],
+  },
+]
 
 // const DemoRoutes = {
 //   path: '/example',
@@ -79,4 +95,4 @@ const HomeRoutes = {
 //   ]
 // }
 
-export default [HomeRoutes];
+export default HomeRoutes

src/views/HomePage/index.vue

@@ -0,0 +1,36 @@
+<template>
+  <div class="home-wrapper">
+    <div class="home-title">
+      <h1 class="home-title-main">欢迎使用</h1>
+      <h2 class="home-title-sub">深圳机场货运一个码系统</h2>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts"></script>
+
+<style scoped lang="scss">
+.home-wrapper {
+  margin: calc(var(--app-main-padding) * -1);
+  width: calc(100% + var(--app-main-padding) * 2);
+  height: calc(100% + var(--app-main-padding) * 2);
+  background: url('@/assets/home/BG_.jpg') no-repeat center center;
+  background-size: cover;
+  display: flex;
+  align-items: center;
+  .home-title {
+    width: 100%;
+    text-align: center;
+    font-family: Microsoft YaHei;
+    font-weight: bold;
+    color: #ffffff;
+    &-main {
+      font-size: 40px;
+      margin-bottom: 16px;
+    }
+    &-sub {
+      font-size: 24px;
+    }
+  }
+}
+</style>