NEZ-3229 feat：界面菜单样式优化

nezha-fronted/src/assets/css/components/common/bottomBox/bottomBox.scss

@@ -213,7 +213,7 @@
   overflow-y: auto;
 }
 .resize-modal {
-  width: calc(100% - 252px);
+  width: calc(100% - 240px);
   opacity: 0.6;
   background-color: #f5f9ff;
   border: 1px solid #a7d0f7;

nezha-fronted/src/assets/css/components/layout/home.scss

@@ -4,7 +4,7 @@
   background-color: $--background-color-empty;
   .body {
     flex: 1;
-    width: calc(100% - 252px);
+    width: calc(100% - 240px);
     height: 100%;
     display: flex;
     flex-direction: column;

nezha-fronted/src/assets/css/components/layout/leftMenu.scss

@@ -7,13 +7,14 @@
   .el-menu-item .nz-icon, .el-submenu .nz-icon {
     display: inline-block;
     vertical-align: middle;
-    margin-right: 5px;
+    margin-right: 4px;
     width: 24px;
     text-align: center;
     font-size: 18px;
+    color: #BEBEBE;
   }
   >.el-menu:not(.el-menu--collapse) {
-    width: 252px;
+    width: 240px;
   }
   >.el-menu.menu-list {
     height: calc(100% - 110px);
@@ -31,20 +32,26 @@
     }
     .el-submenu.is-active:not(.is-opened)>.el-submenu__title{
       border-left: 3px $--color-primary solid;
+      i {
+        color: $--color-primary;
+      }
     }
     .el-menu-item.is-active {
       border-left: 3px $--color-primary solid;
+      i {
+        color: $--color-primary;
+      }
     }
     .el-menu-item, .el-submenu__title {
-      height: 46px;
-      line-height: 46px;
+      height: 36px;
+      line-height: 36px;
       font-size: 14px;
       position: relative;
       border-left: 3px transparent solid;
     }
     .el-submenu__icon-arrow {
       position: absolute;
-      top: 26px;
+      top: 20px;
       right: 20px;
     }
 
@@ -75,7 +82,7 @@
   >.el-menu.header-logo {
     border-right: none;
     >.el-menu-item {
-      padding: 13px 0 0 18px !important;
+      padding: 12px 0 0 22px !important;
       height: 50px;
       border-right: 1px solid $--left-menu-background-color-base;
       box-sizing: border-box;
@@ -86,16 +93,23 @@
         box-sizing: border-box;
         
         .system-name {
-          padding-left: 5px;
+          padding-left: 8px;
           color: white;
-          font-size: 12px;
+          font-size: 14px;
           letter-spacing: 0;
           line-height: 28px;
-          font-weight: 400;
+          font-weight: 600;
         }
       }
     }
   }
+
+  .secondMenu.el-menu-item, .secondMenu.el-submenu>.el-submenu__title {
+    padding-left: 52px !important;
+  }
+  .thirdMenu{
+    padding-left: 72px !important;
+  }
 }
 .el-menu--popup.el-menu--popup-right-start {
   background-color: $--left-menu-background-color;
@@ -110,7 +124,7 @@
   position: fixed;
   bottom: 0px;
   left: 0;
-  width: 252px;
+  width: 240px;
   height: 52px;
   box-sizing: border-box;
   padding: 6px 0;
@@ -123,7 +137,7 @@
     span{
       display: block;
       white-space: nowrap;
-      font-size: 13px;
+      font-size: 12px;
       color: $--color-text-secondary;
     }
   }
@@ -139,11 +153,10 @@
   }
   .collapse-icon{
     position: absolute;
-    top: 4px;
+    top: 6px;
     right: 8px;
-    font-size: 16px;
+    font-size: 20px;
     color: $--color-text-secondary;
-    transform: rotate(90deg);
   }
   &.isCollapse-btn{
     width: 64px;
@@ -152,7 +165,7 @@
       right: 0;
       margin: auto;
       text-align: center;
-      transform: rotate(-90deg);
+      transform: rotateY(180deg);
     }
   }
 }

