From 153c618b45354899afad299674ff519ed83e6584 Mon Sep 17 00:00:00 2001
From: chenjinsong <523037378@qq.com>
Date: Fri, 17 Jan 2020 18:09:54 +0800
Subject: [PATCH] =?UTF-8?q?perf:=20=E4=BC=98=E5=8C=96=E9=A1=B6=E9=83=A8?=
 =?UTF-8?q?=E8=8F=9C=E5=8D=95=E6=A0=B7=E5=BC=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 nezha-fronted/src/assets/stylus/index.scss    | 13 ++++----
 .../src/components/common/header.vue          | 32 ++++++++-----------
 2 files changed, 20 insertions(+), 25 deletions(-)

diff --git a/nezha-fronted/src/assets/stylus/index.scss b/nezha-fronted/src/assets/stylus/index.scss
index da0b44979..50efc86ef 100644
--- a/nezha-fronted/src/assets/stylus/index.scss
+++ b/nezha-fronted/src/assets/stylus/index.scss
@@ -3,14 +3,15 @@ $global-text-color-active: #ee9d3f; // 全局文字active字色
 $header-text-color: #e5e5e5; // header默认字色
 $header-text-color-active: #fff; // header高亮字色
 $header-text-color-hover: #444; //header hover字色
+$header-background-color-hover: #666; //菜单鼠标悬停背景色
 
-$btn-normal-background-color: linear-gradient(180deg, #F5B93E 0%, #EE9D3F 100%); //橙色按钮颜色
-$btn-normal-background-color-hover: #EE9D3F ; //橙色按钮hover颜色
-$btn-normal-txt-color: #fff; //橙色按钮颜色
+$btn-normal-background-color: linear-gradient(180deg, #F5B93E 0%, #EE9D3F 100%); //橙色按钮背景颜色
+$btn-normal-background-color-hover: #EE9D3F ; //橙色按钮hover背景颜色
+$btn-normal-txt-color: #fff; //橙色按钮字体颜色
 $btn-normal-shadow: 0 0 1px 1px rgba(162,162,162,0.50); //橙色按钮边框阴影
-$btn-light-background-color: linear-gradient(180deg, #FFFFFF 0%, #E0E0E0 100%); //灰色按钮颜色
-$btn-light-background-color-hover: linear-gradient(180deg, #F0F0F0 0%, #D8D8D8 99%); //橙色按钮hover颜色
-$btn-light-txt-color: #666; //灰色按钮颜色
+$btn-light-background-color: linear-gradient(180deg, #FFFFFF 0%, #E0E0E0 100%); //灰色按钮背景颜色
+$btn-light-background-color-hover: linear-gradient(180deg, #F0F0F0 0%, #D8D8D8 99%); //灰色按钮hover背景颜色
+$btn-light-txt-color: #666; //灰色按钮字体颜色
 $btn-light-shadow: 0 0 1px 1px rgba(162,162,162,0.50); //灰色按钮边框阴影
 
 $pop-box-shadow: 0 0 12px 0 rgba(0,0,0,0.2);
diff --git a/nezha-fronted/src/components/common/header.vue b/nezha-fronted/src/components/common/header.vue
index fbdfc5cf0..3e4b1258d 100644
--- a/nezha-fronted/src/components/common/header.vue
+++ b/nezha-fronted/src/components/common/header.vue
@@ -44,8 +44,7 @@
           <el-menu-item :index="'2-' + index">
             <div @click="jumpToProject(item)" :class="{'menu-item-active' :(activeIndex == 'project' && activeItemIndex == item.id)}">
               <span>{{item.name}}</span>
-              <div @click.stop="toEditProject(item)" class="menu-edit"><i style="color: inherit"
-                                                                          class="nz-icon nz-icon-edit"></i></div>
+              <div @click.stop="toEditProject(item)" class="menu-edit"><i style="color: inherit" class="nz-icon nz-icon-edit"></i></div>
             </div>
           </el-menu-item>
         </template>
@@ -60,7 +59,7 @@
               <span>{{item.name}}</span>
               <idc-config-box :post-idc="item" ref="idcConfigBox" placement="left" @after="getIDCOptionData" :button-class="'menu-edit'">
                 <template v-slot:optionZone>
-                  <div @click="closeAllPop">
+                  <div @click="closeAllPop" class="menu-edit">
                     <i class="nz-icon nz-icon-edit" @click="getIDCOptionData(item.id)" style="color: inherit"></i>
                   </div>
                 </template>
@@ -440,7 +439,7 @@
 <style lang="scss">
   .header {
     background-image: linear-gradient(180deg, #565656 0%, #3C3C3C 100%);
-    box-shadow: 0 2px 4px 0
+    box-shadow: 0 2px 4px 0 rgba(0,0,0,0.30);
   }
   .header .el-menu {
     background-color: transparent;
@@ -456,12 +455,12 @@
     font-weight: 500;
     color: $header-text-color-active;
   }
-  .header .el-menu--horizontal>.el-submenu .el-submenu__title .menu-active:hover {
-    color: $header-text-color-hover;
-  }
   .header .el-menu--horizontal>.el-submenu .el-submenu__title i {
     color: inherit;
   }
+  .el-submenu__title:hover {
+    background-color: $header-background-color-hover !important;
+  }
   .el-submenu__title{
     font-size: 16px;
   }
@@ -469,7 +468,7 @@
     font-size: 14px;
   }
   .nz-submenu .el-menu--popup {
-    border-radius: 0 0 2px 2px;
+    border-radius: 4px;
   }
   .header .el-menu--horizontal>.el-submenu .el-submenu__title {
     min-width: 120px;
@@ -477,9 +476,6 @@
     color:$header-text-color;
     padding: 0;
   }
-  .header .el-menu--horizontal>.el-submenu .el-submenu__title:hover {
-    color: $header-text-color-hover !important;
-  }
 
   .el-menu.el-menu--horizontal {
     border-bottom: 0px;
@@ -514,8 +510,9 @@
     display: none;
   }
   .el-menu--horizontal.nz-submenu {
-    border: 1px solid #bbbbbb;
     border-top: none;
+    top: 62px !important;
+
   }
 
   .nz-submenu .el-menu--popup {
@@ -576,11 +573,6 @@
     line-height: 12px;
   }
 
-  .menu-edit {
-    line-height: 36px;
-    float: right;
-  }
-
   .pop-window-assetType-content {
     padding: 1px 15px 15px 20px;
   }
@@ -655,8 +647,10 @@
   }
 </style>
 <style>
-  .menu-edit {
+  .nz-submenu .menu-edit {
     line-height: 36px;
-    float: right;
+    position: absolute;
+    right: 15px;
+    top: 0;
   }
 </style>