feat: tab样式修改

src/pages/investment/index.vue

@@ -2,7 +2,18 @@
   <div class="invest-us" :style="tabIndex === 1 ? 'background: #f4f4f4' : ''">
     <u-sticky bgColor="#fff">
       <div style="background: white">
-        <u-tabs :list="tabList" @click="handleTab"></u-tabs>
+        <view class="tab_bar">
+          <view
+            class="tab_item"
+            :class="{ active: tabIndex === index }"
+            @click="handleTab(index)"
+            v-for="(tab, index) in tabList"
+            :key="index"
+          >
+            <p>{{ tab.name }}</p>
+            <span class="line" v-if="tabIndex === index"></span>
+          </view>
+        </view>
       </div>
     </u-sticky>
     <div class="body">
@@ -233,7 +244,7 @@ export default {
     changeShowPicker(b) {
       this.showPicker = b;
     },
-    handleTab({ index }) {
+    handleTab(index) {
       this.tabIndex = index;
     },
     handleParams() {
@@ -328,6 +339,7 @@ export default {
 .invest-us {
   background-color: white;
   .body {
+    margin-top: 80rpx;
     padding: 40rpx 30rpx;
     font-size: 24rpx;
     color: #333333;
@@ -416,5 +428,34 @@ export default {
       }
     }
   }
+  .tab_bar {
+    border-bottom: 1rpx solid #fff;
+    display: flex;
+    justify-content: center;
+    padding: 0 10rpx;
+    padding-top: 15rpx;
+    background-color: #fff;
+    position: fixed;
+    top: 0;
+    width: 100vw;
+    box-sizing: border-box;
+  }
+  .tab_item {
+    margin-left: 50rpx;
+    margin-right: 50rpx;
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between;
+    align-items: center;
+  }
+  .line {
+    width: 50rpx;
+    height: 6rpx;
+    border-radius: 3rpx;
+    margin-top: 15rpx;
+    background-color: #bf0000;
+    display: inline-block;
+    overflow: hidden;
+  }
 }
 </style>