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>
1025 lines
55 KiB
HTML
1025 lines
55 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>
|
||
<meta name="description" content="岩美酒库管理系统，为酒行与酒店设计的专业库存、采购、出库一体化管理平台。" />
|
||
<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&family=JetBrains+Mono:wght@400;500;600&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;
|
||
text-rendering: optimizeLegibility;
|
||
font-feature-settings: "tnum" 1;
|
||
}
|
||
img, svg { display: block; max-width: 100%; }
|
||
a { color: inherit; text-decoration: none; }
|
||
button { font-family: inherit; cursor: pointer; }
|
||
|
||
.btn {
|
||
display: inline-flex; align-items: center; gap: 8px;
|
||
height: 40px; padding: 0 18px;
|
||
border-radius: var(--radius-md);
|
||
font-size: var(--text-md); font-weight: 500;
|
||
border: 1px solid transparent;
|
||
transition: background var(--duration-fast) var(--ease-standard),
|
||
border-color var(--duration-fast) var(--ease-standard);
|
||
white-space: nowrap; text-decoration: none; cursor: pointer;
|
||
}
|
||
.btn-primary { background: var(--brand-500); color: #fff; }
|
||
.btn-primary:hover { background: var(--brand-600); }
|
||
.btn-primary:active { background: var(--brand-700); }
|
||
.btn-secondary { background: var(--gray-0); color: var(--brand-900); border-color: var(--border-default); }
|
||
.btn-secondary:hover { background: var(--gray-50); border-color: var(--border-strong); }
|
||
.btn-ghost { background: transparent; color: var(--fg-default); }
|
||
.btn-ghost:hover { background: var(--gray-100); }
|
||
.btn-lg { height: 48px; padding: 0 24px; font-size: var(--text-lg); }
|
||
.btn .icon { width: 18px; height: 18px; }
|
||
|
||
.container { max-width: 1280px; margin: 0 auto; padding: 0 32px; }
|
||
.section { padding: 96px 0; }
|
||
.eyebrow {
|
||
font-size: var(--text-xs); font-weight: 600; letter-spacing: 0.12em;
|
||
color: var(--brand-500); text-transform: uppercase; margin: 0 0 12px;
|
||
}
|
||
.section-title {
|
||
font-size: var(--text-4xl); font-weight: 600; line-height: 1.18;
|
||
letter-spacing: var(--tracking-cn-display);
|
||
color: var(--brand-900); margin: 0 0 16px; max-width: 720px;
|
||
}
|
||
.section-sub {
|
||
font-size: var(--text-lg); line-height: 1.6;
|
||
color: var(--fg-muted); margin: 0; max-width: 640px;
|
||
}
|
||
|
||
/* NAV */
|
||
.topnav {
|
||
position: sticky; top: 0; z-index: 50;
|
||
background: rgba(255,255,255,0.85);
|
||
backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
|
||
border-bottom: 1px solid var(--border-subtle);
|
||
}
|
||
.topnav-inner {
|
||
height: 64px; display: flex; align-items: center; justify-content: space-between;
|
||
max-width: 1440px; margin: 0 auto; padding: 0 32px;
|
||
}
|
||
.topnav-brand { display: flex; align-items: center; gap: 10px; }
|
||
.topnav-brand img { height: 32px; }
|
||
.topnav-links {
|
||
display: flex; align-items: center; gap: 4px;
|
||
font-size: var(--text-md); color: var(--gray-700);
|
||
}
|
||
.topnav-links a {
|
||
padding: 8px 14px; border-radius: var(--radius-md);
|
||
transition: background var(--duration-fast) var(--ease-standard);
|
||
}
|
||
.topnav-links a:hover { background: var(--gray-100); color: var(--brand-900); }
|
||
.topnav-cta { display: flex; gap: 10px; align-items: center; }
|
||
|
||
/* 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-pill {
|
||
display: inline-flex; align-items: center; gap: 8px;
|
||
padding: 6px 14px 6px 8px;
|
||
background: var(--gray-0); border: 1px solid var(--border-default);
|
||
border-radius: var(--radius-pill); font-size: var(--text-sm);
|
||
color: var(--gray-700); margin-bottom: 24px;
|
||
}
|
||
.hero-pill .badge {
|
||
background: var(--brand-50); color: var(--brand-700);
|
||
padding: 2px 8px; border-radius: var(--radius-pill);
|
||
font-size: var(--text-xs); font-weight: 600;
|
||
}
|
||
.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-actions { display: flex; gap: 12px; margin-bottom: 28px; }
|
||
.hero-mini { display: flex; align-items: center; gap: 18px; color: var(--fg-muted); font-size: var(--text-sm); }
|
||
.hero-mini-item { display: flex; align-items: center; gap: 6px; }
|
||
.hero-mini-item .icon { width: 14px; height: 14px; color: var(--success-500); }
|
||
|
||
.hero-preview { position: relative; }
|
||
.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); }
|
||
.hero-toast-title { font-size: 13px; font-weight: 600; color: var(--gray-900); margin-bottom: 2px; }
|
||
.hero-toast-body { font-size: 12px; color: var(--fg-muted); line-height: 1.45; }
|
||
|
||
/* 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-label { font-size: var(--text-sm); color: var(--fg-muted); }
|
||
.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; }
|
||
.trust-stat-label { font-size: var(--text-xs); color: var(--fg-muted); margin-top: 4px; }
|
||
|
||
/* MODULES */
|
||
.modules-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 48px; }
|
||
.module-card {
|
||
background: var(--gray-0); border: 1px solid var(--border-default);
|
||
border-radius: var(--radius-lg); padding: 24px;
|
||
transition: border-color var(--duration-base) var(--ease-standard),
|
||
box-shadow var(--duration-base) var(--ease-standard);
|
||
}
|
||
.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 .module-icon { background: var(--brand-500); color: #fff; }
|
||
.module-icon { width: 40px; height: 40px; border-radius: 10px; background: var(--brand-50); color: var(--brand-500); display: grid; place-items: center; margin-bottom: 16px; }
|
||
.module-icon .icon { width: 20px; height: 20px; }
|
||
.module-card h3 { font-size: var(--text-xl); font-weight: 600; color: var(--brand-900); margin: 0 0 6px; letter-spacing: 0.02em; }
|
||
.module-card p { font-size: var(--text-sm); line-height: 1.6; color: var(--fg-muted); margin: 0; }
|
||
.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-section { background: var(--gray-25); }
|
||
.workflow-grid { display: grid; grid-template-columns: 1fr 1.1fr; gap: 64px; align-items: center; margin-top: 48px; }
|
||
.workflow-text h3 { font-size: var(--text-2xl); font-weight: 600; color: var(--brand-900); margin: 0 0 12px; }
|
||
.workflow-steps { display: flex; flex-direction: column; gap: 14px; margin-top: 24px; }
|
||
.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; font-variant-numeric: tabular-nums; }
|
||
.wf-step.active .wf-num { background: var(--brand-500); color: #fff; }
|
||
.wf-step h4 { margin: 4px 0 4px; font-size: var(--text-md); font-weight: 600; color: var(--gray-900); }
|
||
.wf-step p { margin: 0; font-size: var(--text-sm); color: var(--fg-muted); line-height: 1.55; }
|
||
.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(--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 */
|
||
.platforms-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 12px; margin-top: 48px; }
|
||
.platform-card { text-align: center; background: var(--gray-0); border: 1px solid var(--border-default); border-radius: var(--radius-lg); padding: 24px 16px; transition: border-color var(--duration-base) var(--ease-standard); }
|
||
.platform-card:hover { border-color: var(--brand-300); }
|
||
.platform-card .icon { width: 28px; height: 28px; margin: 0 auto 12px; color: var(--brand-500); }
|
||
.platform-card h4 { margin: 0 0 4px; font-size: var(--text-md); font-weight: 600; color: var(--brand-900); }
|
||
.platform-card p { margin: 0; font-size: var(--text-xs); color: var(--fg-muted); }
|
||
.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; color: #fff; }
|
||
.pv-text p { font-size: var(--text-lg); color: #ADC9EA; margin: 0 0 24px; line-height: 1.6; }
|
||
.pv-feature-list { display: flex; flex-direction: column; gap: 10px; }
|
||
.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; }
|
||
.dlmr { height: 12px; background: var(--gray-200); border-radius: 2px; margin-bottom: 6px; }
|
||
.dlmr.short { width: 60%; }
|
||
.dlmr.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; }
|
||
|
||
/* REPORTS */
|
||
.reports-grid { display: grid; grid-template-columns: 1.05fr 1fr; gap: 64px; align-items: center; margin-top: 48px; }
|
||
.report-card { background: var(--gray-0); border: 1px solid var(--border-default); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); padding: 24px; }
|
||
.report-head { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 18px; }
|
||
.report-title { font-size: var(--text-md); font-weight: 600; color: var(--gray-900); margin: 0; }
|
||
.report-sub { font-size: var(--text-xs); color: var(--fg-muted); margin-top: 2px; }
|
||
.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-label { font-size: 11px; color: var(--fg-muted); margin-bottom: 4px; }
|
||
.chart-stat-val { font-size: var(--text-lg); font-weight: 600; color: var(--brand-900); font-variant-numeric: tabular-nums; }
|
||
.chart-stat-val small { font-size: var(--text-xs); color: var(--success-500); margin-left: 4px; font-weight: 500; }
|
||
.insights-features { display: flex; flex-direction: column; gap: 24px; }
|
||
.insight-item { display: grid; grid-template-columns: 36px 1fr; gap: 16px; }
|
||
.insight-icon { width: 36px; height: 36px; border-radius: 8px; background: var(--brand-50); display: grid; place-items: center; color: var(--brand-500); }
|
||
.insight-icon .icon { width: 18px; height: 18px; }
|
||
.insight-item h4 { margin: 0 0 4px; font-size: var(--text-lg); font-weight: 600; color: var(--brand-900); }
|
||
.insight-item p { margin: 0; font-size: var(--text-sm); color: var(--fg-muted); line-height: 1.6; }
|
||
|
||
/* SECURITY */
|
||
.security-section { background: var(--gray-25); }
|
||
.security-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-top: 48px; }
|
||
.security-card { background: var(--gray-0); border: 1px solid var(--border-default); border-radius: var(--radius-lg); padding: 24px; }
|
||
.security-card .icon { width: 22px; height: 22px; color: var(--brand-500); margin-bottom: 14px; }
|
||
.security-card h4 { margin: 0 0 6px; font-size: var(--text-lg); font-weight: 600; color: var(--brand-900); }
|
||
.security-card p { margin: 0; font-size: var(--text-sm); color: var(--fg-muted); line-height: 1.55; }
|
||
.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; }
|
||
.roles-row .role-name { font-weight: 600; color: var(--brand-900); }
|
||
.roles-row .role-desc { color: var(--fg-muted); font-size: 13px; }
|
||
.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); }
|
||
|
||
/* FAQ */
|
||
.faq-list { margin-top: 48px; max-width: 880px; }
|
||
.faq-item { background: var(--gray-0); border: 1px solid var(--border-default); border-radius: var(--radius-lg); margin-bottom: 12px; overflow: hidden; }
|
||
.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); }
|
||
.faq-a { padding: 0 24px 22px; font-size: var(--text-md); color: var(--fg-muted); line-height: 1.7; }
|
||
|
||
/* 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; color: #fff; line-height: 1.25; }
|
||
.cta-banner p { font-size: var(--text-lg); color: #ADC9EA; margin: 0; line-height: 1.6; }
|
||
.cta-banner-actions { display: flex; flex-direction: column; gap: 12px; align-items: flex-start; }
|
||
.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); }
|
||
.cta-banner-note { font-size: var(--text-sm); color: #99A3B3; }
|
||
|
||
/* FOOTER */
|
||
footer { background: var(--gray-25); border-top: 1px solid var(--border-subtle); padding: 64px 0 32px; color: var(--fg-muted); font-size: var(--text-sm); }
|
||
.footer-grid { display: grid; grid-template-columns: 1.5fr repeat(4, 1fr); gap: 48px; margin-bottom: 48px; }
|
||
.footer-brand img { height: 32px; margin-bottom: 16px; }
|
||
.footer-brand p { margin: 0 0 16px; max-width: 320px; line-height: 1.6; color: var(--fg-muted); }
|
||
.footer-contact { font-size: var(--text-sm); color: var(--gray-700); line-height: 1.8; }
|
||
.footer-col h5 { font-size: var(--text-xs); font-weight: 600; color: var(--brand-900); letter-spacing: 0.06em; margin: 0 0 16px; text-transform: uppercase; }
|
||
.footer-col ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 10px; }
|
||
.footer-col li a { color: var(--gray-600); }
|
||
.footer-col li a:hover { color: var(--brand-500); }
|
||
.footer-bottom { border-top: 1px solid var(--border-subtle); padding-top: 24px; display: flex; justify-content: space-between; font-size: var(--text-xs); color: var(--fg-subtle); }
|
||
|
||
@media (max-width: 1024px) {
|
||
.hero-inner, .workflow-grid, .reports-grid, .platforms-visual, .cta-banner { grid-template-columns: 1fr; }
|
||
.modules-grid, .security-grid, .platforms-grid { grid-template-columns: repeat(2, 1fr); }
|
||
.module-card.feature-card { grid-column: span 2; }
|
||
.footer-grid { grid-template-columns: 1fr 1fr; }
|
||
.hero h1 { font-size: 40px; }
|
||
.trust-grid { grid-template-columns: 1fr 1fr; }
|
||
.roles-row { grid-template-columns: 140px 1fr repeat(4, 60px); padding: 12px 16px; }
|
||
}
|
||
</style>
|
||
</head>
|
||
<body>
|
||
|
||
<!-- NAV -->
|
||
<nav class="topnav">
|
||
<div class="topnav-inner">
|
||
<a href="/" class="topnav-brand">
|
||
<img src="assets/logo-full.svg" alt="岩美" />
|
||
</a>
|
||
<div class="topnav-links">
|
||
<a href="#modules">产品</a>
|
||
<a href="/download.html">下载</a>
|
||
<a href="/docs.html">文档</a>
|
||
</div>
|
||
<div class="topnav-cta">
|
||
<a href="/app/" class="btn btn-primary">进入管理端 <i data-lucide="arrow-right" class="icon"></i></a>
|
||
</div>
|
||
</div>
|
||
</nav>
|
||
|
||
<!-- HERO -->
|
||
<section class="hero">
|
||
<div class="container hero-inner">
|
||
<div>
|
||
<div class="hero-pill">
|
||
<span class="badge">专业版</span>
|
||
<span>适用于酒行与酒店的饮品库存管理</span>
|
||
</div>
|
||
<h1>从入库到出库，<br/><em>一套系统</em>管到底。</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="/download.html" class="btn btn-secondary btn-lg">
|
||
<i data-lucide="download" class="icon"></i>
|
||
下载客户端
|
||
</a>
|
||
</div>
|
||
<div class="hero-mini">
|
||
<div class="hero-mini-item"><i data-lucide="check" class="icon"></i>多仓库多角色</div>
|
||
<div class="hero-mini-item"><i data-lucide="check" class="icon"></i>入库出库审批留痕</div>
|
||
<div class="hero-mini-item"><i data-lucide="check" class="icon"></i>扫码防伪溯源</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="hero-preview">
|
||
<div class="preview-shell">
|
||
<div class="preview-titlebar">
|
||
<div class="preview-dots"><span></span><span></span><span></span></div>
|
||
<div class="preview-url">jiu.51yanmei.com/app</div>
|
||
</div>
|
||
<div class="mock-app">
|
||
<aside class="mock-sidebar">
|
||
<div class="mock-sidebar-brand">岩美酒库</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</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 单</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>茅台飞天 · 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>五粮液第八代 · 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>剑南春水晶剑 · 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="hero-toast-title">入库单已审批</div>
|
||
<div class="hero-toast-body">RK20260523000007 库存 +24 瓶<br/>生成应付 ¥48,400</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- TRUST STRIP -->
|
||
<section class="trust">
|
||
<div class="container">
|
||
<div class="trust-grid">
|
||
<div class="trust-label">专为酒水经营场所设计</div>
|
||
<div>
|
||
<div class="trust-stat-num">7<sup>大</sup></div>
|
||
<div class="trust-stat-label">核心业务模块</div>
|
||
</div>
|
||
<div>
|
||
<div class="trust-stat-num">5<sup>端</sup></div>
|
||
<div class="trust-stat-label">Web / iOS / Android / Win / Mac</div>
|
||
</div>
|
||
<div>
|
||
<div class="trust-stat-num">4<sup>级</sup></div>
|
||
<div class="trust-stat-label">角色权限控制</div>
|
||
</div>
|
||
<div>
|
||
<div class="trust-stat-num">99.9<sup>%</sup></div>
|
||
<div class="trust-stat-label">系统可用性</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="modules-grid">
|
||
<div class="module-card feature-card">
|
||
<div class="module-icon"><i data-lucide="package-plus" class="icon"></i></div>
|
||
<h3>入库管理</h3>
|
||
<p>审核驱动的入库流程。草稿、提交、审批、库存更新、应付账款生成 — 一气呵成。</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>
|
||
</div>
|
||
<div class="module-card">
|
||
<div class="module-icon"><i data-lucide="package-minus" class="icon"></i></div>
|
||
<h3>出库管理</h3>
|
||
<p>出库前自动校验库存，审批通过即扣减库存并生成应收。库存不足，单据无法通过。</p>
|
||
</div>
|
||
<div class="module-card">
|
||
<div class="module-icon"><i data-lucide="package" class="icon"></i></div>
|
||
<h3>库存管理</h3>
|
||
<p>实时查询每个 SKU 的库存数量、所在仓库、批次。支持全仓盘点与库存流水。</p>
|
||
</div>
|
||
<div class="module-card">
|
||
<div class="module-icon"><i data-lucide="wallet" class="icon"></i></div>
|
||
<h3>财务管理</h3>
|
||
<p>审批同步生成应付应收，月度汇总。结清一键完成，可按往来单位筛选导出。</p>
|
||
</div>
|
||
<div class="module-card">
|
||
<div class="module-icon"><i data-lucide="truck" class="icon"></i></div>
|
||
<h3>往来单位</h3>
|
||
<p>供应商与客户统一档案管理。卡号、初始余额、联系信息集中维护。</p>
|
||
</div>
|
||
<div class="module-card">
|
||
<div class="module-icon"><i data-lucide="database" class="icon"></i></div>
|
||
<h3>基础数据</h3>
|
||
<p>商品名称、系列、规格三级字典，单品数量配置。先建字典，后录单据。</p>
|
||
</div>
|
||
<div class="module-card">
|
||
<div class="module-icon"><i data-lucide="settings" class="icon"></i></div>
|
||
<h3>系统设置</h3>
|
||
<p>用户与权限、多仓库、编号规则、参数与数据导入 — 自助配置，无需开发。</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- WORKFLOW -->
|
||
<section class="section workflow-section" id="workflow">
|
||
<div class="container">
|
||
<p class="eyebrow">业务流程</p>
|
||
<h2 class="section-title">审核驱动业务流，每一笔交易都可追溯</h2>
|
||
<p class="section-sub">从单据录入到库存变动、账款生成，每一步都有清晰状态与经办人记录。</p>
|
||
|
||
<div class="workflow-grid">
|
||
<div class="workflow-text">
|
||
<h3>一张入库单的完整生命周期</h3>
|
||
<div class="workflow-steps">
|
||
<div class="wf-step">
|
||
<div class="wf-num">1</div>
|
||
<div>
|
||
<h4>录入草稿</h4>
|
||
<p>选择仓库、供应商、入库日期，逐行录入商品明细。系统自动算金额，可随时保存草稿。</p>
|
||
</div>
|
||
</div>
|
||
<div class="wf-step">
|
||
<div class="wf-num">2</div>
|
||
<div>
|
||
<h4>提交审核</h4>
|
||
<p>确认无误后提交。单据进入「待审核」，此时不可再编辑，保证数据完整。</p>
|
||
</div>
|
||
</div>
|
||
<div class="wf-step active">
|
||
<div class="wf-num">3</div>
|
||
<div>
|
||
<h4>审批通过</h4>
|
||
<p>操作员及以上权限审批。通过后库存自动 +N，同时生成一笔应付账款，挂在对应供应商名下。</p>
|
||
</div>
|
||
</div>
|
||
<div class="wf-step">
|
||
<div class="wf-num">4</div>
|
||
<div>
|
||
<h4>结清账款</h4>
|
||
<p>财务结算时一键「结清」，财务记录由「未结清」变为「已结清」。账目清晰，按月汇总。</p>
|
||
</div>
|
||
</div>
|
||
</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">已审批</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>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- PLATFORMS -->
|
||
<section class="section">
|
||
<div class="container">
|
||
<p class="eyebrow">多端覆盖</p>
|
||
<h2 class="section-title">一个账号，五端同步</h2>
|
||
<p class="section-sub">办公室开台账，仓库扫码盘点，随时随地查看实时数据。同一份数据，任意终端访问。</p>
|
||
|
||
<div class="platforms-grid">
|
||
<div class="platform-card">
|
||
<i data-lucide="globe" class="icon"></i>
|
||
<h4>Web</h4>
|
||
<p>主流浏览器，无需安装</p>
|
||
</div>
|
||
<div class="platform-card">
|
||
<i data-lucide="monitor" class="icon"></i>
|
||
<h4>Windows</h4>
|
||
<p>桌面客户端</p>
|
||
</div>
|
||
<div class="platform-card">
|
||
<i data-lucide="laptop" class="icon"></i>
|
||
<h4>macOS</h4>
|
||
<p>原生应用</p>
|
||
</div>
|
||
<div class="platform-card">
|
||
<i data-lucide="smartphone" class="icon"></i>
|
||
<h4>iOS</h4>
|
||
<p>iPhone / iPad</p>
|
||
</div>
|
||
<div class="platform-card">
|
||
<i data-lucide="tablet-smartphone" class="icon"></i>
|
||
<h4>Android</h4>
|
||
<p>手机 / 平板</p>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="platforms-visual">
|
||
<div class="pv-text">
|
||
<h3>仓库里也能用得顺手</h3>
|
||
<p>移动端扫码即查库存、入库、出库，网络恢复后自动同步。</p>
|
||
<div class="pv-feature-list">
|
||
<div class="pv-feature"><i data-lucide="scan-line" class="icon"></i>扫码即查商品 · 二维码标签</div>
|
||
<div class="pv-feature"><i data-lucide="bell" class="icon"></i>实时推送审批与库存预警</div>
|
||
<div class="pv-feature"><i data-lucide="printer" class="icon"></i>蓝牙连接打印商品标签</div>
|
||
<div class="pv-feature"><i data-lucide="shield-check" class="icon"></i>商品防伪溯源，扫码验真</div>
|
||
</div>
|
||
</div>
|
||
<div class="device-stack">
|
||
<div class="device-laptop">
|
||
<div class="device-laptop-screen">
|
||
<div class="dlmr brand"></div>
|
||
<div class="dlmr short"></div>
|
||
<div class="dlmr"></div>
|
||
<div class="dlmr short"></div>
|
||
<div class="dlmr"></div>
|
||
<div class="dlmr short"></div>
|
||
<div class="dlmr"></div>
|
||
<div style="display:flex;gap:6px;margin-top:10px">
|
||
<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 style="height:14px;background:var(--brand-500);border-radius:4px;margin-bottom:6px"></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>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- REPORTS -->
|
||
<section class="section" style="background:var(--gray-25)">
|
||
<div class="container">
|
||
<p class="eyebrow">数据洞察</p>
|
||
<h2 class="section-title">把每一瓶酒的进出，转成可分析的数据</h2>
|
||
<p class="section-sub">报表自动生成，可按日、按月、按往来单位维度切换。导出 Excel 一键完成。</p>
|
||
|
||
<div class="reports-grid">
|
||
<div class="report-card">
|
||
<div class="report-head">
|
||
<div>
|
||
<h4 class="report-title">本月财务流水</h4>
|
||
<p class="report-sub">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 style="display:flex;gap:16px;font-size:11px;color:var(--fg-muted);margin-top:8px">
|
||
<span style="display:flex;align-items:center;gap:4px"><span style="width:8px;height:8px;background:var(--brand-500);border-radius:50%"></span>应付账款</span>
|
||
<span style="display:flex;align-items:center;gap:4px"><span style="width:8px;height:8px;background:#8B2331;border-radius:50%"></span>应收账款</span>
|
||
</div>
|
||
</div>
|
||
<div class="chart-stats">
|
||
<div>
|
||
<div class="chart-stat-label">本月应付</div>
|
||
<div class="chart-stat-val">¥248,600<small>↑ 12%</small></div>
|
||
</div>
|
||
<div>
|
||
<div class="chart-stat-label">本月应收</div>
|
||
<div class="chart-stat-val">¥182,400<small>↑ 8%</small></div>
|
||
</div>
|
||
<div>
|
||
<div class="chart-stat-label">已结清率</div>
|
||
<div class="chart-stat-val">86.4%<small>↑ 4%</small></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="insights-features">
|
||
<div class="insight-item">
|
||
<div class="insight-icon"><i data-lucide="bar-chart-3" class="icon"></i></div>
|
||
<div>
|
||
<h4>财务汇总自动生成</h4>
|
||
<p>每月应付应收按往来单位、按时间维度自动汇总。无需手工统计，月底一键导出。</p>
|
||
</div>
|
||
</div>
|
||
<div class="insight-item">
|
||
<div class="insight-icon"><i data-lucide="trending-down" class="icon"></i></div>
|
||
<div>
|
||
<h4>损耗趋势可见</h4>
|
||
<p>每次盘点的账实差异自动累计为损耗数据，结合周转率帮你发现异常 SKU。</p>
|
||
</div>
|
||
</div>
|
||
<div class="insight-item">
|
||
<div class="insight-icon"><i data-lucide="file-spreadsheet" class="icon"></i></div>
|
||
<div>
|
||
<h4>Excel 进出自由</h4>
|
||
<p>历史数据可批量导入，月度报表可一键导出。与会计系统无缝衔接。</p>
|
||
</div>
|
||
</div>
|
||
<div class="insight-item">
|
||
<div class="insight-icon"><i data-lucide="alert-triangle" class="icon"></i></div>
|
||
<div>
|
||
<h4>库存预警实时提醒</h4>
|
||
<p>SKU 库存低于阈值，系统在 Web 与移动端同步推送。永远不会错过补货时机。</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- SECURITY -->
|
||
<section class="section security-section" id="security">
|
||
<div class="container">
|
||
<p class="eyebrow">安全与权限</p>
|
||
<h2 class="section-title">企业级权限控制，操作可追溯</h2>
|
||
<p class="section-sub">四级角色细分权限，每一次单据操作都有经办人记录。数据备份与审批留痕，按合规要求设计。</p>
|
||
|
||
<div class="security-grid">
|
||
<div class="security-card">
|
||
<i data-lucide="users" class="icon"></i>
|
||
<h4>四级角色</h4>
|
||
<p>超级管理员、管理员、操作员、只读。按岗位分配，最小权限原则。</p>
|
||
</div>
|
||
<div class="security-card">
|
||
<i data-lucide="file-clock" class="icon"></i>
|
||
<h4>操作审计</h4>
|
||
<p>谁、什么时候、做了什么 — 每一笔单据都有经办人与时间戳。</p>
|
||
</div>
|
||
<div class="security-card">
|
||
<i data-lucide="shield-check" class="icon"></i>
|
||
<h4>审批留痕</h4>
|
||
<p>审批不可撤销，单据从草稿到结清的每一步状态完整保留。</p>
|
||
</div>
|
||
<div class="security-card">
|
||
<i data-lucide="hard-drive" class="icon"></i>
|
||
<h4>每日备份</h4>
|
||
<p>云端每日自动备份，支持私有部署。数据始终在你的控制下。</p>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="roles-table">
|
||
<div class="roles-row head">
|
||
<div>角色</div>
|
||
<div>说明</div>
|
||
<div style="text-align:center">查看</div>
|
||
<div style="text-align:center">录入</div>
|
||
<div style="text-align:center">审批</div>
|
||
<div style="text-align:center">设置</div>
|
||
</div>
|
||
<div class="roles-row">
|
||
<div class="role-name">超级管理员</div>
|
||
<div class="role-desc">系统最高权限，含数据清空</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="role-name">管理员</div>
|
||
<div class="role-desc">门店管理人员，含用户与设置</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="role-name">操作员</div>
|
||
<div class="role-desc">日常录入与审核单据</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="role-name">只读</div>
|
||
<div class="role-desc">仅查看，不可修改任何数据</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>
|
||
|
||
<!-- FAQ -->
|
||
<section class="section" id="faq" style="background:var(--gray-25)">
|
||
<div class="container">
|
||
<p class="eyebrow">常见问题</p>
|
||
<h2 class="section-title">使用前常见的问题</h2>
|
||
|
||
<div class="faq-list">
|
||
<details class="faq-item" open>
|
||
<summary class="faq-q">支持哪些操作系统和设备？<i data-lucide="plus" class="icon"></i></summary>
|
||
<div class="faq-a">系统支持 Windows、macOS 桌面客户端，iOS 与 Android 移动 App，以及主流浏览器的 Web 版本。同一账号可在五端同步使用，数据实时更新。</div>
|
||
</details>
|
||
<details class="faq-item">
|
||
<summary class="faq-q">审批通过后发现录入错误，怎么办？<i data-lucide="plus" class="icon"></i></summary>
|
||
<div class="faq-a">审批通过后操作不可撤销。如发现错误，可由具备权限的用户新建反向调整单据来修正库存与账款。这样可以保留完整的审计链。</div>
|
||
</details>
|
||
<details class="faq-item">
|
||
<summary class="faq-q">能否从原有 Excel / 旧系统迁移数据？<i data-lucide="plus" class="icon"></i></summary>
|
||
<div class="faq-a">可以。「系统设置 → 数据导入」支持往来单位、商品名称 / 系列 / 规格、库存等数据的批量 Excel 导入，按提供的模板填写即可。导入过程中会显示成功条数与失败原因。</div>
|
||
</details>
|
||
<details class="faq-item">
|
||
<summary class="faq-q">只读账号能做什么？<i data-lucide="plus" class="icon"></i></summary>
|
||
<div class="faq-a">只读账号可查看全部数据，包括单据、库存、财务、报表，并可导出 Excel。但不能新建、修改、审批、删除任何数据。适合财务、税务、审计岗位的查阅需求。</div>
|
||
</details>
|
||
<details class="faq-item">
|
||
<summary class="faq-q">防伪溯源功能如何使用？<i data-lucide="plus" class="icon"></i></summary>
|
||
<div class="faq-a">在商品管理中为每件商品生成唯一防伪码，打印标签贴附于商品。消费者用手机扫描二维码后，跳转至公开页面可查看商品信息、批次、生产日期及出售门店，验证真伪。</div>
|
||
</details>
|
||
<details class="faq-item">
|
||
<summary class="faq-q">支持多仓库管理吗？<i data-lucide="plus" class="icon"></i></summary>
|
||
<div class="faq-a">支持。在系统设置中可以为门店配置多个仓库，每次入库/出库时选择对应仓库，库存按仓库维度独立统计，也可以在库存列表跨仓库汇总查询。</div>
|
||
</details>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- CTA BANNER -->
|
||
<section>
|
||
<div class="container">
|
||
<div class="cta-banner">
|
||
<div>
|
||
<h2>开始掌控每一瓶酒的<br/>进出与账目。</h2>
|
||
<p>联系我们即可快速开通您的门店账户，无需繁琐配置。</p>
|
||
</div>
|
||
<div class="cta-banner-actions">
|
||
<a href="/app/" class="btn btn-primary btn-lg">
|
||
进入管理端
|
||
<i data-lucide="arrow-right" class="icon"></i>
|
||
</a>
|
||
<a href="/download.html" class="btn btn-secondary btn-lg">
|
||
<i data-lucide="download" class="icon"></i>
|
||
下载客户端
|
||
</a>
|
||
<span class="cta-banner-note">支持 Web / iOS / Android / Windows / macOS</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- FOOTER -->
|
||
<footer>
|
||
<div class="container">
|
||
<div class="footer-grid">
|
||
<div class="footer-brand">
|
||
<img src="assets/logo-full.svg" alt="岩美" />
|
||
<p>为酒行与酒店设计的库存、审核、财务一体化管理平台。</p>
|
||
<div class="footer-contact">
|
||
<div>jiu.51yanmei.com</div>
|
||
</div>
|
||
</div>
|
||
<div class="footer-col">
|
||
<h5>产品</h5>
|
||
<ul>
|
||
<li><a href="#modules">核心模块</a></li>
|
||
<li><a href="#workflow">业务流程</a></li>
|
||
<li><a href="#reports">数据洞察</a></li>
|
||
<li><a href="/download.html">客户端下载</a></li>
|
||
</ul>
|
||
</div>
|
||
<div class="footer-col">
|
||
<h5>资源</h5>
|
||
<ul>
|
||
<li><a href="/docs.html">使用手册</a></li>
|
||
<li><a href="/docs.html#stock-in">入库指南</a></li>
|
||
<li><a href="/docs.html#scan">防伪溯源</a></li>
|
||
<li><a href="/docs.html#settings">系统设置</a></li>
|
||
</ul>
|
||
</div>
|
||
<div class="footer-col">
|
||
<h5>功能</h5>
|
||
<ul>
|
||
<li><a href="/features/inventory.html">库存管理</a></li>
|
||
<li><a href="/features/approval.html">审批流程</a></li>
|
||
<li><a href="#security">安全权限</a></li>
|
||
<li><a href="#faq">常见问题</a></li>
|
||
</ul>
|
||
</div>
|
||
<div class="footer-col">
|
||
<h5>系统</h5>
|
||
<ul>
|
||
<li><a href="/app/">进入管理端</a></li>
|
||
<li><a href="/download.html">下载客户端</a></li>
|
||
<li><a href="/docs.html">使用文档</a></li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
<div class="footer-bottom">
|
||
<div>© 2026 岩美酒库管理系统 · 保留所有权利</div>
|
||
<div>jiu.51yanmei.com</div>
|
||
</div>
|
||
</div>
|
||
</footer>
|
||
|
||
<script>
|
||
document.addEventListener('DOMContentLoaded', () => {
|
||
if (window.lucide) lucide.createIcons();
|
||
});
|
||
|
||
document.querySelectorAll('a[href^="#"]').forEach(a => {
|
||
a.addEventListener('click', e => {
|
||
const id = a.getAttribute('href');
|
||
if (id === '#' || id.length < 2) return;
|
||
const target = document.querySelector(id);
|
||
if (target) {
|
||
e.preventDefault();
|
||
target.scrollIntoView({ behavior: 'smooth', block: 'start' });
|
||
}
|
||
});
|
||
});
|
||
</script>
|
||
</body>
|
||
</html>
|