nezha-fronted/src/assets/css/components/page/dashboard/panel.scss

@@ -142,7 +142,7 @@
 /* end-chart list*/
 .panel-loading {
   position: fixed;
-  left: 252px;
+  left: 240px;
   top: 59px;
   height: 100%;
   width: 100%;

nezha-fronted/src/assets/img/logo.svg

@@ -0,0 +1,11 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="26px" height="26px" viewBox="0 0 26 26" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <title>Fill 1</title>
+    <g id="----♈️Dashboards" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="菜单优化" transform="translate(-16.000000, -12.000000)" fill="#FF9219">
+            <g id="logo" transform="translate(14.000000, 10.000000)">
+                <path d="M23.2743403,24.2414072 C22.2885575,24.3704489 21.1383422,24.3328541 19.830667,23.9942975 C15.0232667,22.749604 10.9502955,14.6922544 10.9502955,14.6922544 L10.9502955,25.4355001 C9.12495236,25.4355001 7.64174259,23.9982263 7.61229503,22.2141995 L7.61195655,22.1714566 L7.61202424,8.92039905 C7.61202424,8.92039905 11.1507421,10.0338832 15.9581424,17.8291529 C17.5032936,20.3345938 19.2632428,21.8106817 20.9967908,22.2814638 C21.4782416,22.4121989 21.9661235,22.4550096 22.4420233,22.4263562 C23.5282663,22.3778555 24.5768029,21.9560484 25.3891496,21.2309763 C25.5769371,21.0671171 25.7450252,20.8918778 25.8896906,20.7087809 C26.1841663,20.3484125 26.4290888,19.937037 26.6094975,19.4798704 C26.8418964,18.8906139 27.0294808,18.2792747 27.1678505,17.6500525 C27.2530792,17.2796588 27.3186085,16.9016784 27.3653185,16.5165855 C27.3702602,16.4737071 27.3755405,16.4308964 27.3800084,16.3879502 C27.382107,16.3687803 27.383867,16.3496103 27.3858979,16.3305081 C27.4269214,15.9176424 27.4482455,15.499019 27.4482455,15.0754506 C27.4482455,14.3266024 27.38231,13.5931985 27.256464,12.8805226 C27.2544331,12.8692103 27.252673,12.8578302 27.2505745,12.8465856 C27.2466481,12.824232 27.2419095,12.8021492 27.2378477,12.7797955 C26.4049892,8.3755112 23.1888408,4.80183536 18.937221,3.39910815 C17.565235,2.90109529 16.0695693,2.60467196 14.5007923,2.55176825 C11.3481423,2.65669506 8.49084803,3.92726461 6.34537258,5.94702109 C6.42153009,5.93299924 6.49883842,5.91951929 6.57790684,5.90678447 C6.5769591,5.90780055 6.57580828,5.90861341 6.57472515,5.90949401 C7.56050792,5.78045232 8.71072321,5.81804714 10.0184661,6.15660377 C14.8257987,7.40136498 18.8987699,15.4586469 18.8987699,15.4586469 L18.8987699,4.71540113 C20.7241807,4.71540113 22.2073228,6.1526072 22.2368381,7.93663397 L22.2370412,7.96643888 L22.2371089,21.2305022 C22.2371089,21.2305022 18.6983233,20.117018 13.8909907,12.3217484 C12.3457718,9.8163074 10.5858226,8.34021948 8.85234233,7.86943746 C8.37089149,7.73870231 7.88307727,7.69582389 7.40704208,7.72447724 C6.32289766,7.77291021 5.27632427,8.19329485 4.46458678,8.91586058 C4.27497151,9.08087137 4.10532643,9.25753317 3.9594425,9.44212037 C3.66489911,9.80248876 3.42004426,10.2137964 3.23970328,10.670963 C3.00716903,11.2602196 2.81965232,11.8715588 2.6812149,12.500781 C2.59598618,12.8711069 2.53052458,13.2489518 2.48388233,13.6337738 C2.47894056,13.6771264 2.47345722,13.7202758 2.46898931,13.7636284 C2.46695844,13.7823242 2.46519836,13.8010877 2.46323519,13.8197835 C2.42221168,14.2327847 2.40088757,14.6516113 2.40088757,15.0754506 C2.40088757,15.8244343 2.46682305,16.5579737 2.5926691,17.2709206 C2.59469997,17.2819619 2.59646005,17.2930033 2.59842322,17.3040446 C2.60255265,17.3269402 2.60729134,17.3495649 2.61155616,17.3723927 C3.44468544,21.7759997 6.66069851,25.3492013 10.9119121,26.7518608 C12.2838304,27.2498059 13.7794961,27.5462293 15.3482054,27.599133 C18.5009231,27.4942062 21.3582174,26.2236366 23.5038282,24.2038124 C23.427603,24.2178342 23.3501593,24.2314497 23.2711586,24.244049 C23.272174,24.2431007 23.2732571,24.2422878 23.2743403,24.2414072" id="Fill-1"></path>
+            </g>
+        </g>
+    </g>
+</svg>

nezha-fronted/src/components/layout/header.vue

@@ -12,7 +12,7 @@
         </div>
       </el-dropdown>
       <el-dropdown trigger="click">
-        <div class="header-menu__item" :title="$t('config.system.link.link')"><i class="nz-icon nz-icon-more-app"></i></div>
+        <div class="header-menu__item" :title="$t('config.system.link.link')"><i class="nz-icon nz-icon-wailian" style="fontSize:17px;"></i></div>
         <el-dropdown-menu slot="dropdown" class="right-box-select-top right-public-box-dropdown-top el-dropdown-menu-link">
           <el-dropdown-item v-for="(item, index) in linkData" :key="index" :index="'0-' + index" v-if="linkData.length" class="el-dropdown-menu-link-item">
             <a :href='item.url' rel="noopener noreferrer" target="_blank" class="link-title nz-a">

nezha-fronted/src/components/layout/leftMenu.vue

@@ -16,11 +16,11 @@
             <span slot="title">{{$t(menu.i18n)}}</span>
           </template>
           <template v-for="(secondMenu, secondIndex) in menu.children">
-            <el-submenu v-if="secondMenu.children && secondMenu.children.length > 0" :key="secondIndex" :index="`${index}-${secondIndex}`">
+            <el-submenu v-if="secondMenu.children && secondMenu.children.length > 0" :key="secondIndex" :index="`${index}-${secondIndex}`" class="secondMenu">
               <span slot="title" class="data-column__span">{{$t(secondMenu.i18n)}}</span>
-              <el-menu-item v-for="(thirdMenu, thirdIndex) in secondMenu.children" :key="`${index}-${secondIndex}-${thirdIndex}`" :index="thirdMenu.route">{{$t(thirdMenu.i18n)}}</el-menu-item>
+              <el-menu-item v-for="(thirdMenu, thirdIndex) in secondMenu.children" :key="`${index}-${secondIndex}-${thirdIndex}`" :index="thirdMenu.route" class="thirdMenu">{{$t(thirdMenu.i18n)}}</el-menu-item>
             </el-submenu>
-            <el-menu-item v-else :key="secondIndex" :index="secondMenu.route">{{$t(secondMenu.i18n)}}</el-menu-item>
+            <el-menu-item v-else :key="secondIndex" :index="secondMenu.route" class="secondMenu">{{$t(secondMenu.i18n)}}</el-menu-item>
           </template>
         </el-submenu>
         <el-menu-item v-else :key="index" :index="menu.route">
@@ -42,13 +42,13 @@
           <span>{{$t('overall.collapseSidebar')}}</span>
         </div>
       </template>
-      <i class="collapse-icon nz-icon nz-icon-drop-down"></i>
+      <i class="collapse-icon el-icon-s-fold"></i>
     </div>
   </div>
 </template>
 
 <script>
-import imgUrl from '@/assets/img/logo1-2.png'
+import imgUrl from '@/assets/img/logo.svg'
 export default {
   name: 'leftMenu',
   props: {