欧阳子桐 / RuoYi · 提交

转到一个项目

作者 刘元博
提交 dcb9cb3d135c5adc62931e2076bdabd2e9f22f70 1 个父辈 641e550d

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

内嵌 并排对比
正在显示 2 个修改的文件 包含 173 行增加 和 172 行删除
1 -<template>  
2 - <section class="app-main">  
3 - <transition name="fade-transform" mode="out-in">  
4 - <keep-alive :include="cachedViews">  
5 - <router-view v-if="!$route.meta.link" :key="key" />  
6 - </keep-alive>  
7 - </transition>  
8 - <iframe-toggle />  
9 - </section>  
10 -</template>  
11 -  
12 -<script>  
13 -import iframeToggle from "./IframeToggle/index"  
14 -  
15 -export default {  
16 - name: 'AppMain',  
17 - components: { iframeToggle },  
18 - computed: {  
19 - cachedViews() {  
20 - return this.$store.state.tagsView.cachedViews  
21 - },  
22 - key() {  
23 - return this.$route.path  
24 - }  
25 - }  
26 -}  
27 -</script>  
28 -  
29 -<style lang="scss" scoped>  
30 -.app-main {  
31 - /* 50= navbar 50 */  
32 - min-height: calc(100vh - 50px);  
33 - width: 100%;  
34 - position: relative;  
35 - overflow: hidden;  
36 -}  
37 -  
38 -.fixed-header + .app-main {  
39 - padding-top: 50px;  
40 -}  
41 -  
42 -.hasTagsView {  
43 - .app-main {  
44 - /* 84 = navbar + tags-view = 50 + 34 */  
45 - min-height: calc(100vh - 84px);  
46 - }  
47 -  
48 - .fixed-header + .app-main {  
49 - padding-top: 84px;  
50 - }  
51 -}  
52 -</style>  
53 -  
54 -<style lang="scss">  
55 -// fix css style bug in open el-dialog  
56 -.el-popup-parent--hidden {  
57 - .fixed-header {  
58 - padding-right: 17px;  
59 - }  
60 -}  
61 -</style> 1 +<template>
  2 + <section class="app-main">
  3 + <transition name="fade-transform" mode="out-in">
  4 + <keep-alive :include="cachedViews">
  5 + <router-view v-if="!$route.meta.link" :key="key" />
  6 + </keep-alive>
  7 + </transition>
  8 + <iframe-toggle />
  9 + </section>
  10 +</template>
  11 +
  12 +<script>
  13 +import iframeToggle from "./IframeToggle/index"
  14 +
  15 +export default {
  16 + name: 'AppMain',
  17 + components: { iframeToggle },
  18 + computed: {
  19 + cachedViews() {
  20 + return this.$store.state.tagsView.cachedViews
  21 + },
  22 + key() {
  23 + return this.$route.path
  24 + }
  25 + }
  26 +}
  27 +</script>
  28 +
  29 +<style lang="scss" scoped>
  30 +.app-main {
  31 + /* 50= navbar 50 */
  32 + min-height: calc(100vh - 50px);
  33 + width: 100%;
  34 + position: relative;
  35 + overflow: hidden;
  36 +}
  37 +
  38 +.fixed-header + .app-main {
  39 + padding-top: 50px;
  40 +}
  41 +
  42 +.hasTagsView {
  43 + .app-main {
  44 + /* 84 = navbar + tags-view = 50 + 34 */
  45 + min-height: calc(100vh - 84px);
  46 + }
  47 +
  48 + .fixed-header + .app-main {
  49 + padding-top: 84px;
  50 + }
  51 +}
  52 +</style>
