wangjia/jiu
1
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases 130 Wiki Activity

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

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

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01JJ1g8XV1YhhmHRzhwWEW7o
This commit is contained in:
wangjia
2026-07-03 20:40:21 +08:00
parent 18925d7d15
commit d256e7ac85
24 changed files with 1313 additions and 1977 deletions
Download Patch File Download Diff File Expand all files Collapse all files
web/assets/nav.js
+31 -123
View File
@@ -1,134 +1,42 @@
(function() {
var KEYS = ['access_token','refresh_token','username','real_name','shop_no','shop_id','role'];
/* 官网导航交互：汉堡菜单 + 登录态感知（Web 版 App 与官网同域时，
localStorage['flutter.*'] 有登录信息 → CTA 变「进入系统」）。零依赖。 */
(function () {
function getAuthUser() {
var token = localStorage.getItem('flutter.access_token');
var token = localStorage.getItem('flutter.access_token');
var username = localStorage.getItem('flutter.username');
if (!token || !username) return null;
return {
username: username,
realName: localStorage.getItem('flutter.real_name') || '',
role: localStorage.getItem('flutter.role') || '',
shopNo: localStorage.getItem('flutter.shop_no') || '',
shopNo: localStorage.getItem('flutter.shop_no') || '',
};
}
function doLogout() {
KEYS.forEach(function(k) { localStorage.removeItem('flutter.' + k); });
location.reload();
}
function toggleUserMenu() {
var el = document.getElementById('userDropdown');
if (el) el.classList.toggle('open');
}
function toggleMobileMenu() {
var menu = document.getElementById('nav-mobile-menu');
var btn = document.getElementById('nav-hamburger');
if (!menu) return;
var isOpen = menu.classList.toggle('open');
if (btn) btn.setAttribute('aria-expanded', isOpen ? 'true' : 'false');
}
// 点击外部关闭 dropdown 和 mobile menu
document.addEventListener('click', function(e) {
var userMenu = document.getElementById('userDropdown');
if (userMenu) {
var navUser = userMenu.closest('.nav-user');
if (navUser && !navUser.contains(e.target)) userMenu.classList.remove('open');
}
var mobileMenu = document.getElementById('nav-mobile-menu');
var hamburger = document.getElementById('nav-hamburger');
if (mobileMenu && hamburger) {
var topnav = mobileMenu.closest('nav');
if (topnav && !topnav.contains(e.target)) {
mobileMenu.classList.remove('open');
hamburger.setAttribute('aria-expanded', 'false');
}
}
});
function renderNav() {
var cta = document.getElementById('nav-cta');
var mobileCta = document.getElementById('nav-mobile-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>';
if (mobileCta) {
mobileCta.innerHTML =
'<a href="/app/" class="btn btn-ghost">进入管理端</a>'
+ '<button class="btn btn-ghost" onclick="doLogout()">退出登录</button>';
}
} else {
cta.innerHTML =
'<a href="/app/" class="btn btn-ghost">登录</a>'
+ '<a href="/app/" class="btn btn-primary">免费试用</a>';
if (mobileCta) {
mobileCta.innerHTML =
'<a href="/app/" class="btn btn-ghost">登录</a>'
+ '<a href="/register/" class="btn btn-primary">注册门店</a>';
}
}
if (window.lucide) lucide.createIcons();
}
// 暴露给 onclick 调用
window.toggleUserMenu = toggleUserMenu;
window.toggleMobileMenu = toggleMobileMenu;
window.doLogout = doLogout;
document.addEventListener('DOMContentLoaded', function() {
renderNav();
if (window.lucide) lucide.createIcons();
var hamburger = document.getElementById('nav-hamburger');
if (hamburger) hamburger.addEventListener('click', toggleMobileMenu);
// 点击 mobile menu 链接后自动收起
var mobileMenu = document.getElementById('nav-mobile-menu');
if (mobileMenu) {
mobileMenu.querySelectorAll('a').forEach(function(a) {
a.addEventListener('click', function() {
mobileMenu.classList.remove('open');
if (hamburger) hamburger.setAttribute('aria-expanded', 'false');
});
});
}
// 页内锚点平滑滚动
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' });
}
});
// 汉堡菜单
var burger = document.getElementById('nav-burger');
var mobile = document.getElementById('nav-mobile-menu');
if (burger && mobile) {
burger.addEventListener('click', function (e) {
e.stopPropagation();
var open = mobile.classList.toggle('open');
burger.setAttribute('aria-expanded', open ? 'true' : 'false');
});
});
document.addEventListener('click', function (e) {
if (!mobile.contains(e.target) && e.target !== burger) {
mobile.classList.remove('open');
}
});
}
// 登录态：CTA 换成「进入系统」
var user = getAuthUser();
if (user) {
var cta = document.getElementById('nav-cta');
if (cta) {
cta.innerHTML =
'<a class="btn primary" href="/app/">进入系统 · ' +
(user.realName || user.username).replace(/[<>&"]/g, '') +
'</a>';
}
}
})();
web/assets/shots/finance.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 194 KiB

web/assets/shots/inventory_list.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 270 KiB

web/assets/shots/mobile.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 55 KiB

web/assets/shots/partners.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 241 KiB

web/assets/shots/settings.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 148 KiB

web/assets/shots/stock_in_list.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 203 KiB

web/assets/shots/stock_out_list.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 199 KiB

web/assets/site.css
+298
View File
@@ -0,0 +1,298 @@
/* ============================================================
岩美酒库官网 · 组件与版式层
原子样式一对一镜像 .superpowers/prototype/atoms.css（.btn/.card/.badge/.kpi/.chip），
营销版式（nav/hero/section/footer）用同一批 token 组合。
============================================================ */
*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{margin:0; font-family:var(--font); color:var(--text); background:var(--bg); font-size:var(--mk-body); line-height:1.7; -webkit-font-smoothing:antialiased;}
img{max-width:100%; display:block;}
a{color:var(--primary); text-decoration:none;}
a:hover{text-decoration:underline;}
h1,h2,h3{color:var(--heading); line-height:1.3; margin:0;}
.container{max-width:var(--mk-maxw); margin:0 auto; padding:0 24px;}
.ic{width:18px; height:18px; stroke:currentColor; stroke-width:1.8; fill:none; stroke-linecap:round; stroke-linejoin:round; flex:none;}
/* ---------- 原子：按钮（镜像 atoms .btn / .primary / .ghost / .lg / .sm） ---------- */
.btn{height:38px; padding:0 16px; border-radius:var(--r-md); font-size:var(--fs-body); font-weight:600; display:inline-flex; align-items:center; justify-content:center; gap:7px; cursor:pointer; border:1px solid transparent; transition:background-color .15s,border-color .15s,color .15s; font-family:var(--font); text-decoration:none !important;}
.btn .ic{width:16px; height:16px;}
.btn.ghost{background:var(--surface); border-color:var(--border); color:var(--text);}
.btn.ghost:hover{background:var(--bg);}
.btn.primary{background:var(--primary); color:var(--on-primary);}
.btn.primary:hover{background:var(--primary-dark);}
.btn.lg{height:46px; padding:0 26px; font-size:15px; border-radius:var(--r-md);}
.btn.sm{height:32px; padding:0 12px; font-size:var(--fs-sm);}
.btn.onhero{background:var(--hero-glass-strong); color:var(--on-accent); border-color:transparent;}
.btn.onhero:hover{background:var(--hero-glass);}
.btn.wine{background:var(--accent); color:var(--on-accent);}
.btn.wine:hover{background:var(--brand-wine);}
/* ---------- 原子：卡片 / 徽章 / chip（镜像 atoms） ---------- */
.card{background:var(--surface); border:1px solid var(--border); border-radius:var(--r-lg); padding:22px;}
.badge{display:inline-flex; align-items:center; gap:5px; height:22px; padding:0 9px; border-radius:var(--r-pill); font-size:var(--fs-sm); font-weight:600;}
.badge::before{content:''; width:6px; height:6px; border-radius:50%; background:currentColor;}
.badge.ok{background:var(--success-bg); color:var(--success);}
.badge.warn{background:var(--warn-bg); color:var(--warn);}
.badge.info{background:var(--info-soft); color:var(--primary);}
.badge.wine{background:var(--accent-soft); color:var(--accent);}
.chip{display:inline-flex; align-items:center; gap:7px; height:34px; padding:0 12px; border:1px solid var(--border); border-radius:var(--r-md); background:var(--surface); font-size:var(--fs-sm); color:var(--text);}
/* ---------- 原子：KPI 卡（镜像 .kpi + .ic 色块） ---------- */
.kpi{background:var(--surface); border:1px solid var(--border); border-radius:var(--r-lg); padding:15px 16px;}
.kpi .khead{display:flex; align-items:flex-start; justify-content:space-between;}
.kpi .t{font-size:var(--fs-sm); color:var(--muted); padding-top:2px;}
.kpi .icbox{width:30px; height:30px; border-radius:var(--r-md); display:flex; align-items:center; justify-content:center;}
.kpi .icbox .ic{width:17px; height:17px;}
.kpi .v{font-size:24px; font-weight:700; color:var(--heading); margin-top:7px; letter-spacing:.3px; font-family:var(--font-mono);}
.kpi .d{font-size:var(--fs-xs); color:var(--muted); margin-top:5px;}
.ic-info{background:var(--info-soft); color:var(--primary);}
.ic-ok{background:var(--ok-soft); color:var(--success);}
.ic-warn{background:var(--warn-bg); color:var(--warn);}
.ic-wine{background:var(--accent-soft); color:var(--accent);}
/* ---------- 顶部导航 ---------- */
.nav{position:sticky; top:0; z-index:40; background:rgba(255,255,255,.92); backdrop-filter:blur(10px); border-bottom:1px solid var(--border);}
.nav-in{max-width:var(--mk-maxw); margin:0 auto; padding:0 24px; height:60px; display:flex; align-items:center; gap:26px;}
.nav-logo{display:flex; align-items:center; gap:10px; font-weight:800; font-size:17px; color:var(--heading); text-decoration:none !important; letter-spacing:.5px;}
.nav-logo img{width:30px; height:30px; border-radius:7px;}
.nav-links{display:flex; gap:22px; margin-left:6px;}
.nav-links a{color:var(--muted); font-size:14px; font-weight:500; text-decoration:none !important;}
.nav-links a:hover{color:var(--primary);}
.nav-cta{margin-left:auto; display:flex; gap:10px; align-items:center;}
.nav-burger{display:none; margin-left:auto; background:none; border:none; color:var(--heading); cursor:pointer; padding:6px;}
.nav-mobile{display:none; border-top:1px solid var(--border); background:var(--surface); padding:10px 24px 16px;}
.nav-mobile a{display:block; padding:10px 0; color:var(--text); font-size:15px; border-bottom:1px solid var(--border-subtle); text-decoration:none !important;}
.nav-mobile.open{display:block;}
/* ---------- Hero（品牌渐变 = 登录页品牌面板同源） ---------- */
.hero{background:var(--mk-hero-grad); color:var(--on-accent); padding:84px 0 0; overflow:hidden;}
.hero-in{max-width:var(--mk-maxw); margin:0 auto; padding:0 24px; text-align:center;}
.hero .badge-line{display:inline-flex; align-items:center; gap:8px; background:var(--hero-glass); border-radius:var(--r-pill); padding:6px 14px; font-size:var(--fs-sm); color:var(--on-accent-faint);}
.hero .badge-line b{color:var(--on-accent); font-weight:600;}
.hero h1{color:var(--on-accent); font-size:var(--mk-display); font-weight:800; letter-spacing:1px; margin:26px auto 18px; max-width:17em;}
.hero .lead{color:var(--on-accent-faint); font-size:var(--mk-lead); max-width:36em; margin:0 auto 30px; line-height:1.8;}
.hero .cta-row{display:flex; gap:14px; justify-content:center; flex-wrap:wrap;}
.hero .mini{display:flex; gap:22px; justify-content:center; margin-top:22px; font-size:var(--fs-sm); color:var(--on-accent-faint); flex-wrap:wrap;}
.hero .mini span{display:inline-flex; align-items:center; gap:6px;}
.hero .shot{max-width:980px; margin:52px auto -2px; border-radius:var(--r-xl) var(--r-xl) 0 0; overflow:hidden; box-shadow:var(--sh-3); border:1px solid rgba(255,255,255,.18); border-bottom:none;}
.hero .shot img{width:100%;}
/* ---------- 区块 ---------- */
.section{padding:84px 0;}
.section.alt{background:var(--page);}
.sec-head{text-align:center; max-width:44em; margin:0 auto 46px;}
.sec-head .eyebrow{display:inline-flex; align-items:center; gap:7px; color:var(--accent); font-size:var(--fs-sm); font-weight:700; letter-spacing:2px; margin-bottom:12px;}
.sec-head .eyebrow::before,.sec-head .eyebrow::after{content:''; width:22px; height:1px; background:var(--accent); opacity:.5;}
.sec-head h2{font-size:var(--mk-h2); font-weight:800;}
.sec-head p{color:var(--muted); margin:14px 0 0;}
/* 模块卡网格 */
.grid{display:grid; gap:16px;}
.grid.c4{grid-template-columns:repeat(4,1fr);}
.grid.c3{grid-template-columns:repeat(3,1fr);}
.grid.c2{grid-template-columns:repeat(2,1fr);}
.feature .icbox{width:38px; height:38px; border-radius:var(--r-md); display:flex; align-items:center; justify-content:center; margin-bottom:14px;}
.feature .icbox .ic{width:20px; height:20px;}
.feature h3{font-size:var(--mk-h3); font-weight:700; margin-bottom:8px;}
.feature p{color:var(--muted); font-size:14px; margin:0; line-height:1.75;}
/* 截图对开区块 */
.split{display:grid; grid-template-columns:1fr 1fr; gap:48px; align-items:center;}
.split .shot{border-radius:var(--r-lg); overflow:hidden; border:1px solid var(--border); box-shadow:var(--sh-2);}
.split h2{font-size:var(--mk-h2); font-weight:800; margin-bottom:16px;}
.split .pts{display:flex; flex-direction:column; gap:14px; margin-top:22px;}
.split .pt{display:flex; gap:12px; align-items:flex-start;}
.split .pt .icbox{width:30px; height:30px; border-radius:var(--r-md); flex:none; display:flex; align-items:center; justify-content:center;}
.split .pt .icbox .ic{width:16px;height:16px;}
.split .pt b{display:block; color:var(--heading); font-size:15px;}
.split .pt span{color:var(--muted); font-size:14px;}
/* 审核流状态机 */
.flow{display:flex; align-items:stretch; gap:0; justify-content:center; flex-wrap:wrap;}
.flow .step{background:var(--surface); border:1px solid var(--border); border-radius:var(--r-lg); padding:18px 20px; width:200px; text-align:center;}
.flow .arrow{align-self:center; color:var(--faint); padding:0 10px; font-size:20px;}
.flow .step .num{width:28px; height:28px; border-radius:50%; background:var(--info-soft); color:var(--primary); font-weight:700; display:flex; align-items:center; justify-content:center; margin:0 auto 10px; font-size:var(--fs-body);}
.flow .step b{display:block; color:var(--heading); font-size:15px; margin-bottom:5px;}
.flow .step span{color:var(--muted); font-size:var(--fs-sm);}
/* 角色权限表 */
table.roles{width:100%; border-collapse:collapse; background:var(--surface); border:1px solid var(--border); border-radius:var(--r-lg); overflow:hidden; font-size:14px;}
table.roles th{background:var(--th-bg); color:var(--muted); font-size:var(--fs-sm); font-weight:600; text-align:left; padding:11px 14px; border-bottom:1px solid var(--border);}
table.roles td{padding:11px 14px; border-bottom:1px solid var(--border-subtle);}
table.roles tr:last-child td{border-bottom:none;}
table.roles .y{color:var(--success); font-weight:700;}
table.roles .n{color:var(--faint);}
/* 定价卡 */
.plans{display:grid; grid-template-columns:repeat(3,1fr); gap:18px; align-items:stretch;}
.plans.p4{grid-template-columns:repeat(4,1fr); gap:16px;}
.plans.p4 .plan{padding:26px 22px;}
.plans.p4 .plan .price{font-size:30px;}
.plan{background:var(--surface); border:1px solid var(--border); border-radius:var(--r-xl); padding:28px 26px; display:flex; flex-direction:column;}
.plan.hot{border-color:var(--primary); box-shadow:var(--sh-2); position:relative;}
.plan.hot::before{content:'推荐'; position:absolute; top:-11px; left:50%; transform:translateX(-50%); background:var(--primary); color:var(--on-primary); font-size:var(--fs-xs); font-weight:700; padding:3px 12px; border-radius:var(--r-pill);}
.plan .pname{font-size:var(--fs-title); font-weight:700; color:var(--heading);}
.plan .price{font-size:34px; font-weight:800; color:var(--heading); margin:12px 0 2px; font-family:var(--font-mono);}
.plan .price small{font-size:14px; color:var(--muted); font-weight:400; font-family:var(--font);}
.plan .psub{color:var(--muted); font-size:var(--fs-sm); margin-bottom:18px;}
.plan ul{list-style:none; padding:0; margin:0 0 22px; display:flex; flex-direction:column; gap:9px; color:var(--text); font-size:14px;}
.plan ul li{display:flex; gap:8px; align-items:flex-start;}
.plan ul li .ic{width:15px; height:15px; color:var(--success); margin-top:4px;}
.plan .btn{margin-top:auto;}
/* FAQ */
.faq{max-width:760px; margin:0 auto; display:flex; flex-direction:column; gap:10px;}
.faq details{background:var(--surface); border:1px solid var(--border); border-radius:var(--r-lg); padding:0 20px;}
.faq summary{cursor:pointer; font-weight:600; color:var(--heading); padding:16px 0; font-size:15px; list-style:none; display:flex; justify-content:space-between; align-items:center;}
.faq summary::after{content:'+'; color:var(--faint); font-size:18px;}
.faq details[open] summary::after{content:'−';}
.faq details p{color:var(--muted); font-size:14px; margin:0 0 16px; line-height:1.8;}
/* CTA 横幅 */
.cta-banner{background:var(--mk-hero-grad); border-radius:var(--r-xl); padding:56px 32px; text-align:center; color:var(--on-accent);}
.cta-banner h2{color:var(--on-accent); font-size:var(--mk-h2); font-weight:800; margin-bottom:12px;}
.cta-banner p{color:var(--on-accent-faint); margin:0 0 26px;}
/* ---------- 页脚 ---------- */
.footer{background:var(--side-bg); color:var(--side-fg); padding:56px 0 30px; margin-top:84px;}
.footer a{color:var(--side-fg); text-decoration:none !important;}
.footer a:hover{color:#fff;}
.footer-grid{display:grid; grid-template-columns:2fr 1fr 1fr 1fr; gap:32px; max-width:var(--mk-maxw); margin:0 auto; padding:0 24px;}
.footer .fbrand{display:flex; align-items:center; gap:10px; color:#fff; font-weight:800; font-size:16px; margin-bottom:12px;}
.footer .fbrand img{width:28px; height:28px; border-radius:6px;}
.footer .fdesc{font-size:var(--fs-sm); line-height:1.8; max-width:26em;}
.footer h4{color:#fff; font-size:var(--fs-body); font-weight:700; margin:0 0 14px;}
.footer ul{list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:9px; font-size:var(--fs-sm);}
.footer-bottom{max-width:var(--mk-maxw); margin:40px auto 0; padding:22px 24px 0; border-top:1px solid rgba(255,255,255,.12); display:flex; justify-content:space-between; gap:12px; flex-wrap:wrap; font-size:var(--fs-xs); color:var(--side-fg);}
/* ---------- 响应式 ---------- */
@media (max-width:1024px){
.grid.c4{grid-template-columns:repeat(2,1fr);}
.plans,.plans.p4{grid-template-columns:repeat(2,1fr);}
.split{grid-template-columns:1fr;}
.footer-grid{grid-template-columns:1fr 1fr;}
}
@media (max-width:640px){
.plans,.plans.p4{grid-template-columns:1fr; max-width:440px; margin:0 auto;}
}
@media (max-width:720px){
.nav-links,.nav-cta .btn.ghost{display:none;}
.nav-burger{display:block;}
.grid.c4,.grid.c3,.grid.c2{grid-template-columns:1fr;}
.section{padding:56px 0;}
.hero{padding-top:56px;}
.flow{flex-direction:column; align-items:center;}
.flow .arrow{transform:rotate(90deg); padding:6px 0;}
.flow .step{width:100%; max-width:320px;}
}
/* 五端网格 */
.grid.plat5{grid-template-columns:repeat(5,1fr);}
@media (max-width:1024px){ .grid.plat5{grid-template-columns:repeat(3,1fr);} }
@media (max-width:720px){ .grid.plat5{grid-template-columns:repeat(2,1fr);} }
/* ---------- Auth 两栏卡片（镜像 App login.html/register.html 版式） ---------- */
.auth-wrap{min-height:calc(100vh - 60px); display:flex; align-items:center; justify-content:center; padding:40px 24px; background:var(--page);}
.auth{display:grid; grid-template-columns:minmax(0,1fr) 420px; width:100%; max-width:880px; background:var(--surface); border:1px solid var(--border); border-radius:var(--r-xl); overflow:hidden; box-shadow:var(--sh-3);}
.auth.reg{grid-template-columns:minmax(0,380px) minmax(0,1fr); max-width:940px;}
.auth-brand{background:var(--mk-hero-grad); color:var(--side-active-fg); padding:48px 40px; display:flex; flex-direction:column; min-height:480px;}
.auth-brand .mk{width:64px; height:64px; border-radius:15px;}
.auth-brand .bname{font-size:var(--fs-display); font-weight:800; letter-spacing:1px; margin:24px 0 8px; color:var(--side-active-fg);}
.auth-brand .btag{font-size:var(--fs-body); color:var(--side-fg); line-height:1.7; max-width:280px;}
.auth-brand .pts{margin-top:auto; display:flex; flex-direction:column; gap:14px;}
.auth-brand .pt{display:flex; align-items:center; gap:11px; font-size:var(--fs-sm); color:var(--side-fg);}
.auth-brand .pt .pi{width:30px; height:30px; border-radius:var(--r-md); background:var(--hero-glass); display:flex; align-items:center; justify-content:center; flex:none; color:var(--side-active-fg);}
.auth-brand .pt .ic{width:16px; height:16px;}
.auth-brand .steps{margin-top:36px; display:flex; flex-direction:column;}
.auth-brand .step{display:flex; gap:13px; position:relative; padding-bottom:22px;}
.auth-brand .step:last-child{padding-bottom:0;}
.auth-brand .step:not(:last-child)::before{content:''; position:absolute; left:14px; top:30px; bottom:0; width:2px; background:var(--hero-glass);}
.auth-brand .step .si{width:29px; height:29px; border-radius:50%; background:var(--hero-glass); color:var(--side-active-fg); display:flex; align-items:center; justify-content:center; font-weight:700; font-size:var(--fs-body); flex:none; z-index:1;}
.auth-brand .step.done .si{background:var(--side-active-fg); color:var(--side-active-bg);}
.auth-brand .step .st{font-size:var(--fs-sm); line-height:1.45; color:var(--side-fg);}
.auth-brand .step .st b{display:block; color:var(--side-active-fg); font-weight:600; font-size:var(--fs-body);}
.auth-form{padding:44px 40px; display:flex; flex-direction:column; justify-content:center;}
.auth-form h1{font-size:var(--fs-h1); color:var(--heading); font-weight:700; margin:0 0 6px;}
.auth-form .alead{font-size:var(--fs-sm); color:var(--muted); margin:0 0 24px;}
.field{margin-bottom:14px;}
.field label{display:block; font-size:var(--fs-sm); color:var(--muted); margin-bottom:6px;}
.field label .req{color:var(--danger); margin-left:2px;}
.input{height:38px; width:100%; background:var(--surface); border:1px solid var(--border); border-radius:var(--r-md); padding:0 11px; font-size:var(--fs-body); color:var(--text); outline:none; font-family:var(--font);}
.input:focus{border-color:var(--primary); box-shadow:0 0 0 3px var(--brand50);}
.input::placeholder{color:var(--faint);}
textarea.input{height:auto; min-height:64px; padding:9px 11px; resize:vertical;}
.grid2f{display:grid; grid-template-columns:1fr 1fr; gap:14px;}
.field .hint{font-size:var(--fs-xs); color:var(--faint); margin-top:5px;}
.field .ferr{font-size:var(--fs-xs); color:var(--danger); margin-top:5px; display:none;}
.field.error .input{border-color:var(--danger);}
.field.error .ferr{display:block;}
.auth-form .btn.primary{width:100%; justify-content:center;}
.auth-foot{margin-top:20px; text-align:center; font-size:var(--fs-sm); color:var(--muted);}
.auth-alert{display:none; background:var(--danger-bg); border:1px solid var(--danger); color:var(--danger); border-radius:var(--r-md); padding:10px 12px; font-size:var(--fs-body); margin-bottom:14px;}
.auth-alert.show{display:block;}
.auth-ok{background:var(--success-bg); border:1px solid var(--success); color:var(--success); border-radius:var(--r-md); padding:14px; font-size:var(--fs-body); margin-bottom:14px;}
.auth-ok code{font-family:var(--font-mono); font-weight:700; font-size:17px;}
@media (max-width:860px){ .auth,.auth.reg{grid-template-columns:1fr; max-width:480px;} .auth-brand{min-height:auto; padding:34px 32px;} .auth-brand .pts,.auth-brand .steps{display:none;} .auth-form{padding:32px 28px;} .grid2f{grid-template-columns:1fr;} }
/* ---------- Checkout（确认订单，仿原型 screens/checkout.html） ---------- */
.crumb{display:flex; align-items:center; gap:7px; font-size:var(--fs-sm); color:var(--muted); margin-bottom:12px;}
.crumb a{color:var(--muted); text-decoration:none !important;}
.crumb a:hover{color:var(--primary);}
.co-title{font-size:var(--fs-h1); font-weight:700; color:var(--heading); margin:0 0 20px;}
.checkout{display:grid; grid-template-columns:minmax(0,1fr) 360px; gap:22px; align-items:start; max-width:1020px;}
.co-card{background:var(--surface); border:1px solid var(--border); border-radius:var(--r-lg); padding:20px 22px; margin-bottom:18px;}
.co-card h2{margin:0 0 14px; font-size:var(--fs-h2); color:var(--heading);}
.seg{display:inline-flex; background:var(--bg); border:1px solid var(--border); border-radius:var(--r-md); padding:3px; gap:3px; margin-bottom:6px;}
.seg-btn{border:none; background:transparent; padding:8px 18px; border-radius:calc(var(--r-md) - 3px); font-size:var(--fs-body); color:var(--muted); cursor:pointer; font-family:var(--font); display:inline-flex; align-items:center; gap:7px;}
.seg-btn.on{background:var(--surface); color:var(--heading); font-weight:600; box-shadow:var(--sh-1);}
.seg-tip{font-size:var(--fs-xs); color:var(--success); background:var(--ok-soft); padding:1px 8px; border-radius:var(--r-pill); font-weight:600;}
.seg-label{font-size:var(--fs-sm); color:var(--muted); margin:14px 0 8px;}
.co-feats{list-style:none; padding:0; margin:12px 0 4px; display:flex; flex-direction:column; gap:8px; font-size:14px; color:var(--text);}
.co-feats li{display:flex; gap:8px; align-items:flex-start;}
.co-feats li .ic{width:15px; height:15px; color:var(--success); margin-top:3px; flex:none;}
.co-item{display:flex; align-items:center; gap:14px; padding:4px 0;}
.co-item .co-ic{width:46px; height:46px; border-radius:var(--r-md); background:var(--brand50); color:var(--primary); display:flex; align-items:center; justify-content:center; flex:none;}
.co-item .co-ic .ic{width:24px; height:24px;}
.co-item .co-meta b{display:block; font-size:var(--fs-body); color:var(--heading); font-weight:600;}
.co-item .co-meta span{font-size:var(--fs-sm); color:var(--muted);}
.co-item .co-amt{margin-left:auto; font-size:18px; font-weight:700; color:var(--heading); font-family:var(--font-mono);}
.co-pay{display:flex; flex-direction:column; gap:10px;}
.co-pay .pm{display:flex; align-items:center; gap:12px; border:1.5px solid var(--border); border-radius:var(--r-md); padding:13px 15px;}
.co-pay .pm.on{border-color:var(--primary); box-shadow:0 0 0 3px var(--brand50);}
.co-pay .pm.off{opacity:.62;}
.co-pay .pic{width:34px; height:34px; border-radius:8px; display:flex; align-items:center; justify-content:center; flex:none; color:#fff;}
.co-pay .pic .ic{width:19px; height:19px;}
.co-pay .nm b{display:block; font-size:var(--fs-body); color:var(--heading); font-weight:600;}
.co-pay .nm span{font-size:var(--fs-xs); color:var(--muted);}
.co-pay .radio{margin-left:auto; width:18px; height:18px; border-radius:50%; border:2px solid var(--border); flex:none; position:relative;}
.co-pay .pm.on .radio{border-color:var(--primary);}
.co-pay .pm.on .radio::after{content:''; position:absolute; inset:3px; border-radius:50%; background:var(--primary);}
.co-summary{position:sticky; top:84px; margin-bottom:0;}
.sum-row{display:flex; justify-content:space-between; font-size:var(--fs-body); color:var(--text); padding:7px 0;}
.sum-row.muted{color:var(--muted); font-size:var(--fs-sm);}
.sum-div{height:1px; background:var(--border-subtle); margin:8px 0;}
.sum-total{display:flex; justify-content:space-between; align-items:baseline; padding-top:6px;}
.sum-total .lab{font-size:var(--fs-body); color:var(--heading); font-weight:600;}
.sum-total .val{font-size:var(--fs-display); font-weight:800; color:var(--primary); font-family:var(--font-mono); letter-spacing:-.5px;}
.co-summary .fine{font-size:var(--fs-xs); color:var(--faint); text-align:center; margin-top:12px; line-height:1.6;}
/* ---------- 支付结果页 ---------- */
.result{text-align:center; max-width:520px; margin:0 auto; padding:24px 16px;}
.result .ring{width:72px; height:72px; border-radius:50%; display:flex; align-items:center; justify-content:center; margin:0 auto 18px;}
.result .ring .ic{width:36px; height:36px;}
.result .ring.good{background:var(--ok-soft); color:var(--success);}
.result .ring.wait{background:var(--brand50); color:var(--primary);}
.result h2{margin:0 0 10px; font-size:var(--fs-h1); color:var(--heading);}
.result p{margin:0 0 22px; font-size:var(--fs-body); color:var(--muted); line-height:1.8;}
.result .ono{display:inline-flex; align-items:center; gap:8px; font-family:var(--font-mono); font-size:var(--fs-body); background:var(--bg); border:1px dashed var(--border); border-radius:var(--r-md); padding:10px 16px; color:var(--heading); margin-bottom:22px;}
.result .acts{display:flex; gap:10px; justify-content:center; flex-wrap:wrap;}
@media (max-width:900px){
.checkout{grid-template-columns:1fr;}
.co-summary{position:static;}
}
web/assets/tokens.css
+54
View File
@@ -0,0 +1,54 @@
/* ============================================================
岩美酒库官网 · 令牌层
单一真相源：.superpowers/prototype/tokens.css 主题 A（经典蓝）1:1 拷贝
+ 「营销扩展」段（仅官网用的大字号/容器宽，App 无此场景）。
规则：页面与组件只引用 var(--token)，禁硬编码 hex。
同步纪律：App 原型 token 变更时，此文件对应值需同步。
============================================================ */
:root{
/* —— 与原型 :root 完全一致 —— */
--sp-1:4px; --sp-2:8px; --sp-3:12px; --sp-4:16px; --sp-5:20px; --sp-6:24px; --sp-8:32px; --sp-10:40px;
--r-sm:4px; --r-md:6px; --r-lg:10px; --r-xl:14px; --r-pill:999px;
--fs-display:28px; --fs-h1:21px; --fs-h2:17px; --fs-title:15px; --fs-body:13px; --fs-sm:12px; --fs-xs:11px;
--font:-apple-system,BlinkMacSystemFont,"PingFang SC","Microsoft YaHei","Inter",sans-serif;
--font-mono:"JetBrains Mono","SF Mono",ui-monospace,monospace;
--sh-1:0 1px 3px var(--shadow); --sh-2:0 4px 14px var(--shadow); --sh-3:0 18px 50px var(--shadow);
--scrim:rgba(15,20,30,.42); --hero-glass:rgba(255,255,255,.16); --hero-glass-strong:rgba(255,255,255,.24);
--brand-deep:#0F3057; --brand-mid:#1B4F8E; --brand-wine:#8B2331; --brand-dot:#C97B86;
--on-accent:#FFFFFF; --on-accent-faint:rgba(255,255,255,.72);
--toast-bg:#1F2330;
/* —— 主题 A（经典蓝）—— */
--page:#E7EBF1; --bg:#F5F7FA; --surface:#FFFFFF; --border:#DCE2EB; --border-subtle:#ECEFF4;
--text:#232934; --heading:#1B2430; --title:#1B2430; --muted:#6E7888; --faint:#99A3B3;
--primary:#2563AC; --primary-dark:#154072; --on-primary:#FFFFFF; --brand400:#4F86C6; --brand50:#EEF4FB; --accent:#8B2331;
--success:#2E8B57; --danger:#D14343; --warn:#E08E00;
--info-soft:#EEF4FB; --ok-soft:#E8F5EE; --accent-soft:#FAEEF0;
--success-bg:#E8F5EE; --danger-bg:#FDECEC; --warn-bg:#FFF4DB;
--th-bg:#F7F9FC; --row-hover:#EEF4FB; --shadow:rgba(20,40,70,.20);
--side-bg:#163A6C; --side-fg:#C4D6ED; --side-active-bg:#2C6BB3; --side-active-fg:#FFFFFF;
/* —— 营销扩展（官网独有场景；App 端无对应 token）—— */
--mk-display:clamp(34px, 5vw, 54px); /* hero 大标题 */
--mk-h2:clamp(24px, 3.2vw, 34px); /* 区块标题 */
--mk-h3:19px;
--mk-lead:clamp(15px, 1.6vw, 18px); /* hero/区块引言 */
--mk-body:15px; /* 营销正文（App fs-body 13 在长文场景过小） */
--mk-maxw:1120px; /* 内容容器宽 */
--mk-hero-grad:linear-gradient(150deg, var(--side-bg), var(--side-active-bg)); /* 与登录页品牌面板同源 */
}
/* ---------- 兼容别名层：旧 color.css 词汇 → 真相源 token ----------
仅供 docs.css / legal.css 等二级页面样式过渡使用；新样式禁止引用这些别名。 */
:root{
--brand-50:var(--brand50); --brand-100:#DDE9F7; --brand-200:#C3D8F0; --brand-300:#9FC0E4;
--brand-400:var(--brand400); --brand-500:var(--primary); --brand-600:#1B4F8E; --brand-700:var(--primary-dark); --brand-900:#0A1F3B;
--gray-0:#FFFFFF; --gray-25:var(--bg); --gray-50:#EEF1F5; --gray-100:#E3E7ED; --gray-300:#C6CDD8;
--gray-500:var(--faint); --gray-700:var(--muted); --gray-800:var(--text); --gray-900:var(--heading);
--fg-default:var(--text); --fg-muted:var(--muted); --fg-subtle:var(--faint); --fg-link:var(--primary);
--border-default:var(--border); --info-50:var(--info-soft); --info-500:#2F7BD0; --info-700:#1D5A9E;
--radius-sm:var(--r-sm); --radius-md:var(--r-md); --radius-lg:var(--r-lg);
--text-xs:12px; --text-sm:13px; --text-md:15px; --text-lg:17px; --text-xl:19px; --text-2xl:24px;
--duration-fast:.15s; --ease-standard:ease; --ring-focus:0 0 0 3px var(--brand50);
}