style: header tab 项 hover 背景还原

jumpserver · May 31, 2024 · 5afe8cf · 5afe8cf
1 parent 23f2502
commit 5afe8cf
Show file tree

Hide file tree

Showing 8 changed files with 47 additions and 33 deletions.
diff --git a/src/app/elements/asset-tree/asset-tree.component.scss b/src/app/elements/asset-tree/asset-tree.component.scss
@@ -12,7 +12,8 @@
       display: flex;
       height: 31px;
       line-height: 31px;
-      padding: 0 11px;
+      padding-right: 11px;
+      padding-left: 15px;
       overflow: hidden;
       text-overflow: ellipsis;
       color: var(--el-menu-text-color);

diff --git a/src/app/elements/nav/nav.component.html b/src/app/elements/nav/nav.component.html
@@ -1,8 +1,8 @@
 <div class="nav">
   <ul class="nav-main">
-    <li style="padding-right: 10px">
-      <a style="display: inline-block; padding-top: 1px;">
-        <img (click)="onJumpUi()" alt="logo" height="26px" id="left-logo" src=""/>
+    <li style="margin-right: 10px; width: 60px">
+      <a style="padding-top: 1px;">
+        <img (click)="onJumpUi()" alt="" height="30px" id="left-logo" src=""/>
       </a>
     </li>
     <li *ngFor="let v of navs" [ngClass]="{'dropdown': v.children}">

diff --git a/src/app/elements/nav/nav.component.scss b/src/app/elements/nav/nav.component.scss
@@ -23,14 +23,24 @@
       }
 
       .dropdown-content {
+        padding: 5px 0;
         @include GeneralDropdown(null, 0);
 
         li {
           @include GeneralDropdownLi;
 
+          .active {
+            display: flex;
+            width: 100%;
+          }
+
           a {
             @include GeneralDropdownLia;
           }
+
+          &.disconnected {
+            background-color: var(--el-header-dropdown-disable-text-color);
+          }
         }
       }
 
@@ -59,11 +69,6 @@
   }
 }
 
-
-.nav ul li.disconnected {
-  background-color: darkgray;
-}
-
 .flag {
   display: none;
   color: var(--primary-color);

diff --git a/src/app/elements/nav/nav.component.ts b/src/app/elements/nav/nav.component.ts
@@ -35,8 +35,7 @@ export class ElementNavComponent implements OnInit {
   get viewListSorted() {
     const viewList = [];
     this.viewIds.forEach((id, index) => {
-      const view = this.viewList.find(i => i.id === id);
-      viewList[index] = view;
+      viewList[index] = this.viewList.find(i => i.id === id);
     });
     return viewList;
   }

diff --git a/src/app/elements/organization/organization.component.scss b/src/app/elements/organization/organization.component.scss
@@ -5,31 +5,37 @@
   height: 30px;
 
 
-  ::ng-deep .mat-select .mat-select-trigger {
-    display: flex;
-    align-items: center;
+  ::ng-deep .mat-select {
+    position: relative;
+    padding: 0 15px;
 
-    .mat-select-value {
+    .mat-select-trigger {
       display: flex;
       align-items: center;
-      padding-left: 10px;
-      max-width: calc(100% - 30px);
-      color: var(--el-menu-text-color);
 
-      .ng-star-inserted {
-        font-size: 13px;
+      .mat-select-value {
+        display: flex;
+        align-items: center;
+        max-width: calc(100% - 30px);
+        color: var(--el-menu-text-color);
+
+        .ng-star-inserted {
+          font-size: 13px;
+        }
       }
-    }
 
-    .mat-select-arrow-wrapper {
-      display: flex;
-      justify-content: center;
-      align-items: center;
-      width: 30px;
-      height: 30px;
+      .mat-select-arrow-wrapper {
+        position: absolute;
+        right: -10px;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        width: 30px;
+        height: 30px;
 
-      .mat-select-arrow {
-        color: var(--el-menu-text-color);
+        .mat-select-arrow {
+          color: var(--el-menu-text-color);
+        }
       }
     }
   }

diff --git a/src/app/elements/profile/profile.component.scss b/src/app/elements/profile/profile.component.scss
@@ -30,6 +30,7 @@
     }
 
     .dropdown-content {
+      padding: 5px 0;
       @include GeneralDropdown(0, null);
 
       li {

diff --git a/src/sass/mixins/index.scss b/src/sass/mixins/index.scss
@@ -6,7 +6,7 @@
   left: $left;
   margin-left: 0;
   z-index: 999;
-  background-color: var(--el-header-nav-bg-color);
+  background-color: var(--el-header-nav-select-bg-color);
 }
 
 // dropdown 下 li 标签的通用样式
@@ -38,7 +38,7 @@
 }
 
 @mixin DropdownHover {
-  background-color: var(--el-header-nav-select-bg-color);
+  background-color: var(--el-header-tab-bg-color);
 
   .dropdown-content {
     display: flex;

diff --git a/src/sass/theme/header.ts b/src/sass/theme/header.ts
@@ -7,9 +7,11 @@ export const headerTheme: Record<Theme.ThemeType, { [key: string]: string }> = {
     // 头部导航字体颜色
     '--el-header-nav-text-color': '#EFEFF0',
     // 头部导航下拉菜单背景
-    '--el-header-nav-select-bg-color': '#2E2828',
+    '--el-header-nav-select-bg-color': '#000000',
+    // 头部 tab select 背景
+    '--el-header-tab-bg-color': '#2d2828',
     // 头部导航下拉菜单 hover 背景
-    '--el-header-nav-select-hover-bg-color': '#484242',
+    '--el-header-nav-select-hover-bg-color': 'rgba(53, 54, 51, .7)',
     // 头部 tab item 背景
     '--el-header-tab-item-bg-color': '#3B3333',
     // 头部 tab icon 颜色