后期修改完善，上线版本

components/Header.vue

@@ -9,16 +9,19 @@
 				<div class="flex">
 					<div class="navigation-item pointer" v-for="item in navRoutes" :key="item.path"
 						 @click="handleParentClick(item)" @mouseenter="showSubmenu(item)" @mouseleave="hideSubmenu">
-						<span
-							:class="{ 'selected-navigation': isParentMatch(item) }">{{
-								item.meta.navigationName }}
-							<i class="el-icon-arrow-down" v-if="item.meta.children"></i>
-						</span>
+            <span
+				:class="{ 'selected-navigation': isParentMatch(item) }">{{item.meta.navigationName }}
+              <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">
-								<img :src="`/logo/${sub.meta.icon}.png`" alt="" />
+								<div class="wh-24 flex-center mr-10" :style="{ background: sub.meta.color }">
+									<img :src="`/menu/${sub.meta.icon}.png`" alt="" />
+								</div>
 								{{ sub.name }}
+								<!-- 添加真实的DOM元素作为背景动画 -->
+								<div class="submenu-item-bg" :style="{ backgroundColor: sub.meta.color || '#f1f5f9' }"></div>
 							</div>
 						</div>
 					</div>
@@ -122,11 +125,13 @@ export default {
 </script>
 
 <style lang="scss" scoped>
+.mr-10 {
+	margin-right: 10px;
+}
 #header-container {
 	width: 100%;
-	height: $navigationBarHeight;
 	background: $header-backgroungd;
-
+	height: 72px;
 
 	.navigation-container {
 		height: $navigationBarHeight;
@@ -137,7 +142,7 @@ export default {
 		.logo {
 			@include flex-center;
 			color: $white;
-			//font-family: 'Poppins-Bold', serif;
+			font-family: 'Poppins-Bold';
 
 			span {
 				font-size: $normal-font-size;
@@ -148,7 +153,7 @@ export default {
 			margin-left: 20px;
 			padding: 10px;
 			position: relative;
-			//font-family: 'Poppins-Medium', serif;
+			font-family: 'Poppins-Medium';
 
 			span {
 				color: $grey;
@@ -159,8 +164,7 @@ export default {
 
 				&.selected-navigation {
 					color: $white;
-					font-weight: 500;
-					//font-family: 'Poppins-Bold', serif;
+					font-family: 'Poppins-Bold';
 				}
 			}
 
@@ -168,30 +172,65 @@ export default {
 				z-index: 10;
 				position: absolute;
 				top: 100%;
-				left: 50%;
 				padding: 20px 10px;
-				transform: translateX(-50%);
 				background: $white;
 				box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
 				border-radius: 6px;
 
-				&-item {
-					white-space: nowrap; // 防止文字换行
-					padding: 10px;
-					color: #000000;
+				.submenu-item {
+					white-space: nowrap;
+					padding: 8px;
+					color: #1e293b;
 					@include display-flex;
+					font-size: 18px;
+					position: relative;
+					overflow: hidden;
+					z-index: 1;
+					margin-bottom: 16px;
 
 					img {
-						margin-right: 10px;
+						width: 24px;
+						height: 24px;
+						transition: transform 0.3s ease;
 					}
 
+					// 鼠标悬停效果
 					&:hover {
-						background: #F5F6F9;
-						color: $main-color;
+						cursor: pointer;
+						img {
+							transform: scale(1.1); // 放大图片到1.1倍
+						}
+						.submenu-item-bg {
+							left: 0;
+						}
+					}
+
+					// 真实的DOM元素作为背景动画
+					.submenu-item-bg {
+						position: absolute;
+						top: 0;
+						left: -100%;
+						width: 100%;
+						height: 100%;
+						z-index: -1;
+						transition: left 0.3s ease;
+					}
+
+					&:last-child {
+						margin-bottom: 0;
 					}
 				}
 			}
 		}
 	}
 }
+
+@keyframes slideIn {
+	from {
+		left: -100%;
+	}
+	to {
+		left: 0;
+	}
+}
 </style>