AIProd/components/Footer.vue

<template>
	<div id="footer-container">
		<IntegratedLayout>
			<div class="container">
				<div class="left-container">
					<img src="/logo/logo-rect.png" alt="" />
					<span>AIProdLaunch</span>
				</div>
				<div class="right-container">
					<div>
						<img src="/logo/bottom-logo.png" alt="" />
					</div>
					<div class="navigation-bottom">
						<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"
							:key="item.name"
							@click="goto(item.path)"
							:class="{'special-color': isParentMatch(item)}"
						>
							{{item.name}}
						</span>
					</div>
					<div class="bottom-span">
						All rights reserved ©2025 AIToolsFinder.
					</div>
				</div>
			</div>
		</IntegratedLayout>
	</div>
</template>

<script>
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 Hub',
					meta: {
						parent: 'Hub',
					}
				},
				{
					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);
		},
		/**
		 * 判断当前导航项是否应该被选中
		 * @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%;
	height: $footerBarHeight;

	.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;
		}
	}

	span:last-child {
		padding-right: 0;
	}
}

.special-color {
	color: #7B61FF;
}
</style>