feat: 扫码商品详情页重设计 + 宣传主页 + nginx 路由完善
- public_product_screen: 1:1 复刻设计稿，新增商品介绍、批次防伪（自定义圆形印章）、完整商品参数表、门店营业时间、页脚链接 - app_theme: 完整品牌色系（brand/gray/accent/semantic） - shop model: 新增 business_hours 字段，public 接口同步返回 - nginx: 新增 /product/ → Flutter app 扫码入口，修复 /docs /download html 后缀兼容 - web/: 新增宣传主页、功能页、文档页、扫码 HTML 及设计资源 - app_shell: 界面优化 Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
wangjia
@@ -0,0 +1,278 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh-CN">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>审批流程功能 — 岩美酒库管理系统</title>
|
||||
<link rel="stylesheet" href="../assets/colors_and_type.css" />
|
||||
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Noto+Sans+SC:wght@400;500;600;700&display=swap" rel="stylesheet">
|
||||
<script src="https://unpkg.com/lucide@0.469.0/dist/umd/lucide.min.js"></script>
|
||||
<style>
|
||||
* { box-sizing: border-box; }
|
||||
html, body { margin: 0; padding: 0; font-family: var(--font-sans); color: var(--fg-default); background: var(--bg-surface); -webkit-font-smoothing: antialiased; }
|
||||
a { color: inherit; text-decoration: none; }
|
||||
.container { max-width: 1200px; margin: 0 auto; padding: 0 32px; }
|
||||
.btn { display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 18px; border-radius: var(--radius-md); font-size: 14px; font-weight: 500; border: 1px solid transparent; cursor: pointer; transition: background 120ms; text-decoration: none; }
|
||||
.btn-primary { background: var(--brand-500); color: #fff; }
|
||||
.btn-primary:hover { background: var(--brand-600); }
|
||||
.btn-secondary { background: var(--gray-0); color: var(--brand-900); border-color: var(--border-default); }
|
||||
.btn-secondary:hover { background: var(--gray-50); }
|
||||
.btn-lg { height: 48px; padding: 0 24px; font-size: 15px; }
|
||||
.icon { width: 18px; height: 18px; }
|
||||
|
||||
.nav { position: sticky; top: 0; z-index: 50; background: rgba(255,255,255,0.88); backdrop-filter: blur(12px); border-bottom: 1px solid var(--border-subtle); }
|
||||
.nav-inner { height: 64px; display: flex; align-items: center; justify-content: space-between; max-width: 1200px; margin: 0 auto; padding: 0 32px; }
|
||||
.nav-brand { display: flex; align-items: center; gap: 10px; font-size: 18px; font-weight: 700; color: var(--brand-900); }
|
||||
.nav-brand img { height: 30px; }
|
||||
.nav-links { display: flex; gap: 2px; }
|
||||
.nav-links a { padding: 7px 14px; border-radius: var(--radius-md); font-size: 14px; color: var(--gray-700); transition: background 120ms; }
|
||||
.nav-links a:hover { background: var(--gray-100); }
|
||||
.nav-links a.active { color: var(--brand-500); font-weight: 500; }
|
||||
.nav-cta { display: flex; gap: 10px; }
|
||||
|
||||
.page-hero { padding: 80px 0 64px; }
|
||||
.eyebrow { font-size: 11px; font-weight: 600; letter-spacing: 0.12em; color: var(--brand-500); text-transform: uppercase; margin-bottom: 12px; }
|
||||
.page-hero h1 { font-size: 44px; font-weight: 700; color: var(--brand-900); margin: 0 0 18px; line-height: 1.15; }
|
||||
.page-hero .lead { font-size: 18px; line-height: 1.65; color: var(--gray-600); margin: 0 0 36px; max-width: 600px; }
|
||||
.hero-actions { display: flex; gap: 12px; }
|
||||
|
||||
/* Workflow steps */
|
||||
.workflow-section { padding: 72px 0; background: var(--gray-50); }
|
||||
.section-title { font-size: 28px; font-weight: 700; color: var(--brand-900); margin: 0 0 14px; }
|
||||
.section-sub { font-size: 15px; color: var(--fg-muted); margin: 0 0 48px; line-height: 1.6; max-width: 560px; }
|
||||
.steps { display: flex; flex-direction: column; gap: 0; max-width: 800px; }
|
||||
.step { display: flex; gap: 24px; padding: 28px 0; border-bottom: 1px solid var(--border-subtle); }
|
||||
.step:last-child { border-bottom: none; }
|
||||
.step-num { width: 36px; height: 36px; border-radius: 50%; background: var(--brand-500); color: #fff; display: flex; align-items: center; justify-content: center; font-size: 15px; font-weight: 700; flex-shrink: 0; }
|
||||
.step-content { flex: 1; }
|
||||
.step-content h3 { font-size: 16px; font-weight: 600; color: var(--brand-900); margin: 0 0 6px; margin-top: 6px; }
|
||||
.step-content p { font-size: 14px; line-height: 1.65; color: var(--fg-muted); margin: 0; }
|
||||
.step-badge { display: inline-flex; align-items: center; gap: 5px; padding: 2px 8px; border-radius: 10px; font-size: 11px; font-weight: 500; margin-top: 8px; }
|
||||
.step-badge.blue { background: var(--brand-50); color: var(--brand-700); }
|
||||
.step-badge.amber { background: var(--warning-50); color: var(--warning-700); }
|
||||
.step-badge.green { background: var(--success-50); color: var(--success-700); }
|
||||
.step-badge.red { background: var(--danger-50); color: var(--danger-700); }
|
||||
|
||||
/* Role matrix */
|
||||
.matrix-section { padding: 72px 0; }
|
||||
.matrix-table { width: 100%; border-collapse: collapse; margin-top: 32px; }
|
||||
.matrix-table th { background: var(--gray-50); border: 1px solid var(--border-default); padding: 10px 16px; text-align: left; font-size: 13px; font-weight: 600; color: var(--gray-700); }
|
||||
.matrix-table td { border: 1px solid var(--border-default); padding: 10px 16px; font-size: 13px; vertical-align: middle; }
|
||||
.perm-yes { display: inline-flex; align-items: center; gap: 5px; color: var(--success-700); font-weight: 500; }
|
||||
.perm-yes i { width: 14px; height: 14px; }
|
||||
.perm-no { color: var(--gray-400); }
|
||||
|
||||
/* Audit log */
|
||||
.audit-section { padding: 72px 0; background: var(--gray-50); }
|
||||
.audit-log { background: var(--gray-0); border: 1px solid var(--border-default); border-radius: 10px; overflow: hidden; max-width: 720px; }
|
||||
.audit-header { padding: 14px 20px; border-bottom: 1px solid var(--border-default); background: var(--gray-50); display: flex; align-items: center; gap: 8px; }
|
||||
.audit-header-title { font-size: 13px; font-weight: 600; color: var(--gray-700); }
|
||||
.audit-row { display: flex; gap: 16px; padding: 12px 20px; border-bottom: 1px solid var(--border-subtle); align-items: flex-start; }
|
||||
.audit-row:last-child { border-bottom: none; }
|
||||
.audit-time { font-size: 11px; color: var(--fg-subtle); font-family: var(--font-mono); min-width: 80px; padding-top: 2px; }
|
||||
.audit-user { font-size: 12px; font-weight: 500; color: var(--brand-700); min-width: 64px; padding-top: 2px; }
|
||||
.audit-action { font-size: 13px; color: var(--fg-default); }
|
||||
.audit-dot { width: 8px; height: 8px; border-radius: 50%; margin-top: 5px; flex-shrink: 0; }
|
||||
.dot-green { background: var(--success-500); }
|
||||
.dot-amber { background: var(--warning-500); }
|
||||
.dot-blue { background: var(--brand-400); }
|
||||
.dot-red { background: var(--danger-500); }
|
||||
|
||||
.cta-section { padding: 80px 0; text-align: center; border-top: 1px solid var(--border-default); }
|
||||
.cta-section h2 { font-size: 32px; font-weight: 700; color: var(--brand-900); margin: 0 0 14px; }
|
||||
.cta-section p { font-size: 16px; color: var(--fg-muted); margin: 0 0 32px; }
|
||||
.cta-actions { display: flex; justify-content: center; gap: 14px; }
|
||||
|
||||
footer { background: var(--gray-50); border-top: 1px solid var(--border-default); padding: 40px 0; }
|
||||
.footer-inner { display: flex; align-items: center; justify-content: space-between; }
|
||||
.footer-brand { display: flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 600; color: var(--brand-900); }
|
||||
.footer-brand img { height: 24px; }
|
||||
.footer-copy { font-size: 12px; color: var(--fg-subtle); }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<nav class="nav">
|
||||
<div class="nav-inner">
|
||||
<a href="/" class="nav-brand"><img src="../assets/logo-full.svg" alt="岩美" /></a>
|
||||
<div class="nav-links">
|
||||
<a href="/features/inventory.html" class="active">功能</a>
|
||||
<a href="/docs.html">文档</a>
|
||||
<a href="/download.html">下载</a>
|
||||
</div>
|
||||
<div class="nav-cta">
|
||||
<a href="/app/" class="btn btn-primary">进入管理端 <i data-lucide="arrow-right" class="icon"></i></a>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
<div class="page-hero">
|
||||
<div class="container">
|
||||
<div class="eyebrow">审批流程</div>
|
||||
<h1>每笔操作都有<br/>经手记录</h1>
|
||||
<p class="lead">岩美的审批机制确保每张入库单和出库单在生效前经过明确的负责人审核，防止未经授权的库存变动。</p>
|
||||
<div class="hero-actions">
|
||||
<a href="/app/" class="btn btn-primary btn-lg">立即体验 <i data-lucide="arrow-right" class="icon"></i></a>
|
||||
<a href="/docs.html#stock-in" class="btn btn-secondary btn-lg">查看文档</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Workflow -->
|
||||
<section class="workflow-section">
|
||||
<div class="container">
|
||||
<div class="section-title">审批流程步骤</div>
|
||||
<p class="section-sub">以入库单为例，完整的操作流程如下：</p>
|
||||
<div class="steps">
|
||||
<div class="step">
|
||||
<div class="step-num">1</div>
|
||||
<div class="step-content">
|
||||
<h3>创建入库单</h3>
|
||||
<p>库管或采购员录入入库信息：供应商、仓库、商品明细（含批次号、生产日期）。保存为草稿，随时修改。</p>
|
||||
<span class="step-badge blue"><i data-lucide="file-edit" style="width:11px;height:11px"></i> 草稿</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="step">
|
||||
<div class="step-num">2</div>
|
||||
<div class="step-content">
|
||||
<h3>提交审核</h3>
|
||||
<p>确认无误后提交，单据状态变为「待审核」，管理员收到待办提示。提交后不可编辑，防止信息篡改。</p>
|
||||
<span class="step-badge amber"><i data-lucide="clock" style="width:11px;height:11px"></i> 待审核</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="step">
|
||||
<div class="step-num">3</div>
|
||||
<div class="step-content">
|
||||
<h3>管理员审批</h3>
|
||||
<p>管理员核实单据后选择「审批通过」或「驳回」。驳回时可填写驳回原因，由经办人修改后重新提交。</p>
|
||||
<div style="display:flex;gap:8px;margin-top:8px;">
|
||||
<span class="step-badge green"><i data-lucide="check" style="width:11px;height:11px"></i> 审批通过</span>
|
||||
<span class="step-badge red"><i data-lucide="x" style="width:11px;height:11px"></i> 已驳回</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="step">
|
||||
<div class="step-num">4</div>
|
||||
<div class="step-content">
|
||||
<h3>库存自动更新</h3>
|
||||
<p>审批通过后，系统在同一事务中完成库存增加与财务记录写入，保证数据一致性。操作不可逆，留存完整记录。</p>
|
||||
<span class="step-badge green"><i data-lucide="package-check" style="width:11px;height:11px"></i> 已完成</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Role matrix -->
|
||||
<section class="matrix-section">
|
||||
<div class="container">
|
||||
<div class="section-title">角色权限矩阵</div>
|
||||
<p class="section-sub">不同角色在审批流程中的权限一览。</p>
|
||||
<table class="matrix-table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>操作</th>
|
||||
<th>管理员</th>
|
||||
<th>普通用户</th>
|
||||
<th>只读用户</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>创建入库/出库单（草稿）</td>
|
||||
<td><span class="perm-yes"><i data-lucide="check-circle"></i> 允许</span></td>
|
||||
<td><span class="perm-yes"><i data-lucide="check-circle"></i> 允许</span></td>
|
||||
<td><span class="perm-no">禁止</span></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>提交审核</td>
|
||||
<td><span class="perm-yes"><i data-lucide="check-circle"></i> 允许</span></td>
|
||||
<td><span class="perm-yes"><i data-lucide="check-circle"></i> 允许</span></td>
|
||||
<td><span class="perm-no">禁止</span></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>审批通过 / 驳回</td>
|
||||
<td><span class="perm-yes"><i data-lucide="check-circle"></i> 允许</span></td>
|
||||
<td><span class="perm-no">禁止</span></td>
|
||||
<td><span class="perm-no">禁止</span></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>查看单据列表</td>
|
||||
<td><span class="perm-yes"><i data-lucide="check-circle"></i> 允许</span></td>
|
||||
<td><span class="perm-yes"><i data-lucide="check-circle"></i> 允许</span></td>
|
||||
<td><span class="perm-yes"><i data-lucide="check-circle"></i> 允许</span></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>用户管理</td>
|
||||
<td><span class="perm-yes"><i data-lucide="check-circle"></i> 允许</span></td>
|
||||
<td><span class="perm-no">禁止</span></td>
|
||||
<td><span class="perm-no">禁止</span></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Audit log -->
|
||||
<section class="audit-section">
|
||||
<div class="container">
|
||||
<div class="section-title">完整操作日志</div>
|
||||
<p class="section-sub">每笔库存变动都有对应的操作记录，明确到具体操作人和时间点。</p>
|
||||
<div class="audit-log">
|
||||
<div class="audit-header">
|
||||
<i data-lucide="clock" style="width:14px;height:14px;color:var(--brand-500)"></i>
|
||||
<span class="audit-header-title">库存流水记录 — 麦卡伦 12年</span>
|
||||
</div>
|
||||
<div class="audit-row">
|
||||
<div class="audit-dot dot-green"></div>
|
||||
<div class="audit-time">05-23 14:32</div>
|
||||
<div class="audit-user">王经理</div>
|
||||
<div class="audit-action">审批通过入库单 <strong>RK20250523000001</strong>，库存 +24 瓶（批次 L-2026-01）</div>
|
||||
</div>
|
||||
<div class="audit-row">
|
||||
<div class="audit-dot dot-blue"></div>
|
||||
<div class="audit-time">05-23 11:08</div>
|
||||
<div class="audit-user">李库管</div>
|
||||
<div class="audit-action">提交入库单 <strong>RK20250523000001</strong> 审核，共 24 瓶</div>
|
||||
</div>
|
||||
<div class="audit-row">
|
||||
<div class="audit-dot dot-red"></div>
|
||||
<div class="audit-time">05-22 16:45</div>
|
||||
<div class="audit-user">王经理</div>
|
||||
<div class="audit-action">驳回出库单 <strong>CK20250522000003</strong>，原因：数量与实际不符</div>
|
||||
</div>
|
||||
<div class="audit-row">
|
||||
<div class="audit-dot dot-amber"></div>
|
||||
<div class="audit-time">05-22 15:30</div>
|
||||
<div class="audit-user">张吧台</div>
|
||||
<div class="audit-action">提交出库申请 <strong>CK20250522000003</strong>，领用 12 瓶</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="cta-section">
|
||||
<div class="container">
|
||||
<h2>查看所有功能</h2>
|
||||
<p>了解库存管理的完整能力，包括批次追溯和盘点功能。</p>
|
||||
<div class="cta-actions">
|
||||
<a href="/features/inventory.html" class="btn btn-primary btn-lg">库存管理功能 <i data-lucide="arrow-right" class="icon"></i></a>
|
||||
<a href="/app/" class="btn btn-secondary btn-lg">进入管理端</a>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<footer>
|
||||
<div class="container">
|
||||
<div class="footer-inner">
|
||||
<div class="footer-brand"><img src="../assets/logo-mark.svg" alt="岩美" /> 岩美酒库管理系统</div>
|
||||
<div class="footer-copy">© 2025 岩美。保留所有权利。</div>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
<script>lucide.createIcons();</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,285 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh-CN">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>库存管理功能 — 岩美酒库管理系统</title>
|
||||
<link rel="stylesheet" href="../assets/colors_and_type.css" />
|
||||
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Noto+Sans+SC:wght@400;500;600;700&display=swap" rel="stylesheet">
|
||||
<script src="https://unpkg.com/lucide@0.469.0/dist/umd/lucide.min.js"></script>
|
||||
<style>
|
||||
* { box-sizing: border-box; }
|
||||
html, body { margin: 0; padding: 0; font-family: var(--font-sans); color: var(--fg-default); background: var(--bg-surface); -webkit-font-smoothing: antialiased; }
|
||||
a { color: inherit; text-decoration: none; }
|
||||
.container { max-width: 1200px; margin: 0 auto; padding: 0 32px; }
|
||||
.btn { display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 18px; border-radius: var(--radius-md); font-size: 14px; font-weight: 500; border: 1px solid transparent; cursor: pointer; transition: background 120ms; text-decoration: none; }
|
||||
.btn-primary { background: var(--brand-500); color: #fff; }
|
||||
.btn-primary:hover { background: var(--brand-600); }
|
||||
.btn-secondary { background: var(--gray-0); color: var(--brand-900); border-color: var(--border-default); }
|
||||
.btn-secondary:hover { background: var(--gray-50); }
|
||||
.btn-lg { height: 48px; padding: 0 24px; font-size: 15px; }
|
||||
.icon { width: 18px; height: 18px; }
|
||||
|
||||
.nav { position: sticky; top: 0; z-index: 50; background: rgba(255,255,255,0.88); backdrop-filter: blur(12px); border-bottom: 1px solid var(--border-subtle); }
|
||||
.nav-inner { height: 64px; display: flex; align-items: center; justify-content: space-between; max-width: 1200px; margin: 0 auto; padding: 0 32px; }
|
||||
.nav-brand { display: flex; align-items: center; gap: 10px; font-size: 18px; font-weight: 700; color: var(--brand-900); }
|
||||
.nav-brand img { height: 30px; }
|
||||
.nav-links { display: flex; gap: 2px; }
|
||||
.nav-links a { padding: 7px 14px; border-radius: var(--radius-md); font-size: 14px; color: var(--gray-700); transition: background 120ms; }
|
||||
.nav-links a:hover { background: var(--gray-100); }
|
||||
.nav-links a.active { color: var(--brand-500); font-weight: 500; }
|
||||
.nav-cta { display: flex; gap: 10px; }
|
||||
|
||||
.page-hero { padding: 80px 0 64px; }
|
||||
.eyebrow { font-size: 11px; font-weight: 600; letter-spacing: 0.12em; color: var(--brand-500); text-transform: uppercase; margin-bottom: 12px; }
|
||||
.page-hero h1 { font-size: 44px; font-weight: 700; color: var(--brand-900); margin: 0 0 18px; line-height: 1.15; }
|
||||
.page-hero .lead { font-size: 18px; line-height: 1.65; color: var(--gray-600); margin: 0 0 36px; max-width: 600px; }
|
||||
.hero-actions { display: flex; gap: 12px; }
|
||||
|
||||
.feature-list { padding: 72px 0; }
|
||||
.feature-row { display: grid; grid-template-columns: 1fr 1fr; gap: 80px; align-items: center; margin-bottom: 96px; }
|
||||
.feature-row:last-child { margin-bottom: 0; }
|
||||
.feature-row.reverse { }
|
||||
.feature-text .tag { display: inline-block; background: var(--brand-50); color: var(--brand-700); padding: 3px 10px; border-radius: var(--radius-pill); font-size: 11px; font-weight: 600; margin-bottom: 14px; }
|
||||
.feature-text h2 { font-size: 28px; font-weight: 700; color: var(--brand-900); margin: 0 0 14px; }
|
||||
.feature-text p { font-size: 15px; line-height: 1.7; color: var(--fg-muted); margin: 0 0 20px; }
|
||||
.feature-text ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
|
||||
.feature-text li { display: flex; align-items: flex-start; gap: 10px; font-size: 14px; color: var(--fg-default); }
|
||||
.feature-text li i { width: 16px; height: 16px; color: var(--brand-500); flex-shrink: 0; margin-top: 2px; }
|
||||
.feature-visual { background: var(--gray-0); border: 1px solid var(--border-default); border-radius: 12px; overflow: hidden; box-shadow: var(--shadow-lg); }
|
||||
.visual-header { background: var(--gray-50); border-bottom: 1px solid var(--border-default); padding: 10px 16px; display: flex; align-items: center; gap: 10px; }
|
||||
.visual-title { font-size: 13px; font-weight: 600; color: var(--gray-700); }
|
||||
.mock-badge { display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px; border-radius: 10px; font-size: 11px; font-weight: 500; }
|
||||
.mock-badge.green { background: var(--success-50); color: var(--success-700); }
|
||||
.mock-badge.amber { background: var(--warning-50); color: var(--warning-700); }
|
||||
.mock-badge.blue { background: var(--brand-50); color: var(--brand-700); }
|
||||
.mock-table-wrap { padding: 0; }
|
||||
.mock-thead { display: grid; background: var(--gray-50); border-bottom: 1px solid var(--border-default); padding: 7px 16px; font-size: 11px; color: var(--fg-muted); font-weight: 500; gap: 8px; }
|
||||
.mock-row-item { display: grid; border-bottom: 1px solid var(--border-subtle); padding: 9px 16px; font-size: 12px; color: var(--fg-default); gap: 8px; align-items: center; }
|
||||
.mock-row-item:last-child { border-bottom: none; }
|
||||
.cols-inv { grid-template-columns: 2fr 1fr 1fr 1fr 1fr; }
|
||||
|
||||
.stats-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--border-default); border-bottom: 1px solid var(--border-default); }
|
||||
.stat-block { background: var(--gray-0); padding: 16px 20px; }
|
||||
.stat-label { font-size: 11px; color: var(--fg-muted); margin-bottom: 4px; }
|
||||
.stat-val { font-size: 22px; font-weight: 700; color: var(--brand-900); font-variant-numeric: tabular-nums; }
|
||||
|
||||
.cta-section { padding: 80px 0; background: var(--gray-50); text-align: center; border-top: 1px solid var(--border-default); }
|
||||
.cta-section h2 { font-size: 32px; font-weight: 700; color: var(--brand-900); margin: 0 0 14px; }
|
||||
.cta-section p { font-size: 16px; color: var(--fg-muted); margin: 0 0 32px; }
|
||||
.cta-actions { display: flex; justify-content: center; gap: 14px; }
|
||||
|
||||
footer { background: var(--gray-50); border-top: 1px solid var(--border-default); padding: 40px 0; }
|
||||
.footer-inner { display: flex; align-items: center; justify-content: space-between; }
|
||||
.footer-brand { display: flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 600; color: var(--brand-900); }
|
||||
.footer-brand img { height: 24px; }
|
||||
.footer-copy { font-size: 12px; color: var(--fg-subtle); }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<nav class="nav">
|
||||
<div class="nav-inner">
|
||||
<a href="/" class="nav-brand"><img src="../assets/logo-full.svg" alt="岩美" /></a>
|
||||
<div class="nav-links">
|
||||
<a href="/features/inventory.html" class="active">功能</a>
|
||||
<a href="/docs.html">文档</a>
|
||||
<a href="/download.html">下载</a>
|
||||
</div>
|
||||
<div class="nav-cta">
|
||||
<a href="/app/" class="btn btn-primary">进入管理端 <i data-lucide="arrow-right" class="icon"></i></a>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
<div class="page-hero">
|
||||
<div class="container">
|
||||
<div class="eyebrow">库存管理</div>
|
||||
<h1>批次级精准库存，<br/>全程可追溯</h1>
|
||||
<p class="lead">岩美的库存模块以入库批次为最小单元，每瓶酒的来源、成本、去向都有据可查。从采购到销售，一条完整的追溯链条。</p>
|
||||
<div class="hero-actions">
|
||||
<a href="/app/" class="btn btn-primary btn-lg">立即体验 <i data-lucide="arrow-right" class="icon"></i></a>
|
||||
<a href="/docs.html#inventory" class="btn btn-secondary btn-lg">查看文档</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<section class="feature-list">
|
||||
<div class="container">
|
||||
|
||||
<!-- Feature 1: 实时库存 -->
|
||||
<div class="feature-row">
|
||||
<div class="feature-text">
|
||||
<span class="tag">实时库存</span>
|
||||
<h2>入库即更新，所见即所得</h2>
|
||||
<p>每张入库单审批通过后，库存立即更新。支持多仓库分区管理，库存不足时自动预警。</p>
|
||||
<ul>
|
||||
<li><i data-lucide="check-circle"></i> 多仓库独立计数，库存不串仓</li>
|
||||
<li><i data-lucide="check-circle"></i> 低库存预警，提前安排采购</li>
|
||||
<li><i data-lucide="check-circle"></i> 任意时点的库存快照，支持历史查询</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="feature-visual">
|
||||
<div class="visual-header">
|
||||
<i data-lucide="package" style="width:14px;height:14px;color:var(--brand-500)"></i>
|
||||
<span class="visual-title">库存列表</span>
|
||||
</div>
|
||||
<div class="stats-grid">
|
||||
<div class="stat-block"><div class="stat-label">库存 SKU 数</div><div class="stat-val">356</div></div>
|
||||
<div class="stat-block"><div class="stat-label">本月入库量</div><div class="stat-val">1,284</div></div>
|
||||
<div class="stat-block"><div class="stat-label">库存总价值</div><div class="stat-val">¥84.2万</div></div>
|
||||
</div>
|
||||
<div class="mock-table-wrap">
|
||||
<div class="mock-thead cols-inv"><span>商品名称</span><span>批次号</span><span>库存量</span><span>仓库</span><span>状态</span></div>
|
||||
<div class="mock-row-item cols-inv">
|
||||
<span>麦卡伦 12年</span><span style="font-family:var(--font-mono);font-size:11px">L-2026-01</span><span>24 瓶</span><span>主仓</span>
|
||||
<span><span class="mock-badge green">在库</span></span>
|
||||
</div>
|
||||
<div class="mock-row-item cols-inv">
|
||||
<span>芝华士 18年</span><span style="font-family:var(--font-mono);font-size:11px">L-2025-12</span><span>8 瓶</span><span>主仓</span>
|
||||
<span><span class="mock-badge amber">偏低</span></span>
|
||||
</div>
|
||||
<div class="mock-row-item cols-inv">
|
||||
<span>百龄坛特醇</span><span style="font-family:var(--font-mono);font-size:11px">L-2026-02</span><span>36 瓶</span><span>备用库</span>
|
||||
<span><span class="mock-badge green">在库</span></span>
|
||||
</div>
|
||||
<div class="mock-row-item cols-inv">
|
||||
<span>格兰威特 15年</span><span style="font-family:var(--font-mono);font-size:11px">L-2025-11</span><span>0 瓶</span><span>主仓</span>
|
||||
<span><span class="mock-badge" style="background:var(--gray-100);color:var(--gray-500)">已清空</span></span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Feature 2: 出入库审批 -->
|
||||
<div class="feature-row reverse">
|
||||
<div class="feature-visual">
|
||||
<div class="visual-header">
|
||||
<i data-lucide="package-plus" style="width:14px;height:14px;color:var(--brand-500)"></i>
|
||||
<span class="visual-title">入库单详情</span>
|
||||
</div>
|
||||
<div style="padding:16px;">
|
||||
<div style="display:flex;justify-content:space-between;align-items:center;margin-bottom:14px;">
|
||||
<div>
|
||||
<div style="font-size:11px;color:var(--fg-muted)">单据编号</div>
|
||||
<div style="font-size:14px;font-weight:600;font-family:var(--font-mono)">RK20250523000001</div>
|
||||
</div>
|
||||
<span class="mock-badge blue">待审核</span>
|
||||
</div>
|
||||
<div style="display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:14px;">
|
||||
<div style="background:var(--gray-50);border-radius:6px;padding:10px 12px;">
|
||||
<div style="font-size:10px;color:var(--fg-muted)">供应商</div>
|
||||
<div style="font-size:13px;margin-top:2px;">百川酒业有限公司</div>
|
||||
</div>
|
||||
<div style="background:var(--gray-50);border-radius:6px;padding:10px 12px;">
|
||||
<div style="font-size:10px;color:var(--fg-muted)">入库仓库</div>
|
||||
<div style="font-size:13px;margin-top:2px;">主仓</div>
|
||||
</div>
|
||||
</div>
|
||||
<div style="background:var(--gray-50);border:1px solid var(--border-default);border-radius:6px;overflow:hidden;">
|
||||
<div style="display:grid;grid-template-columns:2fr 1fr 1fr;padding:6px 10px;background:var(--gray-100);font-size:10px;color:var(--fg-muted);font-weight:500;gap:8px;">
|
||||
<span>商品</span><span>数量</span><span>单价</span>
|
||||
</div>
|
||||
<div style="display:grid;grid-template-columns:2fr 1fr 1fr;padding:8px 10px;font-size:12px;gap:8px;border-bottom:1px solid var(--border-subtle);">
|
||||
<span>麦卡伦 12年</span><span>24 瓶</span><span>¥980</span>
|
||||
</div>
|
||||
<div style="display:grid;grid-template-columns:2fr 1fr 1fr;padding:8px 10px;font-size:12px;gap:8px;">
|
||||
<span>百龄坛特醇</span><span>48 瓶</span><span>¥280</span>
|
||||
</div>
|
||||
</div>
|
||||
<div style="display:flex;gap:8px;margin-top:14px;">
|
||||
<button style="flex:1;height:32px;background:var(--brand-500);color:#fff;border:none;border-radius:var(--radius-md);font-size:13px;cursor:pointer;">审核通过</button>
|
||||
<button style="height:32px;padding:0 14px;background:var(--gray-0);color:var(--danger-500);border:1px solid var(--danger-500);border-radius:var(--radius-md);font-size:13px;cursor:pointer;">驳回</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="feature-text">
|
||||
<span class="tag">审批流程</span>
|
||||
<h2>操作留痕，审批有序</h2>
|
||||
<p>入库单与出库单均需经过审批才能更新库存，杜绝随意修改。每张单据记录经办人与审批人，操作全程可追溯。</p>
|
||||
<ul>
|
||||
<li><i data-lucide="check-circle"></i> 草稿 → 待审核 → 已审批完整状态流转</li>
|
||||
<li><i data-lucide="check-circle"></i> 出库前自动校验库存充足性</li>
|
||||
<li><i data-lucide="check-circle"></i> 审批记录不可修改，符合内控要求</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Feature 3: 盘点 -->
|
||||
<div class="feature-row">
|
||||
<div class="feature-text">
|
||||
<span class="tag">库存盘点</span>
|
||||
<h2>定期盘点，差异一目了然</h2>
|
||||
<p>发起盘点后，系统自动生成基于当前库存的盘点表。录入实盘数量后，系统自动计算差异并归因。</p>
|
||||
<ul>
|
||||
<li><i data-lucide="check-circle"></i> 按仓库或全仓发起盘点</li>
|
||||
<li><i data-lucide="check-circle"></i> 系统数 vs 实盘数，差异高亮显示</li>
|
||||
<li><i data-lucide="check-circle"></i> 盘点结果自动调整库存，生成调账记录</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="feature-visual">
|
||||
<div class="visual-header">
|
||||
<i data-lucide="clipboard-list" style="width:14px;height:14px;color:var(--brand-500)"></i>
|
||||
<span class="visual-title">盘点差异报告</span>
|
||||
</div>
|
||||
<div style="padding:14px 16px;">
|
||||
<div style="display:flex;gap:8px;margin-bottom:12px;">
|
||||
<div style="flex:1;background:var(--success-50);border-radius:6px;padding:10px 12px;text-align:center;">
|
||||
<div style="font-size:10px;color:var(--success-700)">盘盈</div>
|
||||
<div style="font-size:20px;font-weight:700;color:var(--success-700)">+6</div>
|
||||
</div>
|
||||
<div style="flex:1;background:var(--danger-50);border-radius:6px;padding:10px 12px;text-align:center;">
|
||||
<div style="font-size:10px;color:var(--danger-700)">盘亏</div>
|
||||
<div style="font-size:20px;font-weight:700;color:var(--danger-700)">-14</div>
|
||||
</div>
|
||||
<div style="flex:1;background:var(--gray-50);border-radius:6px;padding:10px 12px;text-align:center;">
|
||||
<div style="font-size:10px;color:var(--fg-muted)">无差异</div>
|
||||
<div style="font-size:20px;font-weight:700;color:var(--brand-900)">284</div>
|
||||
</div>
|
||||
</div>
|
||||
<div style="background:var(--gray-50);border:1px solid var(--border-default);border-radius:6px;overflow:hidden;">
|
||||
<div style="display:grid;grid-template-columns:2fr 1fr 1fr 1fr;padding:6px 10px;background:var(--gray-100);font-size:10px;color:var(--fg-muted);font-weight:500;gap:8px;">
|
||||
<span>商品</span><span>系统数</span><span>实盘数</span><span>差异</span>
|
||||
</div>
|
||||
<div style="display:grid;grid-template-columns:2fr 1fr 1fr 1fr;padding:8px 10px;font-size:12px;gap:8px;border-bottom:1px solid var(--border-subtle);">
|
||||
<span>麦卡伦 12年</span><span>24</span><span>22</span><span style="color:var(--danger-500)">-2</span>
|
||||
</div>
|
||||
<div style="display:grid;grid-template-columns:2fr 1fr 1fr 1fr;padding:8px 10px;font-size:12px;gap:8px;border-bottom:1px solid var(--border-subtle);">
|
||||
<span>野格利口酒</span><span>48</span><span>51</span><span style="color:var(--success-500)">+3</span>
|
||||
</div>
|
||||
<div style="display:grid;grid-template-columns:2fr 1fr 1fr 1fr;padding:8px 10px;font-size:12px;gap:8px;">
|
||||
<span>百龄坛特醇</span><span>36</span><span>36</span><span style="color:var(--fg-muted)">—</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="cta-section">
|
||||
<div class="container">
|
||||
<h2>准备好了解更多功能？</h2>
|
||||
<p>查看审批流程功能，或直接进入管理端体验。</p>
|
||||
<div class="cta-actions">
|
||||
<a href="/features/approval.html" class="btn btn-primary btn-lg">审批流程功能 <i data-lucide="arrow-right" class="icon"></i></a>
|
||||
<a href="/app/" class="btn btn-secondary btn-lg">进入管理端</a>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<footer>
|
||||
<div class="container">
|
||||
<div class="footer-inner">
|
||||
<div class="footer-brand"><img src="../assets/logo-mark.svg" alt="岩美" /> 岩美酒库管理系统</div>
|
||||
<div class="footer-copy">© 2025 岩美。保留所有权利。</div>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
<script>lucide.createIcons();</script>
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user