保存进度！

2023-01-05 22:26:40 +08:00 · 2023-01-05 22:26:40 +08:00 · 1064fce554
parent 3b1fbf611e
commit 1064fce554
8 changed files with 200 additions and 55 deletions
--- a/企业级管理系统/web/admin_system/public/index.html
+++ b/企业级管理系统/web/admin_system/public/index.html
@ -1,3 +1,13 @@
+<!--
+ * @Author: Kane
+ * @Date: 2022-12-17 11:08:18
+ * @LastEditors: Kane
+ * @LastEditTime: 2023-01-05 16:26:49
+ * @FilePath: \admin_system\public\index.html
+ * @Description: 
+ * 
+ * Copyright (c) ${2022} by Kane, All Rights Reserved. 
+-->
 <!DOCTYPE html>
 <html lang="">
    <head>
@ -22,6 +32,9 @@
        .v-cloak {
            display: none;
        }
+
+        body {
+            overflow: hidden;
+        }
    </style>
 </html>
-
--- a/企业级管理系统/web/admin_system/src/assets/css/colors.css
+++ b/企业级管理系统/web/admin_system/src/assets/css/colors.css
@ -0,0 +1,24 @@
+/*
+ * @Author: Kane
+ * @Date: 2022-11-12 23:22:59
+ * @LastEditors: Kane
+ * @LastEditTime: 2022-12-05 01:07:18
+ * @FilePath: \hello-cli\src\assets\css\colors.css
+ * @Description: 
+ * 
+ * Copyright (c) ${2022} by Kane, All Rights Reserved. 
+ */
+
+html {
+    --backupground-color: #f4f5f7ff;
+    --btn-color-blue: #307dbe;
+    --btn-color-yellow: #f7b24d;
+    --btn-color-green: #5bad60;
+    --btn-color-red: #e56651;
+    --btn-font-color: #fff;
+
+    --input-focus-color: #e56651;
+
+    /* 标题栏背景色 */
+    --banner-background-color: #1d74b2;
+}
--- a/企业级管理系统/web/admin_system/src/assets/css/global.css
+++ b/企业级管理系统/web/admin_system/src/assets/css/global.css
@ -0,0 +1,17 @@
+/*
+ * @Author: Kane
+ * @Date: 2022-12-05 00:07:49
+ * @LastEditors: Kane
+ * @LastEditTime: 2022-12-05 00:48:04
+ * @FilePath: \hello-cli\src\assets\css\global.css
+ * @Description: 
+ * 
+ * Copyright (c) ${2022} by Kane, All Rights Reserved. 
+ */
+html,
+body,
+#app {
+    /* padding: 0px; */
+    margin: 0px;
+    overflow: hidden;
+}
--- a/企业级管理系统/web/admin_system/src/layout/Index.vue
+++ b/企业级管理系统/web/admin_system/src/layout/Index.vue
@ -2,7 +2,7 @@
 * @Author: Kane
 * @Date: 2023-01-04 11:05:44
 * @LastEditors: Kane
- * @LastEditTime: 2023-01-05 11:22:34
+ * @LastEditTime: 2023-01-05 16:35:15
 * @FilePath: \admin_system\src\layout\index.vue
 * @Description: 
 * 
@ -10,13 +10,13 @@
 -->
 <template>
    <el-container id="layout-container">
-        <el-aside id="layout-aside">
-            <LayoutAside />
-        </el-aside>
+        <el-header id="layout-header">
+            <LayoutHeader />
+        </el-header>
        <el-container>
-            <el-header id="layout-header">
-                <LayoutHeader />
-            </el-header>
+            <el-aside id="layout-aside">
+                <LayoutAside />
+            </el-aside>
            <el-main id="layout-main">
                <LayoutMain />
            </el-main>
@ -40,19 +40,24 @@ export default {
 <style scoped>
 #layout-container {
    height: 100vh;
+    overflow: hiddens;
 }

 #layout-aside {
    width: 200px;
    background-color: #344a5f;
+    overflow: auto;
 }

 #layout-header {
