刘元博
2 years ago
2 changed files with 173 additions and 172 deletions
@ -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