Преглед изворни кода

横向菜单、去掉页签

chenrui пре 3 година
родитељ
комит
7569133921

+ 3 - 3
src/App.vue

@@ -53,9 +53,9 @@ export default {
     text-align: center;
     color: #fff;
     font-size: 30px;
-    top: 0;
+    bottom: 0;
     left: 0;
-    width: 50%;
-    margin-left: 25%;
+    width: 40%;
+    /* margin-left: 25%; */
   }
 </style>

+ 2 - 2
src/components/GlobalHeader/GlobalHeader.vue

@@ -21,7 +21,7 @@
           </div>
         </div>
       </a-layout-header>
-      <multi-tab :class="[fixedHeader ? 'ant-header-fixedMultiTab' : 'ant-header-multiTab',sidebarOpened ? 'ant-header-side-opened' : 'ant-header-side-closed',]" v-if="multiTab"></multi-tab>
+      <!-- <multi-tab :class="[fixedHeader ? 'ant-header-fixedMultiTab' : 'ant-header-multiTab',sidebarOpened ? 'ant-header-side-opened' : 'ant-header-side-closed',]" v-if="multiTab"></multi-tab> -->
     </div>
   </transition>
 </template>
@@ -44,7 +44,7 @@ export default {
     mode: {
       type: String,
       // sidemenu, topmenu
-      default: 'sidemenu'
+      default: 'topmenu'
     },
     menus: {
       type: Array,

+ 3 - 3
src/components/global.less

@@ -105,7 +105,7 @@ body {
         .header-index-left {
           flex: 1 1 1000px;
           .logo{
-            margin:0 25px;
+            margin:0 5px;
           }
           .ant-menu.ant-menu-horizontal{
             max-width: calc(100vw - 160px - 238px - 25px);
@@ -317,8 +317,8 @@ body {
             color: #fff;
             display: inline-block;
             vertical-align: top;
-            font-size: 16px;
-            margin: 0 0 0 12px;
+            font-size: 12px;
+            margin: 0 0 0 3px;
             font-weight: 400;
           }
         }

+ 17 - 0
src/components/index.less

@@ -294,6 +294,23 @@
     }
   }
 }
+.top-nav-header-index{
+  .ant-menu{
+    .ant-menu-item, .ant-menu-submenu-title{
+      padding: 0 10px;
+      line-height: ;
+    }
+  }
+}
+.ant-menu-submenu{
+  .ant-menu{
+    li{
+      height: 30px;
+      line-height: 30px;
+      margin: 5px 0 3px;
+    }
+  }
+}
 // 内容盒子样式
 .content {
   .table-operator {

+ 2 - 2
src/config/defaultSettings.js

@@ -16,13 +16,13 @@
 export default {
   primaryColor: '#ed1c24', // primary color of ant design
   navTheme: 'dark', // theme for nav menu
-  layout: 'sidemenu', // nav menu position: sidemenu or topmenu
+  layout: 'topmenu', // nav menu position: sidemenu or topmenu
   contentWidth: 'Fluid', // layout of content: Fluid or Fixed, only works when layout is topmenu
   fixedHeader: true, // sticky header
   fixSiderbar: true, // sticky siderbar
   autoHideHeader: false, //  auto hide header
   colorWeak: false,
-  multiTab: true,
+  multiTab: false,
   production: process.env.NODE_ENV === 'production' && process.env.VUE_APP_PREVIEW !== 'true',
   // vue-ls options
   storageOptions: {

+ 3 - 3
src/layouts/BasicLayout.vue

@@ -39,7 +39,7 @@
         @toggle="toggle"
       />
       <!-- layout content -->
-      <a-layout-content :style="{ height: '100%', margin: '31px 20px 0', paddingTop: multiTab&&fixedHeader ? '61px' : (!multiTab&&fixedHeader?'45px':'0') }">
+      <a-layout-content :style="{ height: '100%', margin: '31px 20px 0', paddingTop: multiTab&&fixedHeader ? '61px' : (!multiTab&&fixedHeader?'33px':'0') }">
         <transition name="page-transition">
           <route-view v-if="isRouterAlive"/>
         </transition>
@@ -101,7 +101,7 @@ export default {
       fixedHeader: state => state.app.fixedHeader
     }),
     contentPaddingLeft () {
-      if (!this.fixSidebar || this.isMobile()) {
+      if (!this.fixSidebar || this.isMobile() || this.layoutMode == 'topmenu') {
         return '0'
       }
       if (this.sidebarOpened) {
@@ -124,7 +124,7 @@ export default {
       this.menus = [noqx.find(item => item.path === '/home')]
     }
     this.collapsed = !this.sidebarOpened
-    this.$store.dispatch('ToggleMultiTab', true)
+    this.$store.dispatch('ToggleMultiTab', false)
 	  this.$store.dispatch('ToggleColor', '#1890FF')
   },
   mounted () {

+ 3 - 3
src/store/modules/app.js

@@ -17,15 +17,15 @@ const app = {
     sidebar: true,
     device: 'desktop',
     theme: '',
-    layout: '',
+    layout: 'topmenu',
     contentWidth: '',
     fixedHeader: false,
     fixSiderbar: false,
     autoHideHeader: false,
     color: null,
     weak: false,
-    multiTab: true,
-    isNewTab: false,
+    multiTab: false,
+    isNewTab: true,
     isNewSubTab: false
   },
   mutations: {