修改菜单宽度

src/App.vue

@@ -30,8 +30,8 @@ export default {
 
 <style lang="scss">
 body {
-  width: 100vw;
-  height: 100vh;
+  width: 100%;
+  height: 100%;
 }
 #app {
   // width: 1920px;
@@ -42,11 +42,6 @@ body {
   min-width: 1100px;
   .heads {
     width: 100%;
-    .nav {
-      .el-menu {
-        width: 60%;
-      }
-    }
   }
 }
 </style>

src/assets/index.scss

@@ -105,7 +105,7 @@ html, body, #app{
       }
       .nav {
         .el-menu {
-          width: 90%;
+          // width: 90%;
         }
       }
     }
@@ -160,7 +160,7 @@ html, body, #app{
       }
       .nav {
         .el-menu {
-          width: 100%;
+          // width: 100%;
         }
       }
     }
@@ -216,7 +216,7 @@ html, body, #app{
       }
       .nav {
         .el-menu {
-          width: 100%;
+          // width: 100%;
           .menuitem {
             .menubox {
               li {

src/components/heads/nav/index.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="nav">
     <!-- hover -->
-    <el-menu unique-opened menu-trigger="hover" background-color="#007ce2" text-color="#fff" active-text-color="#ffd200" :default-active="activeIndex" mode="horizontal">
+    <el-menu :style="{ width: offsetWidth }" unique-opened menu-trigger="hover" background-color="#007ce2" text-color="#fff" active-text-color="#fea764" :default-active="activeIndex" mode="horizontal">
       <div class="menuitem" v-for="(item, index) in menus" :key="index">
         <nav-item :items="item" @itemClick="handleSelect"></nav-item>
         <div class="xian" v-if="index + 1 !== menus.length"></div>
@@ -26,11 +26,18 @@ export default {
   },
   data() {
     return {
-      activeIndex: '00'
+      activeIndex: '00',
+      offsetWidth: null
     };
   },
   async mounted() {
     await this.menusQueryAlls();
+    const dom = document.getElementsByClassName('menuitem');
+    let element = 0;
+    for (let i = 0; i < dom.length; i++) {
+      element += Number(dom[i].offsetWidth + 1);
+    }
+    this.offsetWidth = `${element}px`;
   },
   methods: {
     ...mapActions(['menusQueryAlls']),
@@ -99,12 +106,14 @@ export default {
   padding-top: 5px;
   margin-top: -5px;
   .el-menu {
-    width: 70%;
+    // width: 70%;
     margin: 0 auto;
-    display: flex;
+    // display: flex;
     border: none;
     .menuitem {
       position: relative;
+      float: left;
+      margin: 0 auto;
       .xian {
         border-right: 1px solid #fff;
         position: absolute;