master
parent
8c274381a9
commit
ba26bc38fd
@ -1,93 +1,103 @@
|
|||||||
<template>
|
<template>
|
||||||
<div :class="classObj" class="app-wrapper">
|
<div :class="classObj" class="app-wrapper">
|
||||||
<div v-if="device==='mobile'&&sidebar.opened" class="drawer-bg" @click="handleClickOutside" />
|
<div v-if="device==='mobile'&&sidebar.opened" class="drawer-bg" @click="handleClickOutside" />
|
||||||
<sidebar class="sidebar-container" />
|
<sidebar class="sidebar-container" />
|
||||||
<div class="main-container">
|
<div class="main-container">
|
||||||
<div :class="{'fixed-header':fixedHeader}">
|
<div :class="{'fixed-header':fixedHeader}">
|
||||||
<navbar />
|
<navbar />
|
||||||
</div>
|
</div>
|
||||||
<app-main />
|
<el-scrollbar :style="{height:'100%','padding':'50px 20px 0 20px'}">
|
||||||
</div>
|
<app-main />
|
||||||
</div>
|
</el-scrollbar>
|
||||||
</template>
|
</div>
|
||||||
|
</div>
|
||||||
<script>
|
</template>
|
||||||
import { Navbar, Sidebar, AppMain } from './components'
|
|
||||||
import ResizeMixin from './mixin/ResizeHandler'
|
<script>
|
||||||
|
import {
|
||||||
export default {
|
Navbar,
|
||||||
name: 'Layout',
|
Sidebar,
|
||||||
components: {
|
AppMain
|
||||||
Navbar,
|
} from './components'
|
||||||
Sidebar,
|
import ResizeMixin from './mixin/ResizeHandler'
|
||||||
AppMain
|
|
||||||
},
|
export default {
|
||||||
mixins: [ResizeMixin],
|
name: 'Layout',
|
||||||
computed: {
|
components: {
|
||||||
sidebar() {
|
Navbar,
|
||||||
return this.$store.state.app.sidebar
|
Sidebar,
|
||||||
},
|
AppMain
|
||||||
device() {
|
},
|
||||||
return this.$store.state.app.device
|
mixins: [ResizeMixin],
|
||||||
},
|
computed: {
|
||||||
fixedHeader() {
|
sidebar() {
|
||||||
return this.$store.state.settings.fixedHeader
|
return this.$store.state.app.sidebar
|
||||||
},
|
},
|
||||||
classObj() {
|
device() {
|
||||||
return {
|
return this.$store.state.app.device
|
||||||
hideSidebar: !this.sidebar.opened,
|
},
|
||||||
openSidebar: this.sidebar.opened,
|
fixedHeader() {
|
||||||
withoutAnimation: this.sidebar.withoutAnimation,
|
return this.$store.state.settings.fixedHeader
|
||||||
mobile: this.device === 'mobile'
|
},
|
||||||
}
|
classObj() {
|
||||||
}
|
return {
|
||||||
},
|
hideSidebar: !this.sidebar.opened,
|
||||||
methods: {
|
openSidebar: this.sidebar.opened,
|
||||||
handleClickOutside() {
|
withoutAnimation: this.sidebar.withoutAnimation,
|
||||||
this.$store.dispatch('app/closeSideBar', { withoutAnimation: false })
|
mobile: this.device === 'mobile'
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
},
|
||||||
</script>
|
methods: {
|
||||||
|
handleClickOutside() {
|
||||||
<style lang="scss" scoped>
|
this.$store.dispatch('app/closeSideBar', {
|
||||||
@import "~@/styles/mixin.scss";
|
withoutAnimation: false
|
||||||
@import "~@/styles/variables.scss";
|
})
|
||||||
|
}
|
||||||
.app-wrapper {
|
}
|
||||||
@include clearfix;
|
}
|
||||||
position: relative;
|
</script>
|
||||||
height: 100%;
|
|
||||||
width: 100%;
|
<style lang="scss" scoped>
|
||||||
&.mobile.openSidebar{
|
@import "~@/styles/mixin.scss";
|
||||||
position: fixed;
|
@import "~@/styles/variables.scss";
|
||||||
top: 0;
|
|
||||||
}
|
.app-wrapper {
|
||||||
}
|
@include clearfix;
|
||||||
.drawer-bg {
|
position: relative;
|
||||||
background: #000;
|
height: 100%;
|
||||||
opacity: 0.3;
|
width: 100%;
|
||||||
width: 100%;
|
|
||||||
top: 0;
|
&.mobile.openSidebar {
|
||||||
height: 100%;
|
position: fixed;
|
||||||
position: absolute;
|
top: 0;
|
||||||
z-index: 999;
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.fixed-header {
|
.drawer-bg {
|
||||||
position: fixed;
|
background: #000;
|
||||||
top: 0;
|
opacity: 0.3;
|
||||||
right: 0;
|
width: 100%;
|
||||||
z-index: 9;
|
top: 0;
|
||||||
width: calc(100% - #{$sideBarWidth});
|
height: 100%;
|
||||||
transition: width 0.28s;
|
position: absolute;
|
||||||
}
|
z-index: 999;
|
||||||
|
}
|
||||||
.hideSidebar .fixed-header {
|
|
||||||
width: calc(100% - 54px)
|
.fixed-header {
|
||||||
}
|
position: fixed;
|
||||||
|
top: 0;
|
||||||
.mobile .fixed-header {
|
right: 0;
|
||||||
width: 100%;
|
z-index: 9;
|
||||||
}
|
width: calc(100% - #{$sideBarWidth});
|
||||||
|
transition: width 0.28s;
|
||||||
|
}
|
||||||
|
|
||||||
|
.hideSidebar .fixed-header {
|
||||||
|
width: calc(100% - 54px)
|
||||||
|
}
|
||||||
|
|
||||||
|
.mobile .fixed-header {
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|||||||
Loading…
Reference in new issue