feat(web): 官网移动端适配
- 导航栏:≤768 隐藏横向链接,显示汉堡按钮;点击展开下拉菜单,含全部链接和 CTA - 新增 ≤600 手机断点:footer 单列、grid 单列、container 内边距收窄、标题字号下调 - 首页:≤768 隐藏 Hero mock 预览(装饰性),≤600 CTA 按钮纵向排列 - features 页(库存/审批):hamburger 导航、≤768 隐藏 composite 视觉、≤600 footer 单列 - 文档页(docs.css):≤600 表格横向可滚 - 下载页:≤600 平台卡片单列排列 Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
+50
-6
@@ -23,16 +23,35 @@
|
||||
if (el) el.classList.toggle('open');
|
||||
}
|
||||
|
||||
// 点击外部关闭 dropdown
|
||||
document.addEventListener('click', function(e) {
|
||||
var menu = document.getElementById('userDropdown');
|
||||
function toggleMobileMenu() {
|
||||
var menu = document.getElementById('nav-mobile-menu');
|
||||
var btn = document.getElementById('nav-hamburger');
|
||||
if (!menu) return;
|
||||
var navUser = menu.closest('.nav-user');
|
||||
if (navUser && !navUser.contains(e.target)) menu.classList.remove('open');
|
||||
var isOpen = menu.classList.toggle('open');
|
||||
if (btn) btn.setAttribute('aria-expanded', isOpen ? 'true' : 'false');
|
||||
}
|
||||
|
||||
// 点击外部关闭 dropdown 和 mobile menu
|
||||
document.addEventListener('click', function(e) {
|
||||
var userMenu = document.getElementById('userDropdown');
|
||||
if (userMenu) {
|
||||
var navUser = userMenu.closest('.nav-user');
|
||||
if (navUser && !navUser.contains(e.target)) userMenu.classList.remove('open');
|
||||
}
|
||||
var mobileMenu = document.getElementById('nav-mobile-menu');
|
||||
var hamburger = document.getElementById('nav-hamburger');
|
||||
if (mobileMenu && hamburger) {
|
||||
var topnav = mobileMenu.closest('nav');
|
||||
if (topnav && !topnav.contains(e.target)) {
|
||||
mobileMenu.classList.remove('open');
|
||||
hamburger.setAttribute('aria-expanded', 'false');
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
function renderNav() {
|
||||
var cta = document.getElementById('nav-cta');
|
||||
var mobileCta = document.getElementById('nav-mobile-cta');
|
||||
if (!cta) return;
|
||||
var user = getAuthUser();
|
||||
if (user) {
|
||||
@@ -58,22 +77,47 @@
|
||||
+ '<div class="nav-dropdown-divider"></div>'
|
||||
+ '<button class="logout" onclick="doLogout()"><i data-lucide="log-out" class="icon"></i>退出登录</button>'
|
||||
+ '</div></div>';
|
||||
if (mobileCta) {
|
||||
mobileCta.innerHTML =
|
||||
'<a href="/app/" class="btn btn-ghost">进入管理端</a>'
|
||||
+ '<button class="btn btn-ghost" onclick="doLogout()">退出登录</button>';
|
||||
}
|
||||
} else {
|
||||
cta.innerHTML =
|
||||
'<a href="/app/" class="btn btn-ghost">登录</a>'
|
||||
+ '<a href="/app/" class="btn btn-primary">免费试用</a>';
|
||||
if (mobileCta) {
|
||||
mobileCta.innerHTML =
|
||||
'<a href="/app/" class="btn btn-ghost">登录</a>'
|
||||
+ '<a href="/register/" class="btn btn-primary">注册门店</a>';
|
||||
}
|
||||
}
|
||||
if (window.lucide) lucide.createIcons();
|
||||
}
|
||||
|
||||
// 暴露给 onclick 调用
|
||||
window.toggleUserMenu = toggleUserMenu;
|
||||
window.toggleUserMenu = toggleUserMenu;
|
||||
window.toggleMobileMenu = toggleMobileMenu;
|
||||
window.doLogout = doLogout;
|
||||
|
||||
document.addEventListener('DOMContentLoaded', function() {
|
||||
renderNav();
|
||||
if (window.lucide) lucide.createIcons();
|
||||
|
||||
var hamburger = document.getElementById('nav-hamburger');
|
||||
if (hamburger) hamburger.addEventListener('click', toggleMobileMenu);
|
||||
|
||||
// 点击 mobile menu 链接后自动收起
|
||||
var mobileMenu = document.getElementById('nav-mobile-menu');
|
||||
if (mobileMenu) {
|
||||
mobileMenu.querySelectorAll('a').forEach(function(a) {
|
||||
a.addEventListener('click', function() {
|
||||
mobileMenu.classList.remove('open');
|
||||
if (hamburger) hamburger.setAttribute('aria-expanded', 'false');
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
// 页内锚点平滑滚动
|
||||
document.querySelectorAll('a[href^="#"]').forEach(function(a) {
|
||||
a.addEventListener('click', function(e) {
|
||||
|
||||
Reference in New Issue
Block a user