菜单样式二排版

src/layout/index.vue

@@ -1,26 +1,87 @@
 <template>
   <a-layout class="vab-layout-wrap">
+
+   
     <!-- 顶部横向排版 start -->
     <div>
-      <a-layout-header class="vab-header"  :style="`background:${$store.state.homeStyle}`">
+      <a-layout-header
+        class="vab-header"
+        :style="`background:${$store.state.homeStyle}`"
+      >
+
+       <div style="width: 408px;display:inline-block;position:absolute;left:0">
+         <vab-logo />
+       </div>
+       <div class="menu-outBox" style="display:none" >
+         <a-menu
+              class="vab-menu"
+              theme=""
+              mode="inline"
+              v-model:selectedKeys="selectedKeys"
+              v-model:openKeys="openKeys"
+             
+              :style="`width:${(routes.length-4)*100}px`"
+            >
+              <vab-menu
+                v-for="route in routes"
+                :key="route.path"
+                :item="route"
+              />
+            </a-menu>
+       </div>
+       <div style="width: 340px;display:inline-block;position:absolute;right:0">
+         <vab-avatar />
+       </div>
         <a-row>
-          <a-col :xs="10" :sm="10" :md="10" :lg="10" :xl="10">
+          <!-- <a-col
+            :xs="10"
+            :sm="10"
+            :md="10"
+            :lg="10"
+            :xl="10"
+            style="max-width: 400px"
+          >
             <vab-logo />
           </a-col>
-          <a-col :xs="14" :sm="14" :md="14" :lg="14" :xl="14">
-            <vab-avatar />
-          </a-col>
+          <a-col
+            :xs="14"
+            :sm="14"
+            :md="14"
+            :lg="14"
+            :xl="14"
+            style="min-width: calc(100% - 400px)"
+          > -->
+            <!-- 菜单start -->
+            <!-- <a-menu
+              class="vab-menu"
+              theme=""
+              mode="inline"
+              v-model:selectedKeys="selectedKeys"
+              v-model:openKeys="openKeys"
+            >
+              <vab-menu
+                v-for="route in routes"
+                :key="route.path"
+                :item="route"
+              />
+            </a-menu> -->
+            <!-- 菜单end-->
+            <!-- <vab-avatar /> -->
+          <!-- </a-col> -->
         </a-row>
       </a-layout-header>
     </div>
     <!-- 顶部横向排版 end -->
 
+    
+
     <div
       v-if="device === 'mobile' && !collapse"
       class="vab-mask"
       @click="handleFoldSideBar"
     ></div>
 
+    <!-- 左侧菜单start -->
     <a-layout-sider
       collapsible
       class="vab-sider"
@@ -29,17 +90,18 @@
       :class="classObj"
       :trigger="null"
     >
-      <!-- 导航及缩进 start -->
-      <div style="line-height: 50px; text-align: right;border-bottom:1px solid rgba(0,0,0,.04)">
-        <span  v-if="!collapse" style="margin-right:79px">导航</span>
-
-        <!-- 缩进按钮 start -->
+      <!-- 导航文字及缩进 start -->
+      <div
+        style="
+          line-height: 50px;
+          text-align: right;
+          border-bottom: 1px solid rgba(0, 0, 0, 0.04);
+        "
+      >
+        <span v-if="!collapse" style="margin-right: 79px">导航</span>
         <div
-          style="
-            display: inline-block;
-          "
-          :style="{'margin-right': (collapse ? '30px':'20px')}"
-
+          style="display: inline-block"
+          :style="{ 'margin-right': collapse ? '30px' : '20px' }"
         >
           <menu-unfold-outlined
             v-if="collapse"
@@ -48,9 +110,10 @@
           />
           <menu-fold-outlined v-else class="trigger" @click="toggleCollapse" />
         </div>
-        <!-- 缩进按钮 start -->
       </div>
       <!-- 导航及缩进 end -->
+
+      <!-- 菜单start -->
       <a-menu
         class="vab-menu"
         theme=""
@@ -60,32 +123,20 @@
       >
         <vab-menu v-for="route in routes" :key="route.path" :item="route" />
       </a-menu>
+      <!-- 菜单end-->
     </a-layout-sider>
