wangjia
b90a89790f
统一 nav（5 个链接含支持、auth-aware 用户下拉菜单）、 docs 页补充面包屑/搜索/版本栏三栏布局、 footer 完整 5 列、所有内链替换为生产绝对路径。 Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
1860 lines
70 KiB
HTML
1860 lines
70 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="zh-CN">
|
||
<head>
|
||
<meta charset="UTF-8" />
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||
<title>岩美酒库管理系统 — 为酒行与酒店设计的库存管理平台</title>
|
||
<link rel="stylesheet" href="assets/colors_and_type.css" />
|
||
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
||
<link href="https://fonts.googleapis.com/css2?family=Noto+Sans+SC:wght@400;500;600;700&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(--gray-25);
|
||
-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; }
|
||
|
||
/* ---------------- Buttons ---------------- */
|
||
.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),
|
||
color var(--duration-fast) var(--ease-standard);
|
||
white-space: nowrap;
|
||
}
|
||
.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; }
|
||
|
||
/* ---------------- Layout helpers ---------------- */
|
||
.container {
|
||
max-width: 1280px;
|
||
margin: 0 auto;
|
||
padding: 0 32px;
|
||
}
|
||
.section { padding: 96px 0; }
|
||
.section-tight { padding: 64px 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;
|
||
}
|
||
|
||
/* ====================================================================
|
||
TOP 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; }
|
||
|
||
/* nav user dropdown */
|
||
.nav-user { position: relative; }
|
||
.nav-user-btn { display: flex; align-items: center; gap: 8px; height: 36px; padding: 0 12px; background: var(--gray-0); border: 1px solid var(--border-default); border-radius: var(--radius-pill); cursor: pointer; font-size: var(--text-md); color: var(--gray-800); font-weight: 500; transition: border-color var(--duration-fast) var(--ease-standard); }
|
||
.nav-user-btn:hover { border-color: var(--border-strong); }
|
||
.nav-avatar { width: 22px; height: 22px; border-radius: 50%; background: var(--brand-500); color: #fff; display: grid; place-items: center; font-size: 10px; font-weight: 700; flex-shrink: 0; }
|
||
.nav-user-btn .icon { width: 14px; height: 14px; color: var(--fg-muted); }
|
||
.nav-dropdown { display: none; position: absolute; top: calc(100% + 8px); right: 0; min-width: 160px; background: var(--gray-0); border: 1px solid var(--border-default); border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); overflow: hidden; z-index: 100; }
|
||
.nav-dropdown.open { display: block; }
|
||
.nav-dropdown a, .nav-dropdown button { display: flex; align-items: center; gap: 8px; width: 100%; padding: 10px 14px; font-size: var(--text-sm); color: var(--gray-800); background: none; border: none; cursor: pointer; text-decoration: none; font-family: inherit; transition: background var(--duration-fast) var(--ease-standard); }
|
||
.nav-dropdown a:hover, .nav-dropdown button:hover { background: var(--gray-50); }
|
||
.nav-dropdown .icon { width: 14px; height: 14px; color: var(--fg-muted); }
|
||
.nav-dropdown-divider { height: 1px; background: var(--border-subtle); margin: 4px 0; }
|
||
.nav-dropdown .logout { color: var(--danger-600); }
|
||
|
||
/* ====================================================================
|
||
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); }
|
||
|
||
/* Product preview card */
|
||
.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 dashboard inside preview */
|
||
.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); }
|
||
|
||
/* Floating notification card */
|
||
.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; }
|
||
|
||
/* Workflow visualization (right side) */
|
||
.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
|
||
==================================================================== */
|
||
.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;
|
||
font-size: 9px;
|
||
color: var(--gray-700);
|
||
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 / INSIGHTS
|
||
==================================================================== */
|
||
.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 / PERMISSIONS
|
||
==================================================================== */
|
||
.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); }
|
||
|
||
/* ====================================================================
|
||
PRICING
|
||
==================================================================== */
|
||
.pricing-grid {
|
||
display: grid;
|
||
grid-template-columns: repeat(3, 1fr);
|
||
gap: 16px;
|
||
margin-top: 48px;
|
||
}
|
||
.price-card {
|
||
background: var(--gray-0);
|
||
border: 1px solid var(--border-default);
|
||
border-radius: var(--radius-lg);
|
||
padding: 32px 28px;
|
||
display: flex; flex-direction: column;
|
||
}
|
||
.price-card.featured {
|
||
border: 1px solid 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-tier {
|
||
font-size: var(--text-sm);
|
||
color: var(--fg-muted);
|
||
font-weight: 500;
|
||
margin-bottom: 4px;
|
||
}
|
||
.price-name {
|
||
font-size: var(--text-2xl);
|
||
font-weight: 600;
|
||
color: var(--brand-900);
|
||
margin-bottom: 16px;
|
||
}
|
||
.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; }
|
||
.price-sub { font-size: var(--text-sm); color: var(--fg-muted); margin-bottom: 24px; }
|
||
.price-features { list-style: none; padding: 0; margin: 0 0 32px; display: flex; flex-direction: column; gap: 10px; }
|
||
.price-features li {
|
||
display: flex; align-items: flex-start; gap: 8px;
|
||
font-size: var(--text-sm);
|
||
color: var(--gray-700);
|
||
line-height: 1.5;
|
||
}
|
||
.price-features li .icon { width: 16px; height: 16px; color: var(--brand-500); flex-shrink: 0; margin-top: 2px; }
|
||
.price-card .btn { width: 100%; justify-content: center; margin-top: auto; }
|
||
|
||
/* ====================================================================
|
||
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, .pricing-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; }
|
||
.roles-row { grid-template-columns: 140px 1fr repeat(4, 60px); padding: 12px 16px; }
|
||
}
|
||
</style>
|
||
</head>
|
||
<body>
|
||
|
||
<!-- =========================== TOP 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="#pricing">价格</a>
|
||
<a href="/download.html">下载</a>
|
||
<a href="/docs.html">文档</a>
|
||
<a href="#faq">支持</a>
|
||
</div>
|
||
<div class="topnav-cta" id="nav-cta"></div>
|
||
</div>
|
||
</nav>
|
||
|
||
<!-- =========================== HERO =========================== -->
|
||
<section class="hero">
|
||
<div class="container hero-inner">
|
||
<div>
|
||
<div class="hero-pill">
|
||
<span class="badge">v1.6</span>
|
||
<span>新增多仓库联动盘点 ·</span>
|
||
<span style="color: var(--brand-500); font-weight: 500;">查看更新</span>
|
||
</div>
|
||
<h1>从入库到出库，<br/><em>一套系统</em>管到底。</h1>
|
||
<p class="lead">
|
||
岩美酒库管理系统，为酒行与酒店设计的库存、审核、财务一体化平台。审核驱动业务流，库存与账款自动同步，五端无缝接入。
|
||
</p>
|
||
<div class="hero-actions">
|
||
<a href="/app/" class="btn btn-primary btn-lg">
|
||
免费试用 30 天
|
||
<i data-lucide="arrow-right" class="icon"></i>
|
||
</a>
|
||
<a href="/app/" class="btn btn-secondary btn-lg">
|
||
<i data-lucide="play-circle" 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>30 天免费</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">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="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">1,280<sup>+</sup></div>
|
||
<div class="trust-stat-label">酒行 / 酒店门店</div>
|
||
</div>
|
||
<div>
|
||
<div class="trust-stat-num">8.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 class="trust-stat-num">5<sup>端</sup></div>
|
||
<div class="trust-stat-label">Web / iOS / Android / Win / Mac</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 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>
|
||
</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="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="wifi-off" 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>
|
||
</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 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 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>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- =========================== REPORTS =========================== -->
|
||
<section class="section" id="reports" 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">
|
||
<!-- grid lines -->
|
||
<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"/>
|
||
|
||
<!-- 应付 area -->
|
||
<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)" />
|
||
<!-- 应付 line -->
|
||
<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"/>
|
||
|
||
<!-- 应收 area -->
|
||
<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)" />
|
||
<!-- 应收 line -->
|
||
<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"/>
|
||
|
||
<!-- data dots -->
|
||
<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: var(--accent-500); 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">
|
||
<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>
|
||
|
||
<!-- =========================== 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="pricing-grid">
|
||
<div class="price-card">
|
||
<div class="price-tier">入门方案</div>
|
||
<div class="price-name">试用版</div>
|
||
<div class="price-amount">
|
||
<span class="currency">¥</span>
|
||
<span class="num">0</span>
|
||
<span class="unit">/ 30 天</span>
|
||
</div>
|
||
<div class="price-sub">体验完整功能，无需绑卡</div>
|
||
<ul class="price-features">
|
||
<li><i data-lucide="check" class="icon"></i>单门店 · 最多 3 用户</li>
|
||
<li><i data-lucide="check" class="icon"></i>全部模块开放</li>
|
||
<li><i data-lucide="check" class="icon"></i>Web 端 + 移动端</li>
|
||
<li><i data-lucide="check" class="icon"></i>邮件技术支持</li>
|
||
</ul>
|
||
<a href="/app/" class="btn btn-secondary">免费开通</a>
|
||
</div>
|
||
|
||
<div class="price-card featured">
|
||
<div class="price-tier">标准方案</div>
|
||
<div class="price-name">单店版</div>
|
||
<div class="price-amount">
|
||
<span class="currency">¥</span>
|
||
<span class="num">299</span>
|
||
<span class="unit">/ 月</span>
|
||
</div>
|
||
<div class="price-sub">年付折扣 ¥2,988 / 年（约省 ¥600）</div>
|
||
<ul class="price-features">
|
||
<li><i data-lucide="check" class="icon"></i>单门店 · 最多 10 用户</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>
|
||
<li><i data-lucide="check" class="icon"></i>工作日 9-18 点支持</li>
|
||
</ul>
|
||
<a href="/app/" class="btn btn-primary">购买</a>
|
||
</div>
|
||
|
||
<div class="price-card custom">
|
||
<div class="price-tier">企业方案</div>
|
||
<div class="price-name">连锁版</div>
|
||
<div class="price-amount">
|
||
<span class="num">定制</span>
|
||
</div>
|
||
<div class="price-sub">多门店连锁，含私有部署</div>
|
||
<ul class="price-features">
|
||
<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>SSO 单点登录</li>
|
||
<li><i data-lucide="check" class="icon"></i>7×24 专属客户经理</li>
|
||
</ul>
|
||
<a href="/app/" class="btn btn-secondary">联系销售</a>
|
||
</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">
|
||
审批通过后操作不可撤销。如发现错误，可由具备权限的用户新建反向调整单据（红冲入库 / 红冲出库）来修正库存与账款。这样可以保留完整的审计链。
|
||
</div>
|
||
</details>
|
||
|
||
<details class="faq-item">
|
||
<summary class="faq-q">
|
||
数据安全如何保障？
|
||
<i data-lucide="plus" class="icon"></i>
|
||
</summary>
|
||
<div class="faq-a">
|
||
云端版采用每日自动备份策略，数据传输全程 HTTPS 加密。企业版支持私有部署，数据存放在你自己的服务器，岩美不接触任何业务数据。
|
||
</div>
|
||
</details>
|
||
|
||
<details class="faq-item">
|
||
<summary class="faq-q">
|
||
可以试用多长时间？
|
||
<i data-lucide="plus" class="icon"></i>
|
||
</summary>
|
||
<div class="faq-a">
|
||
标准版提供 30 天免费试用，无需绑定支付方式。试用期可使用全部功能、五端访问。30 天后可继续按月或按年付费，已录入的数据完整保留。
|
||
</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>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- =========================== CTA =========================== -->
|
||
<section>
|
||
<div class="container">
|
||
<div class="cta-banner">
|
||
<div>
|
||
<h2>用一杯咖啡的时间，<br/>看看你的酒库到底有多少瓶。</h2>
|
||
<p>30 天免费试用，无需绑卡。任何时间可取消，已录入数据保留 90 天。</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="/app/" class="btn btn-secondary btn-lg">
|
||
<i data-lucide="phone" class="icon"></i>
|
||
预约 1 对 1 演示
|
||
</a>
|
||
<span class="cta-banner-note">销售热线 400-880-8888 · 工作日 9:00-18:00</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>support@yanmei.app</div>
|
||
<div>400-880-8888</div>
|
||
</div>
|
||
</div>
|
||
<div class="footer-col">
|
||
<h5>产品</h5>
|
||
<ul>
|
||
<li><a href="#modules">核心模块</a></li>
|
||
<li><a href="#platforms">多端覆盖</a></li>
|
||
<li><a href="#reports">数据洞察</a></li>
|
||
<li><a href="#pricing">价格方案</a></li>
|
||
<li><a href="#">版本更新</a></li>
|
||
</ul>
|
||
</div>
|
||
<div class="footer-col">
|
||
<h5>资源</h5>
|
||
<ul>
|
||
<li><a href="/docs.html">使用手册</a></li>
|
||
<li><a href="#">API 文档</a></li>
|
||
<li><a href="#">视频教程</a></li>
|
||
<li><a href="#">数据导入模板</a></li>
|
||
</ul>
|
||
</div>
|
||
<div class="footer-col">
|
||
<h5>客户支持</h5>
|
||
<ul>
|
||
<li><a href="#faq">常见问题</a></li>
|
||
<li><a href="#">提交工单</a></li>
|
||
<li><a href="#">技术支持</a></li>
|
||
<li><a href="#">服务等级</a></li>
|
||
</ul>
|
||
</div>
|
||
<div class="footer-col">
|
||
<h5>公司</h5>
|
||
<ul>
|
||
<li><a href="#">关于岩美</a></li>
|
||
<li><a href="#">客户案例</a></li>
|
||
<li><a href="#">招贤纳士</a></li>
|
||
<li><a href="#">联系我们</a></li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
<div class="footer-bottom">
|
||
<div>© 2026 岩美科技 · 保留所有权利</div>
|
||
<div>沪 ICP 备 2026000000 号 · 沪公网安备 31010000000000 号</div>
|
||
</div>
|
||
</div>
|
||
</footer>
|
||
|
||
<script>
|
||
function getAuthUser() {
|
||
var token = localStorage.getItem('flutter.access_token');
|
||
var username = localStorage.getItem('flutter.username');
|
||
var realName = localStorage.getItem('flutter.real_name') || '';
|
||
var role = localStorage.getItem('flutter.role') || '';
|
||
var shopNo = localStorage.getItem('flutter.shop_no') || '';
|
||
if (!token || !username) return null;
|
||
return { username: username, realName: realName, role: role, shopNo: shopNo };
|
||
}
|
||
function doLogout() {
|
||
['access_token','refresh_token','username','real_name','shop_no','shop_id','role']
|
||
.forEach(function(k) { localStorage.removeItem('flutter.' + k); });
|
||
location.reload();
|
||
}
|
||
function toggleUserMenu() {
|
||
var el = document.getElementById('userDropdown');
|
||
if (el) el.classList.toggle('open');
|
||
}
|
||
document.addEventListener('click', function(e) {
|
||
var menu = document.getElementById('userDropdown');
|
||
if (menu) {
|
||
var navUser = menu.closest('.nav-user');
|
||
if (navUser && !navUser.contains(e.target)) menu.classList.remove('open');
|
||
}
|
||
});
|
||
function renderNav() {
|
||
var cta = document.getElementById('nav-cta');
|
||
if (!cta) return;
|
||
var user = getAuthUser();
|
||
if (user) {
|
||
var display = user.realName || user.username;
|
||
var initial = display.charAt(0).toUpperCase();
|
||
var roleMap = { admin: '管理员', user: '成员', readonly: '只读' };
|
||
var roleLabel = roleMap[user.role] || user.role;
|
||
cta.innerHTML = '<div class="nav-user">'
|
||
+ '<button class="nav-user-btn" onclick="toggleUserMenu()">'
|
||
+ '<div class="nav-avatar">' + initial + '</div>'
|
||
+ '<span>' + display + '</span>'
|
||
+ '<i data-lucide="chevron-down" class="icon"></i>'
|
||
+ '</button>'
|
||
+ '<div class="nav-dropdown" id="userDropdown">'
|
||
+ '<div style="padding:10px 14px 6px;border-bottom:1px solid var(--border-subtle);margin-bottom:4px">'
|
||
+ '<div style="font-size:13px;font-weight:600;color:var(--brand-900)">' + display + '</div>'
|
||
+ '<div style="font-size:11px;color:var(--fg-muted);margin-top:2px">' + (user.shopNo ? user.shopNo + ' · ' : '') + roleLabel + '</div>'
|
||
+ '</div>'
|
||
+ '<a href="/app/"><i data-lucide="layout-dashboard" class="icon"></i>进入管理端</a>'
|
||
+ '<div class="nav-dropdown-divider"></div>'
|
||
+ '<button class="logout" onclick="doLogout()"><i data-lucide="log-out" class="icon"></i>退出登录</button>'
|
||
+ '</div></div>';
|
||
} else {
|
||
cta.innerHTML = '<a href="/app/" class="btn btn-ghost">登录</a>'
|
||
+ '<a href="/app/" class="btn btn-primary">免费试用</a>';
|
||
}
|
||
if (window.lucide) lucide.createIcons();
|
||
}
|
||
|
||
document.addEventListener('DOMContentLoaded', function() {
|
||
renderNav();
|
||
if (window.lucide) lucide.createIcons();
|
||
|
||
// Smooth scroll for in-page anchors
|
||
document.querySelectorAll('a[href^="#"]').forEach(function(a) {
|
||
a.addEventListener('click', function(e) {
|
||
var id = a.getAttribute('href');
|
||
if (id === '#' || id.length < 2) return;
|
||
var target = document.querySelector(id);
|
||
if (target) {
|
||
e.preventDefault();
|
||
target.scrollIntoView({ behavior: 'smooth', block: 'start' });
|
||
}
|
||
});
|
||
});
|
||
});
|
||
</script>
|
||
|
||
</body>
|
||
</html>
|