optimize：优化tabs交互

pages/transferDuration/index.vue

@@ -1,20 +1,19 @@
 <template>
-    <div :style="{ 'height': '100vh', 'background': '#1c1c1e'  }">
+    <div :style="{ 'height': '100vh', 'background': '#1c1c1e' }">
         <div class="transfer-duration">
             <div class="transfer-duration-title">转移时长</div>
             <div class="transfer-duration-tabs">
                 <!-- <div class="transfer-duration-tabs_item active">123456</div>
                 <div class="transfer-duration-tabs_item">1432123</div> -->
-                <div v-for="item in tabs" :key="item.key"
-                    :class="['transfer-duration-tabs_item', { active: tabsActive === item.key }]"
-                    @click="changeTabs(item.key)">
+                <div v-for="item in tabs" :key="item.key" :class="['transfer-duration-tabs_item', { active: tabsActive === item.key }]" @click="changeTabs(item.key)">
                     <img :src="tabsActive === item.key ? item.activeIcon : item.icon" alt=""
                         class="transfer-duration-tabs_item-icon">
                     {{ item.name }}
                 </div>
+                <div :class="['transfer-duration-tabs_item pab', { active: tabsActive === 'transferRecord' }]"></div>
             </div>
             <div class="transfer-duration-com" :key="tabsActive">
-                <components :is="tabsActive" :token="token"/>
+                <components :is="tabsActive" :token="token" />
             </div>
         </div>
     </div>
@@ -69,29 +68,44 @@ export default {
     font-weight: bold;
     // overflow: hidden;
     height: 100%;
-    .transfer-duration-title{
+
+    .transfer-duration-title {
         font-size: 18px;
         padding: 0 26px;
         line-height: 40px;
         font-weight: 500;
     }
+
     .transfer-duration-tabs {
         height: 48px;
         margin: 0 16px;
         background: #363636;
         border-radius: 8px;
         box-sizing: border-box;
-
+        position: relative;
         padding: 0 10px;
         display: flex;
         align-items: center;
+        z-index: 1;
 
         .transfer-duration-tabs_item {
             height: 40px;
             border-radius: 8px;
-            flex: 1;
+            width: 159px;
             text-align: center;
             line-height: 40px;
+            position: relative;
+            z-index: 1;
+            &.pab {
+                position: absolute;
+                background: linear-gradient(180deg, #575759 0%, #2C2C2D 100%);
+                box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.5);
+                z-index: -1;
+                transition: all .5s;
+                &.active{
+                    transform: translateX(159px);
+                }
+            }
 
             .transfer-duration-tabs_item-icon {
                 width: 14px;
@@ -102,8 +116,6 @@ export default {
 
             &.active {
                 color: #fff;
-                background: linear-gradient(180deg, #575759 0%, #2C2C2D 100%);
-                box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.5);
             }
         }
     }
@@ -114,5 +126,4 @@ export default {
         overflow-y: auto;
     }
 }
-
 </style>