From 9936152c08529338381bfd21c8e4b6209cc4e3dc Mon Sep 17 00:00:00 2001
From: wang_fan_w <2547096351@qq.com>
Date: Sat, 6 Apr 2024 16:52:17 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20tabs=E6=A0=8F=E7=9A=84css=E4=BF=AE?=
 =?UTF-8?q?=E6=94=B9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/layout/components/Tabs/index.vue | 34 +++++++++++++++++++++++++++-
 1 file changed, 33 insertions(+), 1 deletion(-)

diff --git a/src/layout/components/Tabs/index.vue b/src/layout/components/Tabs/index.vue
index c6f46a8..314cf62 100644
--- a/src/layout/components/Tabs/index.vue
+++ b/src/layout/components/Tabs/index.vue
@@ -1,6 +1,14 @@
 <template>
   <div class="tabs">
-    <a-tabs :editable="true" :hide-content="true" size="medium" show-add-button @add="handleAdd" @delete="handleDelete">
+    <a-tabs
+      :editable="true"
+      :hide-content="true"
+      size="medium"
+      type="line"
+      show-add-button
+      @add="handleAdd"
+      @delete="handleDelete"
+    >
       <a-tab-pane v-for="(item, index) of data" :key="item.key" :title="item.title" :closable="index !== 2" />
     </a-tabs>
     <div class="tabs_setting">
@@ -86,4 +94,28 @@ const handleDelete = key => {
     }
   }
 }
+:deep(.arco-tabs-nav-tab) {
+  // 移入展示关闭icon
+  .arco-tabs-tab-closable {
+    svg {
+      width: 0px;
+      transition: all 0.2s;
+    }
+    &:hover {
+      svg {
+        width: 1em;
+      }
+    }
+  }
+  // 消除tab移入的背景色
+  &:hover .arco-tabs-tab-title::before {
+    background: unset;
+  }
+}
+// 消除tabs底部边线
+:deep(.arco-tabs-nav) {
+  &::before {
+    background: unset;
+  }
+}
 </style>