feat(site): 官网全新重建(App 真相源风格)+ 四档套餐 + 在线购买流

- tokens.css/site.css 逐值对齐原型设计系统,icons 雪碧图,零外链;首页/下载/帮助/法务全站重皮肤,真实截图
- 注册与登录在官网内完成(写 shared_preferences_web 兼容 localStorage,不再跳 App)
- 价格区四档:免费/标准 299/高级 599/定制;登录后标准/高级按钮变「购买 / 续费」
- 新增 /checkout/(套餐+月付年付切换)与 /license/result/(支付回跳轮询到账)
- 登录页支持 ?next= 站内回跳;二维码措辞改「扫码看详情可分享」
- 下载页构建期真实下载链接+运行时 release 刷新;旧 features 页/死 CSS/dist 产物清理

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01JJ1g8XV1YhhmHRzhwWEW7o
This commit is contained in:
wangjia
2026-07-03 20:40:21 +08:00
parent 18925d7d15
commit d256e7ac85
24 changed files with 1313 additions and 1977 deletions
+227 -582
View File
@@ -1,646 +1,291 @@
---
layout: base.njk
title: 为酒行与酒店设计的库存管理平台
description: 岩美酒库管理系统,审核驱动业务流,库存与账款自动同步,五端无缝接入
description: 岩美酒库管理系统——每一瓶酒一个编号,审核驱动业务流,成本售价利润一目了然,五端同步
---
<style>
/* HERO --------------------------------------------------------- */
.hero {
position: relative; overflow: hidden; padding: 88px 0 64px;
background:
radial-gradient(900px 480px at 78% 12%, rgba(37,99,172,0.06), transparent 60%),
linear-gradient(180deg,#FBFCFD 0%,#FFFFFF 80%);
}
.hero-inner { display: grid; grid-template-columns: 1.05fr 1.25fr; gap: 64px; align-items: center; }
.hero h1 { font-size: 52px; line-height: 1.12; letter-spacing: var(--tracking-cn-display); color: var(--brand-900); font-weight: 700; margin: 0 0 20px; }
.hero h1 em { font-style: normal; color: var(--brand-500); position: relative; }
.hero h1 em::after { content: ''; position: absolute; left: 0; right: 0; bottom: 4px; height: 10px; background: var(--brand-100); z-index: -1; border-radius: 2px; }
.hero p.lead { font-size: var(--text-xl); line-height: 1.6; color: var(--gray-600); margin: 0 0 32px; }
.hero-mini-item .icon { width: 14px; height: 14px; color: var(--success-500); }
/* Preview mock UI ---------------------------------------------- */
.preview-shell { background: var(--gray-0); border: 1px solid var(--border-default); border-radius: 14px; box-shadow: var(--shadow-xl); overflow: hidden; }
.preview-titlebar { height: 36px; display: flex; align-items: center; padding: 0 14px; background: var(--gray-50); border-bottom: 1px solid var(--border-subtle); gap: 8px; }
.preview-dots { display: flex; gap: 6px; }
.preview-dots span { width: 10px; height: 10px; border-radius: 50%; background: var(--gray-300); }
.preview-url { flex: 1; text-align: center; font-size: var(--text-xs); color: var(--fg-subtle); font-family: var(--font-mono); }
.mock-app { display: grid; grid-template-columns: 180px 1fr; height: 540px; }
.mock-sidebar { background: var(--brand-900); color: #DCE2EB; padding: 20px 12px; font-size: var(--text-sm); }
.mock-sidebar-brand { font-size: 13px; font-weight: 600; letter-spacing: 0.1em; color: #fff; padding: 0 8px 16px; border-bottom: 1px solid rgba(255,255,255,0.08); margin-bottom: 12px; }
.mock-nav-item { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: var(--radius-sm); margin-bottom: 2px; color: #ADC9EA; font-size: 13px; }
.mock-nav-item .icon { width: 16px; height: 16px; }
.mock-nav-item.active { background: rgba(255,255,255,0.08); color: #fff; }
.mock-main { background: var(--gray-50); padding: 20px; overflow: hidden; }
.mock-topbar { display: flex; align-items: center; justify-content: space-between; margin-bottom: 18px; }
.mock-tabs { display: flex; gap: 4px; background: var(--gray-0); padding: 4px; border-radius: var(--radius-md); border: 1px solid var(--border-default); }
.mock-tab { padding: 6px 14px; font-size: 13px; color: var(--gray-600); border-radius: var(--radius-sm); }
.mock-tab.active { background: var(--brand-500); color: #fff; font-weight: 500; }
.mock-actions { display: flex; gap: 8px; }
.mock-mini-btn { display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 12px; background: var(--gray-0); border: 1px solid var(--border-default); border-radius: var(--radius-sm); font-size: 12px; color: var(--gray-700); }
.mock-mini-btn .icon { width: 13px; height: 13px; }
.mock-mini-btn.primary { background: var(--brand-500); color: #fff; border-color: var(--brand-500); }
.mock-stats { display: grid; grid-template-columns: repeat(4,1fr); gap: 10px; margin-bottom: 16px; }
.mock-stat { background: var(--gray-0); border: 1px solid var(--border-default); border-radius: var(--radius-md); padding: 12px 14px; }
.mock-stat-label { font-size: 11px; color: var(--fg-muted); margin-bottom: 4px; }
.mock-stat-value { font-size: 20px; font-weight: 600; color: var(--brand-900); font-variant-numeric: tabular-nums; }
.mock-stat-delta { font-size: 11px; margin-top: 2px; font-variant-numeric: tabular-nums; }
.mock-stat-delta.up { color: var(--success-500); }
.mock-stat-delta.down { color: var(--danger-500); }
.mock-table-card { background: var(--gray-0); border: 1px solid var(--border-default); border-radius: var(--radius-md); overflow: hidden; }
.mock-table-head { display: grid; grid-template-columns: 110px 1fr 60px 70px 80px 70px; padding: 10px 14px; background: var(--gray-50); border-bottom: 1px solid var(--border-subtle); font-size: 11px; color: var(--fg-muted); font-weight: 500; }
.mock-table-row { display: grid; grid-template-columns: 110px 1fr 60px 70px 80px 70px; padding: 10px 14px; border-bottom: 1px solid var(--border-subtle); font-size: 12px; color: var(--gray-800); align-items: center; font-variant-numeric: tabular-nums; }
.mock-table-row:last-child { border-bottom: none; }
.mock-table-row .sku { font-family: var(--font-mono); color: var(--brand-500); font-size: 11px; }
.mock-pill { display: inline-block; padding: 1px 8px; border-radius: var(--radius-pill); font-size: 10px; font-weight: 500; }
.mock-pill.ok { background: var(--success-50); color: var(--success-700); }
.mock-pill.warn { background: var(--warning-50); color: var(--warning-700); }
.mock-pill.pending { background: var(--info-50); color: var(--info-700); }
.hero-toast { position: absolute; bottom: -28px; right: -36px; background: var(--gray-0); border: 1px solid var(--border-default); border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); padding: 14px 16px; width: 260px; display: flex; gap: 12px; align-items: flex-start; z-index: 2; }
.hero-toast-icon { width: 36px; height: 36px; border-radius: 8px; background: var(--success-50); display: grid; place-items: center; flex-shrink: 0; }
.hero-toast-icon .icon { color: var(--success-500); }
/* Trust strip -------------------------------------------------- */
.trust { border-top: 1px solid var(--border-subtle); border-bottom: 1px solid var(--border-subtle); background: var(--gray-25); padding: 32px 0; }
.trust-grid { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1fr 1fr; align-items: center; gap: 32px; }
.trust-stat-num { font-size: 28px; font-weight: 600; color: var(--brand-900); font-variant-numeric: tabular-nums; line-height: 1; }
.trust-stat-num sup { font-size: 14px; color: var(--brand-500); margin-left: 2px; font-weight: 500; }
/* Modules ------------------------------------------------------ */
.module-card:hover { border-color: var(--border-strong); box-shadow: var(--shadow-sm); }
.module-card.feature-card { grid-column: span 2; background: linear-gradient(180deg,#FBFCFD 0%,#FFFFFF 100%); }
.module-card.feature-card .icon-box-lg { background: var(--brand-500); color: #fff; }
.module-card ul { margin: 16px 0 0; padding: 0; list-style: none; font-size: var(--text-sm); color: var(--gray-700); }
.module-card ul li { display: flex; align-items: center; gap: 8px; padding: 6px 0; border-top: 1px solid var(--border-subtle); }
.module-card ul li:first-child { border-top: none; }
.module-card ul li .icon { width: 14px; height: 14px; color: var(--brand-500); }
/* Workflow ----------------------------------------------------- */
.workflow-grid { display: grid; grid-template-columns: 1fr 1.1fr; gap: 64px; align-items: center; margin-top: 48px; }
.wf-step { display: grid; grid-template-columns: 32px 1fr; gap: 14px; align-items: start; }
.wf-num { width: 32px; height: 32px; border-radius: var(--radius-pill); background: var(--brand-50); color: var(--brand-700); display: grid; place-items: center; font-size: 13px; font-weight: 600; }
.wf-step.active .wf-num { background: var(--brand-500); color: #fff; }
.flow-vis { background: var(--gray-0); border: 1px solid var(--border-default); border-radius: var(--radius-lg); box-shadow: var(--shadow-md); padding: 28px; }
.flow-doc { background: var(--gray-50); border: 1px solid var(--border-default); border-radius: var(--radius-md); padding: 16px 18px; margin-bottom: 14px; }
.flow-doc-head { display: flex; justify-content: space-between; margin-bottom: 12px; }
.flow-doc-id { font-family: var(--font-mono); font-size: 12px; color: var(--brand-500); }
.flow-doc-status { font-size: 11px; font-weight: 500; padding: 2px 10px; border-radius: var(--radius-pill); background: var(--info-50); color: var(--info-700); }
.flow-doc-status.approved { background: var(--success-50); color: var(--success-700); }
.flow-row { display: grid; grid-template-columns: 70px 1fr 70px 70px; gap: 8px; font-size: 12px; padding: 6px 0; color: var(--gray-700); font-variant-numeric: tabular-nums; }
.flow-row.head { font-weight: 500; color: var(--fg-muted); font-size: 11px; padding: 0 0 6px; border-bottom: 1px solid var(--border-subtle); margin-bottom: 4px; }
.flow-row.foot { border-top: 1px solid var(--border-default); margin-top: 6px; padding-top: 8px; font-weight: 600; color: var(--brand-900); }
.flow-arrow { display: flex; align-items: center; justify-content: center; padding: 12px 0; color: var(--gray-400); }
.flow-arrow .icon { width: 18px; height: 18px; }
.flow-effects { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.flow-effect { background: #fff; border: 1px solid var(--border-default); border-radius: var(--radius-md); padding: 12px 14px; }
.flow-effect-label { font-size: 11px; color: var(--fg-muted); display: flex; align-items: center; gap: 6px; }
.flow-effect-label .icon { width: 12px; height: 12px; color: var(--success-500); }
.flow-effect-val { font-size: 18px; font-weight: 600; color: var(--brand-900); margin-top: 4px; font-variant-numeric: tabular-nums; }
/* Platforms ---------------------------------------------------- */
.platform-card:hover { border-color: var(--brand-300); }
.platforms-visual { margin-top: 56px; background: var(--brand-900); border-radius: var(--radius-xl); padding: 56px 48px; position: relative; overflow: hidden; color: #fff; display: grid; grid-template-columns: 1fr 1.2fr; gap: 48px; align-items: center; }
.platforms-visual::before { content: ''; position: absolute; inset: 0; background: radial-gradient(600px 320px at 80% 10%,rgba(79,134,198,0.20),transparent 60%); pointer-events: none; }
.pv-text h3 { font-size: 32px; font-weight: 600; letter-spacing: var(--tracking-cn-display); margin: 0 0 16px; }
.pv-text p { font-size: var(--text-lg); color: #ADC9EA; margin: 0 0 24px; line-height: 1.6; }
.pv-feature { display: flex; align-items: center; gap: 10px; font-size: var(--text-md); color: #DCE2EB; }
.pv-feature .icon { width: 16px; height: 16px; color: var(--brand-300); }
.device-stack { position: relative; height: 320px; z-index: 1; }
.device-laptop { position: absolute; width: 100%; bottom: 0; background: #0A1F3B; border: 1px solid rgba(255,255,255,0.08); border-radius: 8px 8px 4px 4px; box-shadow: var(--shadow-xl); }
.device-laptop::after { content: ''; position: absolute; bottom: -10px; left: -16px; right: -16px; height: 10px; background: linear-gradient(180deg,#232934 0%,#141821 100%); border-radius: 0 0 8px 8px; }
.device-laptop-screen { background: var(--gray-50); margin: 8px; height: 200px; border-radius: 4px; padding: 10px; overflow: hidden; }
.device-laptop-mock-row { height: 12px; background: var(--gray-200); border-radius: 2px; margin-bottom: 6px; }
.device-laptop-mock-row.short { width: 60%; }
.device-laptop-mock-row.brand { background: var(--brand-300); width: 30%; }
.device-phone { position: absolute; right: 32px; bottom: -8px; width: 110px; height: 220px; background: #0A1F3B; border: 2px solid rgba(255,255,255,0.10); border-radius: 16px; padding: 4px; box-shadow: var(--shadow-xl); z-index: 2; }
.device-phone-screen { background: var(--gray-50); border-radius: 12px; height: 100%; padding: 8px; overflow: hidden; font-size: 8px; }
.device-phone-screen .top { height: 14px; background: var(--brand-500); border-radius: 4px; margin-bottom: 6px; }
/* Reports ------------------------------------------------------ */
.reports-grid { display: grid; grid-template-columns: 1.05fr 1fr; gap: 64px; align-items: center; margin-top: 48px; }
.report-head { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 18px; }
.report-tabs { display: flex; gap: 4px; }
.report-tab { padding: 4px 10px; font-size: 11px; color: var(--fg-muted); border-radius: var(--radius-sm); cursor: pointer; }
.report-tab.active { background: var(--gray-100); color: var(--gray-900); }
.chart { position: relative; height: 200px; margin: 8px 0 0; }
.chart svg { width: 100%; height: 100%; }
.chart-stats { display: grid; grid-template-columns: repeat(3,1fr); gap: 12px; border-top: 1px solid var(--border-subtle); padding-top: 18px; margin-top: 8px; }
.chart-stat-val small { font-size: var(--text-xs); color: var(--success-500); margin-left: 4px; font-weight: 500; }
/* Security ----------------------------------------------------- */
.roles-table { margin-top: 32px; background: var(--gray-0); border: 1px solid var(--border-default); border-radius: var(--radius-lg); overflow: hidden; }
.roles-row { display: grid; grid-template-columns: 180px 1fr 80px 80px 80px 80px; align-items: center; padding: 14px 24px; border-bottom: 1px solid var(--border-subtle); font-size: var(--text-sm); }
.roles-row:last-child { border-bottom: none; }
.roles-row.head { background: var(--gray-50); color: var(--fg-muted); font-size: 12px; font-weight: 500; }
.role-check { text-align: center; }
.role-check .icon { width: 16px; height: 16px; color: var(--success-500); display: inline-block; }
.role-check.no .icon { color: var(--gray-300); }
/* Pricing ------------------------------------------------------ */
.price-card.featured { border-color: var(--brand-500); box-shadow: 0 0 0 4px rgba(37,99,172,0.08), var(--shadow-md); position: relative; }
.price-card.featured::before { content: '推荐'; position: absolute; top: -1px; right: 24px; background: var(--brand-500); color: #fff; padding: 4px 12px; border-radius: 0 0 var(--radius-sm) var(--radius-sm); font-size: 11px; font-weight: 500; letter-spacing: 0.06em; }
.price-amount { display: flex; align-items: baseline; gap: 4px; margin-bottom: 8px; }
.price-amount .currency { font-size: 18px; color: var(--gray-700); font-weight: 500; }
.price-amount .num { font-size: 42px; font-weight: 700; color: var(--brand-900); font-variant-numeric: tabular-nums; line-height: 1; }
.price-amount .unit { font-size: 14px; color: var(--fg-muted); margin-left: 4px; }
.price-card.custom .num { font-size: 32px; }
/* FAQ ---------------------------------------------------------- */
.faq-q { display: flex; justify-content: space-between; align-items: center; padding: 20px 24px; cursor: pointer; font-size: var(--text-lg); font-weight: 500; color: var(--brand-900); list-style: none; }
.faq-q::-webkit-details-marker { display: none; }
.faq-q .icon { width: 18px; height: 18px; color: var(--fg-muted); transition: transform var(--duration-base) var(--ease-standard); }
details[open] .faq-q .icon { transform: rotate(45deg); }
/* CTA banner --------------------------------------------------- */
.cta-banner {
background: radial-gradient(800px 360px at 80% 30%,rgba(37,99,172,0.40),transparent 60%), linear-gradient(135deg,#0A1F3B 0%,#15407D 100%);
color: #fff; border-radius: var(--radius-xl); padding: 64px 56px;
display: grid; grid-template-columns: 1.4fr 1fr; gap: 48px; align-items: center; margin: 96px 0;
}
.cta-banner h2 { font-size: 36px; font-weight: 600; letter-spacing: var(--tracking-cn-display); margin: 0 0 16px; line-height: 1.25; }
.cta-banner p { font-size: var(--text-lg); color: #ADC9EA; margin: 0; line-height: 1.6; }
.cta-banner .btn-primary { background: #fff; color: var(--brand-700); }
.cta-banner .btn-primary:hover { background: #DCE2EB; }
.cta-banner .btn-secondary { background: transparent; color: #fff; border-color: rgba(255,255,255,0.30); }
.cta-banner .btn-secondary:hover { background: rgba(255,255,255,0.10); }
/* Responsive --------------------------------------------------- */
@media (max-width: 1024px) {
.hero-inner, .workflow-grid, .reports-grid, .platforms-visual, .cta-banner { grid-template-columns: 1fr; }
.module-card.feature-card { grid-column: span 2; }
.hero h1 { font-size: 40px; }
.roles-row { grid-template-columns: 140px 1fr repeat(4, 60px); padding: 12px 16px; }
}
@media (max-width: 768px) {
/* Hide decorative app preview on mobile to prevent overflow */
.preview-shell { display: none; }
}
@media (max-width: 600px) {
.hero h1 { font-size: 28px; }
.hero p.lead { font-size: var(--text-md); }
.hero-cta { flex-direction: column; }
.hero-cta .btn { width: 100%; justify-content: center; }
.module-card.feature-card { grid-column: span 1; }
.roles-row { grid-template-columns: 1fr; }
.roles-table .roles-row > *:nth-child(n+3) { display: none; }
}
</style>
<!-- ====================== HERO ====================== -->
<section class="hero">
<div class="container hero-inner">
<div>
<div class="d-inline-flex items-center gap-8 bg-0 border rounded-pill fs-sm text-gray-7 mb-24" style="padding: 6px 14px 6px 8px;">
<span class="badge badge-brand">v{{ changelog[0].version }}</span>
<span>{{ changelog[0].date }} 更新 ·</span>
<span class="text-brand fw-5">查看更新</span>
</div>
<h1>从入库到出库,<br/><em>一套系统</em>管到底。</h1>
<p class="lead">岩美酒库管理系统,为酒行与酒店设计的库存、审核、财务一体化平台。审核驱动业务流,库存与账款自动同步,五端无缝接入。</p>
<div class="d-flex gap-12 mb-28">
<a href="/register/" class="btn btn-primary btn-lg">免费试用 30 天<i data-lucide="arrow-right" class="icon"></i></a>
<a href="/docs/" class="btn btn-secondary btn-lg"><i data-lucide="book-open" class="icon"></i>查看使用手册</a>
</div>
<div class="d-flex items-center gap-18 text-muted fs-sm">
<div class="hero-mini-item d-flex items-center gap-6"><i data-lucide="check" class="icon"></i>无需安装</div>
<div class="hero-mini-item d-flex items-center gap-6"><i data-lucide="check" class="icon"></i>30 天免费</div>
<div class="hero-mini-item d-flex items-center gap-6"><i data-lucide="check" class="icon"></i>支持私有部署</div>
</div>
{# ============ Hero(品牌渐变 = App 登录页品牌面板同源,真实截图) ============ #}
<header class="hero">
<div class="hero-in">
<div class="badge-line">
<b>v{{ changelog[0].version }}</b> · {{ changelog[0].date }} 更新
<a href="/download/#changelog" style="color:inherit;text-decoration:underline">查看更新日志</a>
</div>
<div class="pos-relative">
<div class="preview-shell">
<div class="preview-titlebar">
<div class="preview-dots"><span></span><span></span><span></span></div>
<div class="preview-url">yanmei.app/inventory</div>
</div>
<div class="mock-app">
<aside class="mock-sidebar">
<div class="mock-sidebar-brand">金樽酒行 · S001</div>
<div class="mock-nav-item"><i data-lucide="package-plus" class="icon"></i>入库管理</div>
<div class="mock-nav-item"><i data-lucide="package-minus" class="icon"></i>出库管理</div>
<div class="mock-nav-item active"><i data-lucide="package" class="icon"></i>库存管理</div>
<div class="mock-nav-item"><i data-lucide="wallet" class="icon"></i>财务管理</div>
<div class="mock-nav-item"><i data-lucide="truck" class="icon"></i>往来单位</div>
<div class="mock-nav-item"><i data-lucide="database" class="icon"></i>基础数据</div>
<div class="mock-nav-item"><i data-lucide="settings" class="icon"></i>系统设置</div>
</aside>
<main class="mock-main">
<div class="mock-topbar">
<div class="mock-tabs">
<div class="mock-tab active">库存列表</div>
<div class="mock-tab">库存盘点</div>
<div class="mock-tab">库存流水</div>
</div>
<div class="mock-actions">
<div class="mock-mini-btn"><i data-lucide="download" class="icon"></i>导出</div>
<div class="mock-mini-btn primary"><i data-lucide="clipboard-list" class="icon"></i>新建盘点</div>
</div>
</div>
<div class="mock-stats">
<div class="mock-stat">
<div class="mock-stat-label">库存总量</div>
<div class="mock-stat-value">2,816 <span style="font-size:12px;color:var(--fg-muted);font-weight:400">瓶</span></div>
<div class="mock-stat-delta up">↑ 4.2% 较上月</div>
</div>
<div class="mock-stat">
<div class="mock-stat-label">库存金额</div>
<div class="mock-stat-value">¥486,290</div>
<div class="mock-stat-delta up">↑ 2.8% 较上月</div>
</div>
<div class="mock-stat">
<div class="mock-stat-label">本月入库</div>
<div class="mock-stat-value">128 <span style="font-size:12px;color:var(--fg-muted);font-weight:400">单</span></div>
<div class="mock-stat-delta up">↑ 12 单</div>
</div>
<div class="mock-stat">
<div class="mock-stat-label">预警 SKU</div>
<div class="mock-stat-value" style="color:var(--warning-500)">7</div>
<div class="mock-stat-delta down">↓ 库存不足</div>
</div>
</div>
<div class="mock-table-card">
<div class="mock-table-head">
<div>SKU</div><div>商品名称</div><div>仓库</div><div>库存</div><div>金额</div><div>状态</div>
</div>
<div class="mock-table-row"><div class="sku">WT-501-006</div><div>茅台飞天 53° · 500ml×6</div><div>A 仓</div><div>148</div><div>¥298,400</div><div><span class="mock-pill ok">充足</span></div></div>
<div class="mock-table-row"><div class="sku">XJ-468-001</div><div>五粮液第八代 52° · 500ml</div><div>A 仓</div><div>92</div><div>¥92,920</div><div><span class="mock-pill ok">充足</span></div></div>
<div class="mock-table-row"><div class="sku">XJ-330-024</div><div>剑南春水晶剑 52° · 500ml×6</div><div>B 仓</div><div style="color:var(--warning-700);font-weight:500">12</div><div>¥4,560</div><div><span class="mock-pill warn">偏低</span></div></div>
<div class="mock-table-row"><div class="sku">PJ-750-012</div><div>拉菲传奇波尔多 · 750ml</div><div>A 仓</div><div>64</div><div>¥18,560</div><div><span class="mock-pill ok">充足</span></div></div>
<div class="mock-table-row"><div class="sku">PJ-700-008</div><div>轩尼诗 VSOP · 700ml</div><div>B 仓</div><div>38</div><div>¥22,420</div><div><span class="mock-pill pending">入库中</span></div></div>
</div>
</main>
</div>
</div>
<div class="hero-toast">
<div class="hero-toast-icon"><i data-lucide="check-circle-2" class="icon"></i></div>
<div>
<div class="fw-6 fs-sm text-gray-9 mb-2">入库单已审批</div>
<div class="fs-sm text-muted" style="line-height:1.45">RK20260523000007 库存 +24 瓶<br/>生成应付 ¥48,400</div>
</div>
</div>
<h1>每一瓶酒一个编号,<br/>从入库到利润一套系统管到底。</h1>
<p class="lead">岩美酒库管理系统,为酒行与酒店设计的库存、审核、财务一体化平台。序列号级追溯、审核驱动业务流、成本售价利润实时可见,五端无缝接入。</p>
<div class="cta-row">
<a class="btn primary lg" href="/register/">免费试用 30 天</a>
<a class="btn onhero lg" href="/docs/">查看使用手册</a>
</div>
<div class="mini">
<span><svg class="ic" style="width:14px;height:14px"><use href="#i-check"/></svg>无需绑卡</span>
<span><svg class="ic" style="width:14px;height:14px"><use href="#i-check"/></svg>Web 版免安装</span>
<span><svg class="ic" style="width:14px;height:14px"><use href="#i-check"/></svg>数据多租户隔离</span>
<span><svg class="ic" style="width:14px;height:14px"><use href="#i-check"/></svg>HTTPS 全程加密</span>
</div>
<div class="shot"><img src="/assets/shots/inventory_list.png" alt="库存管理界面 — 真实产品截图" loading="eager" /></div>
</div>
</section>
</header>
<!-- ====================== TRUST ====================== -->
<section class="trust">
<div class="container">
<div class="trust-grid">
<div class="fs-sm text-muted">专为酒水经营场所设计</div>
<div><div class="trust-stat-num">5<sup>端</sup></div><div class="fs-xs text-muted mt-4">Web / iOS / Android / Win / Mac</div></div>
<div><div class="trust-stat-num">多<sup>仓</sup></div><div class="fs-xs text-muted mt-4">支持多仓库独立管理</div></div>
<div><div class="trust-stat-num">FIFO</div><div class="fs-xs text-muted mt-4">批次先进先出追溯</div></div>
<div><div class="trust-stat-num">0</div><div class="fs-xs text-muted mt-4">需安装依赖,Web 即用</div></div>
</div>
</div>
</section>
<!-- ====================== MODULES ====================== -->
{# ============ 核心模块 ============ #}
<section class="section" id="modules">
<div class="container">
<p class="eyebrow">核心模块</p>
<h2 class="section-title">全流程模块,覆盖酒水经营每一个环节</h2>
<p class="section-sub">从商品建档到入库出库、从财务结算到扫码防伪,岩美一站式承载日常运营。</p>
<div class="grid-3 gap-16 mt-48">
<div class="module-card feature-card card p-24 transition">
<div class="icon-box-lg bg-brand-50 text-brand mb-16"><i data-lucide="package-plus" class="icon-md"></i></div>
<h3 class="fs-xl fw-6 text-brand-900 m-0 mb-6 ls-1">入库管理</h3>
<p class="fs-sm lh-16 text-muted m-0">审核驱动的入库流程。草稿、提交、审批、库存更新、应付账款生成 — 一气呵成。</p>
<ul>
<li><i data-lucide="check" class="icon"></i>多商品行明细录入,自动算金额</li>
<li><i data-lucide="check" class="icon"></i>审批通过即同步库存与应付账款</li>
<li><i data-lucide="check" class="icon"></i>支持单据打印、商品标签打印</li>
<li><i data-lucide="check" class="icon"></i>批次号追踪,生产日期可追溯</li>
</ul>
<a href="/features/approval.html" class="fs-xs text-brand mt-12 d-inline-block">了解审核流详情 →</a>
<div class="sec-head">
<div class="eyebrow">核心模块</div>
<h2>全流程覆盖酒水经营的每一个环节</h2>
<p>从供应商进货到客户出库,从批次库存到应收应付,一个系统闭环。</p>
</div>
<div class="grid c4">
<div class="card feature">
<div class="icbox ic-info"><svg class="ic"><use href="#i-download"/></svg></div>
<h3>入库管理</h3>
<p>键盘流内联录单,名称/系列/规格边搜边建;进价可暂估、事后确认自动回填成本与应付。</p>
</div>
<div class="module-card card p-24 transition">
<div class="icon-box-lg bg-brand-50 text-brand mb-16"><i data-lucide="package-minus" class="icon-md"></i></div>
<h3 class="fs-xl fw-6 text-brand-900 m-0 mb-6 ls-1">出库管理</h3>
<p class="fs-sm lh-16 text-muted m-0">出库前自动校验库存,审批通过即扣减库存并生成应收。库存不足,单据无法通过。</p>
<div class="card feature">
<div class="icbox ic-info"><svg class="ic"><use href="#i-upload"/></svg></div>
<h3>出库管理</h3>
<p>从库存选货自动带出可用数量与参考售价,每行利润实时计算;支持先出库后定价。</p>
</div>
<div class="module-card card p-24 transition">
<div class="icon-box-lg bg-brand-50 text-brand mb-16"><i data-lucide="package" class="icon-md"></i></div>
<h3 class="fs-xl fw-6 text-brand-900 m-0 mb-6 ls-1">库存管理</h3>
<p class="fs-sm lh-16 text-muted m-0">实时查询每个 SKU 的库存数量、所在仓库、批次。支持全仓盘点与库存流水。</p>
<a href="/features/inventory.html" class="fs-xs text-brand mt-12 d-inline-block">了解更多 →</a>
<div class="card feature">
<div class="icbox ic-ok"><svg class="ic"><use href="#i-box"/></svg></div>
<h3>批次库存</h3>
<p>每瓶酒独立编号、每批独立成本,库存货值实时汇总;盘点单一键对平账实差异。</p>
</div>
<div class="module-card card p-24 transition">
<div class="icon-box-lg bg-brand-50 text-brand mb-16"><i data-lucide="wallet" class="icon-md"></i></div>
<h3 class="fs-xl fw-6 text-brand-900 m-0 mb-6 ls-1">财务管理</h3>
<p class="fs-sm lh-16 text-muted m-0">审批同步生成应付应收,月度汇总。结清一键完成,可按往来单位筛选导出。</p>
<div class="card feature">
<div class="icbox ic-ok"><svg class="ic"><use href="#i-ic47"/></svg></div>
<h3>财务管理</h3>
<p>应收应付按往来单位自动挂账,收支趋势一图看清;结清、退单自动冲账。</p>
</div>
<div class="module-card card p-24 transition">
<div class="icon-box-lg bg-brand-50 text-brand mb-16"><i data-lucide="truck" class="icon-md"></i></div>
<h3 class="fs-xl fw-6 text-brand-900 m-0 mb-6 ls-1">往来单位</h3>
<p class="fs-sm lh-16 text-muted m-0">供应商与客户统一档案管理。卡号、初始余额、联系信息集中维护。</p>
<div class="card feature">
<div class="icbox ic-wine"><svg class="ic"><use href="#i-ic56"/></svg></div>
<h3>往来单位</h3>
<p>供应商与客户统一管理,拼音首字母秒搜;每家单位的历史单据与欠款一屏尽览。</p>
</div>
<div class="module-card card p-24 transition">
<div class="icon-box-lg bg-brand-50 text-brand mb-16"><i data-lucide="database" class="icon-md"></i></div>
<h3 class="fs-xl fw-6 text-brand-900 m-0 mb-6 ls-1">基础数据</h3>
<p class="fs-sm lh-16 text-muted m-0">商品名称、系列、规格三级字典,单品数量配置。先建字典,后录单据。</p>
<div class="card feature">
<div class="icbox ic-wine"><svg class="ic"><use href="#i-ic57"/></svg></div>
<h3>基础数据</h3>
<p>品牌/型号/版本字典化维护,录单下拉即选;商品图片、介绍库集中管理。</p>
</div>
<div class="module-card card p-24 transition">
<div class="icon-box-lg bg-brand-50 text-brand mb-16"><i data-lucide="settings" class="icon-md"></i></div>
<h3 class="fs-xl fw-6 text-brand-900 m-0 mb-6 ls-1">系统设置</h3>
<p class="fs-sm lh-16 text-muted m-0">用户与权限、多仓库、编号规则、参数与数据导入 — 自助配置,无需开发。</p>
<div class="card feature">
<div class="icbox ic-warn"><svg class="ic"><use href="#i-ic31"/></svg></div>
<h3>扫码看详情</h3>
<p>每瓶酒可打印专属二维码标签,扫码直达商品详情页,链接随手分享给顾客与同行。</p>
</div>
<div class="module-card card p-24 transition">
<div class="icon-box-lg bg-brand-50 text-brand mb-16"><i data-lucide="qr-code" class="icon-md"></i></div>
<h3 class="fs-xl fw-6 text-brand-900 m-0 mb-6 ls-1">扫码防伪</h3>
<p class="fs-sm lh-16 text-muted m-0">每件商品生成专属二维码,顾客扫码可查看商品名称、批次、出售门店与「已通过岩美防伪验证」标识。</p>
<div class="card feature">
<div class="icbox ic-warn"><svg class="ic"><use href="#i-gear"/></svg></div>
<h3>门店设置</h3>
<p>四级角色权限、在线设备管理与强制下线、单号规则、三套界面主题随心切换。</p>
</div>
</div>
</div>
</section>
<!-- ====================== WORKFLOW ====================== -->
<section class="section bg-25" id="workflow">
{# ============ 审核驱动业务流 ============ #}
<section class="section alt" id="workflow">
<div class="container">
<p class="eyebrow">业务流程</p>
<h2 class="section-title">审核驱动业务流,每一笔交易都可追溯</h2>
<p class="section-sub">从单据录入到库存变动、账款生成,每一步都有清晰状态与经办人记录。</p>
<div class="workflow-grid">
<div>
<h3 class="fs-2xl fw-6 text-brand-900 m-0 mb-12">一张入库单的完整生命周期</h3>
<div class="d-flex flex-col gap-14 mt-24">
<div class="wf-step"><div class="wf-num">1</div><div><h4 class="mt-4 mb-4 fs-md fw-6 text-gray-9">录入草稿</h4><p class="m-0 fs-sm text-muted lh-15">选择仓库、供应商、入库日期,逐行录入商品明细。系统自动算金额,可随时保存草稿。</p></div></div>
<div class="wf-step"><div class="wf-num">2</div><div><h4 class="mt-4 mb-4 fs-md fw-6 text-gray-9">提交审核</h4><p class="m-0 fs-sm text-muted lh-15">确认无误后提交。单据进入待审核」,此时不可再编辑,保证数据完整。</p></div></div>
<div class="wf-step active"><div class="wf-num">3</div><div><h4 class="mt-4 mb-4 fs-md fw-6 text-gray-9">审批通过</h4><p class="m-0 fs-sm text-muted lh-15">操作员及以上权限审批。通过后库存自动 +N,同时生成一笔应付账款,账款挂在对应供应商名下。</p></div></div>
<div class="wf-step"><div class="wf-num">4</div><div><h4 class="mt-4 mb-4 fs-md fw-6 text-gray-9">结清账款</h4><p class="m-0 fs-sm text-muted lh-15">财务结算时一键「结清」,财务记录由「未结清」变为「已结清」。账目清晰,按月汇总。</p></div></div>
</div>
<div class="sec-head">
<div class="eyebrow">审核驱动</div>
<h2>每一笔出入库,都要过审核这道关</h2>
<p>草稿随便改,审核过了才动库存与账款——录错不怕,责任清晰。</p>
</div>
<div class="flow">
<div class="step"><div class="num">1</div><b>草稿</b><span>操作员录单,可反复修改、复制行、暂估价</span></div>
<div class="arrow">→</div>
<div class="step"><div class="num">2</div><b>提交审核</b><span>单据锁定进入待审核,支持撤回修改</span></div>
<div class="arrow">→</div>
<div class="step"><div class="num">3</div><b>审核通过</b><span>同一事务更新库存并写入流水、挂应收应付</span></div>
<div class="arrow">→</div>
<div class="step"><div class="num">4</div><b>事后可纠</b><span>退单自动回滚库存与账款,确认进价/售价按差额补账</span></div>
</div>
</div>
</section>
{# ============ 定价与利润 ============ #}
<section class="section">
<div class="container split">
<div>
<div class="sec-head" style="text-align:left;margin:0 0 8px">
<div class="eyebrow" style="justify-content:flex-start">经营看得清</div>
</div>
<div class="flow-vis">
<div class="flow-doc">
<div class="flow-doc-head">
<div class="flow-doc-id">RK20260523000007</div>
<div class="flow-doc-status approved">已审批</div>
</div>
<div class="flow-row head"><div>商品</div><div>规格</div><div>数量</div><div>金额</div></div>
<div class="flow-row"><div>茅台飞天</div><div>500ml×6</div><div>4</div><div>¥8,000</div></div>
<div class="flow-row"><div>五粮液</div><div>500ml</div><div>20</div><div>¥18,400</div></div>
<div class="flow-row"><div>剑南春</div><div>500ml×6</div><div>2</div><div>¥4,200</div></div>
<div class="flow-row"><div>拉菲传奇</div><div>750ml</div><div>10</div><div>¥17,800</div></div>
<div class="flow-row foot"><div>合计</div><div></div><div>36</div><div>¥48,400</div></div>
</div>
<div class="flow-arrow"><i data-lucide="arrow-down" class="icon"></i></div>
<div class="flow-effects">
<div class="flow-effect"><div class="flow-effect-label"><i data-lucide="check-circle-2" class="icon"></i>库存更新</div><div class="flow-effect-val">+36 瓶</div></div>
<div class="flow-effect"><div class="flow-effect-label"><i data-lucide="check-circle-2" class="icon"></i>应付账款</div><div class="flow-effect-val">¥48,400</div></div>
</div>
<h2>成本、售价、利润,<br/>每一单算得明明白白</h2>
<div class="pts">
<div class="pt"><div class="icbox ic-ok"><svg class="ic"><use href="#i-ic47"/></svg></div>
<div><b>建单即见利润</b><span>出库录单时每行利润实时计算,合计利润随手可见。</span></div></div>
<div class="pt"><div class="icbox ic-info"><svg class="ic"><use href="#i-ic03"/></svg></div>
<div><b>成本仅管理员可见</b><span>操作员只看到售价,成本与利润在服务端就被隔离。</span></div></div>
<div class="pt"><div class="icbox ic-warn"><svg class="ic"><use href="#i-ic04"/></svg></div>
<div><b>先出库后定价</b><span>急单先走货,售价确定后一键补录,应收自动按差额调整。</span></div></div>
</div>
</div>
<div class="shot"><img src="/assets/shots/stock_out_list.png" alt="出库管理 — 真实产品截图" loading="lazy" /></div>
</div>
</section>
{# ============ 财务 ============ #}
<section class="section alt">
<div class="container split">
<div class="shot"><img src="/assets/shots/finance.png" alt="财务管理 — 真实产品截图" loading="lazy" /></div>
<div>
<div class="sec-head" style="text-align:left;margin:0 0 8px">
<div class="eyebrow" style="justify-content:flex-start">账款不再靠记</div>
</div>
<h2>应收应付自动挂账,<br/>收支趋势一图看清</h2>
<div class="pts">
<div class="pt"><div class="icbox ic-info"><svg class="ic"><use href="#i-ic07"/></svg></div>
<div><b>出入库自动记账</b><span>审核通过即挂应收/应付,退单自动冲账,无需二次录入。</span></div></div>
<div class="pt"><div class="icbox ic-ok"><svg class="ic"><use href="#i-ic08"/></svg></div>
<div><b>按往来单位对账</b><span>每家供应商、每个客户的未结清金额与流水随点随查。</span></div></div>
<div class="pt"><div class="icbox ic-wine"><svg class="ic"><use href="#i-ic16"/></svg></div>
<div><b>近 30 天滚动口径</b><span>销售、采购、待审核、草稿等经营指标环比一望即知。</span></div></div>
</div>
</div>
</div>
</section>
<!-- ====================== PLATFORMS ====================== -->
{# ============ 五端 ============ #}
<section class="section" id="platforms">
<div class="container">
<p class="eyebrow">多端覆盖</p>
<h2 class="section-title">一个账号,五端同步</h2>
<p class="section-sub">办公室开台账,仓库扫码盘点,老板出差查看实时报表。同一份数据,任意终端访问。</p>
<div class="grid-5 gap-12 mt-48">
<div class="platform-card card py-24 px-16 text-center transition"><i data-lucide="globe" class="icon-xl text-brand mx-auto mb-12"></i><h4 class="m-0 mb-4 fs-md fw-6 text-brand-900">Web</h4><p class="m-0 fs-xs text-muted">主流浏览器,无需安装</p></div>
<div class="platform-card card py-24 px-16 text-center transition"><i data-lucide="monitor" class="icon-xl text-brand mx-auto mb-12"></i><h4 class="m-0 mb-4 fs-md fw-6 text-brand-900">Windows</h4><p class="m-0 fs-xs text-muted">桌面客户端</p></div>
<div class="platform-card card py-24 px-16 text-center transition"><i data-lucide="laptop" class="icon-xl text-brand mx-auto mb-12"></i><h4 class="m-0 mb-4 fs-md fw-6 text-brand-900">macOS</h4><p class="m-0 fs-xs text-muted">原生应用</p></div>
<div class="platform-card card py-24 px-16 text-center transition"><i data-lucide="smartphone" class="icon-xl text-brand mx-auto mb-12"></i><h4 class="m-0 mb-4 fs-md fw-6 text-brand-900">iOS</h4><p class="m-0 fs-xs text-muted">TestFlight 内测中</p></div>
<div class="platform-card card py-24 px-16 text-center transition"><i data-lucide="tablet-smartphone" class="icon-xl text-brand mx-auto mb-12"></i><h4 class="m-0 mb-4 fs-md fw-6 text-brand-900">Android</h4><p class="m-0 fs-xs text-muted">手机 / 平板</p></div>
<div class="sec-head">
<div class="eyebrow">多端同步</div>
<h2>一个账号,五端同步</h2>
<p>店里用 Windows 收银机、仓库用手机、老板在家用 Mac——数据实时一致。</p>
</div>
<div class="platforms-visual">
<div class="pv-text">
<h3>仓库里也能用得顺手</h3>
<p>移动端扫码即查库存、入库、出库,断网也能继续工作,恢复网络后自动同步。</p>
<div class="d-flex flex-col gap-10">
<div class="pv-feature"><i data-lucide="scan-line" class="icon"></i>扫码即查商品 · 商品二维码防伪</div>
<div class="pv-feature"><i data-lucide="wifi-off" class="icon"></i>离线缓存,断网继续作业</div>
<div class="pv-feature"><i data-lucide="layout-grid" class="icon"></i>窄屏自动切换卡片流布局</div>
<div class="pv-feature"><i data-lucide="camera" class="icon"></i>手机拍照直接添加商品图片</div>
</div>
</div>
<div class="device-stack">
<div class="device-laptop">
<div class="device-laptop-screen">
<div class="device-laptop-mock-row brand"></div>
<div class="device-laptop-mock-row short"></div>
<div class="device-laptop-mock-row"></div>
<div class="device-laptop-mock-row short"></div>
<div class="device-laptop-mock-row"></div>
<div class="device-laptop-mock-row short"></div>
<div class="device-laptop-mock-row"></div>
<div class="device-laptop-mock-row short"></div>
<div class="d-flex gap-6 mt-10">
<div style="flex:1;height:50px;background:var(--gray-100);border-radius:3px"></div>
<div style="flex:1;height:50px;background:var(--brand-100);border-radius:3px"></div>
<div style="flex:1;height:50px;background:var(--gray-100);border-radius:3px"></div>
</div>
</div>
</div>
<div class="device-phone">
<div class="device-phone-screen">
<div class="top"></div>
<div style="height:8px;background:var(--gray-200);border-radius:2px;margin-bottom:4px;width:70%"></div>
<div style="height:8px;background:var(--gray-200);border-radius:2px;margin-bottom:8px;width:50%"></div>
<div style="background:var(--gray-0);border:1px solid var(--gray-200);border-radius:4px;padding:6px;margin-bottom:4px"><div style="height:6px;background:var(--brand-300);border-radius:1px;width:60%;margin-bottom:3px"></div><div style="height:4px;background:var(--gray-200);border-radius:1px;width:80%"></div></div>
<div style="background:var(--gray-0);border:1px solid var(--gray-200);border-radius:4px;padding:6px;margin-bottom:4px"><div style="height:6px;background:var(--brand-300);border-radius:1px;width:50%;margin-bottom:3px"></div><div style="height:4px;background:var(--gray-200);border-radius:1px;width:70%"></div></div>
<div style="background:var(--gray-0);border:1px solid var(--gray-200);border-radius:4px;padding:6px;margin-bottom:4px"><div style="height:6px;background:var(--brand-300);border-radius:1px;width:55%;margin-bottom:3px"></div><div style="height:4px;background:var(--gray-200);border-radius:1px;width:75%"></div></div>
<div style="position:absolute;bottom:8px;left:8px;right:8px;background:var(--brand-500);height:22px;border-radius:4px;display:grid;place-items:center"><div style="height:6px;background:rgba(255,255,255,0.9);border-radius:1px;width:50%"></div></div>
</div>
</div>
</div>
<div class="grid plat5">
<div class="card feature" style="text-align:center"><div class="icbox ic-info" style="margin:0 auto 12px"><svg class="ic"><use href="#i-ic63"/></svg></div><h3>Windows</h3><p>安装包一键装机</p></div>
<div class="card feature" style="text-align:center"><div class="icbox ic-info" style="margin:0 auto 12px"><svg class="ic"><use href="#i-ic25"/></svg></div><h3>macOS</h3><p>已签名公证</p></div>
<div class="card feature" style="text-align:center"><div class="icbox ic-ok" style="margin:0 auto 12px"><svg class="ic"><use href="#i-ic01"/></svg></div><h3>Web 版</h3><p>浏览器直接用,零安装</p></div>
<div class="card feature" style="text-align:center"><div class="icbox ic-warn" style="margin:0 auto 12px"><svg class="ic"><use href="#i-ic43"/></svg></div><h3>Android</h3><p>APK 直装</p></div>
<div class="card feature" style="text-align:center"><div class="icbox ic-wine" style="margin:0 auto 12px"><svg class="ic"><use href="#i-ic22"/></svg></div><h3>iOS</h3><p>TestFlight 内测中</p></div>
</div>
<div style="text-align:center;margin-top:28px"><a class="btn primary" href="/download/">前往下载 <svg class="ic" style="width:15px;height:15px"><use href="#i-chevron-right"/></svg></a></div>
</div>
</section>
<!-- ====================== REPORTS ====================== -->
<section class="section bg-25" id="reports">
{# ============ 安全与权限 ============ #}
<section class="section alt" id="security">
<div class="container">
<p class="eyebrow">数据洞察</p>
<h2 class="section-title">把每一瓶酒的进出,转成可分析的数据</h2>
<p class="section-sub">报表自动生成,可按日、按月、按往来单位维度切换。导出 Excel 一键完成。</p>
<div class="reports-grid">
<div class="card p-24 shadow-sm">
<div class="report-head">
<div><h4 class="fs-md fw-6 text-gray-9 m-0">本月财务流水</h4><p class="fs-xs text-muted mt-2 m-0">2026 年 5 月 · 应付与应收对比</p></div>
<div class="report-tabs">
<div class="report-tab">日</div>
<div class="report-tab active">月</div>
<div class="report-tab">季</div>
</div>
</div>
<div class="chart">
<svg viewBox="0 0 600 200" preserveAspectRatio="none">
<line x1="0" y1="50" x2="600" y2="50" stroke="#ECEFF4" stroke-width="1"/>
<line x1="0" y1="100" x2="600" y2="100" stroke="#ECEFF4" stroke-width="1"/>
<line x1="0" y1="150" x2="600" y2="150" stroke="#ECEFF4" stroke-width="1"/>
<path d="M 20 140 L 80 110 L 140 130 L 200 90 L 260 100 L 320 70 L 380 85 L 440 50 L 500 65 L 560 40 L 560 190 L 20 190 Z" fill="rgba(37,99,172,0.10)" />
<path d="M 20 140 L 80 110 L 140 130 L 200 90 L 260 100 L 320 70 L 380 85 L 440 50 L 500 65 L 560 40" fill="none" stroke="#2563AC" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M 20 160 L 80 140 L 140 145 L 200 120 L 260 130 L 320 105 L 380 115 L 440 90 L 500 95 L 560 70 L 560 190 L 20 190 Z" fill="rgba(139,35,49,0.08)" />
<path d="M 20 160 L 80 140 L 140 145 L 200 120 L 260 130 L 320 105 L 380 115 L 440 90 L 500 95 L 560 70" fill="none" stroke="#8B2331" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
<circle cx="560" cy="40" r="4" fill="#2563AC" />
<circle cx="560" cy="40" r="8" fill="rgba(37,99,172,0.20)" />
<circle cx="560" cy="70" r="4" fill="#8B2331" />
</svg>
<div class="d-flex gap-16 fs-xs text-muted mt-8">
<span class="d-flex items-center gap-4"><span style="width:8px;height:8px;background:var(--brand-500);border-radius:50%"></span>应付账款</span>
<span class="d-flex items-center gap-4"><span style="width:8px;height:8px;background:var(--accent-500);border-radius:50%"></span>应收账款</span>
</div>
</div>
<div class="chart-stats">
<div><div class="fs-xs text-muted mb-4">本月应付</div><div class="fs-lg fw-6 text-brand-900 tabular">¥248,600<small>↑ 12%</small></div></div>
<div><div class="fs-xs text-muted mb-4">本月应收</div><div class="fs-lg fw-6 text-brand-900 tabular">¥182,400<small>↑ 8%</small></div></div>
<div><div class="fs-xs text-muted mb-4">已结清率</div><div class="fs-lg fw-6 text-brand-900 tabular">86.4%<small>↑ 4%</small></div></div>
</div>
</div>
<div class="d-flex flex-col gap-24">
<div class="d-grid gap-16" style="grid-template-columns:36px 1fr">
<div class="icon-box-md bg-brand-50 text-brand"><i data-lucide="bar-chart-3" class="icon-md"></i></div>
<div><h4 class="m-0 mb-4 fs-lg fw-6 text-brand-900">财务汇总自动生成</h4><p class="m-0 fs-sm text-muted lh-16">每月应付应收按往来单位、按时间维度自动汇总。无需手工统计,月底一键导出。</p></div>
</div>
<div class="d-grid gap-16" style="grid-template-columns:36px 1fr">
<div class="icon-box-md bg-brand-50 text-brand"><i data-lucide="trending-down" class="icon-md"></i></div>
<div><h4 class="m-0 mb-4 fs-lg fw-6 text-brand-900">损耗趋势可见</h4><p class="m-0 fs-sm text-muted lh-16">每次盘点的账实差异自动累计为损耗数据,结合周转率帮你发现异常 SKU。</p></div>
</div>
<div class="d-grid gap-16" style="grid-template-columns:36px 1fr">
<div class="icon-box-md bg-brand-50 text-brand"><i data-lucide="file-spreadsheet" class="icon-md"></i></div>
<div><h4 class="m-0 mb-4 fs-lg fw-6 text-brand-900">Excel 进出自由</h4><p class="m-0 fs-sm text-muted lh-16">历史数据可批量导入,月度报表可一键导出。与会计、税务系统无缝衔接。</p></div>
</div>
<div class="d-grid gap-16" style="grid-template-columns:36px 1fr">
<div class="icon-box-md bg-brand-50 text-brand"><i data-lucide="alert-triangle" class="icon-md"></i></div>
<div><h4 class="m-0 mb-4 fs-lg fw-6 text-brand-900">库存状态实时标识</h4><p class="m-0 fs-sm text-muted lh-16">设置商品最低库存量,系统自动标记「充足 / 偏低 / 告急」,一眼识别需补货的 SKU。</p></div>
</div>
</div>
<div class="sec-head">
<div class="eyebrow">安全与权限</div>
<h2>四级角色,数据各归其位</h2>
<p>多租户隔离、HTTPS 全程加密、登录设备可管控,敏感经营数据只给该看的人。</p>
</div>
<table class="roles">
<thead><tr><th>能力</th><th>超级管理员</th><th>管理员</th><th>操作员</th><th>只读</th></tr></thead>
<tbody>
<tr><td>录单 / 提交审核</td><td class="y">✓</td><td class="y">✓</td><td class="y">✓</td><td class="n">—</td></tr>
<tr><td>审核 / 退单 / 确认价格</td><td class="y">✓</td><td class="y">✓</td><td class="n">—</td><td class="n">—</td></tr>
<tr><td>查看成本与利润</td><td class="y">✓</td><td class="y">✓</td><td class="n">—</td><td class="n">—</td></tr>
<tr><td>用户与设备管理</td><td class="y">✓</td><td class="y">✓</td><td class="n">—</td><td class="n">—</td></tr>
<tr><td>查看单据与库存</td><td class="y">✓</td><td class="y">✓</td><td class="y">✓</td><td class="y">✓</td></tr>
</tbody>
</table>
</div>
</section>
<!-- ====================== SECURITY ====================== -->
<section class="section bg-25">
<div class="container">
<p class="eyebrow">安全与权限</p>
<h2 class="section-title">企业级权限控制,操作可追溯</h2>
<p class="section-sub">四级角色细分权限,每一次单据操作都有经办人记录。数据备份与审批留痕,按合规要求设计。</p>
<div class="grid-4 gap-16 mt-48">
<div class="card p-24"><i data-lucide="users" class="icon-lg text-brand mb-14"></i><h4 class="fs-lg fw-6 text-brand-900 m-0 mb-6">四级角色</h4><p class="m-0 fs-sm text-muted lh-15">超级管理员、管理员、操作员、只读。按岗位分配,最小权限原则。</p></div>
<div class="card p-24"><i data-lucide="file-clock" class="icon-lg text-brand mb-14"></i><h4 class="fs-lg fw-6 text-brand-900 m-0 mb-6">操作审计</h4><p class="m-0 fs-sm text-muted lh-15">谁、什么时候、做了什么 — 每一笔单据都有经办人与时间戳。</p></div>
<div class="card p-24"><i data-lucide="shield-check" class="icon-lg text-brand mb-14"></i><h4 class="fs-lg fw-6 text-brand-900 m-0 mb-6">审批留痕</h4><p class="m-0 fs-sm text-muted lh-15">审批不可撤销,单据从草稿到结清的每一步状态完整保留。</p></div>
<div class="card p-24"><i data-lucide="hard-drive" class="icon-lg text-brand mb-14"></i><h4 class="fs-lg fw-6 text-brand-900 m-0 mb-6">每日备份</h4><p class="m-0 fs-sm text-muted lh-15">云端每日自动备份,支持私有部署。数据始终在你的控制下。</p></div>
</div>
<div class="roles-table">
<div class="roles-row head">
<div>角色</div><div>说明</div>
<div class="text-center">查看</div><div class="text-center">录入</div>
<div class="text-center">审批</div><div class="text-center">设置</div>
</div>
<div class="roles-row"><div class="fw-6 text-brand-900">超级管理员</div><div class="text-muted fs-sm">系统最高权限,含数据清空</div><div class="role-check"><i data-lucide="check" class="icon"></i></div><div class="role-check"><i data-lucide="check" class="icon"></i></div><div class="role-check"><i data-lucide="check" class="icon"></i></div><div class="role-check"><i data-lucide="check" class="icon"></i></div></div>
<div class="roles-row"><div class="fw-6 text-brand-900">管理员</div><div class="text-muted fs-sm">门店管理人员,含用户与门店设置</div><div class="role-check"><i data-lucide="check" class="icon"></i></div><div class="role-check"><i data-lucide="check" class="icon"></i></div><div class="role-check"><i data-lucide="check" class="icon"></i></div><div class="role-check"><i data-lucide="check" class="icon"></i></div></div>
<div class="roles-row"><div class="fw-6 text-brand-900">操作员</div><div class="text-muted fs-sm">日常录入与审核单据</div><div class="role-check"><i data-lucide="check" class="icon"></i></div><div class="role-check"><i data-lucide="check" class="icon"></i></div><div class="role-check"><i data-lucide="check" class="icon"></i></div><div class="role-check no"><i data-lucide="minus" class="icon"></i></div></div>
<div class="roles-row"><div class="fw-6 text-brand-900">只读</div><div class="text-muted fs-sm">仅查看,不可修改任何数据</div><div class="role-check"><i data-lucide="check" class="icon"></i></div><div class="role-check no"><i data-lucide="minus" class="icon"></i></div><div class="role-check no"><i data-lucide="minus" class="icon"></i></div><div class="role-check no"><i data-lucide="minus" class="icon"></i></div></div>
</div>
</div>
</section>
<!-- ====================== PRICING ====================== -->
{# ============ 定价 ============ #}
<section class="section" id="pricing">
<div class="container">
<p class="eyebrow">价格</p>
<h2 class="section-title">按门店付费,明码标价</h2>
<p class="section-sub">所有方案均含全功能、五端同步、无限单据、技术支持。仅在用户数、门店数、部署方式上区分。</p>
<div class="grid-3 gap-16 mt-48">
<div class="card d-flex flex-col" style="padding:32px 28px">
<div class="fs-sm text-muted fw-5 mb-4">入门方案</div>
<div class="fs-2xl fw-6 text-brand-900 mb-16">试用版</div>
<div class="price-amount"><span class="currency">¥</span><span class="num">0</span><span class="unit">/ 30 天</span></div>
<div class="fs-sm text-muted mb-24">体验完整功能,无需绑卡</div>
<ul class="price-features d-flex flex-col gap-10 p-0 m-0 mb-32" style="list-style:none">
<li class="d-flex items-start gap-8 fs-sm text-gray-7"><i data-lucide="check" class="icon-sm text-brand flex-shrink-0 mt-2"></i>单门店 · 最多 3 用户</li>
<li class="d-flex items-start gap-8 fs-sm text-gray-7"><i data-lucide="check" class="icon-sm text-brand flex-shrink-0 mt-2"></i>全部模块开放</li>
<li class="d-flex items-start gap-8 fs-sm text-gray-7"><i data-lucide="check" class="icon-sm text-brand flex-shrink-0 mt-2"></i>Web 端 + 移动端</li>
<li class="d-flex items-start gap-8 fs-sm text-gray-7"><i data-lucide="check" class="icon-sm text-brand flex-shrink-0 mt-2"></i>微信技术支持</li>
<div class="sec-head">
<div class="eyebrow">价格方案</div>
<h2>按门店付费,明码标价</h2>
<p>先免费试用,再按需选档;时长兑换券续期,无隐藏费用、无自动扣款。</p>
</div>
<div class="plans p4">
<div class="plan">
<div class="pname">免费版</div>
<div class="price">¥0<small> / 30 天</small></div>
<div class="psub">注册即开通,无需绑卡</div>
<ul>
<li><svg class="ic"><use href="#i-check"/></svg>全功能试用 30 天</li>
<li><svg class="ic"><use href="#i-check"/></svg>五端同步</li>
<li><svg class="ic"><use href="#i-check"/></svg>到期数据保留 90 天</li>
</ul>
<a href="/register/" class="btn btn-secondary w-full justify-center mt-auto">免费开通</a>
<a class="btn ghost" data-plan="free" href="/register/">立即试用</a>
</div>
<div class="price-card featured card d-flex flex-col" style="padding:32px 28px">
<div class="fs-sm text-muted fw-5 mb-4">标准方案</div>
<div class="fs-2xl fw-6 text-brand-900 mb-16">单店版</div>
<div class="price-amount"><span class="currency">¥</span><span class="num">299</span><span class="unit">/ 月</span></div>
<div class="fs-sm text-muted mb-24">年付折扣 ¥2,988 / 年(约省 ¥600</div>
<ul class="price-features d-flex flex-col gap-10 p-0 m-0 mb-32" style="list-style:none">
<li class="d-flex items-start gap-8 fs-sm text-gray-7"><i data-lucide="check" class="icon-sm text-brand flex-shrink-0 mt-2"></i>单门店 · 最多 10 用户</li>
<li class="d-flex items-start gap-8 fs-sm text-gray-7"><i data-lucide="check" class="icon-sm text-brand flex-shrink-0 mt-2"></i>全部模块 + 五端同步</li>
<li class="d-flex items-start gap-8 fs-sm text-gray-7"><i data-lucide="check" class="icon-sm text-brand flex-shrink-0 mt-2"></i>无限单据、无限商品</li>
<li class="d-flex items-start gap-8 fs-sm text-gray-7"><i data-lucide="check" class="icon-sm text-brand flex-shrink-0 mt-2"></i>云端每日备份</li>
<li class="d-flex items-start gap-8 fs-sm text-gray-7"><i data-lucide="check" class="icon-sm text-brand flex-shrink-0 mt-2"></i>工作日 9-18 点支持</li>
<div class="plan hot">
<div class="pname">标准</div>
<div class="price">¥299<small> / 月</small></div>
<div class="psub">年付 ¥2,999,立省两个月</div>
<ul>
<li><svg class="ic"><use href="#i-check"/></svg>单门店 · 单仓库</li>
<li><svg class="ic"><use href="#i-check"/></svg>2 台客户端同时使用</li>
<li><svg class="ic"><use href="#i-check"/></svg>1,000 张商品图片分享</li>
<li><svg class="ic"><use href="#i-check"/></svg>扫码详情分享 + 标签打印</li>
</ul>
<a href="/register/" class="btn btn-primary w-full justify-center mt-auto">免费试用 30 天</a>
<a class="btn primary" data-plan="standard" href="/register/">开通门店</a>
</div>
<div class="price-card custom card d-flex flex-col" style="padding:32px 28px">
<div class="fs-sm text-muted fw-5 mb-4">企业方案</div>
<div class="fs-2xl fw-6 text-brand-900 mb-16">连锁版</div>
<div class="price-amount"><span class="num">定制</span></div>
<div class="fs-sm text-muted mb-24">多门店连锁,含私有部署</div>
<ul class="price-features d-flex flex-col gap-10 p-0 m-0 mb-32" style="list-style:none">
<li class="d-flex items-start gap-8 fs-sm text-gray-7"><i data-lucide="check" class="icon-sm text-brand flex-shrink-0 mt-2"></i>多门店 · 总部数据汇总</li>
<li class="d-flex items-start gap-8 fs-sm text-gray-7"><i data-lucide="check" class="icon-sm text-brand flex-shrink-0 mt-2"></i>不限用户数</li>
<li class="d-flex items-start gap-8 fs-sm text-gray-7"><i data-lucide="check" class="icon-sm text-brand flex-shrink-0 mt-2"></i>支持私有部署 / 内网</li>
<li class="d-flex items-start gap-8 fs-sm text-gray-7"><i data-lucide="check" class="icon-sm text-brand flex-shrink-0 mt-2"></i>专属实施与培训服务</li>
<li class="d-flex items-start gap-8 fs-sm text-gray-7"><i data-lucide="check" class="icon-sm text-brand flex-shrink-0 mt-2"></i>7×24 专属客户经理</li>
<div class="plan">
<div class="pname">高级版</div>
<div class="price">¥599<small> / 月</small></div>
<div class="psub">年付 ¥5,999,立省两个月</div>
<ul>
<li><svg class="ic"><use href="#i-check"/></svg>单门店 · 多仓库</li>
<li><svg class="ic"><use href="#i-check"/></svg>5 台客户端同时使用</li>
<li><svg class="ic"><use href="#i-check"/></svg>10,000 张商品图片分享</li>
<li><svg class="ic"><use href="#i-check"/></svg>免费 AI 周度 / 月度商业数据分析</li>
</ul>
{% if site.support.wechat %}<a href="#" class="btn btn-secondary w-full justify-center mt-auto">微信咨询:{{ site.support.wechat }}</a>{% else %}<a href="mailto:{{ site.support.email }}" class="btn btn-secondary w-full justify-center mt-auto">联系销售</a>{% endif %}
<a class="btn primary" data-plan="pro" href="/register/">开通门店</a>
</div>
<div class="plan">
<div class="pname">定制版</div>
<div class="price">定制</div>
<div class="psub">连锁多店、私有部署、专属支持</div>
<ul>
<li><svg class="ic"><use href="#i-check"/></svg>多门店数据隔离</li>
<li><svg class="ic"><use href="#i-check"/></svg>客户端与图片配额按需扩展</li>
<li><svg class="ic"><use href="#i-check"/></svg>可私有化部署</li>
<li><svg class="ic"><use href="#i-check"/></svg>一对一迁移协助</li>
</ul>
<a class="btn ghost" href="mailto:{{ site.support.email }}">联系我们</a>
</div>
</div>
</div>
</section>
<!-- ====================== FAQ ====================== -->
<section class="section bg-25" id="faq">
{# ============ FAQ ============ #}
<section class="section alt" id="faq">
<div class="container">
<p class="eyebrow">常见问题</p>
<h2 class="section-title">购买前常见问题</h2>
<div class="mt-48" style="max-width:880px">
<details class="card mb-12 overflow-hidden" open>
<summary class="faq-q">支持哪些操作系统和设备?<i data-lucide="plus" class="icon"></i></summary>
<div class="fs-md text-muted lh-17" style="padding:0 24px 22px">系统支持 Windows、macOS 桌面客户端,iOS 与 Android 移动 App,以及主流浏览器的 Web 版本。同一账号可在五端同步使用,数据实时更新。</div>
</details>
<details class="card mb-12 overflow-hidden">
<summary class="faq-q">没有网络时还能操作吗?<i data-lucide="plus" class="icon"></i></summary>
<div class="fs-md text-muted lh-17" style="padding:0 24px 22px">网络中断时,系统会自动切换到离线模式,展示上次加载的缓存数据。库存查询与单据录入可继续,恢复网络后自动同步至云端。审批与生成账款类操作需要网络。</div>
</details>
<details class="card mb-12 overflow-hidden">
<summary class="faq-q">能否从原有 Excel / 旧系统迁移数据?<i data-lucide="plus" class="icon"></i></summary>
<div class="fs-md text-muted lh-17" style="padding:0 24px 22px">可以。「系统设置 → 数据导入」支持往来单位、商品名称/系列/规格、库存等数据的批量 Excel 导入,按提供的模板填写即可。导入过程中会显示成功条数与失败原因。</div>
</details>
<details class="card mb-12 overflow-hidden">
<summary class="faq-q">审批通过后发现错误,怎么办?<i data-lucide="plus" class="icon"></i></summary>
<div class="fs-md text-muted lh-17" style="padding:0 24px 22px">审批通过后操作不可撤销。如发现录入错误,可由具备权限的用户新建一张反向单据(如:误入 10 箱则再出库 10 箱)来修正库存与应收应付,审批链完整保留。</div>
</details>
<details class="card mb-12 overflow-hidden">
<summary class="faq-q">数据安全如何保障?<i data-lucide="plus" class="icon"></i></summary>
<div class="fs-md text-muted lh-17" style="padding:0 24px 22px">云端版采用每日自动备份策略,数据传输全程 HTTPS 加密。企业版支持私有部署,数据存放在你自己的服务器,岩美不接触任何业务数据。</div>
</details>
<details class="card mb-12 overflow-hidden">
<summary class="faq-q">可以试用多长时间?<i data-lucide="plus" class="icon"></i></summary>
<div class="fs-md text-muted lh-17" style="padding:0 24px 22px">注册后即可免费试用 30 天,全部功能开放、五端可用,无需绑定支付方式。30 天到期后,升级到单店版(¥299/月)即可继续使用,已录入的数据完整保留。</div>
</details>
<details class="card mb-12 overflow-hidden">
<summary class="faq-q">只读账号能做什么?<i data-lucide="plus" class="icon"></i></summary>
<div class="fs-md text-muted lh-17" style="padding:0 24px 22px">只读账号可查看全部数据,包括单据、库存、财务、报表,并可导出 Excel。但不能新建、修改、审批、删除任何数据。适合财务、税务、审计岗位的查阅需求。</div>
</details>
<div class="sec-head">
<div class="eyebrow">常见问题</div>
<h2>你可能想问</h2>
</div>
<div class="faq">
<details><summary>支持哪些设备和系统?</summary><p>Windows、macOS、Android、iOSTestFlight 内测)以及免安装的 Web 版,一个账号五端数据实时同步。详见<a href="/system-requirements/">系统要求</a>。</p></details>
<details><summary>老系统的数据能搬过来吗?</summary><p>支持 Excel 批量导入商品、往来单位、历史出入库单与库存;定制版提供一对一迁移协助。</p></details>
<details><summary>录错单怎么办?</summary><p>草稿随时改;已提交可撤回;审核通过后支持整单或按行退单,库存与账款自动回滚——不需要手工冲账。</p></details>
<details><summary>进货价还没谈妥能先入库吗?</summary><p>可以。进价留空按暂估入库,价格确定后用「确认进价」补录,系统自动回填库存成本、已出库成本快照与应付差额。出库同理支持先出货后定价。</p></details>
<details><summary>店员能看到我的进货成本吗?</summary><p>不能。成本价与利润仅管理员可见,操作员的界面和接口数据都不包含成本——这是服务端级别的隔离,不是前端隐藏。</p></details>
<details><summary>数据安全吗?</summary><p>每家门店数据完全隔离,全程 HTTPS 加密传输,登录设备可管控、可强制下线;数据库每日备份。</p></details>
<details><summary>试用到期后数据会丢吗?</summary><p>不会。到期后进入只读模式,数据保留 90 天,兑换续期后立即恢复完整功能。</p></details>
</div>
</div>
</section>
<!-- ====================== CTA ====================== -->
<section>
{# ============ CTA ============ #}
<section class="section">
<div class="container">
<div class="cta-banner">
<div>
<h2>用一杯咖啡的时间,<br/>看看你的酒库到底有多少瓶。</h2>
<p>30 天免费试用,无需绑卡。任何时间可取消,已录入数据保留 90 天。</p>
</div>
<div class="d-flex flex-col gap-12 items-start">
<a href="/register/" class="btn btn-primary btn-lg">立即开通试用<i data-lucide="arrow-right" class="icon"></i></a>
{% if site.support.wechat %}<a href="#" class="btn btn-secondary btn-lg"><i data-lucide="message-circle" class="icon"></i>微信咨询:{{ site.support.wechat }}</a>{% else %}<a href="mailto:{{ site.support.email }}?subject=咨询岩美连锁版" class="btn btn-secondary btn-lg"><i data-lucide="mail" class="icon"></i>邮件咨询</a>{% endif %}
</div>
<h2>用一杯咖啡的时间,看清你的酒库到底值多少钱。</h2>
<p>30 天免费试用 · 无需绑卡 · 任何时间可取消,已录入数据保留 90 天</p>
<a class="btn lg" style="background:#fff;color:var(--primary-dark)" href="/register/">免费注册门店</a>
</div>
</div>
</section>
<script>
/* 价格区登录态:已登录(与 Web 版 App 共享 localStorage flutter.*)时,
标准/高级按钮 → 「购买 / 续费」进 /checkout/;免费版按钮 → 「进入系统」。 */
(function () {
if (!localStorage.getItem('flutter.access_token')) return;
document.querySelectorAll('[data-plan]').forEach(function (a) {
var plan = a.dataset.plan;
if (plan === 'free') {
a.textContent = '进入系统';
a.href = '/app/';
} else {
a.textContent = '购买 / 续费';
a.href = '/checkout/?plan=' + plan;
}
});
})();
</script>