修改menu

src/views/ModelMain.less

@@ -15,6 +15,22 @@
       align-items: center;
       margin: 0 20px;
     }
+    .app-header-menu{
+      height: 100%;
+      padding:0 16px;
+      color:#fff;
+      display: flex;
+      align-items: center;
+      cursor: pointer;
+      .el-icon{
+        margin-left:8px;
+        font-size: 12px;
+      }
+      &:hover{
+        background-color: #494d52;
+        color: #fff
+      }
+    }
     .el-menu-item{
       line-height: 50px;
     }

src/views/ModelMain.vue

@@ -2,10 +2,10 @@
   <div class="app-wrap">
     <div class="app-header">
       <div class="logo"><img :src="Logo" alt="" style="height: 30px;width: 169px"></div>
-      <el-button v-for="rootMenu in calcRootMenu" @click="clickRootMenu"
+      <div class="app-header-menu" v-for="rootMenu in calcRootMenu" @click="clickRootMenu"
                  v-menus:left="rootMenu.children"
-      >{{ rootMenu.label }}
+      >{{ rootMenu.label }} <component :is="renderIcon('element ArrowDown')"></component>
-      </el-button>
+      </div>
 
       <el-menu :default-active="activeIndex"
                class="el-menu-demo"