🐛 fix 多页签在固定头部时的样式问题

Close gh-46
ballcat-projects · May 30, 2022 · 8805a90 · 8805a90
1 parent 9580746
commit 8805a90
Show file tree

Hide file tree

Showing 2 changed files with 13 additions and 8 deletions.
diff --git a/src/layouts/BasicLayout.vue b/src/layouts/BasicLayout.vue
@@ -11,7 +11,7 @@
       <global-header :mode="layout" :menus="menus" :theme="navTheme" />
 
       <!-- 公告彩条 -->
-      <!--      <announcement-ribbon />-->
+      <announcement-ribbon />
 
       <!-- 多页签 -->
       <div v-if="multiTab" :style="multiTabWrapperStyle">
@@ -45,14 +45,16 @@ import SideBar from '@/components/SideBar'
 import GlobalHeader from '@/components/GlobalHeader'
 import GlobalFooter from '@/components/GlobalFooter'
 import GlobalWebSocket from '@/components/WebSocket/GlobalWebSocket'
+import AnnouncementRibbon from '@/components/Notify/AnnouncementRibbon'
 
 export default {
   name: 'BasicLayout',
   components: {
     SideBar,
     GlobalHeader,
     GlobalFooter,
-    GlobalWebSocket
+    GlobalWebSocket,
+    AnnouncementRibbon
   },
   mixins: [mixin, mixinDevice],
   data () {
@@ -62,19 +64,21 @@ export default {
     }
   },
   computed: {
-    ...mapGetters(['sidebarCollapsed', 'contentFullScreen', 'isSideMenu', 'isMixMenu', 'userRouters']),
+    ...mapGetters(['sidebarCollapsed', 'contentFullScreen', 'isSideMenu', 'isMixMenu', 'isNoneMenu', 'userRouters']),
     contentPaddingLeft () {
-      if (!this.fixSiderbar || !this.isSideMenu) {
+      if (!this.isSideMenu) {
         if (this.isMixMenu) {
           return this.sidebarCollapsed ? '48px' : '208px'
         }
-        return '0'
+        return '0px'
       }
       return this.sidebarCollapsed ? '48px' : '208px'
     },
     multiTabWrapperStyle () {
+      // 有公告彩条的时候高度加高
+      const hasAnnouncementRibbon = true;
       let style = {
-        top: '48px',
+        top: hasAnnouncementRibbon ? '80px': '40px',
         width: '100%',
         zIndex: 16,
         right: 0,
@@ -83,7 +87,7 @@ export default {
       // 固定头部时，宽度需要减掉侧边菜单的宽度
       if(this.fixedHeader){
         style.position = 'fixed'
-        style.width = `calc(100% - ${this.contentPaddingLeft})`
+        style.width = this.isNoneMenu? '100%': `calc(100% - ${this.contentPaddingLeft})`
       }
       // 当内容全屏时，不需考虑侧标栏，直接 100% 展开，且没有 header 占位，top 修改为 0
       if(this.contentFullScreen){

diff --git a/src/store/modules/app.js b/src/store/modules/app.js
@@ -46,7 +46,8 @@ const app = {
     // 侧边栏状态
     isDrawerMenu: state => state.sidebarType === SIDEBAR_TYPE.DRAWER_MENU,
     isSideMenu: state => state.sidebarType === SIDEBAR_TYPE.SIDE_MENU,
-    isMixMenu:state => state.sidebarType === SIDEBAR_TYPE.MIX_MENU,
+    isMixMenu: state => state.sidebarType === SIDEBAR_TYPE.MIX_MENU,
+    isNoneMenu: state => state.sidebarType === SIDEBAR_TYPE.NONE,
     sidebarCollapsed: state => state.sidebarCollapsed,
     contentFullScreen: state => state.contentFullScreen,
     keepAliveList:state => state.keepAliveList