yiqiu/BlackFruit-UI
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

修复移动端导航栏按钮顺序和对齐问题
All checks were successful
continuous-integration/drone/push Build is passing
Details

Browse Source 
按钮位置调整（767px/575px/360px）：
- 注册按钮（no-login）order 改为 4，放在最右侧
- 汉堡菜单按钮（mobile-menu-toggle）order 改为 3，放在左侧
- nav-right 使用 justify-content: flex-end 让内容靠右排列

注册按钮高度优化：
- 767px：line-height 改为 50px（导航栏高度）
- 575px：line-height 改为 48px（导航栏高度）
- 360px：line-height 改为 44px（导航栏高度）
- 所有情况都使用 display: flex 和 align-items: center 垂直居中

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

Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
yiqiu
2025-12-16 16:32:31 +08:00
parent dbcdba3a0c
commit 5940668023
1 changed files with 12 additions and 12 deletions
Download Patch File Download Diff File Expand all files Collapse all files

24
css/index.css
View File

@@ -2533,7 +2533,7 @@ html {
gap: 0 !important; gap: 0 !important;
align-items: center; align-items: center;
height: 100% !important; height: 100% !important;
order: 3; order: 4;
} }
#index .no-login .nav-text-link, #index .no-login .nav-text-link,
@@ -2546,12 +2546,12 @@ html {
font-size: 10px !important; font-size: 10px !important;
min-width: auto !important; min-width: auto !important;
height: 100% !important; height: 100% !important;
line-height: 28px !important; line-height: 50px !important;
display: flex; display: flex;
align-items: center; align-items: center;
} }
/* 汉堡菜单按钮样式 - 放在右侧（order: 4） */ /* 汉堡菜单按钮样式 - 放在左侧（order: 3） */
#index .mobile-menu-toggle { #index .mobile-menu-toggle {
display: flex !important; display: flex !important;
flex-direction: column; flex-direction: column;
@@ -2562,7 +2562,7 @@ html {
justify-content: center; justify-content: center;
align-items: center; align-items: center;
margin-right: 0; margin-right: 0;
order: 4; order: 3;
} }
#index .mobile-menu-toggle span { #index .mobile-menu-toggle span {
@@ -3075,7 +3075,7 @@ html {
gap: 0 !important; gap: 0 !important;
align-items: center; align-items: center;
height: 100% !important; height: 100% !important;
order: 3; order: 4;
} }
#index .no-login .nav-text-link, #index .no-login .nav-text-link,
@@ -3088,12 +3088,12 @@ html {
font-size: 10px !important; font-size: 10px !important;
min-width: auto !important; min-width: auto !important;
height: 100% !important; height: 100% !important;
line-height: 28px !important; line-height: 48px !important;
display: flex; display: flex;
align-items: center; align-items: center;
} }
/* 汉堡菜单按钮样式 - 放在右侧（order: 4） */ /* 汉堡菜单按钮样式 - 放在左侧（order: 3） */
#index .mobile-menu-toggle { #index .mobile-menu-toggle {
display: flex !important; display: flex !important;
flex-direction: column; flex-direction: column;
@@ -3104,7 +3104,7 @@ html {
justify-content: center; justify-content: center;
align-items: center; align-items: center;
margin-right: 0; margin-right: 0;
order: 4; order: 3;
} }
#index .mobile-menu-toggle span { #index .mobile-menu-toggle span {
@@ -3562,7 +3562,7 @@ html {
gap: 0 !important; gap: 0 !important;
align-items: center; align-items: center;
height: 100% !important; height: 100% !important;
order: 3; order: 4;
} }
#index .no-login .nav-text-link, #index .no-login .nav-text-link,
@@ -3575,12 +3575,12 @@ html {
font-size: 9px !important; font-size: 9px !important;
min-width: auto !important; min-width: auto !important;
height: 100% !important; height: 100% !important;
line-height: 26px !important; line-height: 44px !important;
display: flex; display: flex;
align-items: center; align-items: center;
} }
/* 汉堡菜单按钮样式 - 放在右侧（order: 4） */ /* 汉堡菜单按钮样式 - 放在左侧（order: 3） */
#index .mobile-menu-toggle { #index .mobile-menu-toggle {
display: flex !important; display: flex !important;
flex-direction: column; flex-direction: column;
@@ -3591,7 +3591,7 @@ html {
justify-content: center; justify-content: center;
align-items: center; align-items: center;
margin-right: 0; margin-right: 0;
order: 4; order: 3;
} }
#index .mobile-menu-toggle span { #index .mobile-menu-toggle span {