Kane
/
vue-learning
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

保存进度！

This commit is contained in:
Kane 2023-01-05 22:26:40 +08:00
parent 3b1fbf611e
commit 1064fce554
8 changed files with 200 additions and 55 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

15
企业级管理系统/web/admin_system/public/index.html
View File

@ -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> <!DOCTYPE html>
<html lang=""> <html lang="">
<head> <head>
@ -22,6 +32,9 @@
.v-cloak { .v-cloak {
display: none; display: none;
} }
body {
overflow: hidden;
}
</style> </style>
</html> </html>

24
企业级管理系统/web/admin_system/src/assets/css/colors.css Normal file
View File

@ -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;
}

17
企业级管理系统/web/admin_system/src/assets/css/global.css Normal file
View File

@ -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;
}

25
企业级管理系统/web/admin_system/src/layout/Index.vue
View File

@ -2,7 +2,7 @@
* @Author: Kane * @Author: Kane
* @Date: 2023-01-04 11:05:44 * @Date: 2023-01-04 11:05:44
* @LastEditors: Kane * @LastEditors: Kane
* @LastEditTime: 2023-01-05 11:22:34 * @LastEditTime: 2023-01-05 16:35:15
* @FilePath: \admin_system\src\layout\index.vue * @FilePath: \admin_system\src\layout\index.vue
* @Description: * @Description:
* *
@ -10,13 +10,13 @@
--> -->
<template> <template>
<el-container id="layout-container"> <el-container id="layout-container">
<el-aside id="layout-aside"> <el-header id="layout-header">
<LayoutAside /> <LayoutHeader />
</el-aside> </el-header>
<el-container> <el-container>
<el-header id="layout-header"> <el-aside id="layout-aside">
<LayoutHeader /> <LayoutAside />
</el-header> </el-aside>
<el-main id="layout-main"> <el-main id="layout-main">
<LayoutMain /> <LayoutMain />
</el-main> </el-main>
@ -40,19 +40,24 @@ export default {
<style scoped> <style scoped>
#layout-container { #layout-container {
height: 100vh; height: 100vh;
overflow: hiddens;
} }
#layout-aside { #layout-aside {
width: 200px; width: 200px;
background-color: #344a5f; background-color: #344a5f;
overflow: auto;
} }
#layout-header { #layout-header {
height: 75px; /* height: 75px; */
background-color: #77bc99; /* background-color: #77bc99; */
padding: 0px;
} }
#layout-main { #layout-main {
background-color: #bc77a1; background-color: #ddd;
overflow-y: auto;
overflow-x: auto;
} }
</style> </style>

72
企业级管理系统/web/admin_system/src/layout/components/Aside.vue
View File

@ -2,59 +2,57 @@
* @Author: Kane * @Author: Kane
* @Date: 2023-01-04 11:30:33 * @Date: 2023-01-04 11:30:33
* @LastEditors: Kane * @LastEditors: Kane
* @LastEditTime: 2023-01-05 11:31:59 * @LastEditTime: 2023-01-05 21:37:17
* @FilePath: \admin_system\src\layout\components\Aside.vue * @FilePath: \admin_system\src\layout\components\Aside.vue
* @Description: * @Description:
* *
* Copyright (c) ${2022} by Kane, All Rights Reserved. * Copyright (c) ${2022} by Kane, All Rights Reserved.
--> -->
<template> <template>
<el-menu id="side-bar" default-active="4" background-color="#344a5f" text-color="#fff" active-text-color="#ffd04b"> <el-menu id="side-bar" default-active="/console" unique-opened="true" background-color="#344a5f" text-color="#fff"
<el-menu-item index="4"> active-text-color="#ffd04b">
<template #title>控制台</template> <template v-for="route in this.routers" :key="route.path">
</el-menu-item> <template v-if="!route.hidden">
<el-sub-menu index="1"> <el-menu-item v-if="!route.children" :index="route.path">
<template #title>信息管理</template> <template #title>{{ route.meta && route.meta.title }}</template>
<el-menu-item index="1-4-1"> </el-menu-item>
<template #title>信息列表</template> <el-sub-menu v-else :index="route.path">
</el-menu-item> <template #title>{{ route.meta && route.meta.title }}</template>
</el-sub-menu> <template v-for="child in route.children" :key="child.path">
<el-sub-menu index="1"> <el-menu-item v-if="!child.hidden" :index="child.path">
<template #title>信息管理</template> <template #title>{{ child.mate && child.mate.title }}</template>
<el-menu-item index="1-4-1"> </el-menu-item>
<template #title>信息列表</template> </template>
</el-menu-item> </el-sub-menu>
</el-sub-menu> </template>
<el-sub-menu index="2"> </template>
<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> </el-menu>
</template> </template>
<script> <script>
import { useRouter } from "vue-router";
export default { export default {
name: "LayoutAside" name: "LayoutAside",
data()
{
return {
routers: null,
};
},
created()
{
this.routers = useRouter().options.routes;
console.log(this.routers);
}
}; };
</script> </script>
<style scoped> <style scoped>
.el-menu { .el-menu {
border-right: none; border-right: none;
border-left: 5px solid #1d74b2; /* border-left: 5px solid #1d74b2; */
overflow: auto;
} }
</style> </style>

