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

style: 顶部导航下拉菜单改为 akile.io 深色毛玻璃风格
Some checks failed
continuous-integration/drone/push Build is failing
Details

Browse Source 
- Header 改为深色半透明背景 rgba(10,12,22,0.92) + backdrop-filter
- 导航文字改白色，hover 下划线改蓝色
- nav-mega-menu.css 完整重写：纯行 hover 风格，去掉卡片 border
- 下拉面板背景 rgba(14,16,26,0.98)，柔和阴影
- 登录下拉菜单同步改为深色风格
- 三级菜单动画改为 fadeIn+slideUp 组合
- 清除 css/common.css 中的旧样式覆盖冲突
This commit is contained in:
yiqiu
2026-03-18 17:42:02 +08:00
parent 24b17396ac
commit f5b2225bd8
3 changed files with 171 additions and 215 deletions
Download Patch File Download Diff File Expand all files Collapse all files

89
common/common.css
View File

@@ -61,20 +61,17 @@
#header { #header {
position: sticky; position: sticky;
top: 0; top: 0;
background: #fff; background: transparent;
z-index: 888; z-index: 888;
} }
.nav-shadow { .nav-shadow {
top: 0; top: 0;
box-shadow: 0px 0px 8px rgba(52, 52, 52, 0.08); /* 深色毛玻璃 Header，与下拉菜单统一风格 */
/* 默认 header 背景保持浅色，首页会在 css/index.css 中做单独科技风覆盖 */ background: rgba(10, 12, 22, 0.92);
background: linear-gradient( backdrop-filter: blur(16px);
90deg, -webkit-backdrop-filter: blur(16px);
rgba(255, 255, 255, 0.98) 0%, box-shadow: 0 1px 0 rgba(255, 255, 255, 0.06);
rgba(245, 247, 255, 0.98) 40%,
rgba(227, 237, 255, 0.98) 100%
);
} }
.nav-header { .nav-header {
@@ -102,18 +99,20 @@
} }
.nav-menu .nav-item { .nav-menu .nav-item {
color: #333; color: rgba(220, 228, 240, 0.9);
display: flex; display: flex;
align-items: center; align-items: center;
height: 72px; height: 72px;
padding: 0 20px; padding: 0 20px;
font-size: 16px; font-size: 15px;
cursor: pointer; cursor: pointer;
border-bottom: 2px solid transparent; border-bottom: 2px solid transparent;
transition: color 0.2s ease;
} }
.nav-menu .nav-item:hover { .nav-menu .nav-item:hover {
border-bottom: 2px solid #38BDF8; color: #fff;
border-bottom: 2px solid rgba(59, 130, 246, 0.8);
} }
@@ -127,7 +126,7 @@
.nav-right .control { .nav-right .control {
margin: 0 20px; margin: 0 20px;
color: #333; color: rgba(220, 228, 240, 0.9);
} }
.breadcrumb { .breadcrumb {
@@ -137,16 +136,15 @@
} }
/* 菜单栏 */ /* 菜单栏 - 背景由 nav-mega-menu.css 统一管理 */
.nav-cont { .nav-cont {
position: absolute; position: absolute;
top: 72px; top: 72px;
width: 100%; width: 100%;
overflow: hidden; overflow: hidden;
background: #F7F8FA; background: transparent;
transition: all .5s; transition: height 0.3s ease-out;
height: 0px; height: 0px;
box-shadow: 0px 6px 12px rgba(0, 0, 0, 0.16);
z-index: 2; z-index: 2;
} }
@@ -228,7 +226,7 @@
top: 50%; top: 50%;
height: 32px; height: 32px;
transform: translateY(-50%); transform: translateY(-50%);
border-left: 1px solid #E6EAED; border-left: 1px solid rgba(255, 255, 255, 0.12);
} }
.nav-header .login-in:hover .login-menu { .nav-header .login-in:hover .login-menu {
@@ -238,8 +236,8 @@
.nav-header .login-in .head-img { .nav-header .login-in .head-img {
width: 32px; width: 32px;
height: 32px; height: 32px;
background: #eee; background: #3B82F6;
border: 1px solid #E6EAED; border: 1px solid rgba(255, 255, 255, 0.15);
border-radius: 50%; border-radius: 50%;
color: #FFFFFF; color: #FFFFFF;
font-size: 16px; font-size: 16px;
@@ -251,50 +249,61 @@
.nav-header .login-in .name { .nav-header .login-in .name {
display: inline-block; display: inline-block;
max-width: 140px; max-width: 140px;
color: rgba(220, 228, 240, 0.9);
} }
/* 用户登录下拉菜单 - 深色风格 */
.nav-header .login-in .login-menu { .nav-header .login-in .login-menu {
display: none; display: none;
padding: 8px; padding: 6px;
position: absolute; position: absolute;
top: 72px; top: 72px;
left: 0; left: 0;
width: 157px; width: 168px;
height: 188px; background: rgba(14, 16, 26, 0.98);
background: #FEFFFF; border: 1px solid rgba(255, 255, 255, 0.1);
border: 1px solid #DCDCDC; box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);
box-shadow: 0px 5px 10px rgba(0, 0, 0, 0.1); backdrop-filter: blur(20px);
opacity: 1; -webkit-backdrop-filter: blur(20px);
border-radius: 3px; border-radius: 10px;
animation: navDropFadeIn 0.2s ease;
}
@keyframes navDropFadeIn {
from { opacity: 0; transform: translateY(-6px); }
to { opacity: 1; transform: translateY(0); }
} }
.nav-header .login-in .login-menu .login-menu-item { .nav-header .login-in .login-menu .login-menu-item {
cursor: pointer; cursor: pointer;
height: 40px; height: 40px;
padding: 10px 12px; padding: 10px 14px;
color: rgba(203, 213, 225, 0.85);
border-radius: 6px;
font-size: 14px;
transition: background 0.15s ease, color 0.15s ease;
} }
.nav-header .login-in .login-menu .login-menu-item:hover { .nav-header .login-in .login-menu .login-menu-item:hover {
background: rgba(56, 189, 248, 0.08); background: rgba(255, 255, 255, 0.07);
color: rgba(56, 189, 248, 1); color: #fff;
} }
.nav-header .login-in .login-menu .login-menu-item .real-name { .nav-header .login-in .login-menu .login-menu-item .real-name {
display: inline-block; display: inline-block;
text-align: center; text-align: center;
border: 1px solid #38BDF8; border: 1px solid rgba(59, 130, 246, 0.6);
color: rgba(56, 189, 248, 1); color: #60A5FA;
font-size: 12px; font-size: 11px;
width: 44px; padding: 0 6px;
height: 18px; height: 18px;
border-radius: 3px; line-height: 18px;
border-radius: 4px;
} }
.nav-header .login-in .login-menu .login-menu-item .no-real-name { .nav-header .login-in .login-menu .login-menu-item .no-real-name {
border: 1px solid #E34D59; border: 1px solid rgba(239, 68, 68, 0.6);
color: rgba(227, 77, 89, 1); color: #F87171;
} }
/* 底部导航栏 */ /* 底部导航栏 */

27
css/common.css
View File

@@ -77,17 +77,18 @@ header:hover {
user-select: none; user-select: none;
} }
/* nav-shadow 样式和 hover 效果 */ /* nav-shadow 深色毛玻璃 */
.nav-shadow { .nav-shadow {
background: rgba(15, 23, 42, 0.8) !important; background: rgba(10, 12, 22, 0.92) !important;
backdrop-filter: blur(20px); backdrop-filter: blur(16px) !important;
border-bottom: 1px solid rgba(148, 163, 184, 0.15); -webkit-backdrop-filter: blur(16px) !important;
box-shadow: 0 4px 24px rgba(15, 23, 42, 0.4); box-shadow: 0 1px 0 rgba(255, 255, 255, 0.06) !important;
border-bottom: none;
transition: background 0.3s ease !important; transition: background 0.3s ease !important;
} }
.nav-shadow:hover { .nav-shadow:hover {
background: rgba(15, 23, 42, 0.95) !important; background: rgba(10, 12, 22, 0.98) !important;
} }
/* 导航文字颜色 */ /* 导航文字颜色 */
@@ -206,12 +207,10 @@ header:hover {
} }
/* ============================================ /* ============================================
下拉菜单优化 - 确保高层级 下拉菜单 - 样式由 nav-mega-menu.css 主控
============================================ */ ============================================ */
.nav-cont { .nav-cont {
background: rgba(15, 23, 42, 0.95); /* 提升层级，其余由 nav-mega-menu.css 定义 */
backdrop-filter: blur(20px);
border-bottom: 1px solid rgba(148, 163, 184, 0.15);
z-index: 99998 !important; z-index: 99998 !important;
position: absolute !important; position: absolute !important;
} }
@@ -407,15 +406,15 @@ header:hover {
} }
/* ============================================ /* ============================================
登录菜单下拉 登录菜单下拉 - 深色风格
============================================ */ ============================================ */
.nav-header .login-in .login-menu .login-menu-item { .nav-header .login-in .login-menu .login-menu-item {
color: #E5E7EB; color: rgba(203, 213, 225, 0.85);
} }
.nav-header .login-in .login-menu .login-menu-item:hover { .nav-header .login-in .login-menu .login-menu-item:hover {
background: rgba(56, 189, 248, 0.15); background: rgba(255, 255, 255, 0.07);
color: #38BDF8; color: #fff;
} }
/* ============================================ /* ============================================

270
css/nav-mega-menu.css
View File

@@ -1,72 +1,78 @@
/* 三级导航菜单样式 - 阿里云风格两栏布局 */ /* ============================================================
顶部导航下拉菜单样式 - akile.io 深色毛玻璃风格
============================================================ */
/* 导航容器 - 深色主题配色 */ /* 下拉容器 */
.nav-cont { .nav-cont {
position: absolute; position: absolute;
top: 100%; top: 100%;
left: 0; left: 0;
width: 100%; width: 100%;
background: rgba(15, 23, 42, 0.98); background: rgba(14, 16, 26, 0.98);
backdrop-filter: blur(20px); backdrop-filter: blur(20px);
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3); -webkit-backdrop-filter: blur(20px);
border-top: 1px solid rgba(56, 189, 248, 0.15); border-top: 1px solid rgba(255, 255, 255, 0.06);
box-shadow: 0 20px 48px rgba(0, 0, 0, 0.6);
z-index: 1000; z-index: 1000;
overflow-x: hidden; overflow: hidden;
overflow-y: hidden; transition: height 0.25s ease-out;
transition: height 0.3s ease-out;
height: 0; height: 0;
} }
/* Mega Menu 两栏布局 */ /* Mega Menu 容器 */
.nav-cont-menu.mega-menu { .nav-cont-menu.mega-menu {
display: none; display: none;
height: 100%; height: 100%;
} }
/* inner 布局 */
.nav-content { .nav-content {
display: flex; display: flex;
max-width: 1400px; max-width: 1400px;
margin: 0 auto; margin: 0 auto;
height: 100%; height: 100%;
min-height: 400px; min-height: 320px;
padding: 0; padding: 0;
} }
/* 左侧二级菜单栏 - 深色背景 */ /* ── 左侧二级菜单栏 ── */
.nav-left-sidebar { .nav-left-sidebar {
width: 240px; width: 220px;
background: rgba(30, 41, 59, 0.4); flex-shrink: 0;
backdrop-filter: blur(10px); background: rgba(255, 255, 255, 0.03);
border-right: 1px solid rgba(56, 189, 248, 0.1); border-right: 1px solid rgba(255, 255, 255, 0.06);
padding: 16px 8px;
overflow-y: auto; overflow-y: auto;
} }
/* 二级菜单项 - 深色主题 */ /* 二级分类项 */
.nav-category-item { .nav-category-item {
position: relative; display: flex;
display: block; align-items: center;
padding: 16px 20px; gap: 10px;
color: #E5E7EB; padding: 11px 14px;
color: rgba(203, 213, 225, 0.75);
font-size: 14px; font-size: 14px;
text-decoration: none; font-weight: 500;
border-left: 3px solid transparent; border-radius: 8px;
transition: all 0.2s ease;
cursor: pointer; cursor: pointer;
transition: background 0.15s ease, color 0.15s ease;
user-select: none;
} }
.nav-category-item:hover, .nav-category-item:hover,
.nav-category-item.active { .nav-category-item.active {
background: rgba(56, 189, 248, 0.1); background: rgba(59, 130, 246, 0.12);
border-left-color: #38BDF8; color: #93C5FD;
color: #38BDF8;
} }
.nav-category-item .category-icon { .nav-category-item .category-icon {
display: inline-block;
width: 20px; width: 20px;
height: 20px; height: 20px;
margin-right: 8px; flex-shrink: 0;
vertical-align: middle; display: flex;
align-items: center;
justify-content: center;
} }
.nav-category-item .category-icon img { .nav-category-item .category-icon img {
@@ -81,134 +87,104 @@
.nav-category-desc { .nav-category-desc {
font-size: 12px; font-size: 12px;
color: #94A3B8; color: rgba(148, 163, 184, 0.6);
margin-top: 2px; margin-top: 2px;
display: block; display: block;
} }
/* 右侧三级菜单区域 - 深色背景 */ /* ── 右侧三级菜单区域 ── */
.nav-right-content { .nav-right-content {
flex: 1; flex: 1;
padding: 16px 24px; padding: 20px 28px;
background: rgba(15, 23, 42, 0.6);
overflow-x: hidden;
overflow-y: auto; overflow-y: auto;
max-height: none;
height: 100%;
} }
/* 三级菜单容器 */ /* 三级菜单面板 */
.nav-third-panel { .nav-third-panel {
display: none; display: none;
} }
.nav-third-panel.active { .nav-third-panel.active {
display: block; display: block;
animation: fadeInRight 0.3s ease; animation: navPanelFadeIn 0.2s ease;
} }
/* 三级菜单标题 - 浅色 */ /* 三级菜单标题 */
.nav-third-title { .nav-third-title {
font-size: 16px; font-size: 13px;
font-weight: 600; font-weight: 600;
color: #E5E7EB; color: rgba(148, 163, 184, 0.6);
margin-bottom: 16px; text-transform: uppercase;
padding-bottom: 12px; letter-spacing: 0.08em;
border-bottom: 2px solid #38BDF8; margin-bottom: 12px;
display: inline-block; padding-bottom: 10px;
border-bottom: 1px solid rgba(255, 255, 255, 0.06);
} }
/* 三级菜单网格布局 */ /* 三级菜单网格 */
.nav-third-grid { .nav-third-grid {
display: grid; display: grid;
grid-template-columns: repeat(3, 1fr); grid-template-columns: repeat(3, 1fr);
gap: 12px 24px; gap: 4px 8px;
margin-top: 20px;
} }
/* 三级菜单项 - 提高选择器优先级 */ /* 三级菜单项容器 */
.nav-cont-menu .nav-third-item { .nav-cont-menu .nav-third-item {
margin: 0; margin: 0;
padding: 0; padding: 0;
min-width: 0;
} }
/* 三级菜单链接 - akile 风格：纯行 hover，无卡片 */
.nav-cont-menu .nav-third-grid .nav-third-link, .nav-cont-menu .nav-third-grid .nav-third-link,
.nav-third-panel .nav-third-link { .nav-third-panel .nav-third-link {
display: block; display: flex;
align-items: center;
gap: 10px;
width: 100%; width: 100%;
padding: 14px 16px 14px 28px; padding: 10px 12px;
border-radius: 4px; border-radius: 8px;
background: rgba(30, 41, 59, 0.4); color: rgba(226, 232, 240, 0.85);
color: #E5E7EB;
font-size: 14px; font-size: 14px;
font-weight: 500; font-weight: 500;
text-decoration: none; text-decoration: none;
transition: all 0.2s ease; transition: background 0.15s ease, color 0.15s ease;
border: 1px solid rgba(56, 189, 248, 0.15);
box-sizing: border-box; box-sizing: border-box;
white-space: nowrap; white-space: nowrap;
overflow: hidden; overflow: hidden;
text-overflow: ellipsis; text-overflow: ellipsis;
position: relative; /* 无边框、无卡片背景 */
min-height: 46px; background: transparent;
line-height: 1.4; border: none;
} }
.nav-cont-menu .nav-third-grid .nav-third-link::before, .nav-cont-menu .nav-third-grid .nav-third-link::before,
.nav-third-panel .nav-third-link::before { .nav-third-panel .nav-third-link::before {
content: '›'; content: none; /* 移除旧的 › 箭头前缀 */
position: absolute;
left: 8px;
top: 50%;
transform: translateY(-50%);
color: #38BDF8;
font-size: 16px;
font-weight: bold;
} }
.nav-cont-menu .nav-third-grid .nav-third-link:hover, .nav-cont-menu .nav-third-grid .nav-third-link:hover,
.nav-third-panel .nav-third-link:hover { .nav-third-panel .nav-third-link:hover {
background: rgba(56, 189, 248, 0.2); background: rgba(255, 255, 255, 0.06);
border-color: #38BDF8; color: #fff;
color: #38BDF8;
padding-left: 28px;
box-shadow: 0 0 12px rgba(56, 189, 248, 0.3);
} }
.nav-cont-menu .nav-third-grid .nav-third-link:hover::before, /* ── 国旗图标 ── */
.nav-third-panel .nav-third-link:hover::before {
left: 12px;
}
/* 国旗图标样式 */
.country-flag { .country-flag {
width: 24px; width: 22px;
height: 18px; height: 16px;
margin-right: 8px; flex-shrink: 0;
vertical-align: middle; vertical-align: middle;
display: inline-block;
object-fit: cover; object-fit: cover;
border-radius: 2px; border-radius: 3px;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3); box-shadow: 0 1px 4px rgba(0, 0, 0, 0.4);
} }
/* 空状态 */ /* ── 只有二级菜单时的横向网格（无三级） ── */
.nav-right-empty {
display: flex;
align-items: center;
justify-content: center;
height: 300px;
color: #999;
font-size: 14px;
}
/* 只有二级菜单时的横向网格布局 */
.nav-simple-grid { .nav-simple-grid {
display: grid; display: grid;
grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
gap: 16px; gap: 4px 8px;
padding: 24px 32px; padding: 20px 28px;
width: 100%; width: 100%;
max-width: 1400px; max-width: 1400px;
margin: 0 auto; margin: 0 auto;
@@ -219,28 +195,26 @@
display: flex; display: flex;
align-items: center; align-items: center;
gap: 12px; gap: 12px;
padding: 16px; padding: 11px 14px;
background: rgba(30, 41, 59, 0.6); border-radius: 8px;
border: 1px solid rgba(56, 189, 248, 0.15); color: rgba(226, 232, 240, 0.85);
border-radius: 6px;
color: #E5E7EB;
text-decoration: none; text-decoration: none;
transition: all 0.2s ease; font-size: 14px;
min-height: 70px; font-weight: 500;
width: 100%; transition: background 0.15s ease, color 0.15s ease;
box-sizing: border-box; /* 无卡片边框背景 */
background: transparent;
border: none;
} }
.nav-simple-grid .nav-simple-item:hover { .nav-simple-grid .nav-simple-item:hover {
background: rgba(56, 189, 248, 0.15); background: rgba(255, 255, 255, 0.06);
border-color: #38BDF8; color: #fff;
transform: translateY(-2px);
box-shadow: 0 4px 12px rgba(56, 189, 248, 0.2);
} }
.nav-simple-icon { .nav-simple-icon {
width: 32px; width: 28px;
height: 32px; height: 28px;
flex-shrink: 0; flex-shrink: 0;
} }
@@ -250,16 +224,10 @@
object-fit: contain; object-fit: contain;
} }
.nav-simple-info {
flex: 1;
min-width: 0;
}
.nav-simple-title { .nav-simple-title {
font-size: 14px; font-size: 14px;
font-weight: 600; font-weight: 500;
color: #E5E7EB; color: inherit;
margin-bottom: 4px;
white-space: nowrap; white-space: nowrap;
overflow: hidden; overflow: hidden;
text-overflow: ellipsis; text-overflow: ellipsis;
@@ -267,67 +235,48 @@
.nav-simple-desc { .nav-simple-desc {
font-size: 12px; font-size: 12px;
color: #94A3B8; color: rgba(148, 163, 184, 0.65);
white-space: nowrap; white-space: nowrap;
overflow: hidden; overflow: hidden;
text-overflow: ellipsis; text-overflow: ellipsis;
margin-top: 2px;
} }
/* 旧版二级菜单样式（无三级菜单时使用） - 已废弃，保留兼容 */ /* ── 菜单底部「更多」区域 ── */
.nav-item-box { .nav-menu-footer {
border-top: 1px solid rgba(255, 255, 255, 0.06);
padding: 12px 28px;
}
display: flex; .nav-menu-footer a {
align-items: center; font-size: 13px;
gap: 12px; color: rgba(148, 163, 184, 0.7);
padding: 16px 20px;
transition: all 0.2s ease;
text-decoration: none; text-decoration: none;
color: #333; transition: color 0.15s ease;
border-left: 3px solid transparent;
} }
.nav-item-box:hover { .nav-menu-footer a:hover {
background: #fff; color: #93C5FD;
border-left-color: #1890ff;
color: #1890ff;
} }
.nav-item-box img { /* ── 空菜单占位 ── */
width: 20px;
height: 20px;
flex-shrink: 0;
}
.item-box-title .title {
font-size: 14px;
font-weight: 500;
margin-bottom: 2px;
}
.item-box-title .desc {
font-size: 12px;
color: #999;
}
/* 空菜单占位 */
.nav-cont-menu.nav-cont-empty { .nav-cont-menu.nav-cont-empty {
display: none; display: none;
} }
/* 动画效果 */ /* ── 动画 ── */
@keyframes fadeInRight { @keyframes navPanelFadeIn {
from { from {
opacity: 0; opacity: 0;
transform: translateX(10px); transform: translateX(8px);
} }
to { to {
opacity: 1; opacity: 1;
transform: translateX(0); transform: translateX(0);
} }
} }
/* 响应式调整 */ /* ── 响应式 ── */
@media (max-width: 768px) { @media (max-width: 768px) {
.nav-cont { .nav-cont {
display: none !important; display: none !important;
@@ -341,12 +290,11 @@
.nav-left-sidebar { .nav-left-sidebar {
width: 100%; width: 100%;
border-right: none; border-right: none;
border-bottom: 1px solid #e8e8e8; border-bottom: 1px solid rgba(255, 255, 255, 0.06);
} }
.nav-right-content { .nav-right-content {
padding: 16px; padding: 16px;
max-height: none;
} }
.nav-third-grid { .nav-third-grid {