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

保存进度！

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

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

@@ -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-container>
<el-header id="layout-header">
<LayoutHeader />
</el-header>
<el-container>
<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>

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

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

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

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

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

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

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

@@ -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({