49
企业级管理系统/web/admin_system/src/layout/components/Header.vue
View File

@ -2,22 +2,63 @@
* @Author: Kane * @Author: Kane
* @Date: 2023-01-04 11:39:04 * @Date: 2023-01-04 11:39:04
* @LastEditors: Kane * @LastEditors: Kane
* @LastEditTime: 2023-01-04 11:39:05 * @LastEditTime: 2023-01-05 16:17:43
* @FilePath: \admin_system\src\layout\components\Header.vue * @FilePath: \admin_system\src\layout\components\Header.vue
* @Description: * @Description:
* *
* Copyright (c) ${2022} by Kane, All Rights Reserved. * Copyright (c) ${2022} by Kane, All Rights Reserved.
--> -->
<template> <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> </template>
<script> <script>
export default { export default {
name: "LayoutHeader" name: "AppBanner",
data()
{
return {};
},
// created() {
// console.log("banner请求数据！");
// },
mounted()
{
console.log("banner请求数据！");
},
}; };
</script> </script>
<style scoped> <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> </style>

8
企业级管理系统/web/admin_system/src/main.js
View File

@ -2,7 +2,7 @@
* @Author: Kane * @Author: Kane
* @Date: 2022-12-14 15:12:46 * @Date: 2022-12-14 15:12:46
* @LastEditors: Kane * @LastEditors: Kane
* @LastEditTime: 2022-12-22 21:13:59 * @LastEditTime: 2023-01-05 16:16:35
* @FilePath: \admin_system\src\main.js * @FilePath: \admin_system\src\main.js
* @Description: * @Description:
* *
@ -15,8 +15,14 @@ import store from './store';
import("./css/root.css"); import("./css/root.css");
import("./css/normalize.css"); import("./css/normalize.css");
import("./css/colors.css");
import("element-plus/dist/index.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"; import ElementPlus from "element-plus";
const app = createApp(App); const app = createApp(App);

45
企业级管理系统/web/admin_system/src/router/index.js
View File

@ -2,7 +2,7 @@
* @Author: Kane * @Author: Kane
* @Date: 2022-12-14 15:12:46 * @Date: 2022-12-14 15:12:46
* @LastEditors: Kane * @LastEditors: Kane
* @LastEditTime: 2023-01-04 11:26:12 * @LastEditTime: 2023-01-05 21:38:13
* @FilePath: \admin_system\src\router\index.js * @FilePath: \admin_system\src\router\index.js
* @Description: * @Description:
* *
@ -15,17 +15,58 @@ const routes = [
path: "/", path: "/",
name: "Root", name: "Root",
redirect: "Home", redirect: "Home",
hidden: true,
}, },
{ {
path: "/login", path: "/login",
name: "Login", name: "Login",
component: () => import("../views/account/Login.vue"), component: () => import("../views/account/Login.vue"),
hidden: true,
}, },
{ {
path: "/home", path: "/home",
name: "Home", name: "Home",
meta: {
title: "控制台"
},
children: [
{
path: "/console",
name: "Console",
mate: {
title: "首页"
},
component: () => import("../layout/Index.vue"),
},
],
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({ const router = createRouter({