Skip to content
GitLab
Commit dcb9cb3d authored by 刘元博's avatar 刘元博
Browse files

优化弹窗后导航栏偏移的问题

parent 641e550d
Hide whitespace changes
Inline Side-by-side
ruoyi-ui/src/layout/components/AppMain.vue
View file @ dcb9cb3d
<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>
ruoyi-ui/src/layout/index.vue
View file @ dcb9cb3d
<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>
Supports Markdown
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment