From 44bcd113f1f41a1efccfa512689c430839073244 Mon Sep 17 00:00:00 2001
From: zhujiamin <1147570162@qq.com>
Date: Thu, 13 Jul 2023 18:40:35 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E5=88=86=E9=A1=B5=E5=AF=BC=E8=88=AA?=
 =?UTF-8?q?=E6=A0=B7=E5=BC=8F=E4=BF=AE=E6=94=B9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/panel-component/nav-tabs/nav-tabs.scss | 39 +++++++++++++++++-----
 1 file changed, 31 insertions(+), 8 deletions(-)

diff --git a/src/panel-component/nav-tabs/nav-tabs.scss b/src/panel-component/nav-tabs/nav-tabs.scss
index 48aae50e..b6971ea8 100644
--- a/src/panel-component/nav-tabs/nav-tabs.scss
+++ b/src/panel-component/nav-tabs/nav-tabs.scss
@@ -9,14 +9,16 @@ $nav-tabs: (
 );
 
 $nav-tabs-item: (
-    'height': 32px,
-    'padding': 0 12px,
-    'margin': 4px 4px 4px 0,
-    'item-font-size': getCssVar('font-size', 'extra-small'),
-    'line-height': 32px,
-    'border-radius': 3px,
+    'height': 40px,
+    'padding': 9px 28px,
+    'margin': 0 16px 12px 0,
+    'item-font-size': 14px,
+    'line-height': 20px,
+    'border-radius': 8px,
     'opacity': 1,
     'bg-color': #fff,
+    'color': #3F4254,
+    'active-color': #557DA5,
 );
 
 @include b(nav-tabs) {
@@ -34,33 +36,54 @@ $nav-tabs-item: (
     .el-tabs {
       width: 100%;
 
-      --el-tabs-header-height: 36px;
+      --el-tabs-header-height: 40px;
 
       .el-tabs__nav {
         border: none;
       }
 
       .el-tabs__item {
-        display: inline-block;
+        box-sizing: border-box;
+        display: flex;
+        align-items: center;
         height: getCssVar('nav-tabs-item', 'height');
         padding: getCssVar('nav-tabs-item', 'padding');
         margin: getCssVar('nav-tabs-item', 'margin');
         overflow: hidden;
         font-size: getCssVar('nav-tabs-item', 'font-size');
         line-height: getCssVar('nav-tabs-item', 'line-height');
+        color: getCssVar('nav-tabs-item', 'color');
         vertical-align: middle;
         background-color: getCssVar('nav-tabs-item', 'bg-color');
+        border: 1px solid rgb(0 0 0 / 14%);
         border-radius: getCssVar('nav-tabs-item', 'border-radius');
+        box-shadow: 0 1px 2px 0 rgb(0 0 0 / 14%);
         opacity: getCssVar('nav-tabs-item', 'opacity');
+
+        &:first-child{
+          border-left: 1px solid rgb(0 0 0 / 14%);
+        }
+
+        &:hover{
+          color:getCssVar('nav-tabs-item', 'active-color');
+        }
+
+        &.is-active{
+          color: #fff;
+          background-color: getCssVar('nav-tabs-item', 'active-color');
+          box-shadow: none;
+        }
       }
 
       .el-tabs__header {
+        margin-bottom: 0;
         border-bottom: none;
       }
     }
   }
 
   @include e(right) {
+    display: none;
     width: getCssVar('nav-tabs', 'right-width');
   }
 }
-- 
Gitee