666666

components/TabBarConLibrary.vue

 <template>
-
+  <view class="custom-tab-bar">
+    <view 
+      v-for="(tab, index) in tabs" 
+      :key="index"
+      class="tab-item"
+      :class="{ active: activeIndex === index }"
+      @click="handleTabClick(index)"
+    >
+      <image 
+        class="tab-bg"
+        :src="activeIndex === index ? '/static/integral/tab-bg-cl0.png' : '/static/integral/tab-bg-cl1.png'"
+        mode="aspectFit"
+      />
+      <text 
+        class="tab-text"
+        :class="{ active: activeIndex === index }"
+      >
+        {{ tab.text }}
+      </text>
+    </view>
+  </view>
 </template>
 
 <script setup>
+import { ref } from 'vue'
+
+// Props 定义
+const props = defineProps({
+  defaultActive: {
+    type: Number,
+    default: 0
+  }
+})
+
+// Events 定义
+const emit = defineEmits(['tabChange'])
+
+// 响应式数据
+const activeIndex = ref(props.defaultActive)
+
+// Tab 配置数据
+const tabs = ref([
+  { text: '疾病护理' },
+  { text: '脑育科普' },
+  { text: '孕期护理' }
+])
+
+// 点击处理
+const handleTabClick = (index) => {
+  if (activeIndex.value === index) return
+  
+  activeIndex.value = index
+  emit('tabChange', {
+    index,
+    tab: tabs.value[index]
+  })
+}
 
+// 暴露方法供父组件调用
+defineExpose({
+  setActiveIndex: (index) => {
+    if (index >= 0 && index < tabs.value.length) {
+      activeIndex.value = index
+    }
+  }
+})
 </script>
 
 <style lang="less" scoped>
+@import '@/common.less';
 
+.custom-tab-bar {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 20rpx 0;
+  
+  .tab-item {
+    position: relative;
+    flex: 1;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    height: 80rpx;
+    margin: 0 10rpx;
+    
+    .tab-bg {
+      position: absolute;
+      top: 0;
+      left: 0;
+      width: 100%;
+      height: 100%;
+      z-index: 1;
+    }
+    
+    .tab-text {
+      position: relative;
+      z-index: 2;
+      font-size: 28rpx;
+      font-weight: 500;
+      color: #1d1e25;
+      transition: color 0.3s ease;
+      
+      &.active {
+        color: #ffffff;
+      }
+    }
+    
+    // 点击效果
+    &:active {
+      opacity: 0.8;
+    }
+  }
+}
 </style>
\ No newline at end of file

views/ContentLibrary.vue

+<template>
+	<view class="con-library-container">
+		<view class="content">
+			<!-- 首页内容 -->
+			<text>66666666</text>
+		</view>
+	</view>
+</template>
+
+<script setup>
+	// 首页组件逻辑
+</script>
+
+<style lang="less" scoped>
+.con-library-container {
+	padding: 20rpx;
+	
+	.content {
+		padding-bottom: 100rpx;
+	}
+}
+</style>