添加Header菜单修改样式

frontend/src/performance/App.vue

@@ -1,8 +1,15 @@
 <template>
   <el-col v-if="auth">
     <el-row id="header-top" type="flex" justify="space-between" align="middle">
+      <el-col :span="4">
         <a class="logo"/>
+      </el-col>
+      <el-col :span="10">
+        <ms-top-menus/>
+      </el-col>
+      <el-col :span="10">
        <ms-user/>
+      </el-col>
     </el-row>
     <el-row id="header-bottom" type="flex" justify="space-between" align="middle">
       <el-col :span="10">
@@ -26,6 +33,7 @@
 
 <script>
   import MsMenus from "./components/HeaderMenus";
+  import MsTopMenus from "./components/HeaderTopMenus";
   import MsSetting from "./components/HeaderSetting";
   import MsView from "./components/router/View";
   import MsUser from "./components/HeaderUser";
@@ -49,7 +57,7 @@
         window.location.href = "/login"
       });
     },
-    components: {MsWebSocket, MsUser, MsMenus, MsSetting, MsView},
+    components: {MsWebSocket, MsUser, MsMenus, MsSetting, MsView, MsTopMenus},
     methods: {
     }
   }

frontend/src/performance/components/HeaderTopMenus.vue

@@ -0,0 +1,39 @@
+<template>
+  <el-menu mode="horizontal" menu-trigger="click"
+           background-color="rgb(44, 42, 72)"
+           class="header-top-menus"
+           text-color="#F2F2F2"
+           active-text-color="#fff"
+           :default-active="$route.path"
+           router>
+    <el-menu-item index="1">功能测试</el-menu-item>
+    <el-menu-item index="/createTest" onselectstart="return false">性能测试</el-menu-item>
+    <el-menu-item index="/setting" onselectstart="return false">系统设置</el-menu-item>
+  </el-menu>
+</template>
+
+<script>
+  export default {
+    name: "MsTopMenus"
+  }
+</script>
+<style>
+  .header-top-menus.el-menu--horizontal > li {
+    height: 40px;
+    line-height: 40px;
+    color: inherit;
+  }
+
+  .header-top-menus.el-menu--horizontal > li.el-submenu > * {
+    height: 39px;
+    line-height: 40px;
+    color: inherit;
+  }
+
+  .header-top-menus.el-menu--horizontal > li.is-active {
+    background: #595591 !important;
+  }
+</style>
+<style scoped>
+
+</style>

frontend/src/performance/components/HeaderUser.vue

@@ -1,7 +1,6 @@
 <template>
-  <div class="ms-org-ws">
-    <el-row :gutter="10" style="height:200px;">
-      <el-col :span="16" :offset="4">
+  <el-row>
+    <el-col :span="10" :offset="8">
       <el-menu :unique-opened="true" mode="horizontal" router
                menu-trigger="click"
                class="header-user-menu"
@@ -28,7 +27,7 @@
       </el-menu>
     </el-col>
 
-      <el-col :span="4">
+    <el-col :span="3" :offset="3">
       <el-dropdown size="medium" @command="handleCommand">
         <span class="dropdown-link">
             {{currentUser.name}}<i class="el-icon-caret-bottom el-icon--right"/>
@@ -40,7 +39,6 @@
       </el-dropdown>
     </el-col>
   </el-row>
-  </div>
 </template>
 
 <script>
@@ -139,11 +137,6 @@
     cursor: pointer;
     font-size: 12px;
     color: rgb(245, 245, 245);
-  }
-
-  .ms-org-ws {
-    width: 30%;
-    height: 40px;
     line-height: 40px;
   }