wangjia/jiu
1
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases 130 Wiki Activity

feat(web): 官网移动端适配

Browse Source 
- 导航栏：≤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
2026-06-07 20:22:00 +08:00
parent ced407ea87
commit 0c96d5e325
8 changed files with 242 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files
web/features/approval.html
+54 -2
View File
@@ -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>