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
This commit is contained in:
yiqiu
2025-11-23 23:47:15 +08:00
parent c4744cb73c
commit e5c9c18b6b
2 changed files with 169 additions and 214 deletions
Download Patch File Download Diff File Expand all files Collapse all files

190
css/index.css
View File

@@ -77,124 +77,85 @@
}
/* ============================================
Header 登录注册按钮重新设计
Header 右侧导航重新设计
============================================ */
/* nav-right 按钮容器布局 */
/* nav-right 布局 */
#index .nav-right {
display: flex;
align-items: center;
gap: 12px;
align-items: stretch;
height: 100%;
}
/* 文档、控制台按钮优化 */
#index .nav-right .control {
/* 纯文字链接样式 */
#index .nav-right .nav-text-link {
color: #CBD5E1;
padding: 8px 16px;
font-size: 14px;
font-weight: 500;
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
border-radius: 8px;
position: relative;
overflow: hidden;
border: 1px solid transparent;
}
/* 控制台按钮背景动画 */
#index .nav-right .control::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba(56, 189, 248, 0.08);
transform: scaleX(0);
transform-origin: left;
transition: transform 0.3s ease;
z-index: -1;
}
#index .nav-right .control:hover {
color: #38BDF8;
border-color: rgba(56, 189, 248, 0.2);
transform: translateY(-2px);
}
#index .nav-right .control:hover::before {
transform: scaleX(1);
}
/* 登录注册按钮容器 */
#index .no-login {
font-weight: 400;
padding: 0 16px;
display: flex;
align-items: center;
gap: 8px;
margin-left: 8px;
transition: all 0.3s ease;
cursor: pointer;
text-decoration: none;
}
/* 登录按钮 - 线框风格 */
#index .nav-right .btn-normal-light,
#index .nav-right #loginBtn {
padding: 8px 20px;
#index .nav-right .nav-text-link:hover {
color: #38BDF8;
}
/* 分隔符样式 */
#index .nav-right .nav-divider {
color: rgba(148, 163, 184, 0.3);
display: flex;
align-items: center;
font-size: 14px;
user-select: none;
}
/* 登录注册容器 */
#index .no-login {
display: flex;
align-items: stretch;
height: 100%;
margin-left: 0;
}
/* 注册文字链接 */
#index .no-login .nav-text-link {
padding-right: 20px;
}
/* 登录按钮包装器 - 与 header 等高 */
#index .login-btn-wrapper {
display: flex;
align-items: stretch;
margin-left: 20px;
border-left: 1px solid rgba(148, 163, 184, 0.15);
}
/* 登录按钮 - 与 header 等高 */
#index .btn-login,
#index #loginBtn {
padding: 0 32px;
font-size: 14px;
font-weight: 500;
color: #E5E7EB;
background: transparent;
border: 1px solid rgba(148, 163, 184, 0.3);
border-radius: 8px;
cursor: pointer;
transition: all 0.3s ease;
position: relative;
overflow: hidden;
}
#index .nav-right .btn-normal-light::before,
#index .nav-right #loginBtn::before {
content: '';
position: absolute;
top: 50%;
left: 50%;
width: 0;
height: 0;
border-radius: 50%;
background: rgba(56, 189, 248, 0.15);
transform: translate(-50%, -50%);
transition: width 0.6s ease, height 0.6s ease;
}
#index .nav-right .btn-normal-light:hover,
#index .nav-right #loginBtn:hover {
border-color: rgba(56, 189, 248, 0.6);
color: #38BDF8;
box-shadow: 0 0 20px rgba(56, 189, 248, 0.2);
transform: translateY(-2px);
}
#index .nav-right .btn-normal-light:hover::before,
#index .nav-right #loginBtn:hover::before {
width: 300px;
height: 300px;
}
/* 注册按钮 - 渐变填充风格 */
#index .nav-right .btn-normal,
#index .nav-right #registBtn {
padding: 8px 20px;
font-size: 14px;
font-weight: 600;
color: #ffffff;
background: linear-gradient(135deg, #38BDF8 0%, #6366F1 100%);
border: 1px solid transparent;
border-radius: 8px;
border: none;
border-radius: 0;
cursor: pointer;
transition: all 0.3s ease;
position: relative;
overflow: hidden;
display: flex;
align-items: center;
justify-content: center;
min-width: 100px;
}
#index .nav-right .btn-normal::before,
#index .nav-right #registBtn::before {
#index .btn-login::before,
#index #loginBtn::before {
content: '';
position: absolute;
top: 0;
@@ -206,21 +167,19 @@
transition: opacity 0.3s ease;
}
#index .nav-right .btn-normal:hover,
#index .nav-right #registBtn:hover {
box-shadow:
0 6px 20px rgba(56, 189, 248, 0.4),
0 0 30px rgba(56, 189, 248, 0.3);
transform: translateY(-2px);
#index .btn-login:hover,
#index #loginBtn:hover {
background: linear-gradient(135deg, #6366F1 0%, #38BDF8 100%);
}
#index .nav-right .btn-normal:hover::before,
#index .nav-right #registBtn:hover::before {
#index .btn-login:hover::before,
#index #loginBtn:hover::before {
opacity: 1;
}
#index .nav-right .btn-normal span,
#index .nav-right #registBtn span {
/* 登录按钮文字在最上层 */
#index .btn-login span,
#index #loginBtn span {
position: relative;
z-index: 1;
}
@@ -230,15 +189,15 @@
display: flex;
align-items: center;
gap: 8px;
padding: 6px 12px;
border-radius: 8px;
padding: 0 20px;
cursor: pointer;
transition: all 0.3s ease;
position: relative;
border-left: 1px solid rgba(148, 163, 184, 0.15);
}
#index .login-in:hover {
background: rgba(56, 189, 248, 0.08);
background: rgba(56, 189, 248, 0.05);
}
#index .login-in .head-img {
@@ -263,17 +222,16 @@
/* 响应式适配 */
@media (max-width: 768px) {
#index .nav-right .control {
padding: 6px 12px;
#index .nav-right .nav-text-link {
padding: 0 12px;
font-size: 13px;
}
#index .nav-right .btn-normal-light,
#index .nav-right #loginBtn,
#index .nav-right .btn-normal,
#index .nav-right #registBtn {
padding: 6px 16px;
#index .btn-login,
#index #loginBtn {
padding: 0 24px;
font-size: 13px;
min-width: 80px;
}
}