116 lines
2.1 KiB
Vue
116 lines
2.1 KiB
Vue
<template>
|
|
<div class="app-wrapper">
|
|
<div
|
|
v-show="showSidebar && mobileDrawerOpen"
|
|
class="sidebar-backdrop"
|
|
aria-hidden="true"
|
|
@click="closeMobileDrawer" />
|
|
<div class="fixed-header">
|
|
<nav-bar class="nav-bar" />
|
|
</div>
|
|
<div class="main-wrapper">
|
|
<side-bar
|
|
v-show="showSidebar"
|
|
class="sidebar-wrapper"
|
|
:class="{ collapsed: isCollapsed }" />
|
|
<app-main />
|
|
</div>
|
|
<!-- <app-footer /> -->
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import { mapGetters } from 'vuex'
|
|
import { sideBar, appMain, navBar, appFooter } from './components'
|
|
|
|
const LAYOUT_MOBILE_MAX = 768
|
|
|
|
export default {
|
|
name: 'layout',
|
|
components: {
|
|
sideBar,
|
|
appMain,
|
|
navBar,
|
|
appFooter
|
|
},
|
|
data() {
|
|
return {
|
|
layoutWidth:
|
|
typeof window !== 'undefined' ? window.innerWidth : LAYOUT_MOBILE_MAX + 1
|
|
}
|
|
},
|
|
computed: {
|
|
...mapGetters(['sidebar']),
|
|
isCollapsed() {
|
|
return !this.sidebar.opened
|
|
},
|
|
isMobileLayout() {
|
|
return this.layoutWidth <= LAYOUT_MOBILE_MAX
|
|
},
|
|
mobileDrawerOpen() {
|
|
return this.isMobileLayout && this.sidebar.opened
|
|
},
|
|
// 是否显示菜单
|
|
showSidebar() {
|
|
let { menu } = this.$route.query || {}
|
|
return menu != 0
|
|
}
|
|
},
|
|
mounted() {
|
|
this._layoutOnResize = () => {
|
|
this.layoutWidth = window.innerWidth
|
|
}
|
|
window.addEventListener('resize', this._layoutOnResize)
|
|
},
|
|
beforeUnmount() {
|
|
window.removeEventListener('resize', this._layoutOnResize)
|
|
},
|
|
methods: {
|
|
closeMobileDrawer() {
|
|
if (this.isMobileLayout && this.sidebar.opened) {
|
|
this.$store.dispatch('main/closeSideBar')
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="less" scoped>
|
|
.app-wrapper {
|
|
height: 100%;
|
|
width: 100%;
|
|
display: flex;
|
|
flex-direction: column;
|
|
overflow: hidden;
|
|
background: #0f0f12;
|
|
|
|
.sidebar-backdrop {
|
|
display: none;
|
|
}
|
|
|
|
.fixed-header {
|
|
z-index: 100;
|
|
.navbar {
|
|
height: 60px;
|
|
}
|
|
}
|
|
|
|
.main-wrapper {
|
|
display: flex;
|
|
height: calc(100% - 60px);
|
|
position: relative;
|
|
}
|
|
}
|
|
|
|
@media (max-width: 768px) {
|
|
.app-wrapper .sidebar-backdrop {
|
|
display: block;
|
|
position: fixed;
|
|
inset: 60px 0 0 0;
|
|
z-index: 99;
|
|
background: rgba(0, 0, 0, 0.55);
|
|
backdrop-filter: blur(2px);
|
|
}
|
|
}
|
|
</style>
|