first commit

src/components/consultant/CategoryTabs.vue

@@ -0,0 +1,87 @@
+<!--
+ * 分类标签组件
+ * @author AI
+ * @date 2026-03-06
+ -->
+<template>
+  <view class="category-tabs">
+    <view 
+      v-for="(item, index) in categories" 
+      :key="index" 
+      class="tab-item"
+      :class="{ active: currentIndex === index }"
+      @click="handleTabClick(index)"
+    >
+      <text class="tab-text">{{ item }}</text>
+    </view>
+  </view>
+</template>
+
+<script>
+export default {
+  name: 'CategoryTabs',
+  props: {
+    categories: {
+      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, this.categories[index])
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.category-tabs {
+  display: flex;
+  gap: 17rpx;
+  overflow-x: auto;
+  overflow-y: hidden;
+  white-space: nowrap;
+  -webkit-overflow-scrolling: touch;
+  
+  // 隐藏滚动条
+  &::-webkit-scrollbar {
+    display: none;
+  }
+  
+  .tab-item {
+    flex-shrink: 0;
+    padding: 8rpx 16rpx;
+    background-color: #f4f4f5;
+    border-radius: 8rpx;
+    
+    .tab-text {
+      font-size: 24rpx;
+      color: #a1a1aa;
+      white-space: nowrap;
+    }
+    
+    &.active {
+      background-color: #fff;
+      
+      .tab-text {
+        color: #70553e;
+      }
+    }
+  }
+}
+</style>