85 lines
1.7 KiB
Vue
85 lines
1.7 KiB
Vue
<!--
|
|
* @Author: Kane
|
|
* @Date: 2023-01-04 11:05:44
|
|
* @LastEditors: Kane
|
|
* @LastEditTime: 2023-01-25 14:55:14
|
|
* @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;
|
|
/* overflow: hiddens; */
|
|
}
|
|
|
|
#layout-aside {
|
|
/* width: 175px; */
|
|
background-color: #223142;
|
|
overflow-x: hidden;
|
|
height: calc(100vh - 50px);
|
|
max-height: calc(100vh - 50px);
|
|
min-height: calc(100vh - 50px);
|
|
}
|
|
|
|
#layout-header {
|
|
height: 50px;
|
|
/* background-color: #77bc99; */
|
|
padding: 0px;
|
|
flex-grow: 0;
|
|
}
|
|
|
|
#layout-main {
|
|
background-color: #ecf2f9;
|
|
/* height: 0; */
|
|
/* flex-grow: 1; */
|
|
overflow: overlay;
|
|
}
|
|
|
|
#layout-container-down {
|
|
height: calc(100vh - 50px);
|
|
max-height: calc(100vh - 50px);
|
|
min-height: calc(100vh - 50px);
|
|
}
|
|
</style> |