导航栏结构优化（767px/575px/360px）： - nav-left 改为 align-items: stretch 让 LOGO 撑满高度 - nav-left 添加 flex: 1 防止过度压缩 - nav-icon 使用 display: flex 和 height: 100% 撑满高度 按钮位置互换（767px/575px/360px）： - nav-right 改为完整的 flex 容器 - 添加 display: flex, align-items: center, justify-content: flex-end - 添加 height: 100% 让按钮撑满导航栏高度 按钮高度优化（767px/575px/360px）： - no-login 的 order 改为 3（注册按钮在左） - mobile-menu-toggle 的 order 改为 4（汉堡菜单在右） - 注册按钮 height 改为 100% 并使用 flex 垂直居中内容 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
yiqiu
@@ -2486,7 +2486,8 @@ html {
|
||||
|
||||
#index .nav-header .nav-left {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
align-items: stretch;
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
#index .nav-header .nav-right {
|
||||
@@ -2498,6 +2499,12 @@ html {
|
||||
display: none; /* 移动端隐藏主导航 */
|
||||
}
|
||||
|
||||
#index .nav-header .nav-left .nav-icon {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
#index .nav-header .nav-left .nav-icon img {
|
||||
width: 90px;
|
||||
height: 20px;
|
||||
@@ -2505,7 +2512,11 @@ html {
|
||||
}
|
||||
|
||||
#index .nav-right {
|
||||
display: flex !important;
|
||||
align-items: center;
|
||||
justify-content: flex-end;
|
||||
gap: 6px;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
#index .nav-right .nav-text-link {
|
||||
@@ -2521,8 +2532,8 @@ html {
|
||||
display: flex !important;
|
||||
gap: 0 !important;
|
||||
align-items: center;
|
||||
height: 100%;
|
||||
order: 2;
|
||||
height: 100% !important;
|
||||
order: 3;
|
||||
}
|
||||
|
||||
#index .no-login .nav-text-link,
|
||||
@@ -2534,11 +2545,13 @@ html {
|
||||
padding: 0 10px !important;
|
||||
font-size: 10px !important;
|
||||
min-width: auto !important;
|
||||
height: 28px !important;
|
||||
height: 100% !important;
|
||||
line-height: 28px !important;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
/* 汉堡菜单按钮样式 - 放在右侧（order: 3） */
|
||||
/* 汉堡菜单按钮样式 - 放在右侧（order: 4） */
|
||||
#index .mobile-menu-toggle {
|
||||
display: flex !important;
|
||||
flex-direction: column;
|
||||
@@ -2547,8 +2560,9 @@ html {
|
||||
width: 24px;
|
||||
height: 20px;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
margin-right: 0;
|
||||
order: 3;
|
||||
order: 4;
|
||||
}
|
||||
|
||||
#index .mobile-menu-toggle span {
|
||||
@@ -3019,7 +3033,8 @@ html {
|
||||
|
||||
#index .nav-header .nav-left {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
align-items: stretch;
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
#index .nav-header .nav-right {
|
||||
@@ -3027,11 +3042,25 @@ html {
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
#index .nav-header .nav-left .nav-icon {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
#index .nav-header .nav-left .nav-icon img {
|
||||
width: 80px;
|
||||
height: 18px;
|
||||
}
|
||||
|
||||
#index .nav-right {
|
||||
display: flex !important;
|
||||
align-items: center;
|
||||
justify-content: flex-end;
|
||||
gap: 4px;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
#index .nav-right .nav-text-link {
|
||||
display: none;
|
||||
}
|
||||
@@ -3040,17 +3069,13 @@ html {
|
||||
display: none;
|
||||
}
|
||||
|
||||
#index .nav-right {
|
||||
gap: 4px;
|
||||
}
|
||||
|
||||
/* 移动端隐藏登录按钮和分隔符，只显示注册按钮 */
|
||||
#index .no-login {
|
||||
display: flex !important;
|
||||
gap: 0 !important;
|
||||
align-items: center;
|
||||
height: 100%;
|
||||
order: 2;
|
||||
height: 100% !important;
|
||||
order: 3;
|
||||
}
|
||||
|
||||
#index .no-login .nav-text-link,
|
||||
@@ -3062,11 +3087,13 @@ html {
|
||||
padding: 0 10px !important;
|
||||
font-size: 10px !important;
|
||||
min-width: auto !important;
|
||||
height: 28px !important;
|
||||
height: 100% !important;
|
||||
line-height: 28px !important;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
/* 汉堡菜单按钮样式 - 放在右侧（order: 3） */
|
||||
/* 汉堡菜单按钮样式 - 放在右侧（order: 4） */
|
||||
#index .mobile-menu-toggle {
|
||||
display: flex !important;
|
||||
flex-direction: column;
|
||||
@@ -3075,8 +3102,9 @@ html {
|
||||
width: 24px;
|
||||
height: 20px;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
margin-right: 0;
|
||||
order: 3;
|
||||
order: 4;
|
||||
}
|
||||
|
||||
#index .mobile-menu-toggle span {
|
||||
@@ -3492,7 +3520,8 @@ html {
|
||||
|
||||
#index .nav-header .nav-left {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
align-items: stretch;
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
#index .nav-header .nav-right {
|
||||
@@ -3500,6 +3529,12 @@ html {
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
#index .nav-header .nav-left .nav-icon {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
#index .nav-header .nav-left .nav-icon img {
|
||||
width: 70px;
|
||||
height: 16px;
|
||||
@@ -3514,7 +3549,11 @@ html {
|
||||
}
|
||||
|
||||
#index .nav-right {
|
||||
display: flex !important;
|
||||
align-items: center;
|
||||
justify-content: flex-end;
|
||||
gap: 4px;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
/* 移动端隐藏登录按钮和分隔符，只显示注册按钮 */
|
||||
@@ -3522,8 +3561,8 @@ html {
|
||||
display: flex !important;
|
||||
gap: 0 !important;
|
||||
align-items: center;
|
||||
height: 100%;
|
||||
order: 2;
|
||||
height: 100% !important;
|
||||
order: 3;
|
||||
}
|
||||
|
||||
#index .no-login .nav-text-link,
|
||||
@@ -3535,11 +3574,13 @@ html {
|
||||
padding: 0 8px !important;
|
||||
font-size: 9px !important;
|
||||
min-width: auto !important;
|
||||
height: 26px !important;
|
||||
height: 100% !important;
|
||||
line-height: 26px !important;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
/* 汉堡菜单按钮样式 - 放在右侧（order: 3） */
|
||||
/* 汉堡菜单按钮样式 - 放在右侧（order: 4） */
|
||||
#index .mobile-menu-toggle {
|
||||
display: flex !important;
|
||||
flex-direction: column;
|
||||
@@ -3548,8 +3589,9 @@ html {
|
||||
width: 20px;
|
||||
height: 18px;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
margin-right: 0;
|
||||
order: 3;
|
||||
order: 4;
|
||||
}
|
||||
|
||||
#index .mobile-menu-toggle span {
|
||||
|
||||
Reference in New Issue
Block a user