<template>
|
<el-container class="main-layout">
|
<el-aside :width="asideWidth"><left-aside /></el-aside>
|
<el-container>
|
<el-header height="50px">
|
<main-header />
|
</el-header>
|
<el-main class="subpage-containter-box">
|
<main-tabs />
|
<main-title />
|
<main-sub-containter />
|
</el-main>
|
</el-container>
|
</el-container>
|
</template>
|
|
<script>
|
import LeftAside from './compontents/LeftAside.vue'
|
import MainHeader from './compontents/Header.vue'
|
import MainTabs from './compontents/Tabs.vue'
|
import MainTitle from './compontents/Title.vue'
|
import MainSubContainter from './compontents/SubContainter.vue'
|
export default {
|
name:'layoutIndexPage',
|
components:{
|
LeftAside,MainHeader,MainTabs,MainTitle,MainSubContainter
|
},
|
computed:{
|
asideWidth(){
|
let f = this.$store.getters['system/getCollapse'];
|
if (f) {
|
return '64px';
|
} else {
|
return '200px';
|
}
|
}
|
},
|
provide(){
|
return {
|
subpageQuery:()=>this.$route.query
|
}
|
},
|
mounted(){
|
this.$loading().close();
|
}
|
}
|
</script>
|
|
<style scoped lang="scss">
|
.main-layout{
|
height: 100%;
|
min-width: 1200px;
|
min-height: 800px;
|
.el-aside{
|
transition: width 300ms;
|
}
|
.subpage-containter-box{
|
background-color: #f0f2f5;
|
position: relative;
|
padding-top: 88px !important;
|
box-sizing: border-box;
|
}
|
}
|
</style>
|
