菜单样式修改

src/layout/components/NavBar/index.scss

@@ -224,6 +224,13 @@
       color: #30daff !important;
       background: rgb(26, 26, 26) !important;
     }
+    .el-submenu__title {
+      color: #fff !important;
+      background: rgb(15, 79, 99) !important;
+      .el-icon-arrow-right {
+        display: none !important;
+      }
+    }
   }
 }
 

src/layout/components/NavBar/menu.vue

@@ -1,27 +1,56 @@
 <template>
   <el-menu :collapse-transition="false" :default-active="activeIndex2" mode="horizontal" @select="handleSelect">
     <template v-for="(item, index) in newRoute">
-      <el-menu-item popper-class="nav-bar-menu-submenu-open" v-if="!item.children.length" :index="item.path" :key="index">
-        <i :class="item.meta.icon"></i>
-        {{ item.meta.title }}
-      </el-menu-item>
-      <el-menu-item popper-class="nav-bar-menu-submenu-open" v-else-if="item.children.length > 0 && item.children.every((i) => i.meta.hide)" :index="item.path" :key="index">
-        <i :class="item.meta.icon"></i>
-        {{ item.meta.title }}
-      </el-menu-item>
-      <el-submenu v-else popper-class="nav-bar-menu-submenu-open" :show-timeout="100" :hide-timeoutt="100" :key="index" :index="item.path">
-        <template slot="title">
+      <template v-if="index < visibleNumber">
+        <el-menu-item popper-class="nav-bar-menu-submenu-open" v-if="!item.children.length" :index="item.path" :key="index">
           <i :class="item.meta.icon"></i>
           {{ item.meta.title }}
-        </template>
-        <template v-for="(items, n) in item.children">
-          <el-menu-item v-if="!items.meta.hide" :open="index.toString() + '-' + n.toString()" :key="n" :index="items.path">
-            <i v-if="items.meta.icon" :class="items.meta.icon"></i>
-            {{ items.meta.title }}
+        </el-menu-item>
+        <el-menu-item popper-class="nav-bar-menu-submenu-open" v-else-if="item.children.length > 0 && item.children.every((i) => i.meta.hide)" :index="item.path" :key="index">
+          <i :class="item.meta.icon"></i>
+          {{ item.meta.title }}
+        </el-menu-item>
+        <el-submenu v-else popper-class="nav-bar-menu-submenu-open" :show-timeout="100" :hide-timeoutt="100" :key="index" :index="item.path">
+          <template slot="title">
+            <i :class="item.meta.icon"></i>
+            {{ item.meta.title }}
+          </template>
+          <template v-for="(items, n) in item.children">
+            <el-menu-item v-if="!items.meta.hide" :open="index.toString() + '-' + n.toString()" :key="n" :index="items.path">
+              <i v-if="items.meta.icon" :class="items.meta.icon"></i>
+              {{ items.meta.title }}
+            </el-menu-item>
+          </template>
+        </el-submenu>
+      </template>
+    </template>
+    <el-submenu v-if="newRoute.length > visibleNumber" :key="index" index="more" popper-class="nav-bar-menu-submenu-open">
+      <template slot="title">更多菜单</template>
+      <template v-for="(item, index) in newRoute">
+        <template v-if="index > visibleNumber">
+          <el-menu-item popper-class="nav-bar-menu-submenu-open" v-if="!item.children.length" :index="item.path" :key="index">
+            <i :class="item.meta.icon"></i>
+            {{ item.meta.title }}
+          </el-menu-item>
+          <el-menu-item popper-class="nav-bar-menu-submenu-open" v-else-if="item.children.length > 0 && item.children.every((i) => i.meta.hide)" :index="item.path" :key="index">
+            <i :class="item.meta.icon"></i>
+            {{ item.meta.title }}
           </el-menu-item>
+          <el-submenu v-else popper-class="nav-bar-menu-submenu-open" :show-timeout="100" :hide-timeoutt="100" :key="index" :index="item.path">
+            <template slot="title">
+              <i :class="item.meta.icon"></i>
+              {{ item.meta.title }}
+            </template>
+            <template v-for="(items, n) in item.children">
+              <el-menu-item v-if="!items.meta.hide" :open="index.toString() + '-' + n.toString()" :key="n" :index="items.path">
+                <i v-if="items.meta.icon" :class="items.meta.icon"></i>
+                {{ items.meta.title }}
+              </el-menu-item>
+            </template>
+          </el-submenu>
         </template>
-      </el-submenu>
-    </template>
+      </template>
+    </el-submenu>
   </el-menu>
 </template>
 
@@ -42,7 +71,9 @@ export default {
 
   data() {
     return {
-      activeIndex2: '0'
+      activeIndex2: '0',
+      // 顶部栏初始数
+      visibleNumber: 5
     }
   },
   mounted() {