From 3a904a2791b93123b0fd614f1912a695edb1304a Mon Sep 17 00:00:00 2001 From: yiqiu Date: Mon, 24 Nov 2025 00:11:20 +0800 Subject: [PATCH] =?UTF-8?q?=E5=8F=91=E7=BB=99=E5=9B=9B=E4=B8=AA?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- css/index.css | 137 ++++++++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 137 insertions(+) diff --git a/css/index.css b/css/index.css index 67abc24..dcc96b7 100644 --- a/css/index.css +++ b/css/index.css @@ -42,6 +42,26 @@ max-width: var(--container-max-width); margin: 0 auto; padding: 0 var(--container-padding-x); + display: flex; + align-items: stretch; + height: 70px; +} + +#index .nav-header .nav-left { + display: flex; + align-items: center; + flex: 1; +} + +#index .nav-right { + display: flex; + align-items: stretch; + height: 100%; +} + +#index .nav-right > a { + display: flex; + align-items: center; } /* nav-shadow 样式和 hover 效果 */ @@ -76,6 +96,123 @@ color: #38BDF8; } +/* ============================================ + 登录注册按钮 - 撑满高度设计 + ============================================ */ + +/* 登录注册容器 */ +#index .no-login { + display: flex; + align-items: stretch; + height: 100%; + gap: 0; +} + +/* 登录按钮 - 浅色边框样式,撑满高度 */ +#index .no-login #loginBtn { + display: flex; + align-items: center; + justify-content: center; + padding: 0 32px; + font-size: 14px; + font-weight: 500; + color: #E5E7EB; + background: transparent; + border: 1px solid rgba(148, 163, 184, 0.3); + border-top: none; + border-bottom: none; + border-radius: 0; + cursor: pointer; + transition: all 0.3s ease; + position: relative; + overflow: hidden; + margin: 0; + min-width: 100px; +} + +#index .no-login #loginBtn::before { + content: ''; + position: absolute; + top: 0; + left: 0; + right: 0; + bottom: 0; + background: rgba(56, 189, 248, 0.1); + opacity: 0; + transition: opacity 0.3s ease; +} + +#index .no-login #loginBtn:hover { + color: #38BDF8; + border-color: rgba(56, 189, 248, 0.5); + background: rgba(56, 189, 248, 0.05); +} + +#index .no-login #loginBtn:hover::before { + opacity: 1; +} + +/* 注册按钮 - 渐变背景样式,撑满高度 */ +#index .no-login #registBtn { + display: flex; + align-items: center; + justify-content: center; + padding: 0 32px; + font-size: 14px; + font-weight: 500; + color: #ffffff; + background: linear-gradient(135deg, #38BDF8 0%, #6366F1 100%); + border: none; + border-left: 1px solid rgba(148, 163, 184, 0.15); + border-radius: 0; + cursor: pointer; + transition: all 0.3s ease; + position: relative; + overflow: hidden; + margin: 0; + min-width: 100px; +} + +#index .no-login #registBtn::before { + content: ''; + position: absolute; + top: 0; + left: 0; + right: 0; + bottom: 0; + background: linear-gradient(135deg, #6366F1 0%, #38BDF8 100%); + opacity: 0; + transition: opacity 0.3s ease; +} + +#index .no-login #registBtn:hover { + background: linear-gradient(135deg, #6366F1 0%, #38BDF8 100%); +} + +#index .no-login #registBtn:hover::before { + opacity: 1; +} + +/* 按钮文字在最上层 */ +#index .no-login #loginBtn, +#index .no-login #registBtn { + position: relative; +} + +/* 响应式 */ +@media (max-width: 768px) { + #index .nav-header { + height: 60px; + } + + #index .no-login #loginBtn, + #index .no-login #registBtn { + padding: 0 20px; + font-size: 13px; + min-width: 80px; + } +} + /* 首页下拉菜单优化 - 确保高层级 */ #index .nav-cont { background: rgba(15, 23, 42, 0.95);