From 9ea0ccce5340ef5d6d9f3723f6e06b21a325796e Mon Sep 17 00:00:00 2001
From: yiqiu <yiqiu@ycyaw.com>
Date: Fri, 26 Dec 2025 14:45:53 +0800
Subject: [PATCH] =?UTF-8?q?refactor:=20=E5=B0=86=E7=A7=BB=E5=8A=A8?=
 =?UTF-8?q?=E7=AB=AF=E6=B1=89=E5=A0=A1=E8=8F=9C=E5=8D=95=E5=9B=BE=E6=A0=87?=
 =?UTF-8?q?=E4=BB=8ECSS=E6=A0=B7=E5=BC=8F=E5=AE=9E=E7=8E=B0=E6=9B=B4?=
 =?UTF-8?q?=E6=94=B9=E4=B8=BASVG=E5=9B=BE=E7=89=87=E3=80=82?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 assets/img/header/bar.svg |  1 +
 css/index.css             | 86 ++++++++++++---------------------------
 public/header.html        |  4 +-
 3 files changed, 28 insertions(+), 63 deletions(-)
 create mode 100644 assets/img/header/bar.svg

diff --git a/assets/img/header/bar.svg b/assets/img/header/bar.svg
new file mode 100644
index 0000000..461899c
--- /dev/null
+++ b/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>
\ No newline at end of file
diff --git a/css/index.css b/css/index.css
index 90e87af..b515895 100644
--- a/css/index.css
+++ b/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 - 极简 ===== */
diff --git a/public/header.html b/public/header.html
index 2d74400..1d926ac 100644
--- a/public/header.html
+++ b/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>