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