From ecf9dce758b72f1d7ff49da73e208e7a608079dd Mon Sep 17 00:00:00 2001
From: lyswhut <lyswhut@qq.com>
Date: Thu, 7 May 2020 23:11:59 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BF=AE=E5=A4=8D=20tab=20=E7=BB=84=E4=BB=B6?=
 =?UTF-8?q?=E8=BE=B9=E6=A1=86=E6=BA=A2=E5=87=BA=E9=97=AE=E9=A2=98?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 publish/changeLog.md                     |  1 +
 src/renderer/components/material/Tab.vue | 17 ++++++++++-------
 2 files changed, 11 insertions(+), 7 deletions(-)

diff --git a/publish/changeLog.md b/publish/changeLog.md
index a42e6497..b359b47b 100644
--- a/publish/changeLog.md
+++ b/publish/changeLog.md
@@ -8,6 +8,7 @@
 - 修复Linux版开启托盘无法退出的问题
 - 修复某些情况下可能导致的音源输出问题
 - 修复某些情况下无法开始下载任务的问题
+- 修复 tab 组件边框溢出问题
 
 ### 更变
 
diff --git a/src/renderer/components/material/Tab.vue b/src/renderer/components/material/Tab.vue
index cc681955..f17267c2 100644
--- a/src/renderer/components/material/Tab.vue
+++ b/src/renderer/components/material/Tab.vue
@@ -2,7 +2,7 @@
 div.scroll(:class="$style.tab")
   //- div(:class="$style.content")
   ul
-    li(v-for="item in list" :key="itemKey ? item[itemKey] : item" :class="value === (itemKey ? item[itemKey] : item) ? $style.active : ''")
+    li.ignore-to-rem(v-for="item in list" :key="itemKey ? item[itemKey] : item" :class="value === (itemKey ? item[itemKey] : item) ? $style.active : ''")
       button(type="button"
         @click="handleClick(itemKey ? item[itemKey] : item)") {{ itemName ? item[itemName] : item }}
   //- div(:class="$style.control")
@@ -60,30 +60,33 @@ export default {
     li {
       position: relative;
       flex: none;
-      margin-bottom: -2px;
       border-top: 2px solid @color-tab-border-top;
       border-left: 2px solid @color-tab-btn-background;
       border-right: 2px solid @color-tab-btn-background;
       // box-sizing: border-box;
       transition: border-color @transition-theme;
-      margin-left: -2px;
 
-      &::after {
+      &:global(.ignore-to-rem) {
+        margin-left: -2px;
+        margin-bottom: -2px;
+        &:after, &:before {
+          height: 2px;
+        }
+      }
+      &:after {
         content: ' ';
         display: block;
         width: 50%;
-        height: 2px;
         position: absolute;
         bottom: 0;
         left: 0;
         background-color: @color-tab-border-bottom;
         transition: width @transition-theme;
       }
-      &::before {
+      &:before {
         content: ' ';
         display: block;
         width: 50%;
-        height: 2px;
         position: absolute;
         bottom: 0;
         right: 0;