-    height: 75px;
-    background-color: #77bc99;
+    /* height: 75px; */
+    /* background-color: #77bc99; */
+    padding: 0px;
 }

 #layout-main {
-    background-color: #bc77a1;
+    background-color: #ddd;
+    overflow-y: auto;
+    overflow-x: auto;
 }
 </style>
--- a/企业级管理系统/web/admin_system/src/layout/components/Aside.vue
+++ b/企业级管理系统/web/admin_system/src/layout/components/Aside.vue
@ -2,59 +2,57 @@
 * @Author: Kane
 * @Date: 2023-01-04 11:30:33
 * @LastEditors: Kane
- * @LastEditTime: 2023-01-05 11:31:59
+ * @LastEditTime: 2023-01-05 21:37:17
 * @FilePath: \admin_system\src\layout\components\Aside.vue
 * @Description: 
 * 
 * Copyright (c) ${2022} by Kane, All Rights Reserved. 
 -->
 <template>
-    <el-menu id="side-bar" default-active="4" background-color="#344a5f" text-color="#fff" active-text-color="#ffd04b">
-        <el-menu-item index="4">
-            <template #title>控制台</template>
-        </el-menu-item>
-        <el-sub-menu index="1">
-            <template #title>信息管理</template>
-            <el-menu-item index="1-4-1">
-                <template #title>信息列表</template>
-            </el-menu-item>
-        </el-sub-menu>
-        <el-sub-menu index="1">
-            <template #title>信息管理</template>
-            <el-menu-item index="1-4-1">
-                <template #title>信息列表</template>
-            </el-menu-item>
-        </el-sub-menu>
-        <el-sub-menu index="2">
-            <template #title>信息管理</template>
-            <el-menu-item index="1-4-1">
-                <template #title>信息列表</template>
-            </el-menu-item>
-        </el-sub-menu>
-        <el-sub-menu index="3">
-            <template #title>信息管理</template>
-            <el-menu-item index="1-4-1">
-                <template #title>信息列表</template>
-            </el-menu-item>
-        </el-sub-menu>
-        <el-sub-menu index="4">
-            <template #title>信息管理</template>
-            <el-menu-item index="1-4-1">
-                <template #title>信息列表</template>
-            </el-menu-item>
-        </el-sub-menu>
+    <el-menu id="side-bar" default-active="/console" unique-opened="true" background-color="#344a5f" text-color="#fff"
+        active-text-color="#ffd04b">
+        <template v-for="route in this.routers" :key="route.path">
+            <template v-if="!route.hidden">
+                <el-menu-item v-if="!route.children" :index="route.path">
+                    <template #title>{{ route.meta && route.meta.title }}</template>
+                </el-menu-item>
+                <el-sub-menu v-else :index="route.path">
+                    <template #title>{{ route.meta && route.meta.title }}</template>
+                    <template v-for="child in route.children" :key="child.path">
+                        <el-menu-item v-if="!child.hidden" :index="child.path">
+                            <template #title>{{ child.mate && child.mate.title }}</template>
+                        </el-menu-item>
+                    </template>
+                </el-sub-menu>
+            </template>
+        </template>
    </el-menu>
 </template>

 <script>
+import { useRouter } from "vue-router";
+
 export default {
-    name: "LayoutAside"
+    name: "LayoutAside",
+    data()
+    {
+        return {
+            routers: null,
+        };
+    },
+    created()
+    {
+        this.routers = useRouter().options.routes;
+
+        console.log(this.routers);
+    }
 };
 </script>

 <style scoped>
 .el-menu {
    border-right: none;
-    border-left: 5px solid #1d74b2;
+    /* border-left: 5px solid #1d74b2; */
+    overflow: auto;
 }
 </style>
--- a/企业级管理系统/web/admin_system/src/layout/components/Header.vue
+++ b/企业级管理系统/web/admin_system/src/layout/components/Header.vue
@ -2,22 +2,63 @@
 * @Author: Kane
 * @Date: 2023-01-04 11:39:04
 * @LastEditors: Kane