+    <!-- 左侧菜单end -->
 
+    <!-- 页面主体start -->
     <a-layout
       class="vab-layout"
       :class="'mobile' === device ? 'vab-mobile-layout' : ''"
     >
-      <!-- <a-layout-header class="vab-header">
-        <a-row>
-          <a-col :xs="12" :sm="12" :md="12" :lg="12" :xl="12">
-            <menu-unfold-outlined
-              v-if="collapse"
-              class="trigger"
-              @click="toggleCollapse"
-            />
-            <menu-fold-outlined
-              v-else
-              class="trigger"
-              @click="toggleCollapse"
-            />
-          </a-col>
-        </a-row>
-      </a-layout-header> -->
       <vab-tabs />
       <vab-content />
     </a-layout>
   </a-layout>
+  <!-- 页面主体end -->
 </template>
 <script>
 import VabLogo from './vab-logo'
@@ -96,7 +147,6 @@ import VabContent from './vab-content'
 import { mapActions, mapGetters } from 'vuex'
 import { MenuUnfoldOutlined, MenuFoldOutlined } from '@ant-design/icons-vue'
 
-
 export default {
   components: {
     VabLogo,
@@ -178,13 +228,11 @@ export default {
       overflow-y: auto;
       height: calc(100vh - @vab-header-height);
       li {
-    //     margin-top: 10px;
-    // margin-bottom: 10px;
-    // line-height: 50px;
-    // height: 50px;
-   
+        //     margin-top: 10px;
+        // margin-bottom: 10px;
+        // line-height: 50px;
+        // height: 50px;
       }
-      
     }
     .vab-menu::-webkit-scrollbar {
       display: none;
@@ -281,4 +329,78 @@ export default {
     }
   }
 }
+.vab-header {
+  .menu-outBox{
+    display:inline-block;position:absolute;left:420px;width:calc(100% - 740px);overflow-x:auto
+  }
+
+  .menu-outBox::-webkit-scrollbar {
+  /*滚动条整体样式*/
+  // width: 1px; /*高宽分别对应横竖滚动条的尺寸*/
+  height:8px;
+}
+.menu-outBox::-webkit-scrollbar-thumb {
+  /*滚动条里面小方块*/
+  // border-radius: 10px;
+  background: rgba(1, 109, 219,.4);
+}
+.menu-outBox::-webkit-scrollbar-track {
+  /*滚动条里面轨道*/
+  // border-radius: 10px;
+  background: rgb(245, 245, 265);
+}
+
+  .ant-menu-inline{
+    // width:200%;
+  }
+  .ant-menu-inline > .ant-menu-submenu > .ant-menu-submenu-title{
+    margin-top:10px;
+    
+  }
+
+  .svg-icon{
+    margin-right:3px!important;
+  }
+  .ant-menu-submenu-arrow::after,.ant-menu-submenu-arrow::before{
+    background-image:none!important;
+
+  }
+   .ant-menu-inline > .ant-menu-item{
+     height: 36px!important;
+    line-height: 36px!important;
+    margin-top: 12px;
+
+   }
+  .ant-menu:not(.ant-menu-horizontal) .ant-menu-item-selected{
+    background: rgba(255, 255, 255, 0.2)!important;
+    border-radius:4px;
+    // color:#000;
+  }
+  .ant-menu-item::after{
+    border-right:0px solid #000!important
+  }
+  .ant-menu-inline .ant-menu-item:not(:last-child){
+    margin-bottom:0!important;
+    
+  }
+  .ant-menu-inline .ant-menu-item{
+    float:left;
+    
+  }
+  .ant-menu{
+    background:rgba(0,0,0,0);
+
+     li{
+  display:inline-block;
+  width:auto!important;
+  color:#fff;
+  padding:0 10px!important
+
+  }
+
+  
+ 
+
+}
+}
 </style>

vue.config.js

@@ -65,11 +65,13 @@ module.exports = {
         port: devPort,
         open: true,
         noInfo: false,
-        port: 10000,
+        port: 13201,
         overlay: {
             warnings: true,
             errors: true,
         },
+        disableHostCheck: true,
+
         // 注释掉的地方是前端配置代理访问后端的示例
         proxy: {
             //   [baseURL]: {