移动端添加汉堡菜单和侧边导航栏，优化交互体验
All checks were successful
continuous-integration/drone/push Build is passing
All checks were successful
continuous-integration/drone/push Build is passing
前端改动： - 添加移动端汉堡菜单按钮（右上角） - 创建侧边导航栏（从右侧滑入） - 包含主导航菜单项 - 包含文档和控制台链接 - 包含登录/注册功能 - 已登录状态显示用户信息和操作菜单 - 移动端隐藏桌面导航链接（文档、控制台、登录、注册） - 侧边栏支持点击遮罩层、关闭按钮、导航链接关闭 - 实现桌面端和移动端登录状态同步 - 使用 MutationObserver 监听登录状态变化 样式改动： - 汉堡菜单三条杠动画效果（点击变叉号） - 侧边栏深色科技风格，渐变背景 - 侧边栏从右侧滑入动画，带遮罩层 - 导航项 hover 效果和滑动动画 - 用户头像和信息卡片样式 - 响应式适配（767px、575px 断点） 交互优化： - banner-list 快速入口卡片改为一行两个（grid 布局） - 调整幻灯片进度条位置（767px: bottom 40px，575px: bottom 60px） - 避免进度条和按钮重合 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
yiqiu
@@ -1032,6 +1032,209 @@
|
||||
}
|
||||
}
|
||||
|
||||
/* 汉堡菜单按钮 - 默认隐藏 */
|
||||
.mobile-menu-toggle {
|
||||
display: none;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
width: 28px;
|
||||
height: 22px;
|
||||
cursor: pointer;
|
||||
margin-left: 16px;
|
||||
z-index: 1001;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.mobile-menu-toggle span {
|
||||
display: block;
|
||||
width: 100%;
|
||||
height: 3px;
|
||||
background: linear-gradient(135deg, #38BDF8 0%, #6366F1 100%);
|
||||
border-radius: 2px;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.mobile-menu-toggle.active span:nth-child(1) {
|
||||
transform: translateY(9.5px) rotate(45deg);
|
||||
}
|
||||
|
||||
.mobile-menu-toggle.active span:nth-child(2) {
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
.mobile-menu-toggle.active span:nth-child(3) {
|
||||
transform: translateY(-9.5px) rotate(-45deg);
|
||||
}
|
||||
|
||||
/* 移动端侧边导航栏 */
|
||||
.mobile-sidebar {
|
||||
display: none;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
z-index: 9999;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.mobile-sidebar.active {
|
||||
pointer-events: auto;
|
||||
}
|
||||
|
||||
.mobile-sidebar-overlay {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: rgba(0, 0, 0, 0.5);
|
||||
opacity: 0;
|
||||
transition: opacity 0.3s ease;
|
||||
}
|
||||
|
||||
.mobile-sidebar.active .mobile-sidebar-overlay {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.mobile-sidebar-content {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
width: 280px;
|
||||
height: 100%;
|
||||
background: linear-gradient(180deg, #0F172A 0%, #020617 100%);
|
||||
box-shadow: -4px 0 24px rgba(0, 0, 0, 0.3);
|
||||
transform: translateX(100%);
|
||||
transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
||||
overflow-y: auto;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.mobile-sidebar.active .mobile-sidebar-content {
|
||||
transform: translateX(0);
|
||||
}
|
||||
|
||||
.mobile-sidebar-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 20px;
|
||||
border-bottom: 1px solid rgba(148, 163, 184, 0.15);
|
||||
}
|
||||
|
||||
.mobile-sidebar-logo img {
|
||||
height: 28px;
|
||||
width: auto;
|
||||
}
|
||||
|
||||
.mobile-sidebar-close {
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
cursor: pointer;
|
||||
border-radius: 6px;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.mobile-sidebar-close span {
|
||||
font-size: 24px;
|
||||
color: #94A3B8;
|
||||
transition: color 0.3s ease;
|
||||
}
|
||||
|
||||
.mobile-sidebar-close:hover {
|
||||
background: rgba(56, 189, 248, 0.1);
|
||||
}
|
||||
|
||||
.mobile-sidebar-close:hover span {
|
||||
color: #38BDF8;
|
||||
}
|
||||
|
||||
.mobile-sidebar-body {
|
||||
flex: 1;
|
||||
padding: 20px;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.mobile-nav-item {
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
.mobile-nav-link {
|
||||
display: block;
|
||||
padding: 14px 16px;
|
||||
color: #E5E7EB;
|
||||
font-size: 15px;
|
||||
font-weight: 500;
|
||||
border-radius: 8px;
|
||||
transition: all 0.3s ease;
|
||||
cursor: pointer;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.mobile-nav-link:hover {
|
||||
background: rgba(56, 189, 248, 0.1);
|
||||
color: #38BDF8;
|
||||
transform: translateX(4px);
|
||||
}
|
||||
|
||||
.mobile-nav-divider {
|
||||
height: 1px;
|
||||
background: rgba(148, 163, 184, 0.15);
|
||||
margin: 16px 0;
|
||||
}
|
||||
|
||||
.mobile-nav-btn {
|
||||
display: inline-block;
|
||||
padding: 12px 24px;
|
||||
background: linear-gradient(135deg, #38BDF8 0%, #6366F1 100%);
|
||||
color: #ffffff;
|
||||
font-size: 14px;
|
||||
font-weight: 600;
|
||||
border-radius: 8px;
|
||||
text-align: center;
|
||||
cursor: pointer;
|
||||
transition: all 0.3s ease;
|
||||
margin: 8px 16px;
|
||||
}
|
||||
|
||||
.mobile-nav-btn:hover {
|
||||
box-shadow: 0 4px 16px rgba(56, 189, 248, 0.4);
|
||||
transform: translateY(-2px);
|
||||
}
|
||||
|
||||
.mobile-user-info {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 16px;
|
||||
background: rgba(15, 23, 42, 0.8);
|
||||
border-radius: 8px;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
.mobile-user-avatar {
|
||||
width: 48px;
|
||||
height: 48px;
|
||||
border-radius: 50%;
|
||||
background: linear-gradient(135deg, #38BDF8 0%, #6366F1 100%);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
color: #fff;
|
||||
font-size: 18px;
|
||||
margin-right: 12px;
|
||||
}
|
||||
|
||||
.mobile-user-name {
|
||||
color: #F9FAFB;
|
||||
font-size: 16px;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
/* 移动端导航栏和页脚优化 */
|
||||
@media screen and (max-width: 991px) {
|
||||
/* 导航栏 */
|
||||
@@ -1096,6 +1299,21 @@
|
||||
margin-right: 10px;
|
||||
}
|
||||
|
||||
/* 移动端显示汉堡菜单 */
|
||||
.mobile-menu-toggle {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
/* 移动端显示侧边栏 */
|
||||
.mobile-sidebar {
|
||||
display: block;
|
||||
}
|
||||
|
||||
/* 移动端隐藏桌面导航链接 */
|
||||
.nav-desktop-link {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
.nav-menu .nav-item {
|
||||
padding: 0 8px;
|
||||
font-size: 13px;
|
||||
|
||||
Reference in New Issue
Block a user