fix bugs

components/custom-tabs/custom-tabs.vue

@@ -0,0 +1,89 @@
+<template>
+  <view class="tabs-container">
+    <view class="tabs-wrapper">
+      <view
+        v-for="(tab, index) in tabs"
+        :key="index"
+        class="tab-item"
+        :class="{ active: currentIndex === index }"
+        @click="handleTabClick(index)"
+      >
+        <text class="tab-text">{{ tab }}</text>
+        <view class="tab-line" v-if="currentIndex === index"></view>
+      </view>
+    </view>
+  </view>
+</template>
+
+<script>
+export default {
+  name: 'CustomTabs',
+  props: {
+    tabs: {
+      type: Array,
+      default: () => []
+    },
+    current: {
+      type: Number,
+      default: 0
+    }
+  },
+  data() {
+    return {
+      currentIndex: this.current
+    };
+  },
+  watch: {
+    current(val) {
+      this.currentIndex = val;
+    }
+  },
+  methods: {
+    handleTabClick(index) {
+      this.currentIndex = index;
+      this.$emit('change', index);
+    }
+  }
+};
+</script>
+
+<style lang="scss" scoped>
+.tabs-container {
+  background-color: #fff;
+}
+
+.tabs-wrapper {
+  display: flex;
+  align-items: center;
+  padding: 0 30rpx;
+}
+
+.tab-item {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  padding: 30rpx 0;
+  position: relative;
+}
+
+.tab-text {
+  font-size: 32rpx;
+  color: #666666;
+  transition: all 0.3s;
+}
+
+.tab-item.active .tab-text {
+  color: #333333;
+  font-weight: bold;
+}
+
+.tab-line {
+  width: 60rpx;
+  height: 6rpx;
+  background-color: #C93639;
+  border-radius: 3rpx;
+  position: absolute;
+  bottom: 0;
+}
+</style>