修复bug

components/Footer.vue

@@ -11,12 +11,22 @@
 						<img src="/logo/bottom-logo.png" alt="" />
 					</div>
 					<div class="navigation-bottom">
-						<span v-for="item in first">
+						<span
+							v-for="item in first"
+							:key="item.name"
+							@click="goto(item.path)"
+							:class="{'special-color': isParentMatch(item)}"
+						>
 							{{item.name}}
 						</span>
 					</div>
 					<div class="navigation-bottom">
-						<span v-for="item in two" @click="goto(item.path)">
+						<span
+							v-for="item in two"
+							:key="item.name"
+							@click="goto(item.path)"
+							:class="{'special-color': isParentMatch(item)}"
+						>
 							{{item.name}}
 						</span>
 					</div>
@@ -30,91 +40,159 @@
 </template>
 
 <script>
-	export default {
-		name: "Footer",
-		data() {
-			return {
-				first: [{
-						name: 'Home'
+export default {
+	name: "Footer",
+	data() {
+		return {
+			first: [{
+				name: 'Home',
+				path: '/home/list',
+				meta: {
+					parent: 'Home',
+				},
+			},
+				{
+					name: 'AI Daily News',
+					path: '/dailyNews',
+					meta: {
+						parent: 'DailyNews',
 					},
-					{
-						name: 'AI Daily News'
-					},
-					{
-						name: 'AI Hub'
-					},
-					{
-						name: 'Learn'
-					},
-					{
-						name: 'About Us'
+				},
+				{
+					name: 'AI Hub',
+					meta: {
+						parent: 'Hub',
 					}
-				],
-				two: [{
-						name: 'Privacy Policy',
-						path: '/privacy'
-					},
-					{
-						name: 'Terms Of Service',
-						path: '/service'
-					},
-				]
-			}
+				},
+				{
+					name: 'Learn',
+					meta: {
+						parent: 'Learn',
+					}
+				},
+				{
+					name: 'About Us',
+					path: '/about',
+					meta: {
+						parent: 'About',
+					}
+				}
+			],
+			two: [{
+				name: 'Privacy Policy',
+				path: '/privacy',
+				meta: {
+					parent: 'Privacy',
+				}
+			},
+				{
+					name: 'Terms Of Service',
+					path: '/service',
+					meta: {
+						parent: 'Service',
+					}
+				},
+			],
+		}
+	},
+	methods: {
+		goto(path) {
+			this.$router.push(path);
 		},
-		methods: {
-			goto(path) {
-				this.$router.push(path)
+		/**
+		 * 判断当前导航项是否应该被选中
+		 * @param {Object} item 导航项
+		 * @returns {Boolean} 是否选中
+		 */
+		isParentMatch(item) {
+			// 首先检查路径匹配逻辑，保持向后兼容性
+			const pathMatch = item.path && item.path === this.$route.path;
+			if (pathMatch) return true;
+
+			// 获取当前路由的meta信息
+			const currentRouteMeta = this.$route.meta || {};
+			const currentParent = currentRouteMeta.parent;
+
+			// 如果当前路由没有parent属性，直接返回false
+			if (!currentParent) return false;
+
+			// 获取当前导航项的meta信息
+			const navItemMeta = item.meta || {};
+			const navItemParent = navItemMeta.parent || '';
+
+			// 根据parent属性的类型进行判断
+			if (typeof currentParent === 'string') {
+				// parent是字符串时，直接比较是否相等
+				return currentParent === navItemParent;
+			} else if (Array.isArray(currentParent)) {
+				// parent是数组时，判断导航项的parent是否在数组中
+				return currentParent.includes(navItemParent);
 			}
+
+			// 其他情况返回false
+			return false;
 		}
 	}
+}
 </script>
 
 <style lang="scss" scoped>
-	#footer-container {
-		width: 100%;
+#footer-container {
+	width: 100%;
+	height: $footerBarHeight;
+
+	.container {
 		height: $footerBarHeight;
+		width: 100%;
+		display: flex;
+		align-items: center;
+		justify-content: space-between;
 
-		.container {
-			height: $footerBarHeight;
-			width: 100%;
-			display: flex;
-			align-items: center;
-			justify-content: space-between;
+	}
+}
 
+.left-container {
+	@include flex-center;
+	flex-direction: column;
+
+	span {
+		font-size: $larg-font-size;
+		color: $main-color;
+		font-weight: bold;
+		font-family: 'Poppins-Bold', serif;
+	}
+}
+
+.right-container {
+	text-align: right;
+	img {
+		margin-bottom: 14px;
+	}
+}
+
+.bottom-span {
+	color: $grey-color;
+	font-family: 'Poppins-Regular', serif;
+}
+
+.navigation-bottom {
+	margin-bottom: 14px;
+	span {
+		display: inline-block;
+		font-family: 'Poppins-Medium', serif;
+		cursor: pointer;
+		margin-left: 30px;
+		&:hover {
+			color: #7B61FF;
 		}
 	}
 
-	.left-container {
-		@include flex-center;
-		flex-direction: column;
-
-		span {
-			font-size: $larg-font-size;
-			color: $main-color;
-			font-weight: bold;
-			font-family: 'Poppins-Bold', serif;
-		}
+	span:last-child {
+		padding-right: 0;
 	}
+}
 
-	.right-container {
-		text-align: right;
-	}
-
-	.bottom-span {
-		color: $grey-color;
-		font-family: 'Poppins-Regular', serif;
-	}
-
-	.navigation-bottom {
-		span {
-			display: inline-block;
-			padding: 14px;
-			font-family: 'Poppins-Medium', serif;
-			cursor: pointer;
-		}
-
-		span:last-child {
-			padding-right: 0;
-		}
-	}
+.special-color {
+	color: #7B61FF;
+}
 </style>