刘元博
2 years ago
parent
641e550d7f
commit
dcb9cb3d13
@ -1,61 +1,52 @@ |
||||
<template> |
||||
<section class="app-main"> |
||||
<transition name="fade-transform" mode="out-in"> |
||||
<keep-alive :include="cachedViews"> |
||||
<router-view v-if="!$route.meta.link" :key="key" /> |
||||
</keep-alive> |
||||
</transition> |
||||
<iframe-toggle /> |
||||
</section> |
||||
</template> |
||||
|
||||
<script> |
||||
import iframeToggle from "./IframeToggle/index" |
||||
|
||||
export default { |
||||
name: 'AppMain', |
||||
components: { iframeToggle }, |
||||
computed: { |
||||
cachedViews() { |
||||
return this.$store.state.tagsView.cachedViews |
||||
}, |
||||
key() { |
||||
return this.$route.path |
||||
} |
||||
} |
||||
} |
||||
</script> |
||||
|
||||
<style lang="scss" scoped> |
||||
.app-main { |
||||
/* 50= navbar 50 */ |
||||
min-height: calc(100vh - 50px); |
||||
width: 100%; |
||||
position: relative; |
||||
overflow: hidden; |
||||
} |
||||
|
||||
.fixed-header + .app-main { |
||||
padding-top: 50px; |
||||
} |
||||
|
||||
.hasTagsView { |
||||
.app-main { |
||||
/* 84 = navbar + tags-view = 50 + 34 */ |
||||
min-height: calc(100vh - 84px); |
||||
} |
||||
|
||||
.fixed-header + .app-main { |
||||
padding-top: 84px; |
||||
} |
||||
} |
||||
</style> |
||||
|
||||
<style lang="scss"> |
||||
// fix css style bug in open el-dialog |
||||
.el-popup-parent--hidden { |
||||
.fixed-header { |
||||
padding-right: 17px; |
||||
} |
||||
} |
||||
</style> |
||||
<template> |
||||
<section class="app-main"> |
||||
<transition name="fade-transform" mode="out-in"> |
||||
<keep-alive :include="cachedViews"> |
||||
<router-view v-if="!$route.meta.link" :key="key" /> |
||||
</keep-alive> |
||||
</transition> |
||||
<iframe-toggle /> |
||||
</section> |
||||
</template> |
||||
|
||||
<script> |
||||
import iframeToggle from "./IframeToggle/index" |
||||
|
||||
export default { |
||||
name: 'AppMain', |
||||
components: { iframeToggle }, |
||||
computed: { |
||||
cachedViews() { |
||||
return this.$store.state.tagsView.cachedViews |
||||
}, |
||||
key() { |
||||
return this.$route.path |
||||
} |
||||
} |
||||
} |
||||
</script> |
||||
|
||||
<style lang="scss" scoped> |
||||
.app-main { |
||||
/* 50= navbar 50 */ |
||||
min-height: calc(100vh - 50px); |
||||
width: 100%; |
||||
position: relative; |
||||
overflow: hidden; |
||||
} |
||||
|
||||
.fixed-header + .app-main { |
||||
padding-top: 50px; |
||||
} |
||||
|
||||
.hasTagsView { |
||||
.app-main { |
||||
/* 84 = navbar + tags-view = 50 + 34 */ |
||||
min-height: calc(100vh - 84px); |
||||
} |
||||
|
||||
.fixed-header + .app-main { |
||||
padding-top: 84px; |
||||
} |
||||
} |
||||
</style> |
||||
|
||||
@ -1,111 +1,121 @@ |
||||
<template> |
||||
<div :class="classObj" class="app-wrapper" :style="{'--current-color': theme}"> |
||||
<div v-if="device==='mobile'&&sidebar.opened" class="drawer-bg" @click="handleClickOutside"/> |
||||
<sidebar v-if="!sidebar.hide" class="sidebar-container" /> |
||||
<div :class="{hasTagsView:needTagsView,sidebarHide:sidebar.hide}" class="main-container"> |
||||
<div :class="{'fixed-header':fixedHeader}"> |
||||
<navbar /> |
||||
<tags-view v-if="needTagsView" /> |
||||
</div> |
||||
<app-main /> |
||||
<right-panel> |
||||
<settings /> |
||||
</right-panel> |
||||
</div> |
||||
</div> |
||||
</template> |
||||
|
||||
<script> |
||||
import RightPanel from '@/components/RightPanel' |
||||
import { AppMain, Navbar, Settings, Sidebar, TagsView } from './components' |
||||
import ResizeMixin from './mixin/ResizeHandler' |
||||
import { mapState } from 'vuex' |
||||
import variables from '@/assets/styles/variables.scss' |
||||
|
||||
export default { |
||||
name: 'Layout', |
||||
components: { |
||||
AppMain, |
||||
Navbar, |
||||
RightPanel, |
||||
Settings, |
||||
Sidebar, |
||||
TagsView |
||||
}, |
||||
mixins: [ResizeMixin], |
||||
computed: { |
||||
...mapState({ |
||||
theme: state => state.settings.theme, |
||||
sideTheme: state => state.settings.sideTheme, |
||||
sidebar: state => state.app.sidebar, |
||||
device: state => state.app.device, |
||||
needTagsView: state => state.settings.tagsView, |
||||
fixedHeader: state => state.settings.fixedHeader |
||||
}), |
||||
classObj() { |
||||
return { |
||||
hideSidebar: !this.sidebar.opened, |
||||
openSidebar: this.sidebar.opened, |
||||
withoutAnimation: this.sidebar.withoutAnimation, |
||||
mobile: this.device === 'mobile' |
||||
} |
||||
}, |
||||
variables() { |
||||
return variables; |
||||
} |
||||
}, |
||||
methods: { |
||||
handleClickOutside() { |
||||
this.$store.dispatch('app/closeSideBar', { withoutAnimation: false }) |
||||
} |
||||
} |
||||
} |
||||
</script> |
||||
|
||||
<style lang="scss" scoped> |
||||
@import "~@/assets/styles/mixin.scss"; |
||||
@import "~@/assets/styles/variables.scss"; |
||||
|
||||
.app-wrapper { |
||||
@include clearfix; |
||||
position: relative; |
||||
height: 100%; |
||||
width: 100%; |
||||
|
||||
&.mobile.openSidebar { |
||||
position: fixed; |
||||
top: 0; |
||||
} |
||||
} |
||||
|
||||
.drawer-bg { |
||||
background: #000; |
||||
opacity: 0.3; |
||||
width: 100%; |
||||
top: 0; |
||||
height: 100%; |
||||
position: absolute; |
||||
z-index: 999; |
||||
} |
||||
|
||||
.fixed-header { |
||||
position: fixed; |
||||
top: 0; |
||||
right: 0; |
||||
z-index: 9; |
||||
width: calc(100% - #{$base-sidebar-width}); |
||||
transition: width 0.28s; |
||||
} |
||||
|
||||
.hideSidebar .fixed-header { |
||||
width: calc(100% - 54px); |
||||
} |
||||
|
||||
.sidebarHide .fixed-header { |
||||
width: 100%; |
||||
} |
||||
|
||||
.mobile .fixed-header { |
||||
width: 100%; |
||||
} |
||||
</style> |
||||
<template> |
||||
<div :class="classObj" class="app-wrapper" :style="{'--current-color': theme}"> |
||||
<el-scrollbar> |
||||
<div v-if="device==='mobile'&&sidebar.opened" class="drawer-bg" @click="handleClickOutside"/> |
||||
<sidebar v-if="!sidebar.hide" class="sidebar-container"/> |
||||
<div :class="{hasTagsView:needTagsView,sidebarHide:sidebar.hide}" class="main-container"> |
||||
<div :class="{'fixed-header':fixedHeader}"> |
||||
<navbar/> |
||||
<tags-view v-if="needTagsView"/> |
||||
</div> |
||||
<app-main/> |
||||
<right-panel> |
||||
<settings/> |
||||
</right-panel> |
||||
</div> |
||||
</el-scrollbar> |
||||
</div> |
||||
</template> |
||||
|
||||
<script> |
||||
import RightPanel from '@/components/RightPanel' |
||||
import { AppMain, Navbar, Settings, Sidebar, TagsView } from './components' |
||||
import ResizeMixin from './mixin/ResizeHandler' |
||||
import { mapState } from 'vuex' |
||||
import variables from '@/assets/styles/variables.scss' |
||||
|
||||
export default { |
||||
name: 'Layout', |
||||
components: { |
||||
AppMain, |
||||
Navbar, |
||||
RightPanel, |
||||
Settings, |
||||
Sidebar, |
||||
TagsView |
||||
}, |
||||
mixins: [ResizeMixin], |
||||
computed: { |
||||
...mapState({ |
||||
theme: state => state.settings.theme, |
||||
sideTheme: state => state.settings.sideTheme, |
||||
sidebar: state => state.app.sidebar, |
||||
device: state => state.app.device, |
||||
needTagsView: state => state.settings.tagsView, |
||||
fixedHeader: state => state.settings.fixedHeader |
||||
}), |
||||
classObj() { |
||||
return { |
||||
hideSidebar: !this.sidebar.opened, |
||||
openSidebar: this.sidebar.opened, |
||||
withoutAnimation: this.sidebar.withoutAnimation, |
||||
mobile: this.device === 'mobile' |
||||
} |
||||
}, |
||||
variables() { |
||||
return variables; |
||||
} |
||||
}, |
||||
methods: { |
||||
handleClickOutside() { |
||||
this.$store.dispatch('app/closeSideBar', { withoutAnimation: false }) |
||||
} |
||||
} |
||||
} |
||||
</script> |
||||
|
||||
<style lang="scss" scoped> |
||||
@import "~@/assets/styles/mixin.scss"; |
||||
@import "~@/assets/styles/variables.scss"; |
||||
|
||||
.app-wrapper { |
||||
@include clearfix; |
||||
position: relative; |
||||
height: 100%; |
||||
width: 100%; |
||||
|
||||
.el-scrollbar{ |
||||
height: 100%; |
||||
} |
||||
|
||||
::v-deep .el-scrollbar__wrap { |
||||
overflow-x: hidden; |
||||
} |
||||
|
||||
&.mobile.openSidebar { |
||||
position: fixed; |
||||
top: 0; |
||||
} |
||||
} |
||||
|
||||
.drawer-bg { |
||||
background: #000; |
||||
opacity: 0.3; |
||||
width: 100%; |
||||
top: 0; |
||||
height: 100%; |
||||
position: absolute; |
||||
z-index: 999; |
||||
} |
||||
|
||||
.fixed-header { |
||||
position: fixed; |
||||
top: 0; |
||||
right: 0; |
||||
z-index: 9; |
||||
width: calc(100% - #{$base-sidebar-width}); |
||||
transition: width 0.28s; |
||||
} |
||||
|
||||
.hideSidebar .fixed-header { |
||||
width: calc(100% - 54px); |
||||
} |
||||
|
||||
.sidebarHide .fixed-header { |
||||
width: 100%; |
||||
} |
||||
|
||||
.mobile .fixed-header { |
||||
width: 100%; |
||||
} |
||||
</style> |
||||
|
||||
Loading…
Reference in new issue