From 3cbec07b914bc1a079abbb5d3d7c3569a9656c21 Mon Sep 17 00:00:00 2001
From: chenjinsong <523037378@qq.com>
Date: Mon, 18 Jul 2022 18:18:34 +0800
Subject: [PATCH] =?UTF-8?q?fix:=20=E8=B0=83=E6=95=B4npm-dashboard=E7=9A=84?=
 =?UTF-8?q?tab=E7=9A=84=E5=AE=9E=E7=8E=B0=E9=80=BB=E8=BE=91?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../css/components/views/charts2/npmTabs.scss | 49 +++++++++++++------
 src/views/charts2/charts/NpmTabs.vue          | 23 ++++++---
 2 files changed, 50 insertions(+), 22 deletions(-)

diff --git a/src/assets/css/components/views/charts2/npmTabs.scss b/src/assets/css/components/views/charts2/npmTabs.scss
index 4bfb3697..d0daf613 100644
--- a/src/assets/css/components/views/charts2/npmTabs.scss
+++ b/src/assets/css/components/views/charts2/npmTabs.scss
@@ -1,22 +1,42 @@
 .npm-tabs {
-  .el-tabs--top .el-tabs__item.is-top:nth-child(2) {
-    padding-left: 20px;
-  }
-  .el-tabs__nav-wrap::after {
-    height: 1px;
-    background-color: #E2E5EC;
-  }
-  .el-tabs--top .el-tabs__item {
-    padding: 0;
-  }
-  .el-tabs__active-bar.is-top {
-    top: 0;
+  position: relative;
+
+  .npm-tabs__active-bar {
+    position: absolute;
     height: 3px;
-    border-radius: 5px 2.5px 0 0;
+    top: 0;
+    background-color: #046EC9;
+    border-radius: 5px 5px 0 0;
+    transition: all linear .2s;
   }
+  .el-tabs.el-tabs--border-card {
+    position: absolute;
+    top: 3px;
+    width: 100%;
+    border: none;
+    box-shadow: none;
+
+    &>.el-tabs__header {
+      background-color: white;
+      border-color: #E2E5EC;
+
+      .el-tabs__nav-wrap {
+        padding-left: 27px;
+      }
+      .el-tabs__item:first-child {
+       margin-left: 0;
+      }
+    }
+    .el-tabs__content {
+      display: none;
+    }
+  }
+
   .el-tabs__item.is-top {
+    height: 35px;
+    line-height: 35px;
+
     .npm-tab__label {
-      padding: 0 20px;
       color: #353636;
       font-size: 14px;
       font-weight: bold;
@@ -31,7 +51,6 @@
     &.is-active {
       .npm-tab__label {
         color: #353636;
-        box-shadow: 1px 0 0 0 #E2E5EC, inset 1px 0 0 #E2E5EC;
 
         i {
           color: #046EC9;
diff --git a/src/views/charts2/charts/NpmTabs.vue b/src/views/charts2/charts/NpmTabs.vue
index 80006c14..0234d48f 100644
--- a/src/views/charts2/charts/NpmTabs.vue
+++ b/src/views/charts2/charts/NpmTabs.vue
@@ -1,6 +1,7 @@
 <template>
   <div class="npm-tabs">
-    <el-tabs v-model="currentTab" ref="elTabs">
+    <div class="npm-tabs__active-bar"></div>
+    <el-tabs v-model="currentTab" ref="elTabs" type="border-card">
       <el-tab-pane>
         <template #label>
           <div class="npm-tab__label">
@@ -34,21 +35,29 @@ export default {
   name: 'NpmTabs',
   data () {
     return {
-      currentTab: 0
+      currentTab: 0,
+      leftOffset: 27
     }
   },
   watch: {
     currentTab (n) {
+      this.$nextTick(() => {
+        this.handleActiveBar(n)
+      })
       this.$emit('tabChange', n)
     }
   },
+  methods: {
+    handleActiveBar (index) {
+      const { offsetLeft, clientWidth, clientLeft } = document.querySelector('.npm-tabs .el-tabs__item.is-active')
+      const activeBar = document.querySelector('.npm-tabs .npm-tabs__active-bar')
+      activeBar.style.width = `${clientWidth + 2}px`
+      activeBar.style.left = `${offsetLeft + this.leftOffset + clientLeft - 1}px`
+    }
+  },
   mounted () {
-    // 修正字体改变导致的active-bar宽度计算偏差
     setTimeout(() => {
-      const activeTab = document.querySelector('.npm-tabs .el-tabs__item.is-active')
-      const activeTabStyle = window.getComputedStyle(activeTab)
-      const activeBar = document.querySelector('.npm-tabs .el-tabs__active-bar')
-      activeBar.style.width = `${parseFloat(activeTabStyle.width) - parseFloat(activeTabStyle.paddingLeft)}px`
+      this.handleActiveBar(0)
     }, 200)
   }
 }