Fix: update menu@mobile style

Author: riverfor

docs/css/responsive.css

@@ -244,6 +244,7 @@ footer {
         width: 100%;
         text-align: center;
         margin: 0;
+        position: relative; /* 添加相对定位 */
     }
 
     .nav-link {
@@ -258,6 +259,26 @@ footer {
         text-transform: uppercase;
         letter-spacing: 1px;
         font-weight: 500;
+        position: relative; /* 添加相对定位用于伪元素 */
+    }
+    
+    /* 移动端导航链接的底部横线 */
+    .nav-link::after {
+        content: '';
+        position: absolute;
+        bottom: 8px; /* 距离底部的距离 */
+        left: 50%; /* 从中心开始 */
+        transform: translateX(-50%); /* 居中对齐 */
+        width: 0; /* 初始宽度为0 */
+        height: 2px;
+        background: linear-gradient(90deg, var(--neon-blue, #00f5ff), var(--neon-purple, #b224ef));
+        transition: width 0.3s ease;
+        border-radius: 1px;
+    }
+    
+    .nav-link:hover::after,
+    .nav-link.active::after {
+        width: calc(100% - 40px); /* 100%宽度减去左右padding */
     }
 
     .nav-link:hover,
@@ -268,6 +289,18 @@ footer {
         transform: translateX(10px);
     }
 
+    /* 如果你想要横线完全覆盖整个链接宽度，使用这个版本 */
+    .nav-link.full-width::after {
+        width: 100%;
+        left: 0;
+        transform: none;
+    }
+    
+    .nav-link.full-width:hover::after,
+    .nav-link.full-width.active::after {
+        width: 100%;
+    }
+    
     /* 汉堡菜单动画 */
     .hamburger.active .bar:nth-child(1) {
         transform: translateY(7px) rotate(45deg);
@@ -373,6 +406,18 @@ footer {
         overflow: auto !important;
         height: auto !important;
     }
+    
+    .nav-link::after {
+        bottom: -2px !important;
+        left: 50% !important;
+        transform: translateX(-50%) !important;
+        width: 0 !important;
+    }
+    
+    .nav-link:hover::after,
+    .nav-link.active::after {
+        width: 100% !important;
+    }
 }
 
 /* 导入关于我们的样式 */

docs/js/responsive.js

@@ -239,4 +239,46 @@ document.addEventListener('DOMContentLoaded', function() {
             }
         });
     }
+    
+    // 移动端导航链接样式优化
+    function optimizeMobileNavLinks() {
+        const navLinks = document.querySelectorAll('.nav-link');
+        
+        if (window.innerWidth <= 768) {
+            navLinks.forEach(link => {
+                // 添加移动端特定的类
+                link.classList.add('mobile-nav-link');
+                
+                // 鼠标进入事件
+                link.addEventListener('mouseenter', function() {
+                    this.style.setProperty('--underline-width', '100%');
+                });
+                
+                // 鼠标离开事件（仅对非活动链接）
+                link.addEventListener('mouseleave', function() {
+                    if (!this.classList.contains('active')) {
+                        this.style.setProperty('--underline-width', '0%');
+                    }
+                });
+            });
+        } else {
+            // 桌面端移除移动端类
+            navLinks.forEach(link => {
+                link.classList.remove('mobile-nav-link');
+                link.style.removeProperty('--underline-width');
+            });
+        }
+    }
+    
+    // 初始化
+    optimizeMobileNavLinks();
+    
+    // 窗口大小改变时重新优化
+    window.addEventListener('resize', function() {
+        optimizeMobileNavLinks();
+        
+        if (window.innerWidth > 768) {
+            closeMenu();
+        }
+    });
 });