refactor: 将移动端汉堡菜单图标从CSS样式实现更改为SVG图片。

assets/img/header/bar.svg

@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1766730933310" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="5813" xmlns:xlink="http://www.w3.org/1999/xlink" width="256" height="256"><path d="M161.645714 698.733714a40.374857 40.374857 0 0 0 0 80.749715V698.733714z m726.747429 80.749715a40.374857 40.374857 0 0 0 0-80.749715v80.749715z m-726.747429 0h726.747429V698.733714H161.645714v80.749715zM161.645714 456.338286a40.374857 40.374857 0 0 0 0 80.749714V456.338286z m726.747429 80.749714a40.374857 40.374857 0 0 0 0-80.749714V537.088z m-726.747429 0h726.747429V456.338286H161.645714V537.088zM161.645714 213.942857a40.374857 40.374857 0 0 0 0 80.749714V213.942857z m726.747429 80.749714a40.374857 40.374857 0 0 0 0-80.749714v80.749714z m-726.747429 0h726.747429V213.942857H161.645714v80.749714z" fill="#ffffff" p-id="5814"></path></svg>

css/index.css

@@ -3001,35 +3001,23 @@ html {
   /* 汉堡菜单按钮样式 - 放在左侧（order: 3） */
   #index .mobile-menu-toggle {
     display: flex !important;
-    flex-direction: column;
-    gap: 5px;
+    gap: 0;
     cursor: pointer;
     width: 24px;
-    height: 20px;
+    height: 24px;
     justify-content: center;
     align-items: center;
     margin-right: 0;
     order: 3;
+    padding: 0;
+    background: none;
+    border: none;
   }
 
-  #index .mobile-menu-toggle span {
+  #index .mobile-menu-toggle .mobile-menu-icon {
     width: 100%;
-    height: 2px;
-    background: #E5E7EB;
-    border-radius: 1px;
-    transition: all 0.3s ease;
-  }
-
-  #index .mobile-menu-toggle.active span:nth-child(1) {
-    transform: rotate(45deg) translate(8px, 8px);
-  }
-
-  #index .mobile-menu-toggle.active span:nth-child(2) {
-    opacity: 0;
-  }
-
-  #index .mobile-menu-toggle.active span:nth-child(3) {
-    transform: rotate(-45deg) translate(8px, -8px);
+    height: 100%;
+    display: block;
   }
 
   /* ===== Banner 区域 - 大幅缩小 ===== */
@@ -3568,38 +3556,27 @@ html {
     height: 12px !important;
   }
 
+  /* 汉堡菜单按钮样式 - 放在左侧（order: 3） */
   /* 汉堡菜单按钮样式 - 放在左侧（order: 3） */
   #index .mobile-menu-toggle {
     display: flex !important;
-    flex-direction: column;
-    gap: 5px;
+    gap: 0;
     cursor: pointer;
     width: 24px;
-    height: 20px;
+    height: 24px;
     justify-content: center;
     align-items: center;
     margin-right: 0;
     order: 3;
+    padding: 0;
+    background: none;
+    border: none;
   }
 
-  #index .mobile-menu-toggle span {
+  #index .mobile-menu-toggle .mobile-menu-icon {
     width: 100%;
-    height: 2px;
-    background: #E5E7EB;
-    border-radius: 1px;
-    transition: all 0.3s ease;
-  }
-
-  #index .mobile-menu-toggle.active span:nth-child(1) {
-    transform: rotate(45deg) translate(8px, 8px);
-  }
-
-  #index .mobile-menu-toggle.active span:nth-child(2) {
-    opacity: 0;
-  }
-
-  #index .mobile-menu-toggle.active span:nth-child(3) {
-    transform: rotate(-45deg) translate(8px, -8px);
+    height: 100%;
+    display: block;
   }
 
   /* ===== Banner ===== */
@@ -4079,38 +4056,27 @@ html {
     height: 10px !important;
   }
 
+  /* 汉堡菜单按钮样式 - 放在左侧（order: 3） */
   /* 汉堡菜单按钮样式 - 放在左侧（order: 3） */
   #index .mobile-menu-toggle {
     display: flex !important;
-    flex-direction: column;
-    gap: 4px;
+    gap: 0;
     cursor: pointer;
     width: 20px;
-    height: 18px;
+    height: 20px;
     justify-content: center;
     align-items: center;
     margin-right: 0;
     order: 3;
+    padding: 0;
+    background: none;
+    border: none;
   }
 
-  #index .mobile-menu-toggle span {
+  #index .mobile-menu-toggle .mobile-menu-icon {
     width: 100%;
-    height: 2px;
-    background: #E5E7EB;
-    border-radius: 1px;
-    transition: all 0.3s ease;
-  }
-
-  #index .mobile-menu-toggle.active span:nth-child(1) {
-    transform: rotate(45deg) translate(7px, 7px);
-  }
-
-  #index .mobile-menu-toggle.active span:nth-child(2) {
-    opacity: 0;
-  }
-
-  #index .mobile-menu-toggle.active span:nth-child(3) {
-    transform: rotate(-45deg) translate(7px, -7px);
+    height: 100%;
+    display: block;
   }
 
   /* ===== Banner - 极简 ===== */

public/header.html

@@ -53,9 +53,7 @@
       </div>
       <!-- 移动端汉堡菜单按钮 -->
       <button class="mobile-menu-toggle" id="mobileMenuToggle" aria-label="Toggle navigation">
-        <span></span>
-        <span></span>
-        <span></span>
+        <img src="/web/BlackFruit-web/assets/img/header/bar.svg" alt="Menu" class="mobile-menu-icon">
       </button>
     </div>
   </nav>