wangjia
05203a9b5b
Design Source Checks / design-source (push) Failing after 14m23s
- git mv 全目录（历史保留）；.gitignore 收敛为整个 .superpowers/ 忽略 - 全仓 16 处引用同步（CI checks.yml / l1-sync / screens.mjs / hooks / CLAUDE.md / CONTRACT / SSR 模板注释 / docs / web 注释） - 修 pre-commit 路径正则残留；5180 评审服务已切新路径 - 验证：check-ds 12 道 / l1-sync 6 道 / fidelity 抽查全过 Co-Authored-By: Claude Fable 5 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01JJ1g8XV1YhhmHRzhwWEW7o
334 lines
26 KiB
CSS
334 lines
26 KiB
CSS
/* ============================================================
|
||
岩美酒库官网 · 组件与版式层
|
||
原子样式一对一镜像 design/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;}
|
||
.nav-user{position:relative;}
|
||
.nav-user-btn{display:inline-flex; align-items:center; gap:7px; cursor:pointer;}
|
||
.nav-user-btn svg{width:13px; height:13px; transition:transform .15s;}
|
||
.nav-user.open .nav-user-btn svg{transform:rotate(180deg);}
|
||
.nav-menu{display:none; position:absolute; right:0; top:calc(100% + 8px); min-width:158px; background:var(--surface); border:1px solid var(--border); border-radius:var(--r-md); box-shadow:var(--sh-2); padding:6px; z-index:50;}
|
||
.nav-user.open .nav-menu{display:block;}
|
||
.nav-menu a{display:block; padding:9px 12px; border-radius:var(--r-sm); font-size:14px; color:var(--text); text-decoration:none !important;}
|
||
.nav-menu a:hover{background:var(--bg);}
|
||
.nav-menu a.danger{color:var(--danger);}
|
||
.nav-menu .sep{height:1px; background:var(--border-subtle); margin:5px 4px;}
|
||
|
||
/* ---------- 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;}
|
||
.plans.p5{grid-template-columns:repeat(5,1fr); gap:14px;}
|
||
.plans.p5 .plan{padding:24px 18px;}
|
||
.plans.p5 .plan .price{font-size:28px;}
|
||
.plan.promo{border-color:var(--warn); box-shadow:var(--sh-2); position:relative; background:linear-gradient(180deg,var(--warn-bg),var(--surface) 55%);}
|
||
.plan.promo::before{content:'🔥 新店专享'; position:absolute; top:-11px; left:50%; transform:translateX(-50%); background:var(--warn); color:#fff; font-size:var(--fs-xs); font-weight:700; padding:3px 12px; border-radius:var(--r-pill); white-space:nowrap;}
|
||
.plan.promo .price{color:var(--warn);}
|
||
.plan .price .was{font-size:14px; color:var(--faint); font-weight:400; text-decoration:line-through; font-family:var(--font); margin-left:6px;}
|
||
.plan .btn.disabled{pointer-events:none; opacity:.55;}
|
||
.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,.plans.p5{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,.plans.p5{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-btn.promo{color:var(--warn); font-weight:700;}
|
||
.seg-btn.promo.on{color:var(--warn);}
|
||
.seg-btn.used,.seg-btn:disabled{color:var(--faint); font-weight:400; cursor:not-allowed; opacity:.7;}
|
||
.promo-banner{background:var(--warn-bg); border:1px solid var(--warn); border-radius:var(--r-md); padding:12px 14px; font-size:var(--fs-sm); color:var(--text); margin:10px 0 4px; line-height:1.7;}
|
||
.promo-banner b{display:block; color:var(--warn); font-size:var(--fs-body);}
|
||
.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;}
|
||
|
||
/* ---------- 个人信息（/profile/） ---------- */
|
||
.pf-row{display:flex; justify-content:space-between; gap:16px; padding:9px 0; font-size:var(--fs-body); border-bottom:1px solid var(--border-subtle);}
|
||
.pf-row:last-child{border-bottom:none; padding-bottom:2px;}
|
||
.pf-row .k{color:var(--muted); flex:none;}
|
||
.pf-row .v{color:var(--heading); font-weight:500; text-align:right; word-break:break-all;}
|
||
.pf-row .v.mono{font-family:var(--font-mono);}
|
||
.pf-badge{display:inline-flex; padding:2px 10px; border-radius:var(--r-pill); font-size:var(--fs-sm); font-weight:600;}
|
||
.pf-badge.ok{background:var(--ok-soft); color:var(--success);}
|
||
.pf-badge.warn{background:var(--warn-bg); color:var(--warn);}
|
||
.pf-badge.bad{background:var(--danger-bg); color:var(--danger);}
|
||
.pf-acts{display:flex; gap:10px; flex-wrap:wrap; margin-top:4px;}
|
||
|
||
/* ---------- 支付结果页 ---------- */
|
||
.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;}
|
||
}
|