wangjia
30a8e791a3
- 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>
286 lines
17 KiB
HTML
286 lines
17 KiB
HTML
<!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>
|