From c54f9c9976764c3898dcd19202790b8b39183b8e Mon Sep 17 00:00:00 2001
From: qiuxiao <2280807541@qq.com>
Date: Fri, 31 Oct 2025 15:58:11 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BF=AE=E5=A4=8Dbug?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 components/Footer.vue                         | 222 ++++++++++++------
 components/Header.vue                         |  46 +++-
 components/MyTabs/MyTabPane.vue               |  28 +++
 components/MyTabs/MyTabs.vue                  | 184 +++++++++++++++
 components/SearchInput.vue                    |  37 +--
 components/SearchSelectInput.vue              |   1 +
 pages/About/About.vue                         |   3 +-
 pages/About/Service.vue                       |   1 +
 pages/Home/components/PopularToolList.vue     |   6 +
 pages/Home/components/ToolItemCard.vue        |  34 ++-
 pages/Home/components/ToolList.vue            |   9 +-
 pages/Home/components/Toolbar.vue             |  22 +-
 pages/Home/index.vue                          |   3 +-
 pages/Home/views/ViewMore.vue                 |  34 +--
 pages/Launches/Detail/FinanceItem.vue         |   5 +-
 pages/Launches/Detail/index.vue               |  23 +-
 .../FinanceDetail/SpecialFinanceItem.vue      |  98 ++++++++
 pages/Launches/FinanceDetail/index.vue        |  16 +-
 pages/Launches/components/OptionDates.vue     |  18 +-
 pages/Launches/components/SwitchMonth.vue     |   2 +-
 pages/Launches/components/SwitchYear.vue      |   2 +-
 pages/ToolDetail/Comment/index.vue            |  24 +-
 pages/ToolDetail/Product/index.vue            |   7 +-
 pages/ToolDetail/components/CommentBtn.vue    |  56 ++++-
 .../ToolDetail/components/SimilarToolCard.vue |  15 +-
 pages/ToolDetail/components/ThumbBtn.vue      |  45 +++-
 pages/ToolDetail/index.vue                    |  16 +-
 router.js                                     |  76 +++---
 styles/mixins.scss                            |   8 +
 29 files changed, 823 insertions(+), 218 deletions(-)
 create mode 100644 components/MyTabs/MyTabPane.vue
 create mode 100644 components/MyTabs/MyTabs.vue
 create mode 100644 pages/Launches/FinanceDetail/SpecialFinanceItem.vue

diff --git a/components/Footer.vue b/components/Footer.vue
index 5062b2a..61b4e0b 100644
--- a/components/Footer.vue
+++ b/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>
diff --git a/components/Header.vue b/components/Header.vue
index 325496b..582e03b 100644
--- a/components/Header.vue
+++ b/components/Header.vue
@@ -8,15 +8,15 @@
 				</div>
 				<div class="flex">
 					<div class="navigation-item pointer" v-for="item in navRoutes" :key="item.path"
-						@click="handleParentClick(item)" @mouseenter="showSubmenu(item)" @mouseleave="hideSubmenu">
+						 @click="handleParentClick(item)" @mouseenter="showSubmenu(item)" @mouseleave="hideSubmenu">
 						<span
