wans

src/components/GlobalHeader/MixGlobalHeader.vue

@@ -112,7 +112,9 @@ export default {
 @import '../index.less';
 
 .header-animat{
-  position: relative;
+  position: fixed;
+  top: 0;
+  width: 100vw;
   z-index: @ant-global-header-zindex;
 }
 .showHeader-enter-active {

src/layouts/BasicLayout.vue

@@ -62,15 +62,14 @@
         <!-- layout header -->
         <MixGlobalHeader
           :mode="layoutMode"
-          :menus="mainMenu.find(item => item.path === '/').children"
+          :menus="menus"
           :theme="navTheme"
           :collapsed="collapsed"
           :device="device"
           @toggle="toggle"
         />
         <!-- layout content -->
-        <a-layout-content :style="{ height: '100%', margin: '24px 24px 0', paddingTop: fixedHeader ? '64px' : '0' }">
-          <multi-tab v-if="multiTab"></multi-tab>
+        <a-layout-content :style="{ height: '100%'}">
           <transition name="page-transition">
             <SideMenuRouteView
               :collapsed="collapsed"
@@ -79,9 +78,7 @@
           </transition>
         </a-layout-content>
         <!-- layout footer -->
-        <a-layout-footer>
-          <global-footer />
-        </a-layout-footer>
+
         <!-- Setting Drawer (show in development mode) -->
         <!--      <setting-drawer v-if="!production"></setting-drawer>-->
         <setting-drawer></setting-drawer>
@@ -131,27 +128,10 @@ export default {
           'target': null,
           'permission': null
         }
-      },
-      menus: [],
-      mixMenu: {}
+      }
     }
   },
   watch: {
-    mainMenu: {
-      deep: true,
-      handler (val) {
-        if (this.isMixMenu()) {
-          const that = this
-          const menus = this.mainMenu.find(item => item.path === '/').children
-          this.menus = menus.map(item => {
-            that.mixMenu[item.name] = item
-            return item
-          })
-        } else {
-          this.menus = this.mainMenu.find(item => item.path === '/').children
-        }
-      }
-    },
     sidebarOpened (val) {
       this.collapsed = !val
     }
@@ -161,6 +141,16 @@ export default {
       // 动态主路由
       mainMenu: state => state.permission.addRouters
     }),
+    menus () {
+      return this.mainMenu.find(item => item.path === '/').children
+    },
+    mixMenu () {
+      const mixMenu = {}
+      this.menus.forEach(item => {
+        mixMenu[item.name] = item
+      })
+      return mixMenu
+    },
     contentPaddingLeft () {
       if (!this.fixSidebar || this.isMobile()) {
         return '0'

src/layouts/SideMenuRouteView.vue

@@ -10,13 +10,19 @@
         :collapsed="collapsed"
         :menu="menu.children"
         :theme="theme"
-        style="padding: 16px 0px;"></s-menu>
+        style="padding: 80px 0px;"></s-menu>
     </a-layout-sider>
-    <a-layout-content>
-      <transition name="page-transition">
-        <RouteView />
-      </transition>
-    </a-layout-content>
+    <a-layout class="mix-layout">
+      <a-layout-content :style="{ minHeight: '100vh', margin: '15px 15px 0', paddingTop: '65px'}">
+        <multi-tab v-if="multiTab"></multi-tab>
+        <transition name="page-transition">
+          <RouteView />
+        </transition>
+      </a-layout-content>
+      <a-layout-footer>
+        <global-footer />
+      </a-layout-footer>
+    </a-layout>
   </a-layout>
 
 </template>
@@ -25,11 +31,15 @@
 import RouteView from './RouteView'
 import SMenu from '@/components/Menu'
 import { mapState } from 'vuex'
+import { mixin, mixinDevice } from '@/utils/mixin'
+import GlobalFooter from '@/components/GlobalFooter'
 
 export default {
   name: 'SideMenuRouteView',
+  mixins: [mixin, mixinDevice],
   components: {
     RouteView,
+    GlobalFooter,
     SMenu
   },
   props: {
@@ -46,11 +56,6 @@ export default {
       type: Boolean,
       required: false,
       default: false
-    },
-    device: {
-      type: String,
-      required: false,
-      default: 'desktop'
     }
   },
   data () {
@@ -63,6 +68,8 @@ export default {
       activeMenu: state => state.permission.activeMenu
     }),
     menu () {
+      console.log(this.menus)
+      console.log(this.activeMenu)
       console.log(this.menus[this.activeMenu])
       return this.menus[this.activeMenu]
     }
@@ -73,6 +80,17 @@ export default {
 }
 </script>
 
-<style>
+<style lang="less">
+  @import url('../components/global.less');
 
+  .ant-pro-multi-tab{
+    margin-left: 0px !important;
+  }
+    .ant-tabs-bar{
+    padding-left: 0px !important;
+  }
+  .mix-layout{
+    height: 100vh;
+    overflow-y: auto;
+  }
 </style>