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:
wangjia
@@ -902,6 +902,28 @@ footer { background: var(--gray-25); border-top: 1px solid var(--border-subtle);
|
||||
.perm-row { grid-template-columns: 130px repeat(4, 1fr); }
|
||||
.reversal-arrow { transform: rotate(90deg); padding: 16px 0; }
|
||||
}
|
||||
/* Hamburger */
|
||||
.nav-hamburger { display: none; flex-direction: column; justify-content: center; gap: 5px; width: 40px; height: 40px; padding: 8px; background: none; border: none; cursor: pointer; border-radius: 8px; }
|
||||
.nav-hamburger span { display: block; height: 2px; width: 22px; background: var(--gray-700); border-radius: 2px; }
|
||||
.nav-mobile-menu { display: none; flex-direction: column; background: var(--gray-0); border-top: 1px solid var(--border-subtle); padding: 8px 0 16px; }
|
||||
.nav-mobile-menu.open { display: flex; }
|
||||
.nav-mobile-menu a { padding: 12px 24px; font-size: var(--text-md); color: var(--gray-700); font-weight: 500; }
|
||||
.nav-mobile-menu a:hover { background: var(--gray-50); color: var(--brand-900); }
|
||||
.nav-mobile-cta { display: flex; flex-direction: column; gap: 8px; padding: 12px 24px 0; border-top: 1px solid var(--border-subtle); margin-top: 8px; }
|
||||
@media (max-width: 768px) {
|
||||
.nav-hamburger { display: flex; }
|
||||
.topnav-links, .topnav-cta { display: none; }
|
||||
.feat-hero-inner { grid-template-columns: 1fr; }
|
||||
}
|
||||
@media (max-width: 600px) {
|
||||
.topnav-inner { padding: 0 16px; }
|
||||
.feat-hero h1 { font-size: 28px; }
|
||||
.footer-grid { grid-template-columns: 1fr; gap: 32px; }
|
||||
.footer-bottom { flex-direction: column; gap: 8px; text-align: center; }
|
||||
.usecases-grid { grid-template-columns: 1fr; }
|
||||
.perm-row { overflow-x: auto; }
|
||||
.container { padding: 0 16px; }
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
@@ -914,11 +936,25 @@ footer { background: var(--gray-25); border-top: 1px solid var(--border-subtle);
|
||||
<div class="topnav-links">
|
||||
<a href="/#modules" class="active">产品</a>
|
||||
<a href="/#pricing">价格</a>
|
||||
<a href="/download.html">下载</a>
|
||||
<a href="/docs.html">文档</a>
|
||||
<a href="/download/">下载</a>
|
||||
<a href="/docs/">文档</a>
|
||||
<a href="/#faq">支持</a>
|
||||
</div>
|
||||
<div class="topnav-cta" id="nav-cta"></div>
|
||||
<button class="nav-hamburger" id="nav-hamburger" aria-label="菜单" aria-expanded="false">
|
||||
<span></span><span></span><span></span>
|
||||
</button>
|
||||
</div>
|
||||
<div class="nav-mobile-menu" id="nav-mobile-menu">
|
||||
<a href="/#modules">产品</a>
|
||||
<a href="/#pricing">价格</a>
|
||||
<a href="/download/">下载</a>
|
||||
<a href="/docs/">文档</a>
|
||||
<a href="/#faq">支持</a>
|
||||
<div class="nav-mobile-cta">
|
||||
<a href="/app/" class="btn btn-ghost">登录</a>
|
||||
<a href="/register/" class="btn btn-primary">注册门店</a>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
@@ -1696,6 +1732,13 @@ function toggleUserMenu() {
|
||||
var el = document.getElementById('userDropdown');
|
||||
if (el) el.classList.toggle('open');
|
||||
}
|
||||
function toggleMobileMenu() {
|
||||
var menu = document.getElementById('nav-mobile-menu');
|
||||
var btn = document.getElementById('nav-hamburger');
|
||||
if (!menu) return;
|
||||
var isOpen = menu.classList.toggle('open');
|
||||
if (btn) btn.setAttribute('aria-expanded', isOpen ? 'true' : 'false');
|
||||
}
|
||||
function renderNav() {
|
||||
var cta = document.getElementById('nav-cta');
|
||||
if (!cta) return;
|
||||
@@ -1737,6 +1780,15 @@ document.addEventListener('click', function(e) {
|
||||
document.addEventListener('DOMContentLoaded', function() {
|
||||
if (window.lucide) lucide.createIcons();
|
||||
renderNav();
|
||||
var hamburger = document.getElementById('nav-hamburger');
|
||||
if (hamburger) hamburger.addEventListener('click', toggleMobileMenu);
|
||||
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');
|
||||
});
|
||||
});
|
||||
});
|
||||
</script>
|
||||
|
||||
|
||||
@@ -645,6 +645,27 @@ footer { background: var(--gray-25); border-top: 1px solid var(--border-subtle);
|
||||
.feat-hero h1 { font-size: 36px; }
|
||||
.composite { height: 480px; }
|
||||
}
|
||||
/* Hamburger */
|
||||
.nav-hamburger { display: none; flex-direction: column; justify-content: center; gap: 5px; width: 40px; height: 40px; padding: 8px; background: none; border: none; cursor: pointer; border-radius: 8px; }
|
||||
.nav-hamburger span { display: block; height: 2px; width: 22px; background: var(--gray-700); border-radius: 2px; }
|
||||
.nav-mobile-menu { display: none; flex-direction: column; background: var(--gray-0); border-top: 1px solid var(--border-subtle); padding: 8px 0 16px; }
|
||||
.nav-mobile-menu.open { display: flex; }
|
||||
.nav-mobile-menu a { padding: 12px 24px; font-size: var(--text-md); color: var(--gray-700); font-weight: 500; }
|
||||
.nav-mobile-menu a:hover { background: var(--gray-50); color: var(--brand-900); }
|
||||
.nav-mobile-cta { display: flex; flex-direction: column; gap: 8px; padding: 12px 24px 0; border-top: 1px solid var(--border-subtle); margin-top: 8px; }
|
||||
@media (max-width: 768px) {
|
||||
.nav-hamburger { display: flex; }
|
||||
.topnav-links, .topnav-cta { display: none; }
|
||||
.composite { display: none; }
|
||||
}
|
||||
@media (max-width: 600px) {
|
||||
.topnav-inner { padding: 0 16px; }
|
||||
.feat-hero h1 { font-size: 28px; }
|
||||
.footer-grid { grid-template-columns: 1fr; gap: 32px; }
|
||||
.footer-bottom { flex-direction: column; gap: 8px; text-align: center; }
|
||||
.usecases-grid { grid-template-columns: 1fr; }
|
||||
.container { padding: 0 16px; }
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
@@ -657,11 +678,25 @@ footer { background: var(--gray-25); border-top: 1px solid var(--border-subtle);
|
||||
<div class="topnav-links">
|
||||
<a href="/#modules" class="active">产品</a>
|
||||
<a href="/#pricing">价格</a>
|
||||
<a href="/download.html">下载</a>
|
||||
<a href="/docs.html">文档</a>
|
||||
<a href="/download/">下载</a>
|
||||
<a href="/docs/">文档</a>
|
||||
<a href="/#faq">支持</a>
|
||||
</div>
|
||||
<div class="topnav-cta" id="nav-cta"></div>
|
||||
<button class="nav-hamburger" id="nav-hamburger" aria-label="菜单" aria-expanded="false">
|
||||
<span></span><span></span><span></span>
|
||||
</button>
|
||||
</div>
|
||||
<div class="nav-mobile-menu" id="nav-mobile-menu">
|
||||
<a href="/#modules">产品</a>
|
||||
<a href="/#pricing">价格</a>
|
||||
<a href="/download/">下载</a>
|
||||
<a href="/docs/">文档</a>
|
||||
<a href="/#faq">支持</a>
|
||||
<div class="nav-mobile-cta">
|
||||
<a href="/app/" class="btn btn-ghost">登录</a>
|
||||
<a href="/register/" class="btn btn-primary">注册门店</a>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
@@ -1410,6 +1445,13 @@ function toggleUserMenu() {
|
||||
var el = document.getElementById('userDropdown');
|
||||
if (el) el.classList.toggle('open');
|
||||
}
|
||||
function toggleMobileMenu() {
|
||||
var menu = document.getElementById('nav-mobile-menu');
|
||||
var btn = document.getElementById('nav-hamburger');
|
||||
if (!menu) return;
|
||||
var isOpen = menu.classList.toggle('open');
|
||||
if (btn) btn.setAttribute('aria-expanded', isOpen ? 'true' : 'false');
|
||||
}
|
||||
function renderNav() {
|
||||
var cta = document.getElementById('nav-cta');
|
||||
if (!cta) return;
|
||||
@@ -1451,6 +1493,15 @@ document.addEventListener('click', function(e) {
|
||||
document.addEventListener('DOMContentLoaded', function() {
|
||||
if (window.lucide) lucide.createIcons();
|
||||
renderNav();
|
||||
var hamburger = document.getElementById('nav-hamburger');
|
||||
if (hamburger) hamburger.addEventListener('click', toggleMobileMenu);
|
||||
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');
|
||||
});
|
||||
});
|
||||
});
|
||||
</script>
|
||||
|
||||
|
||||
Reference in New Issue
Block a user