改进菜单栏

.astro/types.d.ts

@@ -1 +1,2 @@
 /// <reference types="astro/client" />
+/// <reference path="content.d.ts" />

src/components/sections/ElderlyHero.astro

@@ -8,8 +8,7 @@
 						<span>智慧养老安全运营中台</span>
 					</div>
 					<h1 class="text-3xl md:text-5xl font-black text-gray-900 tracking-tight leading-tight">
-						让养老机构从被动应对走向<br>
-						<span class="text-blue-600">主动预防</span>
+						智慧养老
 					</h1>
 					<p class="text-gray-700 text-base md:text-lg leading-relaxed">
 						企安智控立足机构养老场景，融合 AI 视觉认知与全域物联感知能力，构建“主动预警、智能防控、闭环管理、数据决策”一体化平台，帮助机构持续提升照护安全与运营效率。

src/layouts/Layout.astro

@@ -83,18 +83,20 @@ function getMobileNavLinkClass(item: NavItem) {
 						</button>
 						<div class="absolute top-full left-1/2 -translate-x-1/2 pt-2 opacity-0 invisible transition-all duration-200 z-50"
 							 data-dropdown-panel role="menu">
-							<div class="bg-white rounded-xl shadow-xl border border-gray-100 py-2 min-w-[200px]">
-								{item.children.map(child => (
-									<a href={child.href} role="menuitem"
-									   class={`flex items-center gap-3 px-4 py-2.5 transition-colors ${
-										 child.id === activeNav
-										   ? 'bg-primary/10 text-primary font-medium'
-										   : 'text-gray-700 hover:bg-primary/10 hover:text-primary'
-									   }`}>
-										<i class={`fa ${child.icon} w-5 text-center`}></i>
-										<span>{child.label}</span>
-									</a>
-								))}
+							<div class="bg-white rounded-xl shadow-xl border border-gray-100 p-3">
+								<div class="flex gap-2">
+									{item.children.map(child => (
+										<a href={child.href} role="menuitem"
+										   class={`flex flex-col items-center gap-2 px-5 py-3 rounded-lg transition-all min-w-[120px] ${
+											 child.id === activeNav
+											   ? 'bg-primary text-white'
+											   : 'text-gray-700 hover:bg-primary/10 hover:text-primary'
+										   }`}>
+											<i class={`fa ${child.icon} text-xl`}></i>
+											<span class="text-sm font-medium whitespace-nowrap">{child.label}</span>
+										</a>
+									))}
+								</div>
 							</div>
 						</div>
 					</div>
@@ -151,16 +153,16 @@ function getMobileNavLinkClass(item: NavItem) {
 <div id="mobile-product-panel"
 	 class="lg:hidden fixed left-0 right-0 z-30 bg-white shadow-xl border-b border-gray-200 transform -translate-y-full opacity-0 pointer-events-none transition-all duration-300"
 	 style="top: 108px;" role="menu">
-	<div class="max-w-md mx-auto px-4 py-4 grid grid-cols-3 gap-3">
+	<div class="max-w-md mx-auto px-2 py-3 grid grid-cols-5 gap-1">
 		{navItems.find(item => item.children)?.children?.map(child => (
 			<a href={child.href} role="menuitem"
-			   class={`flex flex-col items-center gap-1.5 py-3 px-2 rounded-xl transition-colors ${
+			   class={`flex flex-col items-center gap-1 py-2 px-1 rounded-lg transition-colors ${
 				 child.id === activeNav
 				   ? 'bg-primary/10 text-primary'
 				   : 'hover:bg-primary/10'
 			   }`}>
-				<i class={`fa ${child.icon} text-xl ${child.id === activeNav ? 'text-primary' : 'text-primary'}`}></i>
-				<span class={`text-xs font-medium ${child.id === activeNav ? 'text-primary' : 'text-gray-700'}`}>{child.label}</span>
+				<i class={`fa ${child.icon} text-lg ${child.id === activeNav ? 'text-primary' : 'text-primary'}`}></i>
+				<span class={`text-[10px] font-medium leading-tight text-center ${child.id === activeNav ? 'text-primary' : 'text-gray-700'}`}>{child.label}</span>
 			</a>
 		))}
 	</div>
@@ -244,10 +246,8 @@ function getMobileNavLinkClass(item: NavItem) {
 		var panel = dropdown.querySelector('[data-dropdown-panel]') as HTMLElement;
 		var chevron = dropdown.querySelector('[data-dropdown-chevron]') as HTMLElement;
 		var menuItems = panel.querySelectorAll('[role="menuitem"]') as NodeListOf<HTMLElement>;
-		var closeTimer: ReturnType<typeof setTimeout> | null = null;
 
 		function openPanel() {
-			if (closeTimer) { clearTimeout(closeTimer); closeTimer = null; }
 			trigger.setAttribute('aria-expanded', 'true');
 			panel.classList.remove('opacity-0', 'invisible');
 			panel.classList.add('opacity-100', 'visible');
@@ -261,12 +261,9 @@ function getMobileNavLinkClass(item: NavItem) {
 			if (chevron) chevron.style.transform = '';
 		}
 
-		function schedulClose() {
-			closeTimer = setTimeout(closePanel, 150);
-		}
-
-		// Click: toggle (touch-friendly)
-		trigger.addEventListener('click', function() {
+		// Click to toggle
+		trigger.addEventListener('click', function(e: Event) {
+			e.preventDefault();
 			if (trigger.getAttribute('aria-expanded') === 'true') {
 				closePanel();
 			} else {
@@ -274,12 +271,6 @@ function getMobileNavLinkClass(item: NavItem) {
 			}
 		});
 
-		// Hover: mouse users
-		trigger.addEventListener('mouseenter', openPanel);
-		trigger.addEventListener('mouseleave', schedulClose);
-		panel.addEventListener('mouseenter', openPanel);
-		panel.addEventListener('mouseleave', schedulClose);
-
 		// Keyboard
 		trigger.addEventListener('keydown', function(e: KeyboardEvent) {
 			if (e.key === 'ArrowDown') {