84 lines
1.6 KiB
Vue
84 lines
1.6 KiB
Vue
<template>
|
|
<div class="app-wrapper" :class="classObj">
|
|
<div class="main-container">
|
|
<navbar />
|
|
<app-main :style="{width: width+'px', height: height+'px'}" />
|
|
<el-footer style="height:30px;text-align:right;line-height: 30px;">
|
|
<span style="font-size:14px;">Copyright ©2018 北京玖琏科技有限公司 京ICP备18028522号</span>
|
|
</el-footer>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import { Navbar, AppMain } from './components'; // Sidebar
|
|
|
|
export default {
|
|
name: 'Layout',
|
|
components: {
|
|
Navbar,
|
|
AppMain
|
|
},
|
|
data() {
|
|
return {
|
|
};
|
|
},
|
|
computed: {
|
|
sidebar() {
|
|
return this.$store.state.app.sidebar;
|
|
},
|
|
device() {
|
|
return this.$store.state.app.device;
|
|
},
|
|
classObj() {
|
|
return {
|
|
withoutAnimation: this.sidebar.withoutAnimation,
|
|
mobile: this.device === 'mobile'
|
|
};
|
|
},
|
|
width() {
|
|
return this.$store.state.app.width;
|
|
},
|
|
height() {
|
|
return this.$store.state.app.height - 60-30;
|
|
}
|
|
},
|
|
created() {
|
|
this.watchRouterUpdate();
|
|
},
|
|
methods: {
|
|
handleClickOutside() {
|
|
this.$store.dispatch('CloseSideBar', { withoutAnimation: false });
|
|
},
|
|
watchRouterUpdate() {
|
|
this.$router.beforeEach((to, from, next) => {
|
|
next();
|
|
});
|
|
}
|
|
}
|
|
};
|
|
</script>
|
|
|
|
<style rel="stylesheet/scss" lang="scss" scoped>
|
|
@import "src/styles/mixin.scss";
|
|
|
|
.app-wrapper {
|
|
@include clearfix;
|
|
position: relative;
|
|
height: 100%;
|
|
width: 100%;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.drawer-bg {
|
|
background: #000;
|
|
opacity: 0.3;
|
|
width: 100%;
|
|
left: 0;
|
|
top: 0;
|
|
height: 100%;
|
|
position: absolute;
|
|
z-index: 999;
|
|
}
|
|
</style>
|