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