perf: tabs optimization

vbenjs · Oct 23, 2020 · 6e40051 · 6e40051
1 parent c7cfeb5
commit 6e40051
Show file tree

Hide file tree

Showing 2 changed files with 13 additions and 19 deletions.
diff --git a/src/layouts/default/multitabs/index.less b/src/layouts/default/multitabs/index.less
@@ -7,19 +7,6 @@
     height: @multiple-height;
   }
 
-  // .ant-tabs:not(.ant-tabs-card) {
-  //   .ant-tabs-nav-container {
-  //     height: @multiple-height;
-  //     background: @white;
-  //   }
-
-  //   .ant-tabs-tab {
-  //     font-size: 14px;
-  //     line-height: 1.5515;
-  //     background: @white;
-  //   }
-  // }
-
   .ant-tabs.ant-tabs-card {
     .ant-tabs-card-bar {
       height: @multiple-height;
@@ -39,14 +26,21 @@
         line-height: calc(@multiple-height - 2px);
         color: @text-color-call-out;
         background: @white;
-        border: 1px solid @border-color-shallow-dark;
-        border-radius: 4px 4px 0 0;
+        border: 1px solid darken(@border-color-light, 6%);
+        border-radius: 2px 2px 0 0;
         transition: none;
 
         .ant-tabs-close-x {
+          // display: none;
           color: inherit;
         }
 
+        &:hover {
+          .ant-tabs-close-x {
+            display: block;
+          }
+        }
+
         > div {
           display: flex;
           justify-content: center;
@@ -72,22 +66,21 @@
 
         &:hover::before {
           transform: scaleX(1);
-          transition: transform 0.4s ease;
+          transition: transform 0.3s ease;
           transform-origin: bottom left;
         }
       }
 
       .ant-tabs-tab-active {
         height: calc(@multiple-height - 3px);
         color: @white;
-        // background: @primary-color;
         background: linear-gradient(
           118deg,
-          rgba(@primary-color, 0.8),
+          rgba(@primary-color, 0.7),
           rgba(@primary-color, 1)
         ) !important;
         border: 0;
-        box-shadow: 0 0 6px 1px rgba(@primary-color, 0.4);
+        box-shadow: 0 0 6px 1px rgba(@primary-color, 0.7);
 
         &::before {
           display: none;

diff --git a/src/layouts/default/multitabs/index.tsx b/src/layouts/default/multitabs/index.tsx
@@ -148,6 +148,7 @@ export default defineComponent({
           <Tabs
             type="editable-card"
             size="small"
+            animated={false}
             hideAdd={true}
             tabBarGutter={2}
             activeKey={unref(activeKeyRef)}