保存进度！
This commit is contained in:
85
code/web/IT工具综合平台/src/layout/Index.vue
Normal file
85
code/web/IT工具综合平台/src/layout/Index.vue
Normal file
@@ -0,0 +1,85 @@
|
||||
<!--
|
||||
* @Author: Kane
|
||||
* @Date: 2023-01-04 11:05:44
|
||||
* @LastEditors: Kane
|
||||
* @LastEditTime: 2023-01-28 23:35:47
|
||||
* @FilePath: \admin_system\src\layout\Index.vue
|
||||
* @Description:
|
||||
*
|
||||
* Copyright (c) ${2022} by Kane, All Rights Reserved.
|
||||
-->
|
||||
<template>
|
||||
<el-container id="layout-container">
|
||||
<el-header id="layout-header">
|
||||
<LayoutHeader />
|
||||
</el-header>
|
||||
<el-container id="layout-container-down">
|
||||
<el-aside :width="asideWidth" id="layout-aside">
|
||||
<LayoutAside />
|
||||
</el-aside>
|
||||
<el-main id="layout-main">
|
||||
<LayoutMain />
|
||||
</el-main>
|
||||
</el-container>
|
||||
</el-container>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import LayoutAside from "./components/Aside.vue";
|
||||
import LayoutHeader from "./components/Header.vue";
|
||||
import LayoutMain from "./components/Main.vue";
|
||||
|
||||
export default {
|
||||
name: "layoutPage",
|
||||
components: {
|
||||
LayoutAside,
|
||||
LayoutHeader,
|
||||
LayoutMain,
|
||||
},
|
||||
computed: {
|
||||
asideWidth()
|
||||
{
|
||||
const collapse = this.$store.state.app.asideBarCollapse;
|
||||
|
||||
return collapse === true ? "65px" : "180px";
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
#layout-container {
|
||||
height: 100vh;
|
||||
max-height: 100vh;
|
||||
}
|
||||
|
||||
#layout-container-down {
|
||||
height: calc(100vh - 50px);
|
||||
max-height: calc(100vh - 50px);
|
||||
min-height: calc(100vh - 50px);
|
||||
}
|
||||
|
||||
#layout-aside {
|
||||
/* width: 175px; */
|
||||
background-color: #2f4156;
|
||||
overflow-x: hidden;
|
||||
/* height: calc(100vh - 50px);
|
||||
max-height: calc(100vh - 50px);
|
||||
min-height: calc(100vh - 50px); */
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
#layout-header {
|
||||
height: 50px;
|
||||
padding: 0px;
|
||||
flex-grow: 0;
|
||||
}
|
||||
|
||||
#layout-main {
|
||||
padding: 0px;
|
||||
height: 100%;
|
||||
/* height: calc(100vh - 50px); */
|
||||
/* flex-grow: 1; */
|
||||
/* overflow: overlay; */
|
||||
}
|
||||
</style>
|
||||
150
code/web/IT工具综合平台/src/layout/components/Aside.vue
Normal file
150
code/web/IT工具综合平台/src/layout/components/Aside.vue
Normal file
@@ -0,0 +1,150 @@
|
||||
<!--
|
||||
* @Author: Kane
|
||||
* @Date: 2023-01-04 11:30:33
|
||||
* @LastEditors: Kane
|
||||
* @LastEditTime: 2023-01-28 16:01:49
|
||||
* @FilePath: \admin_system\src\layout\components\Aside.vue
|
||||
* @Description:
|
||||
*
|
||||
* Copyright (c) ${2022} by Kane, All Rights Reserved. 223142 2f4156
|
||||
-->
|
||||
<template>
|
||||
<el-scrollbar class="wrapper">
|
||||
<el-menu id="side-bar" router :default-active="currentPath" background-color="#2f4156" text-color="#fff"
|
||||
active-text-color="#ffd04b" :collapse="asideCollapse">
|
||||
<template v-for="route in this.routers" :key="route.path">
|
||||
<template v-if="!route.hidden">
|
||||
<template v-if="hasOnlyChild(route.children)">
|
||||
<!-- 当只有一个子路由时，直接渲染子路由 -->
|
||||
<el-menu-item :index="route.children[0].path" class="sidebar-submenu">
|
||||
<component :is="route.children[0].meta.icon" class="icons">
|
||||
</component>
|
||||
<!-- <el-icon v-html="route.children[0].meta && route.children[0].meta.icon"></el-icon> -->
|
||||
<template #title>{{ route.children[0].meta && route.children[0].meta.title }}</template>
|
||||
</el-menu-item>
|
||||
</template>
|
||||
<template v-else>
|
||||
<!-- 不是一个子路由时，有可能没有子路由，或者是多个子路由 -->
|
||||
<el-sub-menu v-if="route.children && route.children.length" :index="route.path"
|
||||
class="sidebar-submenu">
|
||||
<template #title>
|
||||
<component :is="route.meta.icon" class="icons"></component>
|
||||
<span>{{ route.meta && route.meta.title }}</span>
|
||||
</template>
|
||||
<template v-for="child in route.children" :key="child.path">
|
||||
<el-menu-item v-if="!child.hidden" :index="child.path" class="sidebar-item">
|
||||
<component :is="child.meta.icon" class="icons"></component>
|
||||
<template #title>{{ child.meta && child.meta.title }}</template>
|
||||
</el-menu-item>
|
||||
</template>
|
||||
</el-sub-menu>
|
||||
</template>
|
||||
</template>
|
||||
</template>
|
||||
</el-menu>
|
||||
</el-scrollbar>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { useRouter, useRoute } from "vue-router";
|
||||
|
||||
export default {
|
||||
name: "LayoutAside",
|
||||
data()
|
||||
{
|
||||
return {
|
||||
routers: null,
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
//用于判断一个路由是否只有一项子路由
|
||||
hasOnlyChild: function (children)
|
||||
{
|
||||
//防御验证
|
||||
if (!children)
|
||||
{
|
||||
return false;
|
||||
}
|
||||
|
||||
//剔除掉hidden的路由
|
||||
const routes = children.filter((item) =>
|
||||
{
|
||||
return item.hidden ? false : true;
|
||||
});
|
||||
|
||||
if (routes.length === 1)
|
||||
{
|
||||
return true;
|
||||
}
|
||||
|
||||
return false;
|
||||
},
|
||||
|
||||
},
|
||||
computed: {
|
||||
//获取当前的路由
|
||||
currentPath()
|
||||
{
|
||||
let path = useRoute().path;
|
||||
|
||||
return path;
|
||||
},
|
||||
//获取导航栏是否折叠的标志
|
||||
asideCollapse()
|
||||
{
|
||||
return this.$store.state.app.asideBarCollapse;
|
||||
}
|
||||
},
|
||||
created()
|
||||
{
|
||||
this.routers = useRouter().options.routes;
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.el-menu {
|
||||
border-right: none;
|
||||
/* border-left: 5px solid #1d74b2; */
|
||||
overflow: auto;
|
||||
|
||||
-webkit-touch-callout: none;
|
||||
-moz-user-select: none;
|
||||
/*火狐*/
|
||||
-webkit-user-select: none;
|
||||
/*webkit浏览器*/
|
||||
-ms-user-select: none;
|
||||
/*IE10*/
|
||||
-khtml-user-select: none;
|
||||
/*早期浏览器*/
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
.is-active {
|
||||
background-color: #ffffff4f !important;
|
||||
}
|
||||
|
||||
|
||||
|
||||
/* .is-opened {
|
||||
border-left: 5px solid #1d74b2;
|
||||
} */
|
||||
|
||||
.icons {
|
||||
width: 1em;
|
||||
height: 1em;
|
||||
margin-right: 8px;
|
||||
}
|
||||
|
||||
.sidebar-submenu {
|
||||
background-color: #2f4156 !important;
|
||||
}
|
||||
|
||||
.sidebar-item {
|
||||
background-color: #223142 !important;
|
||||
}
|
||||
|
||||
.wrapper {
|
||||
height: 100%;
|
||||
}
|
||||
</style>
|
||||
100
code/web/IT工具综合平台/src/layout/components/Header.vue
Normal file
100
code/web/IT工具综合平台/src/layout/components/Header.vue
Normal file
@@ -0,0 +1,100 @@
|
||||
<!--
|
||||
* @Author: Kane
|
||||
* @Date: 2023-01-04 11:39:04
|
||||
* @LastEditors: Kane
|
||||
* @LastEditTime: 2023-01-19 14:53:38
|
||||
* @FilePath: \admin_system\src\layout\components\Header.vue
|
||||
* @Description:
|
||||
*
|
||||
* Copyright (c) ${2022} by Kane, All Rights Reserved.
|
||||
-->
|
||||
<template>
|
||||
<div class="app_banner no_select">
|
||||
<span class="company_name">CPIC</span>
|
||||
<div class="version_div">
|
||||
<div>测试版</div>
|
||||
<div>3.6.7 x64 Build 202208301257</div>
|
||||
</div>
|
||||
<div class="buttons_div">
|
||||
<User
|
||||
style="width: 25px; height; 25px; margin-right: 8px; cursor:pointer;"
|
||||
/>
|
||||
<SwitchButton
|
||||
style="width: 25px; height; 25px; margin-right: 8px; cursor:pointer;"
|
||||
@click="logout"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
//import { ElMessage } from "element-plus";
|
||||
import { Logout } from "../../utils/api/info/account";
|
||||
|
||||
export default {
|
||||
name: "AppBanner",
|
||||
data() {
|
||||
return {};
|
||||
},
|
||||
// created() {
|
||||
// console.log("banner请求数据！");
|
||||
// },
|
||||
mounted() {
|
||||
//console.log("banner请求数据！");
|
||||
},
|
||||
methods: {
|
||||
logout() {
|
||||
this.$confirm("是否退出系统？", "请确认", {
|
||||
confirmButtonText: "是",
|
||||
cancelButtonText: "否",
|
||||
type: "warning",
|
||||
}).then(() => {
|
||||
Logout();
|
||||
});
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
<style scoped>
|
||||
.app_banner {
|
||||
background-color: var(--banner-background-color);
|
||||
color: #fff;
|
||||
display: flex;
|
||||
justify-content: left;
|
||||
align-items: center;
|
||||
padding: 0px 15px 0px 15px;
|
||||
height: 100%;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.no_select {
|
||||
-webkit-touch-callout: none;
|
||||
-moz-user-select: none;
|
||||
/*火狐*/
|
||||
-webkit-user-select: none;
|
||||
/*webkit浏览器*/
|
||||
-ms-user-select: none;
|
||||
/*IE10*/
|
||||
-khtml-user-select: none;
|
||||
/*早期浏览器*/
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
.app_banner > * + * {
|
||||
margin-left: 10px;
|
||||
}
|
||||
|
||||
.company_name {
|
||||
font-size: 2rem;
|
||||
}
|
||||
|
||||
.version_div {
|
||||
font-size: 0.5rem;
|
||||
}
|
||||
|
||||
.buttons_div {
|
||||
margin-left: auto;
|
||||
padding-top: 5px;
|
||||
/* border: 1px solid salmon; */
|
||||
}
|
||||
</style>
|
||||
36
code/web/IT工具综合平台/src/layout/components/Main.vue
Normal file
36
code/web/IT工具综合平台/src/layout/components/Main.vue
Normal file
@@ -0,0 +1,36 @@
|
||||
<!--
|
||||
* @Author: Kane
|
||||
* @Date: 2023-01-04 11:40:03
|
||||
* @LastEditors: Kane
|
||||
* @LastEditTime: 2023-01-26 12:34:20
|
||||
* @FilePath: \admin_system\src\layout\components\Main.vue
|
||||
* @Description:
|
||||
*
|
||||
* Copyright (c) ${2022} by Kane, All Rights Reserved.
|
||||
-->
|
||||
<template>
|
||||
<!-- <div class="main-content"> -->
|
||||
<el-scrollbar>
|
||||
<div class="view-wrapper">
|
||||
<router-view />
|
||||
</div>
|
||||
</el-scrollbar>
|
||||
<!-- </div> -->
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: "LayoutMain"
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.el-scrollbar {
|
||||
height: 100%;
|
||||
background-color: #ecf2f9;
|
||||
}
|
||||
|
||||
.view-wrapper {
|
||||
padding: 15px;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user