1 -<template>  
2 - <div :class="classObj" class="app-wrapper" :style="{'--current-color': theme}">  
3 - <div v-if="device==='mobile'&&sidebar.opened" class="drawer-bg" @click="handleClickOutside"/>  
4 - <sidebar v-if="!sidebar.hide" class="sidebar-container" />  
5 - <div :class="{hasTagsView:needTagsView,sidebarHide:sidebar.hide}" class="main-container">  
6 - <div :class="{'fixed-header':fixedHeader}">  
7 - <navbar />  
8 - <tags-view v-if="needTagsView" />  
9 - </div>  
10 - <app-main />  
11 - <right-panel>  
12 - <settings />  
13 - </right-panel>  
14 - </div>  
15 - </div>  
16 -</template>  
17 -  
18 -<script>  
19 -import RightPanel from '@/components/RightPanel'  
20 -import { AppMain, Navbar, Settings, Sidebar, TagsView } from './components'  
21 -import ResizeMixin from './mixin/ResizeHandler'  
22 -import { mapState } from 'vuex'  
23 -import variables from '@/assets/styles/variables.scss'  
24 -  
25 -export default {  
26 - name: 'Layout',  
27 - components: {  
28 - AppMain,  
29 - Navbar,  
30 - RightPanel,  
31 - Settings,  
32 - Sidebar,  
33 - TagsView  
34 - },  
35 - mixins: [ResizeMixin],  
36 - computed: {  
37 - ...mapState({  
38 - theme: state => state.settings.theme,  
39 - sideTheme: state => state.settings.sideTheme,  
40 - sidebar: state => state.app.sidebar,  
41 - device: state => state.app.device,  
42 - needTagsView: state => state.settings.tagsView,  
43 - fixedHeader: state => state.settings.fixedHeader  
44 - }),  
45 - classObj() {  
46 - return {  
47 - hideSidebar: !this.sidebar.opened,  
48 - openSidebar: this.sidebar.opened,  
49 - withoutAnimation: this.sidebar.withoutAnimation,  
50 - mobile: this.device === 'mobile'  
51 - }  
52 - },  
53 - variables() {  
54 - return variables;  
55 - }  
56 - },  
57 - methods: {  
58 - handleClickOutside() {  
59 - this.$store.dispatch('app/closeSideBar', { withoutAnimation: false })  
60 - }  
61 - }  
62 -}  
63 -</script>  
64 -  
65 -<style lang="scss" scoped>  
66 - @import "~@/assets/styles/mixin.scss";  
67 - @import "~@/assets/styles/variables.scss";  
68 -  
69 - .app-wrapper {  
70 - @include clearfix;  
71 - position: relative;  
72 - height: 100%;  
73 - width: 100%;  
74 -  
75 - &.mobile.openSidebar {  
76 - position: fixed;  
77 - top: 0;  
78 - }  
79 - }  
80 -  
81 - .drawer-bg {  
82 - background: #000;  
83 - opacity: 0.3;  
84 - width: 100%;  
85 - top: 0;  
86 - height: 100%;  
87 - position: absolute;  
88 - z-index: 999;  
89 - }  
90 -  
91 - .fixed-header {  
92 - position: fixed;  
93 - top: 0;  
94 - right: 0;  
95 - z-index: 9;  
96 - width: calc(100% - #{$base-sidebar-width});  
97 - transition: width 0.28s;  
98 - }  
99 -  
100 - .hideSidebar .fixed-header {  
101 - width: calc(100% - 54px);  
102 - }  
103 -  
104 - .sidebarHide .fixed-header {  
105 - width: 100%;  
106 - }  
107 -  
108 - .mobile .fixed-header {  
109 - width: 100%;  
110 - }  
111 -</style> 1 +<template>
  2 + <div :class="classObj" class="app-wrapper" :style="{'--current-color': theme}">
  3 + <el-scrollbar>
  4 + <div v-if="device==='mobile'&&sidebar.opened" class="drawer-bg" @click="handleClickOutside"/>
  5 + <sidebar v-if="!sidebar.hide" class="sidebar-container"/>
  6 + <div :class="{hasTagsView:needTagsView,sidebarHide:sidebar.hide}" class="main-container">
  7 + <div :class="{'fixed-header':fixedHeader}">
  8 + <navbar/>
  9 + <tags-view v-if="needTagsView"/>
  10 + </div>
  11 + <app-main/>
  12 + <right-panel>
  13 + <settings/>
  14 + </right-panel>
  15 + </div>
  16 + </el-scrollbar>
  17 + </div>
  18 +</template>
  19 +
  20 +<script>
  21 +import RightPanel from '@/components/RightPanel'
  22 +import { AppMain, Navbar, Settings, Sidebar, TagsView } from './components'
  23 +import ResizeMixin from './mixin/ResizeHandler'
  24 +import { mapState } from 'vuex'
  25 +import variables from '@/assets/styles/variables.scss'
  26 +
  27 +export default {
  28 + name: 'Layout',
  29 + components: {
  30 + AppMain,
  31 + Navbar,
  32 + RightPanel,
  33 + Settings,
  34 + Sidebar,
  35 + TagsView
  36 + },
  37 + mixins: [ResizeMixin],
  38 + computed: {
  39 + ...mapState({
  40 + theme: state => state.settings.theme,
  41 + sideTheme: state => state.settings.sideTheme,
  42 + sidebar: state => state.app.sidebar,
  43 + device: state => state.app.device,
  44 + needTagsView: state => state.settings.tagsView,
  45 + fixedHeader: state => state.settings.fixedHeader
  46 + }),
  47 + classObj() {
  48 + return {
  49 + hideSidebar: !this.sidebar.opened,
  50 + openSidebar: this.sidebar.opened,
  51 + withoutAnimation: this.sidebar.withoutAnimation,
  52 + mobile: this.device === 'mobile'
  53 + }
  54 + },
  55 + variables() {
  56 + return variables;
  57 + }
  58 + },
  59 + methods: {
  60 + handleClickOutside() {
  61 + this.$store.dispatch('app/closeSideBar', { withoutAnimation: false })
  62 + }
  63 + }
  64 +}
  65 +</script>
  66 +
  67 +<style lang="scss" scoped>
  68 + @import "~@/assets/styles/mixin.scss";
  69 + @import "~@/assets/styles/variables.scss";
  70 +
  71 + .app-wrapper {
  72 + @include clearfix;
  73 + position: relative;
  74 + height: 100%;
  75 + width: 100%;
  76 +
  77 + .el-scrollbar{
  78 + height: 100%;
  79 + }
  80 +
  81 + ::v-deep .el-scrollbar__wrap {
  82 + overflow-x: hidden;
  83 + }
  84 +
  85 + &.mobile.openSidebar {
  86 + position: fixed;
  87 + top: 0;
  88 + }
  89 + }
  90 +
  91 + .drawer-bg {
  92 + background: #000;
  93 + opacity: 0.3;
  94 + width: 100%;
  95 + top: 0;
  96 + height: 100%;
  97 + position: absolute;
  98 + z-index: 999;
  99 + }
  100 +
  101 + .fixed-header {
  102 + position: fixed;
  103 + top: 0;
  104 + right: 0;
  105 + z-index: 9;
  106 + width: calc(100% - #{$base-sidebar-width});
  107 + transition: width 0.28s;
  108 + }
  109 +
  110 + .hideSidebar .fixed-header {
  111 + width: calc(100% - 54px);
  112 + }
  113 +
  114 + .sidebarHide .fixed-header {
  115 + width: 100%;
  116 + }
  117 +
  118 + .mobile .fixed-header {
  119 + width: 100%;
  120 + }
  121 +</style>