From ccf44c7fdad5da20a9b2b520f06e8276be9f0582 Mon Sep 17 00:00:00 2001
From: yiqiu <yiqiu@ycyaw.com>
Date: Wed, 17 Dec 2025 17:35:54 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BF=AE=E5=A4=8D=E5=AF=BC=E8=88=AA=E6=A0=8F?=
 =?UTF-8?q?=E9=AB=98=E5=BA=A6=E9=97=AE=E9=A2=98=EF=BC=9A=E5=9C=A8=20common?=
 =?UTF-8?q?.css=20=E4=B8=AD=E4=B8=BA=E6=89=80=E6=9C=89=E7=A7=BB=E5=8A=A8?=
 =?UTF-8?q?=E7=AB=AF=E6=96=AD=E7=82=B9=E6=B7=BB=E5=8A=A0=20align-items/hei?=
 =?UTF-8?q?ght=20=E8=A7=84=E5=88=99?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

核心问题：
- common.css 的 767px/575px 媒体查询中只设置了 nav-header 高度，但没有设置 nav-right 的 flex 拉伸属性
- 导致 nav-right 虽然有 height: 100% 但被 align-items: center（base rule）所影响
- 注册按钮（no-login）作为 nav-desktop-link 类被全局 display: none !important 隐藏

修复内容：
767px 断点:
- 添加 .nav-header { display: flex !important; align-items: stretch !important; }
- 添加 .nav-header .nav-left { display: flex !important; align-items: stretch !important; }
- 添加 .nav-header .nav-right { display: flex !important; align-items: stretch !important; height: 100% !important; }
- 添加 .nav-right { display: flex !important; align-items: stretch !important; height: 100% !important; }
- 添加 .no-login.nav-desktop-link { display: flex !important; height: 100% !important; align-items: stretch !important; }

575px 断点:
- 为所有导航栏元素添加相同的 flex 和高度规则

基础规则:
- 为 .nav-right 添加 flex-shrink: 0 防止 flex 容器缩小

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
---
 common/common.css | 55 +++++++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 55 insertions(+)

diff --git a/common/common.css b/common/common.css
index ab2d810..036b4e0 100644
--- a/common/common.css
+++ b/common/common.css
@@ -122,6 +122,7 @@
   align-items: stretch;
   font-size: 14px;
   height: 100%;
+  flex-shrink: 0;
 }
 
 .nav-right .control {
@@ -1292,6 +1293,26 @@
   .nav-header {
     height: 50px !important;
     padding: 0 12px;
+    display: flex !important;
+    align-items: stretch !important;
+  }
+
+  .nav-header .nav-left {
+    display: flex !important;
+    align-items: stretch !important;
+    flex: 1;
+  }
+
+  .nav-header .nav-right {
+    display: flex !important;
+    align-items: stretch !important;
+    height: 100% !important;
+  }
+
+  .nav-right {
+    display: flex !important;
+    align-items: stretch !important;
+    height: 100% !important;
   }
 
   .nav-header .nav-left .nav-icon img {
@@ -1315,6 +1336,13 @@
     display: none !important;
   }
 
+  /* 注册按钮容器强制显示 */
+  .no-login.nav-desktop-link {
+    display: flex !important;
+    height: 100% !important;
+    align-items: stretch !important;
+  }
+
   .nav-menu .nav-item {
     padding: 0 8px;
     font-size: 13px;
@@ -1483,6 +1511,26 @@
   .nav-header {
     height: 48px !important;
     padding: 0 10px;
+    display: flex !important;
+    align-items: stretch !important;
+  }
+
+  .nav-header .nav-left {
+    display: flex !important;
+    align-items: stretch !important;
+    flex: 1;
+  }
+
+  .nav-header .nav-right {
+    display: flex !important;
+    align-items: stretch !important;
+    height: 100% !important;
+  }
+
+  .nav-right {
+    display: flex !important;
+    align-items: stretch !important;
+    height: 100% !important;
   }
 
   .nav-header .nav-left .nav-icon img {
@@ -1491,6 +1539,13 @@
     margin-right: 8px;
   }
 
+  /* 注册按钮容器强制显示 */
+  .no-login.nav-desktop-link {
+    display: flex !important;
+    height: 100% !important;
+    align-items: stretch !important;
+  }
+
   .nav-menu .nav-item {
     padding: 0 6px;
     font-size: 12px;