初始化

component/tab.vue

@@ -0,0 +1,187 @@
+<template>
+	<div class="navigation-container">
+		<!-- 导航栏 -->
+		<div class="nav-tabs">
+			<div v-for="(tab, index) in tabs" :key="index" :class="['nav-tab', { active: activeTab === index }]"
+				@click="switchTab(index)">
+				{{ tab.value }}
+			</div>
+		</div>
+	</div>
+</template>
+
+<script>
+	export default {
+		name: "NavigationTabs",
+		props: {
+			// 外部传入的标签数据
+			tabsData: {
+				type: Array,
+				default: () => [],
+			},
+			// 默认激活的标签索引
+			defaultActive: {
+				type: Number,
+				default: 0,
+			},
+		},
+		data() {
+			return {
+				activeTab: this.defaultActive,
+				// 默认标签数据
+				defaultTabs: [{
+						key: "created",
+						label: "我创建的",
+						title: "我创建的内容",
+						content: "这里显示您创建的所有内容和项目。",
+					},
+					{
+						key: "hosted",
+						label: "我主持的",
+						title: "我主持的内容",
+						content: "这里显示您正在主持的活动和会议。",
+					},
+					{
+						key: "managed",
+						label: "我管理的",
+						title: "我管理的内容",
+						content: "这里显示您管理的团队和资源。",
+					},
+					{
+						key: "focused",
+						label: "我关注的",
+						title: "我关注的内容",
+						content: "这里显示您关注的话题和动态。",
+					},
+				],
+			};
+		},
+		computed: {
+			// 使用外部数据或默认数据
+			tabs() {
+				return this.tabsData.length > 0 ? this.tabsData : this.defaultTabs;
+			},
+		},
+		watch: {
+			// 监听外部传入的默认激活标签变化
+			defaultActive: {
+				handler(newVal) {
+					this.activeTab = newVal;
+				},
+				immediate: true,
+			},
+		},
+		methods: {
+			// 切换标签
+			switchTab(index) {
+				if (index !== this.activeTab) {
+					this.activeTab = index;
+					// 向父组件发射事件
+					this.$emit("tab-change", {
+						index: index,
+						tab: this.tabs[index],
+					});
+				}
+			},
+			// 获取当前激活的标签数据
+			getCurrentTab() {
+				return this.tabs[this.activeTab];
+			},
+			// 程序化切换到指定标签
+			setActiveTab(index) {
+				if (index >= 0 && index < this.tabs.length) {
+					this.switchTab(index);
+				}
+			},
+		},
+		mounted() {
+			// 组件挂载后发射初始状态
+			this.$emit("tab-change", {
+				index: this.activeTab,
+				tab: this.tabs[this.activeTab],
+			});
+		},
+	};
+</script>
+
+<style scoped>
+	.navigation-container {
+		width: 100%;
+		font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC",
+			"Hiragino Sans GB", "Microsoft YaHei", sans-serif;
+	}
+
+	/* 导航栏样式 */
+	.nav-tabs {
+		display: flex;
+		font-size: 24rpx;
+		overflow-x: auto;
+		scrollbar-width: none;
+	}
+
+	.nav-tab {
+		flex: 1;
+		text-align: center;
+		cursor: pointer;
+		/* transition: all 0.3s ease; */
+		border-radius: 6px;
+		font-size: 24rpx;
+		font-weight: 400;
+		color: #666666;
+		position: relative;
+		user-select: none;
+		white-space: nowrap;
+		 margin: auto 10rpx;
+		 font-family: Source Han Sans CN, Source Han Sans CN;
+	}
+
+	.nav-tab:hover {
+		/* background-color: rgba(255, 255, 255, 0.3); */
+		color: #1a4332;
+	}
+
+	.nav-tab.active {
+		color: #333333;
+		font-size: 32rpx; 
+		font-weight: 500;
+		z-index: 5;
+	}
+
+	.nav-tab.active::after {
+		content: "";
+		position: absolute;
+		bottom: 14rpx;
+		left: 50%;
+		transform: translateX(-50%);
+		width: 80%;
+		height: 16rpx;
+		background-image: url('@/static/image/propMall/tabline.png');
+		background-repeat: no-repeat;
+		background-size: 100% 100%;
+		border-radius: 1px;
+		z-index: -10;
+		border-radius: 10rpx;
+	}
+
+	@media (max-width: 480px) {
+		.nav-tabs {
+			/* padding: 2px; */
+		}
+
+		.nav-tab {
+			padding: 8px 4px;
+			font-size: 12px;
+		}
+	}
+/* 	@keyframes fadeIn {
+		from {
+			opacity: 0;
+			transform: translateY(10px);
+		}
+
+		to {
+			opacity: 1;
+			transform: translateY(0);
+		}
+	} */
+</style>