114 lines
2.2 KiB
Vue
114 lines
2.2 KiB
Vue
<template>
|
|
<div class="body">
|
|
<el-container>
|
|
<el-header class="index-header">
|
|
<TopBar></TopBar>
|
|
</el-header>
|
|
|
|
<el-container>
|
|
|
|
<el-aside :class="{'index-aside': true, 'index-aside-fold': fold}">
|
|
<el-button size="mini" class="fold" @click="handleFold">{{fold ? '▷' : '◁'}}</el-button>
|
|
<LeftBar v-if="userInfo"></LeftBar>
|
|
</el-aside>
|
|
|
|
<el-main class="index-main">
|
|
<el-scrollbar
|
|
wrap-class="content-scroll-area"
|
|
:native="false"
|
|
>
|
|
<transition name="fade">
|
|
<router-view v-if="$store.state.isRouterAlive"></router-view>
|
|
</transition>
|
|
</el-scrollbar>
|
|
</el-main>
|
|
|
|
</el-container>
|
|
</el-container>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import LeftBar from './menu/leftbarnew.vue'
|
|
import TopBar from './menu/topbar.vue'
|
|
import { mapGetters } from 'vuex'
|
|
export default {
|
|
name: 'Index',
|
|
components: {
|
|
LeftBar,
|
|
TopBar
|
|
},
|
|
data() {
|
|
return {
|
|
// isRouterAlive: true
|
|
fold: false
|
|
}
|
|
},
|
|
computed: {
|
|
...mapGetters({
|
|
userInfo: 'userInfo'
|
|
})
|
|
},
|
|
methods: {
|
|
// reload () {
|
|
// this.isRouterAlive = false
|
|
// this.$nextTick(() => (this.isRouterAlive = true))
|
|
// }
|
|
handleFold() {
|
|
this.fold = !this.fold
|
|
}
|
|
},
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss">
|
|
.body {
|
|
background: #f5f5f5;
|
|
.el-header,
|
|
.el-main,
|
|
.el-aside {
|
|
padding: 0;
|
|
}
|
|
.el-header {
|
|
box-shadow: 0 1px 3px rgba(#ccc, 0.5);
|
|
}
|
|
.el-container {
|
|
// height: calc(100vh - 61px);
|
|
padding: 0;
|
|
margin: 0;
|
|
}
|
|
.index-header {
|
|
margin-bottom: 2px;
|
|
}
|
|
.index-aside {
|
|
width: 231px !important; // 50
|
|
height: calc(100vh - 63px);
|
|
position: relative;
|
|
transition: all 0.3s;
|
|
overflow: hidden;
|
|
}
|
|
.index-aside-fold {
|
|
width: 42px !important;
|
|
}
|
|
.index-main {
|
|
height: calc(100vh - 63px);
|
|
overflow: hidden;
|
|
}
|
|
.content-scroll-area {
|
|
max-height: calc(100vh - 63px);
|
|
}
|
|
.fold {
|
|
position: absolute;
|
|
right: 0;
|
|
top: 14px;
|
|
z-index: 1;
|
|
border-radius: 0;
|
|
border: 1px solid #e6e6e6;
|
|
border-right: none;
|
|
border-top-left-radius: 100px;
|
|
border-bottom-left-radius: 100px;
|
|
color: #ccc;
|
|
}
|
|
}
|
|
</style>
|