- * @LastEditTime: 2023-01-04 11:39:05
+ * @LastEditTime: 2023-01-05 16:17:43
 * @FilePath: \admin_system\src\layout\components\Header.vue
 * @Description: 
 * 
 * Copyright (c) ${2022} by Kane, All Rights Reserved. 
 -->
 <template>
-    <div>Header</div>
+    <div class="app_banner">
+        <span class="company_name">CPIC</span>
+        <div class="version_div">
+            <div>测试版</div>
+            <div>3.6.7 x64 Build202208301257</div>
+        </div>
+        <div class="buttons_div"></div>
+    </div>
 </template>

 <script>
 export default {
-    name: "LayoutHeader"
+    name: "AppBanner",
+    data()
+    {
+        return {};
+    },
+    // created() {
+    //   console.log("banner请求数据！");
+    // },
+    mounted()
+    {
+        console.log("banner请求数据！");
+    },
 };
 </script>
-
 <style scoped>
+.app_banner {
+    background-color: var(--banner-background-color);
+    color: #fff;
+    display: flex;
+    justify-content: left;
+    align-items: center;
+    padding: 0px 15px;
+    height: 100%;
+}

+.app_banner>*+* {
+    margin-left: 10px;
+}
+
+.company_name {
+    font-size: 2rem;
+}
+
+.version_div {
+    font-size: 0.5rem;
+}
+
+.buttons_div {
+    margin-left: auto;
+}
 </style>
--- a/企业级管理系统/web/admin_system/src/main.js
+++ b/企业级管理系统/web/admin_system/src/main.js
@ -2,7 +2,7 @@
 * @Author: Kane
 * @Date: 2022-12-14 15:12:46
 * @LastEditors: Kane
- * @LastEditTime: 2022-12-22 21:13:59
+ * @LastEditTime: 2023-01-05 16:16:35
 * @FilePath: \admin_system\src\main.js
 * @Description: 
 * 
@ -15,8 +15,14 @@ import store from './store';

 import("./css/root.css");
 import("./css/normalize.css");
+import("./css/colors.css");
 import("element-plus/dist/index.css");

+// import "./assets/css/root.css";
+// import "./assets/css/normalize.css";
+// import "./assets/css/global.css";
+// import "./assets/css/colors.css";
+
 import ElementPlus from "element-plus";

 const app = createApp(App);
--- a/企业级管理系统/web/admin_system/src/router/index.js
+++ b/企业级管理系统/web/admin_system/src/router/index.js
@ -2,7 +2,7 @@
 * @Author: Kane
 * @Date: 2022-12-14 15:12:46
 * @LastEditors: Kane
- * @LastEditTime: 2023-01-04 11:26:12
+ * @LastEditTime: 2023-01-05 21:38:13
 * @FilePath: \admin_system\src\router\index.js
 * @Description: 
 * 
@ -15,17 +15,58 @@ const routes = [
    path: "/",
    name: "Root",
    redirect: "Home",
+    hidden: true,
  },
  {
    path: "/login",
    name: "Login",
    component: () => import("../views/account/Login.vue"),
+    hidden: true,
  },
  {
    path: "/home",
    name: "Home",
+    meta: {
+      title: "控制台"
+    },
+    children: [
+      {
+        path: "/console",
+        name: "Console",
+        mate: {
+          title: "首页"
+        },
+        component: () => import("../layout/Index.vue"),
+      },
+    ],
    component: () => import("../layout/Index.vue"),
-  }
+  },
+  {
+    path: "/news",
+    name: "News",
+    meta: {
+      title: "信息管理",
+    },
+    children: [
+      {
+        path: "/newsIndex",
+        name: "NewsIndex",
+        mate: {
+          title: "信息列表"
+        },
+        component: () => import("../layout/Index.vue"),
+      },
+    ],
+    component: () => import("../layout/Index.vue"),
+  },
+  {
+    path: "/user",
+    name: "User",
+    meta: {
+      title: "人员管理",
+    },
+    component: () => import("../layout/Index.vue"),
+  },
 ];

 const router = createRouter({