-							:class="{ 'selected-navigation': $route.matched.some(record => record.path === item.path) }">{{
+							:class="{ 'selected-navigation': isParentMatch(item) }">{{
 								item.meta.navigationName }}
-								<i class="el-icon-arrow-down" v-if="item.meta.children"></i>
+							<i class="el-icon-arrow-down" v-if="item.meta.children"></i>
 						</span>
 						<div v-if="activeMenu === item.path && item.meta.children" class="submenu">
 							<div v-for="sub in item.children" :key="sub.path" @click.stop="goto(sub.path)"
-								class="submenu-item pointer">
+								 class="submenu-item pointer">
 								<img :src="`/logo/${sub.meta.icon}.png`" alt="" />
 								{{ sub.name }}
 							</div>
@@ -84,6 +84,39 @@ export default {
 		hideSubmenu() {
 			this.activeMenu = null;
 		},
+		/**
+		 * 判断当前导航项是否应该被选中
+		 * @param {Object} item 导航项
+		 * @returns {Boolean} 是否选中
+		 */
+		isParentMatch(item) {
+			// 首先检查原始的路径匹配逻辑，保持向后兼容性
+			const pathMatch = this.$route.matched.some(record => record.path === item.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>
@@ -98,13 +131,13 @@ export default {
 	.navigation-container {
 		height: $navigationBarHeight;
 		display: flex;
-		font-weight: 500;
 		align-items: center;
 		justify-content: space-between;
 
 		.logo {
 			@include flex-center;
 			color: $white;
+			//font-family: 'Poppins-Bold', serif;
 
 			span {
 				font-size: $normal-font-size;
@@ -115,6 +148,7 @@ export default {
 			margin-left: 20px;
 			padding: 10px;
 			position: relative;
+			//font-family: 'Poppins-Medium', serif;
 
 			span {
 				color: $grey;
@@ -125,6 +159,8 @@ export default {
 
 				&.selected-navigation {
 					color: $white;
+					font-weight: 500;
+					//font-family: 'Poppins-Bold', serif;
 				}
 			}
 
diff --git a/components/MyTabs/MyTabPane.vue b/components/MyTabs/MyTabPane.vue
new file mode 100644
index 0000000..675a5f1
--- /dev/null
+++ b/components/MyTabs/MyTabPane.vue
@@ -0,0 +1,28 @@
+<template>
+	<div v-show="isActive" class="my-tab-pane">
+		<slot></slot>
+	</div>
+</template>
+
+<script>
+export default {
+	name: 'MyTabPane',
+	props: {
+		label: String,
+		name: [String, Number],
+		disabled: Boolean,
+		closable: Boolean
+	},
+	computed: {
+		isActive() {
+			return this.$parent.activeName === this.name
+		}
+	},
+	mounted() {
+		this.$parent.registerPane(this)
+	},
+	beforeDestroy() {
+		this.$parent.unregisterPane(this)
+	}
+}
+</script>
diff --git a/components/MyTabs/MyTabs.vue b/components/MyTabs/MyTabs.vue
new file mode 100644
index 0000000..73610c4
--- /dev/null
+++ b/components/MyTabs/MyTabs.vue
@@ -0,0 +1,184 @@
+<template>
+	<div class="my-tabs">
+		<!-- 导航栏 -->
+		<div class="my-tabs__nav">
+			<div
+				v-for="pane in panes"
+				:key="pane.name"
+				:class="{
+          'my-tabs__item': true,
+          'is-active': activeName === pane.name,
+          'is-disabled': pane.disabled
+        }"
+				@click="handleClick(pane)"
+			>
+				<!-- 标签文本 -->
+				<span>{{ pane.label }}</span>
+
+				<!-- 关闭按钮 -->
+				<i
+					v-if="pane.closable"
+					class="my-tabs__close"
+					@click.stop="handleClose(pane)"
+				>×</i>
+			</div>
+
+			<!-- 底部横线和滑块 -->
+			<div class="my-tabs__slider-wrapper">
+				<div class="my-tabs__slider-track"></div>
+				<div
+					class="my-tabs__slider"
+					ref="slider"
+				></div>
+			</div>
+		</div>
+
+		<!-- 内容区 -->
+		<div class="my-tabs__content">
+			<slot></slot>
+		</div>
+	</div>
+</template>
+
+
+<script>
+export default {
+	name: 'MyTabs',
+	model: {
+		prop: 'value',
+		event: 'input'
+	},
+	props: {
+		value: [String, Number],           // 当前激活
+		type: { type: String, default: '' }, // 后期可扩展 card/border-card
+		closable: Boolean                  // 全局是否允许关闭
+	},
+	data() {
+		return {
+			panes: [] // 缓存所有 MyTabPane 实例
+		}
+	},
+	computed: {
+		activeName: {
+			get() { return this.value },
+			set(val) { this.$emit('input', val) }
+		}
+	},
+	watch: {
+		activeName() {
+			this.$nextTick(() => {
+				this.updateSliderPosition();
+			});
+		},
+		panes() {
+			this.$nextTick(() => {
+				this.updateSliderPosition();
+			});
+		}
+	},
+	mounted() {
+		this.$nextTick(() => {
+			this.updateSliderPosition();
+		});
+	},
+	methods: {
+		/* 收集子组件 */
+		registerPane(pane) {
+			this.panes.push(pane)
+			// 默认选中第一个
+			if (!this.activeName && this.panes.length === 1) {
+				this.activeName = pane.name
+			}
+		},
+		unregisterPane(pane) {
+			const idx = this.panes.indexOf(pane)
+			if (idx > -1) this.panes.splice(idx, 1)
+		},
+		/* 点击导航 */
+		handleClick(pane) {
+			if (pane.disabled) return
+			this.activeName = pane.name
+			this.$emit('tab-click', pane)
+		},
+		/* 关闭 */
+		handleClose(pane) {
+			this.$emit('edit', pane.name, 'remove')
+			// 业务层把 v-model 绑定的数组删掉即可
+		},
+		/* 更新滑块位置和宽度 */
+		updateSliderPosition() {
+			if (!this.activeName || !this.$refs.slider) return;
+
+			const activeTab = this.$el.querySelector(`.my-tabs__item.is-active`);
+			if (!activeTab) return;
+
+			const textElement = activeTab.querySelector('span');
+			if (!textElement) return;
+
+			const { width } = textElement.getBoundingClientRect();
+			const { left } = activeTab.getBoundingClientRect();
+			const navLeft = this.$el.querySelector('.my-tabs__nav').getBoundingClientRect().left;
+
+			this.$refs.slider.style.width = `${width}px`;
+			this.$refs.slider.style.left = `${left - navLeft + (activeTab.offsetWidth - width) / 2}px`;
+		}
+	}
+}
+</script>
+
+<style scoped lang="scss">
+.my-tabs__nav {
+	display: flex;
+	position: relative;
+	padding-bottom: 14px;
+}
+.my-tabs__item {
+	padding: 8px 16px;
+	cursor: pointer;
+	position: relative;
+	font-size: 20px;
+	&:hover {
+		opacity: 0.8;
+	}
+}
+.my-tabs__item.is-active {
+	color: #409eff;
+	background: linear-gradient(90deg, $linear-gradient-start 22%, $linear-gradient-end 73%);
+	-webkit-background-clip: text;
+	-webkit-text-fill-color: transparent;
+	font-weight: bold;
+}
+.my-tabs__item.is-disabled {
+	color: #1e293b;
+	cursor: not-allowed;
+	font-family: 'Poppins-Regular', serif;
+}
+.my-tabs__close { margin-left: 6px; color: #999; }
+.my-tabs__close:hover { color: #f56c6c; }
+.my-tabs__content { padding: 15px 0; }
+
+/* 底部横线和滑块样式 */
+.my-tabs__slider-wrapper {
+	position: absolute;
+	bottom: 0;
+	left: 0;
+	right: 0;
+	height: 4px;
+	display: flex;
+	align-items: center;
+}
+.my-tabs__slider-track {
+	width: 100%;
+	height: 4px;
+	background-color: #e2e8f0;
+}
+.my-tabs__slider {
+	height: 4px;
+	background: $header-backgroungd;
+	border-radius: 4px;
+	position: absolute;
+	bottom: 0;
+	transition: all 0.3s ease;
+}
+</style>
+
diff --git a/components/SearchInput.vue b/components/SearchInput.vue
index c419c4e..6191e54 100644
--- a/components/SearchInput.vue
+++ b/components/SearchInput.vue
@@ -12,20 +12,20 @@ export default {
 	},
 	data() {
 		return {
-			localValue: this.value, // 创建本地副本
+			localValue: this.value,
 			isInputFocused: false,
 		};
 	},
 	watch: {
 		value(newVal) {
-			this.localValue = newVal; // 监听外部 value 变化并同步到本地
+			this.localValue = newVal;
 		}
 	},
 	methods: {
 		handleInput(event) {
 			const newValue = event.target.value;
 			this.localValue = newValue;
-			this.$emit('input', newValue); // 触发 input 事件以支持 v-model
+			this.$emit('input', newValue);
 		},
 		// 新增：处理查询事件
 		handleSearch() {
@@ -36,7 +36,7 @@ export default {
 </script>
 
 <template>
-	<div class="input-container" :class="{ focused: isInputFocused || localValue }">
+	<div class="input-container flex items-center" :class="{ focused: isInputFocused || localValue }">
 		<input
 			type="text"
 			:placeholder="placeholder"
@@ -54,21 +54,24 @@ export default {
 	</div>
 </template>
 
-
 <style scoped lang="scss">
-/* 添加输入框容器聚焦状态样式 */
 .input-container {
-	position: relative;
-
+	height: 60px;
+	padding: 10px 20px;
+	border-radius: 12px;
+	background-color: #fff;
 	input {
-		width: 100%;
-		height: 60px;
-		padding: 0 20px;
-		border-radius: 12px;
-		border: 2px solid transparent;
 		outline: none;
 		font-size: $normal-font-size;
 		transition: border-color 0.3s ease;
+		color: #1e293b;
+		flex: 1;
+		background: #fff !important;
+		border: none;
+		padding: 0;
+		margin: 0;
+		box-shadow: none;
+		height: 40px;
 
 		&::placeholder {
 			color: #ccc;
@@ -76,14 +79,12 @@ export default {
 	}
 
 	img {
-		position: absolute;
-		right: 15px;
-		top: 50%;
-		transform: translateY(-50%);
+		position: relative;
+		right: 0;
 		width: 54px;
 		height: 40px;
-		pointer-events: none;
 		cursor: pointer;
+		margin-left: 10px;
 	}
 
 	&.focused {
diff --git a/components/SearchSelectInput.vue b/components/SearchSelectInput.vue
index 3d50282..9b88ab1 100644
--- a/components/SearchSelectInput.vue
+++ b/components/SearchSelectInput.vue
@@ -126,6 +126,7 @@ export default {
 		border-radius: 6px;
 		gap: 12px;
 		color: #1E293B;
+		font-weight: 500;
 
 		img {
 			width: 28px;
diff --git a/pages/About/About.vue b/pages/About/About.vue
index 6f6c39a..39de82f 100644
--- a/pages/About/About.vue
+++ b/pages/About/About.vue
@@ -63,7 +63,7 @@
 		</div>
 		<div class="bottom-line">
 			<div class="bottom-line-left"></div>
-			<div class="bottom-text gradient-color">
+			<div class="bottom-text">
 				Let’s explore the future of AI—together
 			</div>
 			<div class="bottom-line-right"></div>
@@ -157,6 +157,7 @@
 		font-weight: 600;
 		font-size: 28px;
 		font-family: 'Poppins-SemiBold', serif;
+		@include text-gradient(90deg, #2563eb, 22%, #7B61FF, 73%);
 	}
 	.bottom-line-left {
 		width: 120px;
diff --git a/pages/About/Service.vue b/pages/About/Service.vue
index 2b30238..dcc8134 100644
--- a/pages/About/Service.vue
+++ b/pages/About/Service.vue
@@ -91,6 +91,7 @@
 		font-size: 16px;
 		color: #7B61FF;
 		text-align: center;
+		margin-top: 20px;
 	}
 	.content {
 		margin-top: 75px;
diff --git a/pages/Home/components/PopularToolList.vue b/pages/Home/components/PopularToolList.vue
index c7bd4b9..615bf6b 100644
--- a/pages/Home/components/PopularToolList.vue
+++ b/pages/Home/components/PopularToolList.vue
@@ -70,6 +70,7 @@ export default {
 	background: #FFFFFF;
 	border-radius: 12px;
 	border: 1px solid #E2E8F0;
+	padding: 6px;
 	@include flex-center;
 
 	&:hover {
@@ -78,6 +79,11 @@ export default {
 		@include gradient-border($linear-gradient-start, $linear-gradient-end);
 		box-shadow: 0 5px 7px 0 #00000014;
 	}
+
+	img {
+		width: 100%;
+		height: 100%;
+	}
 }
 
 .pop-item {
diff --git a/pages/Home/components/ToolItemCard.vue b/pages/Home/components/ToolItemCard.vue
index 3d3c17b..cb968b4 100644
--- a/pages/Home/components/ToolItemCard.vue
+++ b/pages/Home/components/ToolItemCard.vue
@@ -46,14 +46,13 @@ export default {
 <template>
 	<div class="card-caontainer" @click="goToToolDetail">
 		<div class="title">
-			<img :src="config.iconUrl || '/'" alt="" />
-			<span style="font-size: 18px">
+			<div class="icon">
+				<img :src="config.iconUrl || '/'" alt="" />
+			</div>
+			<span class="title-text">
 				{{ config.name || '' }}
 			</span>
 		</div>
-		<!--<div class="text"-->
-		<!--	 v-if="config.memo && containsHtml(config.memo + '</p>')"-->
-		<!--	 v-html="config.memo"></div>-->
 		<div class="text">
 			{{ config.memo ? config.memo : '' }}
 		</div>
@@ -62,13 +61,13 @@ export default {
 
 <style scoped lang="scss">
 .card-caontainer {
-	width: 100%;
-	height: 100%;
 	background: #FFFFFF;
 	box-shadow: 0 10px 30px 0 rgba(0, 0, 0, 0.05);
 	border-radius: 8px;
 	padding: 16px;
 	border: 1px solid #E2E8F0;
+	height: 100%;
+	box-sizing: border-box;
 
 	&:hover {
 		cursor: pointer;
@@ -86,9 +85,24 @@ export default {
 		align-items: center;
 		gap: 10px;
 
-		img {
+		.title-text {
+			font-size: 18px;
+			overflow: hidden;
+			text-overflow: ellipsis;
+			white-space: nowrap;
+		}
+
+		.icon {
 			width: 40px;
 			height: 40px;
+			border-radius: 6px;
+			background: #f9fafc;
+			padding: 6px;
+			img {
+				width: 28px;
+				height: 28px;
+				flex-shrink: 0;
+			}
 		}
 
 		span {
@@ -96,6 +110,10 @@ export default {
 			font-size: $big-font-size;
 			font-weight: 600;
 			font-family: 'Poppins-SemiBold', serif;
+			flex: 1;
+			overflow: hidden;
+			text-overflow: ellipsis;
+			white-space: nowrap;
 		}
 	}
 
diff --git a/pages/Home/components/ToolList.vue b/pages/Home/components/ToolList.vue
index 4193b96..b6213aa 100644
--- a/pages/Home/components/ToolList.vue
+++ b/pages/Home/components/ToolList.vue
@@ -3,8 +3,8 @@
 		<div v-for="item in list" class="tools" @click="checkTool(item)">
 			<span class="tool-card" :class="item.active?'checkedBg':''">
 				<span class="content">
-					<img :src="''" alt="" />
-					<span>{{ item.name }}</span>
+					<img :src="item.icon || ''" alt="" />
+					<span>{{ item.name || '' }}</span>
 				</span>
 			</span>
 		</div>
@@ -57,6 +57,11 @@
 			display: inline-block;
 			font-weight: 600;
 			font-family: 'Poppins-SemiBold', serif;
+			cursor: pointer;
+			&:hover {
+				color: $white;
+				background: linear-gradient(90deg, $linear-gradient-start 22%, $linear-gradient-end 73%);
+			}
 
 			.content {
 				@include display-flex;
diff --git a/pages/Home/components/Toolbar.vue b/pages/Home/components/Toolbar.vue
index 0200653..21f5632 100644
--- a/pages/Home/components/Toolbar.vue
+++ b/pages/Home/components/Toolbar.vue
@@ -3,7 +3,7 @@
 		<div class="bar-list">
 			<div class="top-box">
 				<div class="title-wrap">
-					<img :src="`/logo/${tool.img}_check.png`" alt="" />
+					<img :src="category_icon || ''" alt="" />
 					<span class="title-text gradient-color">
 						{{tool.categoryName}}
 					</span>
@@ -27,7 +27,7 @@
 					View more<i class="el-icon-arrow-right"></i>
 				</div>
 				<div class="item-card" v-if="tool.tools && tool.tools.length">
-					<div v-for="(item, index) in tool.tools" :key="index" style="min-height: 110px">
+					<div v-for="(item, index) in tool.tools" :key="index" class="item">
 						<ToolItemCard :config="item" :categorySlug="categorySlug" />
 					</div>
 				</div>
@@ -56,6 +56,10 @@
 			categorySlug: {
 				type: String,
 				default: '',
+			},
+			category_icon: {
+				type: String,
+				default: '',
 			}
 		},
 		data() {
@@ -78,6 +82,11 @@
 		display: flex;
 		align-items: center;
 		gap: 6px;
+
+		img {
+			width: 24px;
+			height: 24px;
+		}
 	}
 
 	.bar-list {
@@ -115,10 +124,6 @@
 		color: #64748B;
 		font-weight: 600;
 
-		&:active {
-			// cursor: grabbing;
-			/* 抓取中状态 */
-		}
 	}
 
 	.more {
@@ -138,5 +143,10 @@
 		gap: 20px;
 		grid-template-columns: repeat(4, 1fr);
 		margin-top: 30px;
+		.item {
+			min-height: 110px;
+			width: 100%;
+			overflow: hidden;
+		}
 	}
 </style>
diff --git a/pages/Home/index.vue b/pages/Home/index.vue
index 1f5a461..83e020f 100644
--- a/pages/Home/index.vue
+++ b/pages/Home/index.vue
@@ -2,7 +2,7 @@
 	<div id="home-page">
 		<IntegratedLayout>
 			<div class="top-title">
-				<div class="first-text gradient-color">
+				<div class="first-text">
 					AIToolsFinder
 				</div>
 				<div class="second-text">
@@ -91,6 +91,7 @@ export default {
 		font-size: $huge-font-size3;
 		font-weight: 900;
 		font-family: 'Poppins-Bold', serif;
+		@include text-gradient(90deg, #2563eb, 22%, #7B61FF, 73%);
 	}
 
 	.second-text {
diff --git a/pages/Home/views/ViewMore.vue b/pages/Home/views/ViewMore.vue
index 0b1f1e1..ebb669b 100644
--- a/pages/Home/views/ViewMore.vue
+++ b/pages/Home/views/ViewMore.vue
@@ -3,8 +3,10 @@
 		<div class="tag-item" v-if="tagName">
 			{{tagName}}
 		</div>
-		<div class="item-card">
-			<ToolItemCard v-for="(item, index) in toolList" :key="index" :config="item" :category-slug="category_slug" />
+		<div class="item-card" v-if="toolList && toolList.length">
+			<div class="item" v-for="(item, index) in toolList" :key="index">
+				<ToolItemCard :config="item" :category-slug="category_slug" />
+			</div>
 		</div>
 	</div>
 </template>
@@ -79,30 +81,10 @@ export default {
 		grid-template-columns: repeat(4, 1fr);
 		margin-top: 30px;
 
-		.card-caontainer {
-			background: #FFFFFF;
-			box-shadow: 0 10px 30px 0 rgba(0, 0, 0, 0.05);
-			border-radius: 8px;
-			padding: 16px;
-			border: 1px solid #E2E8F0;
-
-			.title {
-				display: flex;
-				align-items: center;
-
-				span {
-					color: $main-font-color;
-					font-size: $big-font-size;
-					font-weight: 600;
-					font-family: 'Poppins-SemiBold', serif;
-				}
-			}
-
-			.text {
-				color: $grey-color;
-				font-family: 'Poppins-Regular', serif;
-				// line-height: 30px;
-			}
+		.item {
+			min-height: 110px;
+			width: 100%;
+			overflow: hidden;
 		}
 	}
 }
diff --git a/pages/Launches/Detail/FinanceItem.vue b/pages/Launches/Detail/FinanceItem.vue
index 0587a09..31575dc 100644
--- a/pages/Launches/Detail/FinanceItem.vue
+++ b/pages/Launches/Detail/FinanceItem.vue
@@ -42,8 +42,8 @@ export default {
 	border-top: 2px solid #E2E8F0;
 }
 .finance-item {
-	padding-top: 35px;
-	padding-bottom: 35px;
+	padding-top: 20px;
+	padding-bottom: 20px;
 	cursor: pointer;
 	&:active {
 		opacity: 0.8;
@@ -61,6 +61,7 @@ export default {
 	.title {
 		color: #aebadee6;
 		font-family: 'Poppins-Medium', serif;
+		margin-bottom: 12px;
 	}
 	.content-text {
 		color: #64748B;
diff --git a/pages/Launches/Detail/index.vue b/pages/Launches/Detail/index.vue
index a3cf827..4d1407f 100644
--- a/pages/Launches/Detail/index.vue
+++ b/pages/Launches/Detail/index.vue
@@ -66,10 +66,10 @@
 							<ProjectItem :item="{name: 'Facebook.com', iconUrl: '/launches/web/facebook.png'}" />
 							<ProjectItem :item="{name: 'Instagram.com', iconUrl: '/launches/web/instagram.png'}" />
 							<ProjectItem :item="{name: 'Twitter.com', iconUrl: '/launches/web/twitter.png'}" />
-							<!--<div class="more flex items-center justify-between" style="margin-top: 20px">-->
-							<!--	<div>A total of 8 projects were released</div>-->
-							<!--	<img src="/launches/detail/icon_arrow.png" alt="" />-->
-							<!--</div>-->
+							<div class="more flex items-center justify-between" style="margin-top: 20px">
+								<div>A total of 8 projects were released</div>
+								<img src="/launches/detail/icon_arrow.png" alt="" />
+							</div>
 						</div>
 						<div class="card" style="margin-top: 20px">
 							<div class="flex items-center" style="margin-top: 20px">
@@ -80,12 +80,12 @@
 							<FinanceItem />
 							<FinanceItem />
 							<FinanceItem />
-							<!--<div class="flex justify-end" style="margin-top: 30px">-->
-							<!--	<div class="more flex items-center justify-between" style="width: 50%">-->
-							<!--		<div>View more</div>-->
-							<!--		<img src="/launches/detail/icon_arrow.png" alt="" />-->
-							<!--	</div>-->
-							<!--</div>-->
+							<div class="flex justify-end" style="margin-top: 30px">
+								<div class="more flex items-center justify-between" style="gap: 14px">
+									<div>View more</div>
+									<img src="/launches/detail/icon_arrow.png" alt="" />
+								</div>
+							</div>
 						</div>
 					</div>
 				</div>
@@ -286,7 +286,6 @@ export default {
 			.diver-line {
 				margin-top: 20px;
 				border-top: 2px solid #E2E8F0;
-				margin-bottom: 20px;
 			}
 
 			.content-title {
@@ -307,7 +306,6 @@ export default {
 				border-radius: 6px;
 				padding: 8px 15px;
 				border: 1px solid #e2e8f0;
-				gap: 16px;
 				font-family: 'Poppins-Regular', serif;
 				color: #64748B;
 
@@ -334,7 +332,6 @@ export default {
 					border-radius: 6px;
 					padding: 8px 15px;
 					border: 1px solid #e2e8f0;
-					gap: 16px;
 					font-family: 'Poppins-Regular', serif;
 					color: #64748B;
 
diff --git a/pages/Launches/FinanceDetail/SpecialFinanceItem.vue b/pages/Launches/FinanceDetail/SpecialFinanceItem.vue
new file mode 100644
index 0000000..7bf8d26
--- /dev/null
+++ b/pages/Launches/FinanceDetail/SpecialFinanceItem.vue
@@ -0,0 +1,98 @@
+<template>
+	<div class="special-finance-item flex">
+		<div class="dot"></div>
+		<div class="flex-1 container">
+			<div class="time">2025-2-1</div>
+			<div class="content">Koah participated in a $5 million seed round, led Forerunner, and participated in The Timeline Of Sketch Commons.</div>
+			<div class="tag-list flex flex-wrap">
+				<div v-for="(it, i) in tag" :key="i" class="tag-item flex items-center">
+					<img src="/" alt="" />
+					<span>{{ it.name }}</span>
+					<div class="lead" v-if="it.isLead">Lead</div>
+				</div>
+			</div>
+		</div>
+	</div>
+</template>
+
+<script>
+export default {
+	data() {
+		return {
+			tag: [{
+				name: 'Mask Network',
+				isLead: true,
+			}, {
+				name: 'CatcherVC',
+				isLead: true,
+			}, {
+				name: 'CREDIT SCEND',
+				isLead: false,
+			}, {
+				name: 'Ribbit Capital',
+				isLead: false,
+			}],
+		}
+	},
+	methods: {},
+}
+</script>
+
+<style scoped lang="scss">
+.special-finance-item {
+	border-bottom: 1px solid #E2E8F0;
+	gap: 14px;
+	.dot {
+		width: 8px;
+		height: 8px;
+		background-color: #7B61FF;
+		border-radius: 50%;
+		margin-top: 8px;
+	}
+	.container {
+		padding-bottom: 50px;
+		.time {
+			font-size: 16px;
+			color: #7B61FF;
+			font-family: 'Poppins-Medium', serif;
+			margin-bottom: 22px;
+		}
+		.content {
+			color: #64748B;
+			font-size: 20px;
+			font-family: 'Poppins-Medium', serif;
+			margin-bottom: 20px;
+		}
+		.tag-list {
+			gap: 30px;
+			.tag-item {
+				position: relative;
+				border-radius: 12px;
+				border: 1px solid #E2E8F0;
+				padding: 10px;
+				gap: 4px;
+				img {
+					width: 12px;
+					height: 12px;
+				}
+				span {
+					font-size: 14px;
+					color: #64748B;
+					font-family: 'Poppins-Regular', serif;
+					line-height: 14px;
+				}
+				.lead {
+					padding: 0 4px;
+					border-radius: 8px;
+					background-color: #6ae7ee;
+					color: #ffffff;
+					position: absolute;
+					right: 0;
+					font-size: 9px;
+					top: -10px;
+				}
+			}
+		}
+	}
+}
+</style>
diff --git a/pages/Launches/FinanceDetail/index.vue b/pages/Launches/FinanceDetail/index.vue
index 2e08b1b..4708d97 100644
--- a/pages/Launches/FinanceDetail/index.vue
+++ b/pages/Launches/FinanceDetail/index.vue
@@ -15,7 +15,9 @@
 						<span>Introduction: </span>
 					</div>
 					<div class="item-content">
-						{{ financeDetail.summary || '' }}
+						<div style="padding-right: 70px">
+							{{ financeDetail.summary || '' }}
+						</div>
 					</div>
 				</div>
 				<div class="terms-item">
@@ -37,7 +39,9 @@
 				</div>
 				<div class="diver"></div>
 				<div class="title">Special Financing</div>
-				<div class="card"></div>
+				<div class="card content-box">
+					<SpecialFinanceItem />
+				</div>
 			</div>
 		</IntegratedLayout>
 	</div>
@@ -45,9 +49,10 @@
 
 <script>
 import CommentBtn from "@/pages/ToolDetail/components/CommentBtn.vue";
+import SpecialFinanceItem from "@/pages/Launches/FinanceDetail/SpecialFinanceItem.vue";
 
 export default {
-	components: {CommentBtn},
+	components: {CommentBtn, SpecialFinanceItem},
 	data() {
 		return {
 			commentCount: 0,
@@ -99,6 +104,11 @@ export default {
 .content {
 	padding-top: 180px;
 	padding-bottom: 100px;
+
+	.content-box {
+		padding: 50px 30px;
+	}
+
 	.diver {
 		margin-top: 20px;
 		border-top: 4px solid #E2E8F0;
diff --git a/pages/Launches/components/OptionDates.vue b/pages/Launches/components/OptionDates.vue
index 28e476e..87ebcac 100644
--- a/pages/Launches/components/OptionDates.vue
+++ b/pages/Launches/components/OptionDates.vue
@@ -6,6 +6,7 @@
 			<div v-if="mode === 'Daily'" class="daily-picker">
 				<HorizontalDateList>
 					<button
+						style="width: 36px"
 						v-for="day in dailyDays"
 						:key="day.dateStr"
 						:class="{ 'selected': day.dateStr === selectedDate }"
@@ -18,6 +19,7 @@
 			<div v-else-if="mode === 'Weekly'" class="weekly-picker">
 				<HorizontalDateList>
 					<button
+						style="margin: 0 30px; width: 105px"
 						v-for="week in weeklyRanges"
 						:key="week.start"
 						:class="{ 'selected': week.start === selectedDate[0] && week.end === selectedDate[1] }"
@@ -30,7 +32,7 @@
 			<div v-else class="monthly-picker">
 				<HorizontalDateList>
 					<button
-						style="margin: 0 15px"
+						style="margin: 0 9px; width: 55px"
 						v-for="(monthAbbr, index) in monthAbbrs"
 						:key="index"
 						:class="{ 'selected': (index + 1) === selectedMonth }"
@@ -286,13 +288,16 @@ export default {
 .daily-picker button,
 .weekly-picker button,
 .monthly-picker button {
-	padding: 6px 10px;
-	border: 1px solid #e5e7eb;
-	border-radius: 4px;
+	height: 36px;
+	text-align: center;
+	border: 1px solid #E2E8F0;
+	border-radius: 12px;
 	background: #fff;
 	cursor: pointer;
 	transition: all 0.2s;
-	font-size: 14px;
+	font-size: 18px;
+	line-height: 22px;
+	color: #506179;
 	&:active {
 		opacity: 0.8;
 	}
@@ -307,8 +312,7 @@ export default {
 .daily-picker button.selected,
 .weekly-picker button.selected,
 .monthly-picker button.selected {
-	background: #4f46e5;
 	color: #fff;
-	border-color: #4f46e5;
+	background: linear-gradient( 47deg, #2563EB 4%, #7B61FF 73%);
 }
 </style>
diff --git a/pages/Launches/components/SwitchMonth.vue b/pages/Launches/components/SwitchMonth.vue
index eb05da5..30a3a4d 100644
--- a/pages/Launches/components/SwitchMonth.vue
+++ b/pages/Launches/components/SwitchMonth.vue
@@ -3,7 +3,7 @@
 		<div class="btn" @click="prevYear">
 			<img :src="prevIcon" alt="Previous Year" />
 		</div>
-		<div style="width: 60px;text-align: center">{{ monthName }}</div>
+		<div style="width: 60px;text-align: center; font-family: 'Poppins-Regular', serif">{{ monthName }}</div>
 		<div class="btn" @click="nextYear">
 			<img :src="nextIcon" :alt="isNextDisabled ? 'Next Year Disabled' : 'Next Year'" />
 		</div>
diff --git a/pages/Launches/components/SwitchYear.vue b/pages/Launches/components/SwitchYear.vue
index f0d6cbb..9cbc4db 100644
--- a/pages/Launches/components/SwitchYear.vue
+++ b/pages/Launches/components/SwitchYear.vue
@@ -45,7 +45,7 @@ export default {
 		<div class="btn" @click="prevYear">
 			<img :src="prevIcon" alt="Previous Year" />
 		</div>
-		<div style="width: 60px;text-align: center">{{ year }}</div>
+		<div style="width: 60px;text-align: center; font-family: 'Poppins-Regular', serif">{{ year }}</div>
 		<div class="btn" @click="nextYear">
 			<img :src="nextIcon" :alt="isNextDisabled ? 'Next Year Disabled' : 'Next Year'" />
 		</div>
diff --git a/pages/ToolDetail/Comment/index.vue b/pages/ToolDetail/Comment/index.vue
index 09b9812..aa76539 100644
--- a/pages/ToolDetail/Comment/index.vue
+++ b/pages/ToolDetail/Comment/index.vue
@@ -30,11 +30,23 @@
 				placeholder="Please express your opinions"
 				v-model="commentText"
 				:maxlength="1000"
+				show-word-limit
+				class="comment-textarea"
 			>
 			</el-input>
 			<div class="information-container flex-between-center">
-				<el-input v-model="nickName" placeholder="NickName" :maxlength="50" />
-				<el-input v-model="email" placeholder="Email" :maxlength="50" />
+				<el-input
+					v-model="nickName"
+					placeholder="NickName"
+					:maxlength="50"
+					class="nickname-input"
+				/>
+				<el-input
+					v-model="email"
+					placeholder="Email"
+					:maxlength="50"
+					class="email-input"
+				/>
 			</div>
 			<div class="submit-button flex-center" @click="submitComment">
 				<span>Submit</span>
@@ -42,7 +54,7 @@
 			</div>
 		</div>
 		<!--评论列表-->
-		<div class="comment-list card">
+		<div class="comment-list card" v-if="commentList.length">
 			<div class="list-header flex-between-center">
 				<h2 class="content-title">All comments <span class="little-text">（{{commentList.length}} comments）</span></h2>
 				<div class="more pointer" v-if="!checkMore" @click="checkMore = true">
@@ -250,6 +262,9 @@ export default {
 				border-color: #E2E8F0 !important;
 				padding: 30px !important;
 				height: 320px !important;
+				&::placeholder {
+					color: #E2E8F0 !important;
+				}
 			}
 		}
 		.information-container {
@@ -258,6 +273,9 @@ export default {
 			::v-deep .el-input {
 				.el-input__inner {
 					border-color: #E2E8F0 !important;
+					&::placeholder {
+						color: #64748B !important;
+					}
 				}
 			}
 		}
diff --git a/pages/ToolDetail/Product/index.vue b/pages/ToolDetail/Product/index.vue
index 4d7f6cd..5b238f1 100644
--- a/pages/ToolDetail/Product/index.vue
+++ b/pages/ToolDetail/Product/index.vue
@@ -5,7 +5,11 @@
 			<div v-html="tool_content || ''"></div>
 		</div>
 		<div class="law-text-box">
-			<div class="law-title">——————— Special Announcement ———————</div>
+			<div class="law-title flex items-center justify-center">
+				<div style="width: 130px; height: 2px; border-top: 2px solid #1e293b"></div>
+				<span>Special Announcement</span>
+				<div style="width: 130px; height: 2px; border-top: 2px solid #1e293b"></div>
+			</div>
 			<p class="law-text">Without the explicit written permission of this platform, no unit or individual may copy, reprint, quote, modify, disseminate or use all or part of the content of this website in any way. It is strictly prohibited to establish a mirror image or conduct illegal collection on any unofficially authorized server. For any infringement, this platform will hold the offender legally responsible in accordance with the law.</p>
 		</div>
 		<!--其他相似导航-->
@@ -176,6 +180,7 @@ export default {
 			font-family: 'Poppins-SemiBold', serif;
 			text-align: center;
 			margin-bottom: 22px;
+			gap: 22px;
 		}
 
 		.law-text {
diff --git a/pages/ToolDetail/components/CommentBtn.vue b/pages/ToolDetail/components/CommentBtn.vue
index 56720a2..e1ef4fe 100644
--- a/pages/ToolDetail/components/CommentBtn.vue
+++ b/pages/ToolDetail/components/CommentBtn.vue
@@ -9,17 +9,48 @@ export default {
 	data() {
 		return {
 			isActive: false,
+			isHovered: false,
+		}
+	},
+	computed: {
+		// 根据状态返回不同的图片路径
+		getImageSrc() {
+			// 如果已经点赞，显示选中的图片
+			if (this.isActive) {
+				return '/ToolDetail/icon_comment_selected.png';
+			}
+			// 如果鼠标悬停或点击，显示高亮的图片
+			if (this.isHovered) {
+				return '/ToolDetail/icon_comment_selected.png';
+			}
+			// 默认显示普通图片
+			return '/ToolDetail/icon_comment.png';
 		}
 	},
 	methods: {
+		// 鼠标悬停
+		onMouseEnter() {
+			this.isHovered = true;
+		},
+		// 鼠标离开
+		onMouseLeave() {
+			this.isHovered = false;
+		},
+		// 点击事件
+		onClick() {
+			const commentElement = document.querySelector('.comment-content');
+			if (commentElement) {
+				commentElement.scrollIntoView({ behavior: 'smooth' });
+			}
+		}
 	}
 }
 </script>
 
 <template>
-	<div class="box flex flex-col items-center" :style="{background: !isActive && '#FFFFFF'}">
-		<img :src="isActive ? '/ToolDetail/icon_comment_selected.png' : '/ToolDetail/icon_comment.png'" alt="" />
-		<span :style="{color: isActive ? '#ffffffcc' : '#64748b'}">{{ commentCount }}</span>
+	<div class="box flex flex-col items-center" @mouseenter="onMouseEnter" @mouseleave="onMouseLeave" @click="onClick">
+		<img :src="getImageSrc" alt="" />
+		<span>{{ commentCount }}</span>
 	</div>
 </template>
 
@@ -29,13 +60,30 @@ export default {
 	height: 48px;
 	border-radius: 12px;
 	box-shadow: 0 4px 6px 0 #0000000d;
-	background: $header-backgroungd;
+	background: #fff;
 	padding: 5px;
 	font-family: 'Poppins-Regular', serif;
 	font-size: 12px;
+	cursor: pointer;
 	img {
 		width: 20px;
 		height: 20px;
 	}
+	span {
+		color: #64748b;
+	}
+	&:hover {
+		background: linear-gradient(90deg, #2563EB 22%, #7B61FF 73%);
+		span {
+			color: #ffffffcc;
+		}
+	}
+	&:active {
+		background: linear-gradient(90deg, #2563EB 22%, #7B61FF 73%);
+		opacity: 0.8;
+		span {
+			color: #ffffffcc;
+		}
+	}
 }
 </style>
diff --git a/pages/ToolDetail/components/SimilarToolCard.vue b/pages/ToolDetail/components/SimilarToolCard.vue
index fa8ae25..7e166c7 100644
--- a/pages/ToolDetail/components/SimilarToolCard.vue
+++ b/pages/ToolDetail/components/SimilarToolCard.vue
@@ -34,7 +34,9 @@ export default {
 <template>
 	<div class="similar-card-container" @click="goToToolDetail">
 		<div class="title">
-			<img :src="config.iconUrl || ''" alt="" />
+			<div class="icon">
+				<img :src="config.iconUrl || '/'" alt="" />
+			</div>
 			<span style="font-size: 18px">
 								{{ config.name || '' }}
 							</span>
@@ -67,10 +69,17 @@ export default {
 		display: flex;
 		align-items: center;
 
-		img {
+		.icon {
 			width: 40px;
 			height: 40px;
-			margin-right: 4px;
+			border-radius: 6px;
+			background: #f9fafc;
+			padding: 6px;
+			img {
+				width: 28px;
+				height: 28px;
+				flex-shrink: 0;
+			}
 		}
 
 		span {
diff --git a/pages/ToolDetail/components/ThumbBtn.vue b/pages/ToolDetail/components/ThumbBtn.vue
index 22970f6..f50bcdd 100644
--- a/pages/ToolDetail/components/ThumbBtn.vue
+++ b/pages/ToolDetail/components/ThumbBtn.vue
@@ -18,6 +18,22 @@ export default {
 		return {
 			isActive: false,
 			throttleTimer: null,
+			isHovered: false,
+		}
+	},
+	computed: {
+		// 根据状态返回不同的图片路径
+		getImageSrc() {
+			// 如果已经点赞，显示选中的图片
+			if (this.isActive) {
+				return '/ToolDetail/icon_thumb_selected.png';
+			}
+			// 如果鼠标悬停或点击，显示高亮的图片
+			if (this.isHovered) {
+				return '/ToolDetail/icon_thumb_selected.png';
+			}
+			// 默认显示普通图片
+			return '/ToolDetail/icon_thumb.png';
 		}
 	},
 	methods: {
@@ -63,15 +79,23 @@ export default {
 					this.throttleTimer = null;
 				}
 			}
+		},
+		// 鼠标悬停
+		onMouseEnter() {
+			this.isHovered = true;
+		},
+		// 鼠标离开
+		onMouseLeave() {
+			this.isHovered = false;
 		}
 	}
 }
 </script>
 
 <template>
-	<div class="box flex flex-col items-center" :style="{background: !isActive && '#FFFFFF'}" @click="addLike">
-		<img :src="isActive ? '/ToolDetail/icon_thumb_selected.png' : '/ToolDetail/icon_thumb.png'" alt="" />
-		<span :style="{color: isActive ? '#ffffffcc' : '#64748b'}">{{ likeCount }}</span>
+	<div class="box flex flex-col items-center" @click="addLike" @mouseenter="onMouseEnter" @mouseleave="onMouseLeave">
+		<img :src="getImageSrc" alt="" />
+		<span>{{ likeCount }}</span>
 	</div>
 </template>
 
@@ -81,7 +105,7 @@ export default {
 	height: 48px;
 	border-radius: 12px;
 	box-shadow: 0 4px 6px 0 #0000000d;
-	background: $header-backgroungd;
+	background: #fff;
 	padding: 5px;
 	font-family: 'Poppins-Regular', serif;
 	font-size: 12px;
@@ -90,8 +114,21 @@ export default {
 		width: 20px;
 		height: 20px;
 	}
+	span {
+		color: #64748b;
+	}
+	&:hover {
+		background: linear-gradient(90deg, #2563EB 22%, #7B61FF 73%);
+		span {
+			color: #ffffffcc;
+		}
+	}
 	&:active {
+		background: linear-gradient(90deg, #2563EB 22%, #7B61FF 73%);
 		opacity: 0.8;
+		span {
+			color: #ffffffcc;
+		}
 	}
 }
 </style>
diff --git a/pages/ToolDetail/index.vue b/pages/ToolDetail/index.vue
index 0935a6c..8254f2e 100644
--- a/pages/ToolDetail/index.vue
+++ b/pages/ToolDetail/index.vue
@@ -59,8 +59,8 @@
 					</div>
 				</div>
 
-				<el-tabs v-model="activeName" @tab-click="handleClick">
-					<el-tab-pane label="Product information" name="product">
+				<MyTabs v-model="activeName" @tab-click="handleClick">
+					<MyTabPane label="Product information" name="product">
 						<Product
 							:other-tools="other_tools"
 							:tool-id="tool_detail.id || 0"
@@ -68,9 +68,9 @@
 							:category-slug="category_slug || ''"
 							:tool_content="tool_detail.description || ''"
 						/>
-					</el-tab-pane>
-					<el-tab-pane label="Comment" name="comment"></el-tab-pane>
-				</el-tabs>
+					</MyTabPane>
+					<MyTabPane label="Comment" name="comment"></MyTabPane>
+				</MyTabs>
 
 				<Comment comment-type="tool" :id="tool_detail.id" @update:commentCount="handleCommentCountUpdate" />
 			</div>
@@ -84,6 +84,8 @@ import Comment from "@/pages/ToolDetail/Comment/index.vue";
 import ThumbBtn from "@/pages/ToolDetail/components/ThumbBtn.vue";
 import CommentBtn from "@/pages/ToolDetail/components/CommentBtn.vue";
 import Rate from "@/components/Rate.vue";
+import MyTabs from '@/components/MyTabs/MyTabs.vue';
+import MyTabPane from '@/components/MyTabs/MyTabPane.vue';
 
 export default {
 	components: {
@@ -92,6 +94,8 @@ export default {
 		ThumbBtn,
 		CommentBtn,
 		Rate,
+		MyTabs,
+		MyTabPane,
 	},
 	data() {
 		return {
@@ -169,7 +173,7 @@ export default {
 			if (code === 0 && data.list) {
 				this.other_tools = data.list;
 			}
-		}
+		},
 	},
 	computed: {
 		tagList() {
diff --git a/router.js b/router.js
index 7a2242d..e81ba29 100644
--- a/router.js
+++ b/router.js
@@ -2,15 +2,14 @@ import Vue from 'vue'
 import VueRouter from 'vue-router'
 
 // 引入页面组件
-import Home from '@/pages/Home/index.vue'
-import AboutIndex from '@/pages/About/index.vue'
-// import Login from '@/pages/Login/index.vue'
-import Privacy from '@/pages/About/Privacy.vue'
-import About from '@/pages/About/About.vue'
-import Service from '@/pages/About/Service.vue'
-import AIHub from '@/pages/AIHub/index.vue'
-import AITools from '@/pages/AIHub/AITools.vue'
-import Frameworks from '@/pages/AIHub/Frameworks.vue'
+import Home from '@/pages/Home/index.vue';
+import AboutIndex from '@/pages/About/index.vue';
+import Privacy from '@/pages/About/Privacy.vue';
+import About from '@/pages/About/About.vue';
+import Service from '@/pages/About/Service.vue';
+import AIHub from '@/pages/AIHub/index.vue';
+import AITools from '@/pages/AIHub/AITools.vue';
+import Frameworks from '@/pages/AIHub/Frameworks.vue';
 import ViewMore from "@/pages/Home/views/ViewMore.vue";
 import List from "@/pages/Home/views/List.vue";
 import Detail from "@/pages/ToolDetail/index.vue";
@@ -21,7 +20,6 @@ import Learn from "@/pages/Learn/index.vue";
 import Observer from "@/pages/Learn/Observer.vue";
 import Depth from "@/pages/Learn/Depth.vue";
 import Pioneer from "@/pages/Learn/Pioneer.vue";
-// import NewsDetail from "@/pages/DailyNews/NewsDetailIndex/index.vue";
 import LaunchesDetail from "@/pages/Launches/Detail/index.vue";
 import FinanceDetail from "@/pages/Launches/FinanceDetail/index.vue";
 
@@ -31,7 +29,10 @@ export const routes = [
 	{
 		path: '/',
 		name: 'home-redirect',
-		redirect: '/home'
+		redirect: '/home',
+		meta: {
+			parent: 'Home',
+		}
 	},{
 		path: '/home',
 		name: 'home',
@@ -40,6 +41,7 @@ export const routes = [
 		meta: {
 			navigationName: "Home",
 			hidden: false,
+			parent: 'Home',
 		}, //navigationName：显示在header组件里面导航按钮的名字   hidden：是否在导航栏里面显示
 		children: [
 			{
@@ -49,6 +51,7 @@ export const routes = [
 				meta: {
 					navigationName: 'List',
 					hidden: true,
+					parent: 'Home',
 				},
 			},
 			{
@@ -58,6 +61,7 @@ export const routes = [
 				meta: {
 					navigationName: 'View More',
 					hidden: true,
+					parent: 'Home',
 				}
 			}
 		]
@@ -69,6 +73,7 @@ export const routes = [
 		meta: {
 			navigationName: "Tool ToolDetail",
 			hidden: true,
+			parent: 'Home',
 		}
 	},
 	{
@@ -77,7 +82,8 @@ export const routes = [
 		component: Launches,
 		meta: {
 			navigationName: "AI Launches",
-			hidden: false
+			hidden: false,
+			parent: 'Launches',
 		}
 	},
 	{
@@ -87,6 +93,7 @@ export const routes = [
 		meta: {
 			navigationName: "AI Launches Detail",
 			hidden: true,
+			parent: 'Launches',
 		},
 	},
 	{
@@ -96,6 +103,7 @@ export const routes = [
 		meta: {
 			navigationName: "Finance",
 			hidden: true,
+			parent: 'Launches',
 		}
 	},
 	{
@@ -113,7 +121,8 @@ export const routes = [
 				component: AITools,
 				meta: {
 					icon: 'tools',
-					hidden: true // 隐藏于主导航，只在子菜单显示
+					hidden: true, // 隐藏于主导航，只在子菜单显示
+					parent: 'Hub'
 				}
 			},
 			{
@@ -122,7 +131,8 @@ export const routes = [
 				component: Frameworks,
 				meta: {
 					icon: 'frameworks',
-					hidden: true
+					hidden: true,
+					parent: 'Hub',
 				}
 			},
 		]
@@ -134,6 +144,7 @@ export const routes = [
 		meta: {
 			icon: 'tools',
 			hidden: true,
+			parent: ['Hub', 'DailyNews', 'Learn'],
 		}
 	},
 	{
@@ -142,18 +153,10 @@ export const routes = [
 		component: DailyNews,
 		meta: {
 			navigationName: "AI Daily News",
-			hidden: false
+			hidden: false,
+			parent: 'DailyNews',
 		},
 	},
-	// {
-	// 	path: '/news-detail',
-	// 	name: 'News Detail',
-	// 	component: NewsDetail,
-	// 	meta: {
-	// 		navigationName: 'News ToolDetail',
-	// 		hidden: true
-	// 	}
-	// },
 	{
 		path: '/learn',
 		name: 'Learn',
@@ -169,7 +172,8 @@ export const routes = [
 				component: Observer,
 				meta: {
 					icon: 'observer',
-					hidden: true
+					hidden: true,
+					parent: 'Learn',
 				}
 			},
 			{
@@ -178,7 +182,8 @@ export const routes = [
 				component: Depth,
 				meta: {
 					icon: 'analysis',
-					hidden: true
+					hidden: true,
+					parent: 'Learn',
 				}
 			},
 			{
@@ -187,7 +192,8 @@ export const routes = [
 				component: Pioneer,
 				meta: {
 					icon: 'pioneer',
-					hidden: true
+					hidden: true,
+					parent: 'Learn',
 				}
 			}
 		]
@@ -204,21 +210,24 @@ export const routes = [
 				path: '/privacy',
 				component: Privacy,
 				meta: {
-					hidden: true
+					hidden: true,
+					parent: 'Privacy',
 				}
 			},
 			{
 				path: '/about',
 				component: About,
 				meta: {
-					hidden: true
+					hidden: true,
+					parent: 'About',
 				}
 			},
 			{
 				path: '/service',
 				component: Service,
 				meta: {
-					hidden: true
+					hidden: true,
+					parent: 'Service',
 				}
 			}
 		]
@@ -227,7 +236,12 @@ export const routes = [
 
 	{
 		path: '*',
-		redirect: '/'
+		redirect: '/',
+		meta: {
+			navigationName: "404",
+			hidden: true,
+			parent: 'Home',
+		}
 	}
 ]
 
diff --git a/styles/mixins.scss b/styles/mixins.scss
index 99b0b6d..e9d92fc 100644
--- a/styles/mixins.scss
+++ b/styles/mixins.scss
@@ -54,6 +54,14 @@
 	border: 1px solid transparent;
 }
 
+@mixin text-gradient($angle, $start-color, $start-percent, $end-color, $end-percent) {
+	background: linear-gradient($angle, $start-color $start-percent, $end-color $end-percent);
+	-webkit-background-clip: text;
+	background-clip: text;
+	color: transparent;
+	display: inline-block;
+}
+
 @mixin scrollBar {
 
     //滚动条轨道