修复 tab 组件边框溢出问题

publish/changeLog.md

@@ -8,6 +8,7 @@
 - 修复Linux版开启托盘无法退出的问题
 - 修复某些情况下可能导致的音源输出问题
 - 修复某些情况下无法开始下载任务的问题
+- 修复 tab 组件边框溢出问题
 
 ### 更变
 

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;