/* ══════════════════════════════════════════════════════════════════════════ 分站店面主题(P-V 双皮版) 一份 HTML,两张皮:皮由切换, 所有差异都落在本文件末段的 [data-skin="…"] 覆盖块里,模板侧零分支。 · ledger 清账 —— 扁平、精确、几乎不用阴影;商品是一行行的条目,价格右对齐成一列。 · counter 柜台 —— 白卡片浮在带主色微光的底上,阴影由主色调出;详情页托底操作条。整套皮由 --sub-primary 一个变量驱动:浅底/描边/阴影/hover 一律 color-mix() 现场派生, 所以站长换成任何主色都不会塌(layout 只注入这一个变量)。约束:零外链、零网络字体、零 JS 依赖;不做暗色(店面是浅色成品)。后台(body.admin)与安装向导(.setup-*)不做多皮,但共用同一套 token 与组件。 ══════════════════════════════════════════════════════════════════════════ */ :root { /* ── 品牌(唯一由 PHP 注入的变量)── */ --sub-primary: #2563eb; /* ── 兼容 token:既有模板/代码在用,名字不可改 ── */ --sub-text: #14161a; /* = --ink */ --sub-muted: #6a7080; /* = --muted */ --sub-border: #e4e6eb; /* = --line */ --sub-bg-soft: #f7f8fa; /* 后台底色 */ --sub-danger: #b42318; /* = --danger */ /* ── 语义色 ── */ --ink: var(--sub-text); --ink-2: #3c424e; /* 正文次级(步骤/说明) */ --muted: var(--sub-muted); --muted-2: #7a808c; /* 页脚/细则 */ --faint: #a8aeb9; /* placeholder */ --line: var(--sub-border); --line-soft: #f0f1f4; /* 发丝线(行间分隔) */ --surface: #ffffff; --ground: #fcfcfd; /* 由皮覆盖成带主色微光的底 */ --ok: #166534; --ok-soft: #f0f7f2; --warn: #8a5a00; --warn-soft: #fffbeb; --warn-line: #fcd34d; --danger: var(--sub-danger); --danger-soft:#fef2f2; --danger-line:#fecaca; --off: #8a8f9a; /* 售罄/停用 */ --off-soft: #f1f2f4; /* ── 主色派生(全部 color-mix,任何主色都成立)── */ --brand-tint: color-mix(in srgb, var(--sub-primary) 5%, #fff); --brand-tint-2: color-mix(in srgb, var(--sub-primary) 10%, #fff); --brand-edge: color-mix(in srgb, var(--sub-primary) 16%, #fff); --brand-line: color-mix(in srgb, var(--sub-primary) 12%, var(--line)); --brand-deep: color-mix(in srgb, var(--sub-primary) 78%, var(--ink)); /* ── 间距阶 ── */ --sp-4: 4px; --sp-8: 8px; --sp-12: 12px; --sp-16: 16px; --sp-20: 20px; --sp-24: 24px; --sp-32: 32px; --sp-40: 40px; /* ── 圆角阶 ── */ --r-xs: 4px; --r-sm: 6px; --r-md: 9px; --r-lg: 11px; --r-xl: 14px; --r-pill: 999px; /* ── 阴影阶(暖影由主色调出,不是灰糊)── */ --sh-0: none; --sh-1: 0 1px 2px rgba(16, 20, 32, .05); --sh-2: 0 1px 2px rgba(16, 20, 32, .05), 0 8px 20px -14px color-mix(in srgb, var(--sub-primary) 55%, #101420); --sh-3: 0 1px 2px rgba(16, 20, 32, .06), 0 14px 30px -16px color-mix(in srgb, var(--sub-primary) 65%, #101420); /* ── 字阶 ── */ --fs-11: 11.5px; --fs-12: 12px; --fs-125: 12.5px; --fs-13: 13px; --fs-135: 13.5px; --fs-14: 14px; --fs-15: 15px; --fs-155: 15.5px; --fs-16: 16px; --fs-19: 19px; --fs-21: 21px; --fs-28: 28px; --fs-31: 31px; --fs-34: 34px; /* ── 层级阶 ── */ --z-base: 0; --z-sticky: 10; --z-dock: 20; --z-top: 30; /* ── 动效 ── */ --ease: .18s ease; } /* ══════════ 基座 ══════════ */ * { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; } body { margin: 0; color: var(--ink); background: var(--ground); font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "HarmonyOS Sans SC", "Source Han Sans SC", "Microsoft YaHei", system-ui, "Segoe UI", sans-serif; font-size: var(--fs-15); line-height: 1.6; -webkit-font-smoothing: antialiased; min-height: 100vh; display: flex; flex-direction: column; } a { color: var(--sub-primary); text-decoration: none; } button, input, select, textarea { font: inherit; color: inherit; } img { max-width: 100%; height: auto; } /* 数字一律等宽对齐 —— 价格、单号、时间扫一眼就能比 */ .num, .product-price, .stat-num { font-variant-numeric: tabular-nums; font-feature-settings: "tnum" 1; } :focus-visible { outline: 2px solid var(--sub-primary); outline-offset: 2px; border-radius: var(--r-xs); } #main:focus { outline: none; } /* 跳过导航直达正文(键盘/读屏);平时移出屏外,聚焦才落下 */ .skip-link { position: fixed; z-index: var(--z-sticky); top: var(--sp-8); left: var(--sp-8); min-height: 44px; display: inline-flex; align-items: center; padding: var(--sp-8) var(--sp-16); border-radius: var(--r-sm); background: var(--ink); color: #fff; font-weight: 600; transform: translateY(-160%); transition: transform var(--ease); } .skip-link:focus { transform: translateY(0); } .container { width: 100%; max-width: 860px; margin: 0 auto; padding: 0 var(--sp-16); } /* ══════════ 顶栏 / 公告 ══════════ */ .site-header { position: sticky; top: 0; z-index: var(--z-sticky); } .header-inner { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-12); padding: var(--sp-12) var(--sp-16); min-height: 56px; } .brand { display: flex; align-items: center; gap: var(--sp-8); color: var(--ink); font-weight: 640; letter-spacing: -.01em; font-size: var(--fs-155); min-width: 0; } .brand-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .brand-logo { height: 24px; width: auto; flex: none; border-radius: var(--r-xs); } .brand-mark { width: 24px; height: 24px; flex: none; border-radius: 7px; background: var(--sub-primary); color: #fff; font-size: var(--fs-12); font-weight: 700; line-height: 1; display: flex; align-items: center; justify-content: center; } .nav { display: flex; gap: var(--sp-12); font-size: var(--fs-13); } .nav a { color: var(--muted); display: inline-flex; align-items: center; min-height: 44px; /* 触摸目标 */ transition: color var(--ease); } .nav a:hover { color: var(--ink); } .announce { font-size: var(--fs-125); color: var(--ink-2); } .announce-inner { display: flex; align-items: flex-start; gap: var(--sp-8); padding: var(--sp-8) var(--sp-16); } .announce-icon { width: 14px; height: 14px; flex: none; margin-top: 3px; color: var(--sub-primary); } /* ══════════ 主区 / 页脚 ══════════ */ main.container { flex: 1 0 auto; padding: var(--sp-16) var(--sp-16) var(--sp-40); } h1, .page-title { font-size: var(--fs-21); font-weight: 640; letter-spacing: -.02em; line-height: 1.35; margin: 0 0 var(--sp-16); text-wrap: balance; } h2.sec { font-size: var(--fs-16); font-weight: 620; letter-spacing: -.01em; margin: var(--sp-24) 0 var(--sp-8); } .lede { margin: -8px 0 var(--sp-16); font-size: var(--fs-14); } .muted { color: var(--muted); } .fine { margin-top: var(--sp-12); font-size: var(--fs-12); color: var(--muted-2); line-height: 1.65; } .empty-hint { padding: var(--sp-32) 0; text-align: center; } .state-page { padding: var(--sp-24) 0; } .actions { margin: var(--sp-16) 0 0; } .notes { margin: var(--sp-8) 0 0; padding-left: 20px; font-size: var(--fs-135); color: var(--ink-2); } .site-footer { flex: none; border-top: 1px solid var(--line); padding: var(--sp-20) 0 var(--sp-24); font-size: var(--fs-12); color: var(--muted-2); line-height: 1.7; } .footer-inner { display: flex; flex-direction: column; gap: var(--sp-4); } .footer-contact { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--sp-4) var(--sp-16); } .footer-note { margin: 0; } /* ══════════ 徽章 ══════════ */ .badge { display: inline-flex; align-items: center; font-size: var(--fs-11); font-weight: 560; line-height: 1.5; border-radius: var(--r-pill); padding: 3px 9px; background: var(--off-soft); color: var(--muted); border: 1px solid transparent; white-space: nowrap; } .badge.ok { background: var(--brand-tint-2); color: var(--brand-deep); } .badge.low { background: var(--warn-soft); color: var(--warn); } .badge.out { background: var(--off-soft); color: var(--off); } /* ══════════ 交付方式(一等信息)══════════ */ .deliv { display: inline-flex; align-items: center; gap: 5px; font-size: var(--fs-125); color: var(--muted); min-width: 0; } .deliv svg { width: 13px; height: 13px; flex: none; color: var(--sub-primary); } .deliv-sub { color: var(--muted-2); } .deliv-sub::before { content: " · "; } /* ══════════ 商品列表(扁平子元素 + grid-template-areas,由皮编排)══════════ */ .product-grid { list-style: none; margin: 0; padding: 0; } .product-item { margin: 0; } .product-card { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; column-gap: var(--sp-12); color: var(--ink); position: relative; transition: background var(--ease), border-color var(--ease), box-shadow var(--ease); } .product-card > .product-name { grid-area: name; font-weight: 560; letter-spacing: -.005em; line-height: 1.4; min-width: 0; } .product-card > .badge { grid-area: stock; justify-self: end; } .product-card > .deliv { grid-area: deliv; } .product-card > .product-price { grid-area: price; justify-self: end; } .product-card.sold-out { opacity: .58; pointer-events: none; } .product-price { font-size: var(--fs-19); font-weight: 660; letter-spacing: -.02em; line-height: 1.1; } .product-price small { font-size: var(--fs-12); font-weight: 500; color: var(--muted); margin-right: 1px; } .product-price.big { font-size: var(--fs-31); font-weight: 680; letter-spacing: -.03em; } .product-price.big small { font-size: var(--fs-15); font-weight: 520; } /* ══════════ 商品详情 ══════════ */ .pd-title { font-size: var(--fs-19); font-weight: 640; letter-spacing: -.015em; line-height: 1.4; margin: 0; } .pd-headline { margin-top: var(--sp-12); display: flex; align-items: center; flex-wrap: wrap; gap: var(--sp-8) var(--sp-12); } .pd-headline .product-price { margin-right: auto; } /* 编号步骤 = 真实流程 */ .flow { margin-top: var(--sp-16); } .flow-title { display: flex; align-items: center; gap: 6px; margin: 0; font-size: var(--fs-125); font-weight: 600; color: var(--brand-deep); } .flow-title svg { width: 14px; height: 14px; flex: none; } .flow-steps { margin: var(--sp-8) 0 0; padding: 0; list-style: none; counter-reset: step; } .flow-steps li { counter-increment: step; position: relative; padding-left: 26px; font-size: var(--fs-135); color: var(--ink-2); } .flow-steps li::before { content: counter(step); position: absolute; left: 0; top: 4px; width: 18px; height: 18px; border-radius: 5px; font-size: var(--fs-11); font-weight: 640; line-height: 1; display: flex; align-items: center; justify-content: center; } /* 托底操作条:counter 皮吸底,ledger 皮由 CSS 降级成常规块(无 PHP 分支) */ .dock { display: flex; align-items: center; gap: var(--sp-12); margin-top: var(--sp-16); } .dock-price { flex: none; margin: 0; display: flex; flex-direction: column; } .dock-price .k { font-size: var(--fs-11); color: var(--muted); line-height: 1.3; } .dock-price .v { font-size: 17px; font-weight: 680; letter-spacing: -.02em; line-height: 1.2; } .dock-cta { flex: 1; margin-top: 0; } /* ══════════ 表单 ══════════ */ .form { max-width: 460px; } .form.wide { max-width: 640px; } .form label { display: block; margin: var(--sp-16) 0 6px; font-size: var(--fs-125); color: var(--ink-2); } .form label:first-of-type { margin-top: var(--sp-12); } .form input, .form textarea, .form select { width: 100%; min-height: 44px; padding: 11px 12px; border: 1px solid #d9dce3; border-radius: var(--r-md); background: var(--surface); font-size: var(--fs-15); transition: border-color var(--ease), box-shadow var(--ease); } .form textarea { min-height: 96px; line-height: 1.6; } .form input::placeholder, .form textarea::placeholder { color: var(--faint); } .form input:focus, .form textarea:focus, .form select:focus { border-color: var(--sub-primary); box-shadow: 0 0 0 3px var(--brand-tint-2); outline: none; } .form.wide textarea { font-family: ui-monospace, Menlo, Consolas, monospace; font-size: var(--fs-13); } .req { color: var(--danger); } .btn { display: inline-flex; align-items: center; justify-content: center; margin-top: var(--sp-16); min-height: 46px; padding: 0 var(--sp-24); background: var(--sub-primary); color: #fff; border: 0; border-radius: var(--r-md); font-size: var(--fs-155); font-weight: 600; cursor: pointer; transition: filter var(--ease), box-shadow var(--ease); } .btn:hover { filter: brightness(.93); } .btn.small { min-height: 36px; padding: 0 var(--sp-16); font-size: var(--fs-13); margin-top: var(--sp-8); } .btn.ghost { background: var(--surface); color: var(--danger); border: 1px solid var(--danger-line); } .btn.ghost:hover { filter: none; background: var(--danger-soft); } .btn.ghost-link { background: var(--surface); color: var(--ink); border: 1px solid var(--line); } .btn.ghost-link:hover { filter: none; border-color: var(--sub-primary); color: var(--sub-primary); } /* ══════════ 提示块 / 定义列表 / 表格 ══════════ */ .notice { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); padding: var(--sp-12) var(--sp-16); font-size: var(--fs-135); line-height: 1.7; margin: var(--sp-16) 0; } .notice.danger { background: var(--danger-soft); border-color: var(--danger-line); color: var(--danger); } .deliver-box { background: var(--brand-tint); border-color: var(--brand-edge); } .ok-text { color: var(--ok); } .danger { color: var(--danger); } code { background: var(--sub-bg-soft); border: 1px solid var(--line-soft); padding: 1px 5px; border-radius: var(--r-xs); font-size: var(--fs-13); word-break: break-all; } /* 单笔信息展示用定义列表(不是数据表);手机上竖排,宽屏两列 */ .kv { margin: var(--sp-16) 0 0; padding: 0; font-size: var(--fs-14); } .kv-row { display: flex; flex-direction: column; gap: 2px; padding: var(--sp-12) 0; border-bottom: 1px solid var(--line-soft); } .kv-row:first-child { border-top: 1px solid var(--line); } .kv-row:last-child { border-bottom: 1px solid var(--line); } .kv dt { color: var(--muted); font-size: var(--fs-125); } .kv dd { margin: 0; color: var(--ink); min-width: 0; word-break: break-word; } .kv.tight .kv-row { padding: 6px 0; border: 0; } .kv.tight .kv-row:first-child { border-top: 0; } .table { width: 100%; border-collapse: collapse; margin-top: var(--sp-16); background: var(--surface); } .table th, .table td { text-align: left; padding: 9px var(--sp-12); border-bottom: 1px solid var(--line); font-size: var(--fs-14); vertical-align: top; } .table th { color: var(--muted); font-weight: 560; } .table.small-text th, .table.small-text td { font-size: var(--fs-12); padding: 6px var(--sp-8); } .w-num { width: 88px; } .result-block { margin-top: var(--sp-24); } /* ══════════════════════════════════════════════════════════════════════════ 皮 A · ledger 清账 —— 扁平精确的账目;主色只出现在操作与聚焦 ══════════════════════════════════════════════════════════════════════════ */ [data-skin="ledger"] { --ground: color-mix(in srgb, var(--sub-primary) 3%, #fcfcfd); } [data-skin="ledger"] .site-header { background: var(--ground); border-bottom: 1px solid var(--brand-line); } [data-skin="ledger"] .brand-mark { display: none; } [data-skin="ledger"] .brand { font-size: var(--fs-16); } [data-skin="ledger"] .nav a.cur { color: var(--ink); font-weight: 560; box-shadow: inset 0 -2px 0 var(--sub-primary); } [data-skin="ledger"] .announce { background: color-mix(in srgb, var(--sub-primary) 7%, #fff); border-bottom: 1px solid var(--brand-line); color: #5a6070; } [data-skin="ledger"] .announce-icon { display: none; } /* 商品:一行一条,价格右对齐成一列 */ [data-skin="ledger"] main.container { padding-top: 0; } [data-skin="ledger"] .page-title { font-size: var(--fs-12); font-weight: 500; letter-spacing: .12em; color: #858b98; margin: var(--sp-16) 0 var(--sp-8); } [data-skin="ledger"] .product-grid { background: var(--surface); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); margin: 0 calc(-1 * var(--sp-16)); } [data-skin="ledger"] .product-item + .product-item { border-top: 1px solid var(--line-soft); } [data-skin="ledger"] .product-card { grid-template-areas: "name price" "deliv stock"; row-gap: 3px; padding: var(--sp-16); } [data-skin="ledger"] .product-card:hover { background: color-mix(in srgb, var(--sub-primary) 4%, #fff); } [data-skin="ledger"] .product-card:hover::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 2px; background: var(--sub-primary); } [data-skin="ledger"] .product-card > .badge { background: none; padding: 0; font-size: var(--fs-11); font-weight: 500; color: var(--muted); } [data-skin="ledger"] .product-card > .badge.low { color: var(--warn); } [data-skin="ledger"] .product-card > .badge.out { color: var(--off); } [data-skin="ledger"] .product-card > .badge.ok { color: var(--muted); } /* 详情:大价格在上,步骤是发丝线分隔的清单 */ [data-skin="ledger"] .product-detail { padding-top: var(--sp-16); } [data-skin="ledger"] .pd-title { font-size: var(--fs-21); } [data-skin="ledger"] .pd-headline { flex-direction: column; align-items: flex-start; gap: var(--sp-4); } [data-skin="ledger"] .pd-headline .product-price { margin-right: 0; font-size: var(--fs-34); } [data-skin="ledger"] .pd-headline .badge { background: none; padding: 0; color: var(--muted); } [data-skin="ledger"] .flow { border-top: 1px solid var(--line); padding-top: var(--sp-12); } [data-skin="ledger"] .flow-steps li { padding: 11px 0 11px 30px; border-bottom: 1px solid var(--line-soft); } [data-skin="ledger"] .flow-steps li::before { top: 11px; width: 19px; height: 19px; background: var(--brand-tint-2); color: var(--sub-primary); } /* 托底条降级成常规块(同一段 HTML,只改 CSS) */ [data-skin="ledger"] .dock { display: block; } [data-skin="ledger"] .dock-price { display: none; } [data-skin="ledger"] .dock-cta { width: 100%; } [data-skin="ledger"] .notice { border-radius: var(--r-sm); } /* ══════════════════════════════════════════════════════════════════════════ 皮 B · counter 柜台 —— 白卡片浮在主色微光底上,阴影由主色调出 ══════════════════════════════════════════════════════════════════════════ */ [data-skin="counter"] { --ground: color-mix(in srgb, var(--sub-primary) 6%, #f7f7f9); } [data-skin="counter"] .site-header { background: rgba(255, 255, 255, .92); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); border-bottom: 1px solid rgba(20, 22, 26, .07); } [data-skin="counter"] .nav a.cur { color: var(--sub-primary); font-weight: 580; } [data-skin="counter"] .announce-inner { margin-top: var(--sp-12); padding: 10px var(--sp-12); background: var(--surface); border: 1px solid rgba(20, 22, 26, .07); border-radius: var(--r-lg); } [data-skin="counter"] .product-grid { display: flex; flex-direction: column; gap: var(--sp-12); } [data-skin="counter"] .product-card { grid-template-areas: "name stock" "deliv price"; align-items: start; padding: var(--sp-16); background: var(--surface); border: 1px solid rgba(20, 22, 26, .06); border-radius: var(--r-xl); box-shadow: var(--sh-2); } [data-skin="counter"] .product-card:hover { border-color: color-mix(in srgb, var(--sub-primary) 35%, transparent); box-shadow: var(--sh-3); } [data-skin="counter"] .product-card.sold-out { box-shadow: var(--sh-0); } [data-skin="counter"] .product-card > .product-name { font-size: var(--fs-155); font-weight: 600; } [data-skin="counter"] .product-card > .deliv, [data-skin="counter"] .product-card > .product-price { margin-top: var(--sp-12); padding-top: var(--sp-12); border-top: 1px dashed rgba(20, 22, 26, .1); align-self: end; } [data-skin="counter"] .product-card > .product-price { font-size: var(--fs-21); font-weight: 680; } [data-skin="counter"] .product-card .deliv-sub { display: none; } /* 详情:内容装在卡里,价格与按钮托在底部 */ [data-skin="counter"] .product-detail { margin-top: var(--sp-4); padding: var(--sp-16); background: var(--surface); border: 1px solid rgba(20, 22, 26, .06); border-radius: var(--r-xl); box-shadow: var(--sh-2); } [data-skin="counter"] .flow { background: var(--brand-tint); border: 1px solid var(--brand-edge); border-radius: var(--r-lg); padding: var(--sp-12) var(--sp-12) var(--sp-16); } [data-skin="counter"] .flow-steps { display: flex; flex-direction: column; gap: 7px; } [data-skin="counter"] .flow-steps li { padding-left: 22px; font-size: var(--fs-13); } [data-skin="counter"] .flow-steps li::before { top: 3px; width: 16px; height: 16px; border-radius: 50%; background: var(--sub-primary); color: #fff; font-size: 10.5px; } [data-skin="counter"] .dock { position: sticky; bottom: 0; z-index: var(--z-dock); margin: var(--sp-16) calc(-1 * var(--sp-16)) calc(-1 * var(--sp-16)); /* iPhone 刘海屏:底部留出安全区,托底条不被系统横条压住 */ padding: var(--sp-12) var(--sp-16) calc(var(--sp-16) + env(safe-area-inset-bottom)); background: rgba(255, 255, 255, .94); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); border-top: 1px solid rgba(20, 22, 26, .08); border-radius: 0 0 var(--r-xl) var(--r-xl); } [data-skin="counter"] .dock-cta { border-radius: var(--r-lg); } /* ══════════════════════════════════════════════════════════════════════════ 后台(body.admin)与安装向导 —— 不做多皮,共用 token,观感与店面统一 ══════════════════════════════════════════════════════════════════════════ */ body.admin { background: var(--sub-bg-soft); display: block; } .admin-header { background: var(--surface); border-bottom: 1px solid var(--line); } .admin-bar { max-width: 1080px; margin: 0 auto; display: flex; align-items: center; flex-wrap: wrap; gap: var(--sp-12) var(--sp-20); padding: var(--sp-12) var(--sp-16); } .admin-brand { font-weight: 700; letter-spacing: -.01em; } .admin-nav { display: flex; flex-wrap: wrap; gap: var(--sp-16); flex: 1; } .admin-nav a { color: var(--ink); font-size: var(--fs-14); display: inline-flex; align-items: center; min-height: 40px; padding-bottom: 2px; border-bottom: 2px solid transparent; transition: color var(--ease), border-color var(--ease); } .admin-nav a:hover { color: var(--sub-primary); } .admin-nav a.on { color: var(--sub-primary); border-bottom-color: var(--sub-primary); } .admin-logout { font-size: var(--fs-13); color: var(--muted); } .admin-main { max-width: 1080px; margin: 0 auto; padding: var(--sp-24) var(--sp-16) var(--sp-40); } .admin-main h1 { font-size: var(--fs-21); margin: 0 0 var(--sp-16); } .admin-main h2.sec { font-size: var(--fs-16); margin: var(--sp-32) 0 var(--sp-8); padding-top: var(--sp-16); border-top: 1px solid var(--line); } .admin-login { max-width: 380px; margin: var(--sp-40) auto; background: var(--surface); padding: var(--sp-24); border: 1px solid var(--line); border-radius: var(--r-xl); box-shadow: var(--sh-1); } .stat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: var(--sp-12); margin: var(--sp-8) 0; } .stat { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-xl); padding: var(--sp-16); } .stat.warn { border-color: var(--warn-line); background: var(--warn-soft); } .stat-num { font-size: var(--fs-28); font-weight: 700; letter-spacing: -.02em; line-height: 1.15; } .stat-label { color: var(--muted); font-size: var(--fs-13); margin-top: var(--sp-4); } .filter-bar { display: flex; gap: var(--sp-8); align-items: center; flex-wrap: wrap; margin: var(--sp-12) 0; } .filter-bar select, .filter-bar input { min-height: 40px; padding: 7px 10px; border: 1px solid #d9dce3; border-radius: var(--r-sm); background: var(--surface); } .filter-bar input { min-width: 220px; max-width: 100%; } tr.row-attn { background: var(--warn-soft); } .badge.status-success { background: var(--ok-soft); color: var(--ok); } .badge.status-pending_refund, .badge.status-exception { background: var(--danger-soft); color: var(--danger); } .badge.status-submit_pending { background: var(--warn-soft); color: var(--warn); } /* 安装向导 */ .setup-wrap { max-width: 780px; } .setup-steps { list-style: none; display: flex; flex-wrap: wrap; gap: var(--sp-8); padding: 0; margin: var(--sp-4) 0 var(--sp-24); } .setup-steps li { display: flex; align-items: center; gap: 6px; font-size: var(--fs-13); color: var(--muted); flex: 1; min-width: 110px; } .setup-dot { display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; border-radius: 50%; border: 1px solid var(--line); background: var(--surface); font-size: var(--fs-13); font-weight: 700; flex: 0 0 auto; } .setup-steps li.on { color: var(--ink); font-weight: 600; } .setup-steps li.on .setup-dot { border-color: var(--sub-primary); color: var(--sub-primary); } .setup-steps li.done .setup-dot { background: var(--sub-primary); color: #fff; border-color: var(--sub-primary); } .setup-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-xl); padding: var(--sp-20) var(--sp-16); box-shadow: var(--sh-1); } .setup-card h1 { font-size: var(--fs-19); } .setup-card .req { color: var(--danger); } .setup-card .price-warn { margin-top: var(--sp-4); } /* 外观设置(后台/向导共用:皮肤二选一 + 主色) */ fieldset.appearance { margin: var(--sp-24) 0 var(--sp-8); padding: var(--sp-16); border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--sub-bg-soft); } fieldset.appearance legend { padding: 0 var(--sp-8); font-size: var(--fs-14); font-weight: 620; color: var(--ink); } fieldset.appearance > p.muted { margin: 0; font-size: var(--fs-125); } fieldset.appearance > label { margin-top: var(--sp-16); } .skin-choice { display: grid; gap: var(--sp-12); margin: var(--sp-12) 0 var(--sp-4); } label.skin-option { /* 提到 label.xxx 的特异度,压过 .form label 的 display:block/margin */ display: flex; gap: var(--sp-12); align-items: flex-start; margin: 0; padding: var(--sp-12); cursor: pointer; font-size: var(--fs-14); color: var(--ink); border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--surface); transition: border-color var(--ease), box-shadow var(--ease); } label.skin-option:hover { border-color: color-mix(in srgb, var(--sub-primary) 40%, var(--line)); } label.skin-option input { width: auto; min-height: 0; margin-top: 4px; flex: none; accent-color: var(--sub-primary); } label.skin-option:has(input:checked) { border-color: var(--sub-primary); box-shadow: 0 0 0 3px var(--brand-tint-2); } label.skin-option .st { font-weight: 600; font-size: var(--fs-14); display: block; } label.skin-option .sd { color: var(--muted); font-size: var(--fs-125); display: block; margin-top: 2px; } .color-row { display: flex; align-items: center; gap: var(--sp-8); } .color-row input[type="color"] { width: 52px; min-width: 52px; flex: none; padding: 3px; min-height: 44px; border-radius: var(--r-md); cursor: pointer; } .color-row input[type="text"] { max-width: 180px; font-family: ui-monospace, Menlo, Consolas, monospace; } /* ══════════════════════════════════════════════════════════════════════════ 响应式(移动优先):375 / 768 / 1024 / 1440 ══════════════════════════════════════════════════════════════════════════ */ /* 极窄屏(<375):导航换行不挤 */ @media (max-width: 374px) { .header-inner { flex-wrap: wrap; } .nav { gap: var(--sp-8); font-size: var(--fs-125); } .product-card { column-gap: var(--sp-8); } } /* 375+:标准手机 */ @media (min-width: 375px) { .nav { gap: var(--sp-16); } } /* 768+:平板 —— 信息列表转两列,商品卡转双栏 */ @media (min-width: 768px) { .container { padding: 0 var(--sp-24); } main.container { padding: var(--sp-24) var(--sp-24) var(--sp-40); } .header-inner { padding: var(--sp-12) var(--sp-24); } .announce-inner { padding: var(--sp-8) var(--sp-24); } h1, .page-title { font-size: 24px; } .kv-row { flex-direction: row; align-items: baseline; gap: var(--sp-16); padding: 13px 0; } .kv dt { flex: 0 0 132px; } .kv dd { flex: 1; } .skin-choice { grid-template-columns: 1fr 1fr; } .admin-bar, .admin-main { padding-left: var(--sp-24); padding-right: var(--sp-24); } [data-skin="ledger"] .page-title { font-size: var(--fs-12); } [data-skin="ledger"] .product-grid { margin: 0 calc(-1 * var(--sp-24)); } [data-skin="ledger"] .product-card { padding: var(--sp-16) var(--sp-24); } [data-skin="counter"] .product-detail { padding: var(--sp-24); } [data-skin="counter"] .dock { margin: var(--sp-20) calc(-1 * var(--sp-24)) calc(-1 * var(--sp-24)); padding: var(--sp-12) var(--sp-24) var(--sp-20); } [data-skin="counter"] .product-grid { display: grid; grid-template-columns: 1fr 1fr; } [data-skin="counter"] .product-card .deliv-sub { display: inline; } } /* 1024+:笔电 */ @media (min-width: 1024px) { .container { max-width: 920px; } main.container { padding-top: var(--sp-32); } [data-skin="ledger"] .product-grid { margin: 0; border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden; } [data-skin="ledger"] .product-card { padding: var(--sp-16) var(--sp-20); } [data-skin="counter"] .dock { position: static; background: none; -webkit-backdrop-filter: none; backdrop-filter: none; } } /* 1440+:大屏 —— 只放宽留白,不放大字号(店面不是仪表盘) */ @media (min-width: 1440px) { .container { max-width: 980px; } main.container { padding-bottom: 72px; } [data-skin="counter"] .product-grid { gap: var(--sp-16); } } /* 窄屏下数据表可横向滚动(单笔信息已改用 .kv,这里只服务真正的多行表) */ @media (max-width: 767px) { .table { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; white-space: nowrap; } } /* ══════════ 动效收敛 ══════════ */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important; } }