优化弹窗后导航栏偏移的问题
This commit is contained in:
刘元博
parent
641e550d7f
commit
dcb9cb3d13
|
|
@ -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