From efd7ec33200280cc562a467adcc17ebdb3a3e78f Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=88=98=E6=B4=AA=E6=B4=AA?= <2498601771@qq.com>
Date: Thu, 4 May 2023 11:56:38 +0800
Subject: [PATCH] =?UTF-8?q?fix:=20=E8=B0=83=E6=95=B4=E5=AE=9E=E4=BD=93?=
 =?UTF-8?q?=E8=AF=A6=E6=83=85tabs=E9=80=89=E9=A1=B9=E5=8D=A1=E7=9A=84?=
 =?UTF-8?q?=E6=A0=B7=E5=BC=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../charts/entityDetail/EntityDetailTabs.vue  | 38 +++++++++++++++++++
 1 file changed, 38 insertions(+)

diff --git a/src/views/charts2/charts/entityDetail/EntityDetailTabs.vue b/src/views/charts2/charts/entityDetail/EntityDetailTabs.vue
index 50a57958..c53592cd 100644
--- a/src/views/charts2/charts/entityDetail/EntityDetailTabs.vue
+++ b/src/views/charts2/charts/entityDetail/EntityDetailTabs.vue
@@ -1,5 +1,6 @@
 <template>
   <div class="entity-detail-tabs">
+    <div class="entity-detail-tabs__active-bar"></div>
     <el-tabs v-model="activeTab"
              class="cn-chart__tabs--border-card"
              type="border-card"
@@ -21,9 +22,20 @@
 </template>
 <style lang="scss">
 .entity-detail-tabs {
+  position: relative;
   $tab-border-color: #E2E5EC;
   height: 100%;
 
+  .entity-detail-tabs__active-bar {
+    position: absolute;
+    height: 3px;
+    top: 0;
+    background-color: #046EC9;
+    border-radius: 5px 5px 0 0;
+    transition: all linear .2s;
+    z-index: 9;
+  }
+
   .cn-chart__tabs--border-card {
     height: 100%;
     border: none;
@@ -86,10 +98,21 @@ export default {
   },
   data () {
     return {
+      timer: null
+    }
+  },
+  watch: {
+    activeTab (n) {
+      this.$nextTick(() => {
+        this.handleActiveBar(n)
+      })
     }
   },
   mounted () {
     this.toggleLoading(false)
+    this.timer = setTimeout(() => {
+      this.handleActiveBar(this.activeTab)
+    }, 400)
   },
   setup (props) {
     // eslint-disable-next-line vue/no-setup-props-destructure
@@ -115,6 +138,21 @@ export default {
       tabs,
       entityDetailTabsName
     }
+  },
+  methods: {
+    handleActiveBar (name) {
+      const tabDom = document.getElementById('tab-' + name)
+      if (tabDom) {
+        const offsetLeft = tabDom.offsetLeft
+        const clientWidth = tabDom.clientWidth
+        const clientLeft = tabDom.clientLeft
+        const activeBar = document.querySelector('.entity-detail-tabs .entity-detail-tabs__active-bar')
+        activeBar.style.cssText += `width: ${clientWidth + 2}px; left: ${offsetLeft + clientLeft - 1}px;`
+      }
+    }
+  },
+  beforeUnmount () {
+    clearTimeout(this.timer)
   }
 }
 </script>