小程序端:设计系统收敛与排版层级修复

问题:88 个 wxss 里散落大量硬编码颜色/字号/字重,无法统一调整;
部分正文对比度不达 WCAG AA(4.5:1);组件触摸目标偏小。

改动:
- 硬编码颜色收敛到语义 token(颜色统一走 design token,不再散落字面值)
- 修正全站字号阶梯:正文 ≥12px、角标 ≥11px;字重只用 400/500/600/700
- 组件触摸目标提升到 ≥44px,并补交互反馈
- 首页补氛围层次、强化排版层级

验证(本轮实测):
- UI 契约门禁 18/18 PASS(含 wxml 结构、wxss 组件选择器、token 显式值断言)
- 声明级体检 88/88 通过(全部 wxss 声明合法)

交付物:artifacts/miniapp-design-v2-preview.html
This commit is contained in:
WorkBuddy
2026-09-23 01:06:46 +08:00
parent 825fd41ee4
commit 269adf1fed
81 changed files with 5064 additions and 3533 deletions
+649
View File
@@ -0,0 +1,649 @@
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>善缘丹阳 · 小程序设计系统 v2 改造对照</title>
<style>
:root{
/* ── 与 miniapp/app.wxss 完全一致的 token(此处 1rpx = 0.5px,按 375pt 机型还原) ── */
--primary:#E96B6B; --primary-strong:#B8434A; --primary-solid:#C24C50; --primary-light:#FFF3F2;
--night-start:#172A72; --night-end:#25104F; --night-soft:#3445A1;
--accent-pink:#FF4F91; --accent-coral:#FF6A78;
--text-strong:#1A1F36; --text-primary:#2A3050; --text-secondary:#4A5169; --text-tertiary:#646C85;
--text-placeholder:#9AA1B4; --text-inverse:#FFFFFF;
--bg-page:#F6F5F3; --bg-card:#FFFFFF; --bg-subtle:#F5F6FA;
--border:#E6E8EF; --divider:#EFF0F5;
--accent-purple-strong:#7C60BC; --accent-purple-light:#F3EEFF;
--success-strong:#17805A; --success-light:#ECF8F2; --success-on-night:#A6F5D7;
--warning-strong:#9C5F14; --warning-light:#FFF7E9; --danger-strong:#C62828; --danger-light:#FFF0F0;
--info-strong:#2A5DB0; --info-light:#EEF4FF;
--glow-coral:rgba(255,79,145,.40); --glow-indigo:rgba(94,124,255,.32);
--star:rgba(255,255,255,.70); --glass:rgba(255,255,255,.10); --hairline:rgba(255,255,255,.16);
--glass-success:rgba(90,226,184,.16);
--shadow-card:0 4px 14px rgba(35,35,95,.07); --shadow-raised:0 6px 18px rgba(35,35,95,.10);
--shadow-night:0 8px 20px rgba(28,30,88,.18);
--grad-smoke:linear-gradient(135deg,#FF6A78 0%,#E96B6B 100%);
--grad-solid:linear-gradient(135deg,#C24C50 0%,#B8434A 100%);
--scrim:linear-gradient(90deg,rgba(23,42,114,.84) 0%,rgba(37,16,79,.40) 56%,rgba(255,79,145,.12) 100%);
/* 文档层配色 */
--doc-bg:#F1F3F8; --doc-panel:#FFFFFF; --doc-line:#E2E6EF; --doc-ink:#1A1F36; --doc-mute:#5C6480;
}
*{box-sizing:border-box;}
body{
margin:0;background:var(--doc-bg);color:var(--doc-ink);
font-family:-apple-system,"PingFang SC","Noto Sans SC","Microsoft YaHei",system-ui,sans-serif;
line-height:1.6;-webkit-font-smoothing:antialiased;
}
.wrap{max-width:1180px;margin:0 auto;padding:40px 24px 80px;}
h1{font-size:28px;margin:0 0 8px;letter-spacing:-.2px;}
h2{font-size:20px;margin:0 0 4px;}
h3{font-size:15px;margin:0 0 10px;}
.sub{color:var(--doc-mute);font-size:13.5px;margin:0;}
.meta{display:flex;flex-wrap:wrap;gap:8px;margin:18px 0 0;}
.chip{
display:inline-flex;align-items:center;gap:6px;padding:5px 11px;border-radius:999px;
background:#fff;border:1px solid var(--doc-line);font-size:12.5px;color:var(--doc-mute);
}
.chip b{color:var(--doc-ink);font-weight:600;}
.panel{background:var(--doc-panel);border:1px solid var(--doc-line);border-radius:14px;padding:22px 24px;margin-top:22px;}
.panel > p.lead{margin:6px 0 18px;color:var(--doc-mute);font-size:13.5px;}
/* 指标卡 */
.metrics{display:grid;grid-template-columns:repeat(auto-fit,minmax(178px,1fr));gap:14px;}
.metric{background:#fff;border:1px solid var(--doc-line);border-radius:12px;padding:16px 18px;}
.metric .k{font-size:12.5px;color:var(--doc-mute);}
.metric .v{font-size:24px;font-weight:700;margin:6px 0 2px;font-variant-numeric:tabular-nums;}
.metric .d{font-size:12.5px;color:var(--doc-mute);}
.up{color:var(--success-strong);} .flat{color:var(--doc-mute);}
.metric .from{color:var(--doc-mute);text-decoration:line-through;font-weight:500;font-size:16px;margin-left:6px;}
/* 手机模拟 */
.phones{display:flex;flex-wrap:wrap;gap:34px;justify-content:center;margin-top:8px;}
.phone-col{display:flex;flex-direction:column;align-items:center;gap:12px;}
.phone-tag{font-size:12.5px;padding:4px 12px;border-radius:999px;border:1px solid var(--doc-line);background:#fff;color:var(--doc-mute);}
.phone-tag.new{border-color:#C9E6D8;background:var(--success-light);color:var(--success-strong);font-weight:600;}
.phone{
width:375px;border-radius:30px;padding:9px;background:#15182B;
box-shadow:0 18px 44px rgba(20,24,50,.22),0 2px 6px rgba(20,24,50,.14);
}
.screen{width:100%;border-radius:22px;overflow:hidden;background:var(--bg-page);position:relative;}
.statusbar{height:22px;display:flex;align-items:center;justify-content:center;font-size:10px;color:rgba(255,255,255,.86);letter-spacing:.4px;}
/* ── 夜空头部:改造前(纯渐变) ── */
.night-a{
padding:0 12px 14px;
background:linear-gradient(160deg,var(--night-start),var(--night-end));
border-radius:0 0 21px 21px;box-shadow:var(--shadow-night);
}
/* ── 夜空头部:改造后(星点 + 双光晕 + 叠层) ── */
.night-b{
position:relative;overflow:hidden;padding:0 12px 16px;
background:
radial-gradient(circle at 12% 18%,rgba(255,255,255,.70) 0,transparent 1.25px),
radial-gradient(circle at 31% 66%,rgba(255,255,255,.70) 0,transparent 1px),
radial-gradient(circle at 57% 12%,rgba(255,255,255,.70) 0,transparent 1px),
radial-gradient(circle at 79% 52%,rgba(255,255,255,.70) 0,transparent 1.5px),
radial-gradient(circle at 93% 84%,rgba(255,255,255,.70) 0,transparent 1px),
linear-gradient(160deg,var(--night-start),var(--night-end));
border-radius:0 0 24px 24px;box-shadow:var(--shadow-night);
}
.night-b::before,.night-b::after{content:'';position:absolute;border-radius:50%;pointer-events:none;}
.night-b::before{top:-100px;right:-70px;width:280px;height:280px;
background:radial-gradient(circle,var(--glow-coral) 0%,transparent 68%);}
.night-b::after{bottom:-110px;left:-80px;width:310px;height:310px;
background:radial-gradient(circle,var(--glow-indigo) 0%,transparent 70%);}
.night-b > *{position:relative;z-index:1;}
.brand{min-height:56px;display:flex;align-items:center;justify-content:space-between;color:#fff;}
.brand-l{display:flex;align-items:center;}
.logo{width:33px;height:33px;border-radius:9px;background:linear-gradient(135deg,#FF7A88,#E96B6B);
display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:700;color:#fff;flex:none;}
.logo.b{width:34px;height:34px;}
.brand-name-a{font-size:17px;font-weight:700;letter-spacing:1px;line-height:1.25;}
.brand-name-b{font-size:18px;font-weight:700;letter-spacing:2px;line-height:1.25;}
.brand-slo-a{font-size:12px;letter-spacing:2px;color:rgba(255,255,255,.72);}
.brand-slo-b{font-size:12px;letter-spacing:3px;color:rgba(255,255,255,.72);}
.msg{font-size:12.5px;}
/* 状态条 */
.strip-a{margin:2px 0 8px;padding:9px 10px;border:1px solid rgba(255,255,255,.16);
background:rgba(255,255,255,.09);border-radius:10px;color:#fff;display:flex;align-items:center;gap:8px;}
.strip-b{margin:4px 0 8px;padding:12px;border:1px solid var(--hairline);
background:var(--glass);border-radius:12px;color:#fff;display:flex;align-items:center;gap:8px;}
.st-copy{flex:1;min-width:0;}
.st-title-a{font-size:12.5px;font-weight:600;}
.st-title-b{font-size:14px;font-weight:600;line-height:1.25;}
.st-desc{font-size:12px;color:rgba(255,255,255,.72);line-height:1.4;margin-top:2px;}
.cta-a{flex:none;min-width:54px;padding:0 9px;height:24px;display:flex;align-items:center;justify-content:center;
border-radius:14px;background:var(--grad-smoke);font-size:12px;font-weight:600;}
.cta-b{flex:none;min-width:58px;padding:0 12px;height:44px;display:flex;align-items:center;justify-content:center;
border-radius:999px;background:var(--grad-solid);font-size:13px;font-weight:600;}
.checks{display:flex;gap:5px;overflow:hidden;}
.check-a{padding:4px 6px;border-radius:10px;background:rgba(255,255,255,.08);font-size:12px;color:rgba(255,255,255,.72);white-space:nowrap;}
.check-b{padding:4px 7px;border-radius:999px;background:var(--glass);font-size:12px;color:rgba(255,255,255,.72);white-space:nowrap;}
.check-b.done{background:var(--glass-success);color:var(--success-on-night);font-weight:600;}
/* 横幅 */
.banner-a{height:136px;border-radius:13px;overflow:hidden;position:relative;
background:linear-gradient(120deg,#2C3A82,#5A2C6E 62%,#B3487A);}
.banner-b{height:150px;border-radius:16px;overflow:hidden;position:relative;
background:linear-gradient(120deg,#2C3A82,#5A2C6E 62%,#B3487A);}
.banner-a .scrim,.banner-b .scrim{position:absolute;inset:0;}
.banner-a .scrim{background:linear-gradient(90deg,rgba(25,22,86,.78) 0%,rgba(43,22,101,.25) 58%,rgba(255,79,145,.08) 100%);}
.banner-b .scrim{background:var(--scrim);}
.banner-copy{position:absolute;left:12px;width:68%;display:flex;flex-direction:column;color:#fff;}
.banner-a .banner-copy{bottom:13px;}
.banner-b .banner-copy{bottom:20px;}
.kick{font-size:12px;letter-spacing:1.5px;color:rgba(255,255,255,.78);}
.bt-a{margin-top:4px;font-size:17.5px;font-weight:700;line-height:1.2;text-shadow:0 1.5px 5px rgba(0,0,0,.2);}
.bt-b{margin-top:5px;font-size:24px;font-weight:700;line-height:1.25;letter-spacing:.5px;text-shadow:0 2px 7px rgba(0,0,0,.22);}
.bs-a,.bs-b{margin-top:4px;font-size:12px;color:rgba(255,255,255,.84);}
.bs-b{font-size:13px;color:rgba(255,255,255,.72);margin-top:5px;}
/* 快捷入口 */
.entries{position:relative;z-index:2;background:#fff;margin:-7px 12px 0;}
.entries.a{border-radius:15px;padding:11px 5px 9px;box-shadow:0 4px 14px rgba(35,35,95,.07);}
.entries.b{border-radius:16px;padding:12px 4px 8px;box-shadow:var(--shadow-raised);}
.egrid{display:flex;flex-wrap:wrap;row-gap:8px;}
.eitem{width:25%;display:flex;flex-direction:column;align-items:center;justify-content:center;}
.eitem.a{min-height:52px;} .eitem.b{min-height:58px;}
.eicon{display:flex;align-items:center;justify-content:center;overflow:hidden;}
.eicon.a{width:33px;height:33px;border-radius:10px;background:var(--primary-light);font-size:15px;}
.eicon.b{width:36px;height:36px;border-radius:12px;background:var(--primary-light);font-size:16px;}
.elabel{margin-top:4px;color:var(--text-strong);}
.elabel.a{font-size:12px;font-weight:500;}
.elabel.b{font-size:13px;font-weight:500;}
/* 区块标题 */
.sec{padding:0 12px;}
.sec.a{margin-top:16px;} .sec.b{margin-top:20px;}
.shead{display:flex;align-items:center;justify-content:space-between;}
.shead.a{padding:11px 12px 11px 0;} .shead.b{padding:8px 0;}
.st-a{font-size:18px;font-weight:600;color:var(--text-primary);}
.st-b{font-size:20px;font-weight:600;color:var(--text-strong);}
.ssub{margin-left:8px;color:var(--text-tertiary);}
.ssub.a{font-size:13px;} .ssub.b{font-size:12px;}
.sact{display:flex;align-items:center;}
.sact.a{font-size:13px;color:var(--primary);height:18px;}
.sact.b{font-size:13px;color:var(--primary-strong);min-height:44px;padding-left:12px;font-weight:500;}
.caret{font-size:11px;margin-left:2px;}
/* 卡片 */
.card{background:#fff;display:flex;align-items:center;overflow:hidden;}
.card.a{border-radius:13px;box-shadow:0 4px 14px rgba(35,35,95,.07);}
.card.b{border-radius:16px;box-shadow:var(--shadow-card);}
.rec{display:flex;align-items:center;gap:8px;padding:7px 8px;}
.rec .av{width:44px;height:44px;border-radius:50%;background:linear-gradient(135deg,#D9D3F0,#BFC8EE);flex:none;}
.rec .info{flex:1;min-width:0;}
.rec .nm-a{font-size:13px;font-weight:700;color:var(--text-strong);}
.rec .nm-b{font-size:14px;font-weight:700;color:var(--text-strong);}
.rec .meta{font-size:12px;color:var(--text-tertiary);margin-top:2px;}
.rec .tags{display:flex;gap:4px;margin-top:4px;}
.rec .tag{padding:2px 5px;border-radius:6px;background:var(--accent-purple-light);color:var(--accent-purple-strong);font-size:12px;}
.heart-a{width:31px;height:31px;border-radius:50%;background:var(--primary-light);display:flex;align-items:center;justify-content:center;font-size:14px;}
.heart-b{width:44px;height:44px;border-radius:50%;background:var(--primary-light);display:flex;align-items:center;justify-content:center;font-size:16px;}
.divider{height:1px;background:var(--divider);}
/* 空态 */
.empty{background:#fff;display:flex;align-items:center;gap:8px;}
.empty.a{border-radius:13px;padding:11px;box-shadow:0 4px 14px rgba(35,35,95,.07);}
.empty.b{border-radius:16px;padding:12px;box-shadow:var(--shadow-card);}
.logo-s{width:38px;height:38px;border-radius:10px;background:var(--grad-smoke);flex:none;
display:flex;align-items:center;justify-content:center;color:#fff;font-size:13px;font-weight:700;}
.et-a{font-size:12.5px;font-weight:600;color:var(--text-strong);}
.et-b{font-size:14px;font-weight:600;color:var(--text-strong);}
.ed{font-size:12px;color:var(--text-tertiary);line-height:1.4;margin-top:2px;}
.ed.b{font-size:13px;}
.eacts{display:flex;flex-direction:column;gap:4px;}
.ebtn{display:flex;align-items:center;justify-content:center;border-radius:12px;}
.ebtn.a{min-width:56px;height:24px;padding:0 6px;font-size:12px;}
.ebtn.b{min-width:60px;height:44px;padding:0 8px;font-size:13px;font-weight:500;border-radius:999px;}
.ebtn.sec-a{color:var(--accent-purple-strong);background:var(--accent-purple-light);}
.ebtn.sec-b{color:var(--accent-purple-strong);background:var(--accent-purple-light);}
.ebtn.pri-a{color:#fff;background:var(--grad-smoke);}
.ebtn.pri-b{color:#fff;background:var(--grad-solid);}
.hidden-note{margin-top:8px;font-size:11.5px;color:var(--danger-strong);
background:var(--danger-light);border-radius:8px;padding:6px 8px;}
.fixed-note{margin-top:8px;font-size:11.5px;color:var(--success-strong);
background:var(--success-light);border-radius:8px;padding:6px 8px;}
/* 注释气泡 */
.callout{display:flex;gap:10px;align-items:flex-start;margin-top:14px;max-width:375px;}
.callout .bullet{flex:none;width:20px;height:20px;border-radius:50%;background:var(--primary-solid);color:#fff;
font-size:11.5px;display:flex;align-items:center;justify-content:center;font-weight:700;margin-top:1px;}
.callout .txt{font-size:12.5px;color:var(--doc-mute);}
.callout .txt b{color:var(--doc-ink);}
table{width:100%;border-collapse:collapse;font-size:13px;}
th,td{text-align:left;padding:9px 10px;border-bottom:1px solid var(--divider);vertical-align:top;}
th{color:var(--doc-mute);font-weight:600;font-size:12.5px;background:var(--bg-subtle);}
td code{background:var(--bg-subtle);border:1px solid var(--divider);border-radius:5px;padding:1px 5px;font-size:12px;}
.bad{color:var(--danger-strong);font-weight:600;}
.good{color:var(--success-strong);font-weight:600;}
.sw{display:inline-flex;align-items:center;gap:7px;}
.dot{width:14px;height:14px;border-radius:4px;border:1px solid rgba(0,0,0,.08);flex:none;}
ul.clean{margin:8px 0 0;padding-left:18px;font-size:13.5px;color:var(--text-secondary);}
ul.clean li{margin:5px 0;}
ul.clean code{background:var(--bg-subtle);border:1px solid var(--divider);border-radius:5px;padding:1px 5px;font-size:12px;}
.gate{display:flex;flex-wrap:wrap;gap:10px;}
.gate .g{flex:1 1 210px;border:1px solid #CFE9DC;background:var(--success-light);border-radius:11px;padding:12px 14px;}
.gate .g .n{font-size:19px;font-weight:700;color:var(--success-strong);}
.gate .g .l{font-size:12.5px;color:var(--text-secondary);margin-top:2px;}
.warnbox{border:1px solid #F2E3C4;background:var(--warning-light);border-radius:11px;padding:14px 16px;font-size:13px;color:#6B4E12;}
.warnbox b{color:var(--warning-strong);}
footer{margin-top:34px;font-size:12.5px;color:var(--doc-mute);text-align:center;}
</style>
</head>
<body>
<div class="wrap">
<h1>善缘丹阳 · 小程序设计系统 v2 改造对照</h1>
<p class="sub">以首页为样板页,展示「设计底座落地 + 氛围层 + 排版层级 + 可访问性」四类改动的实际效果。</p>
<div class="meta">
<span class="chip">基线 <b>main @ 825fd41</b></span>
<span class="chip">改动文件 <b>80</b></span>
<span class="chip">wxss 覆盖 <b>88 / 88</b></span>
<span class="chip">UI 契约门禁 <b>18 / 18 PASS</b></span>
</div>
<div class="panel">
<h2>一、量化指标</h2>
<p class="lead">改动前的问题不是「不够好看」,而是设计底座没落地 —— 88 个样式文件里 78% 绕过了 token。</p>
<div class="metrics">
<div class="metric">
<div class="k">页面层硬编码颜色</div>
<div class="v flat">0<span class="from">770</span></div>
<div class="d">仅 app.wxss 保留 56 个 token 定义色</div>
</div>
<div class="metric">
<div class="k">不可读字号(&lt;12px 非装饰)</div>
<div class="v flat">0<span class="from">140</span></div>
<div class="d">元信息下限统一到 24rpx(12px)</div>
</div>
<div class="metric">
<div class="k">非法字重(550/650/750)</div>
<div class="v flat">0<span class="from">30</span></div>
<div class="d">只保留 400/500/600/700 四档</div>
</div>
<div class="metric">
<div class="k">未定义的 token 引用</div>
<div class="v flat">0<span class="from">2</span></div>
<div class="d">此前静默失效(背景/过渡丢失)</div>
</div>
<div class="metric">
<div class="k">未达标文字对比度</div>
<div class="v flat">0<span class="from">41</span></div>
<div class="d">3.10:1 → 5.33:1</div>
</div>
<div class="metric">
<div class="k">白字压在浅渐变上的 CTA</div>
<div class="v flat">0<span class="from">10</span></div>
<div class="d">2.77:1 → 4.73:1</div>
</div>
<div class="metric">
<div class="k">品牌色实心底 + 白字</div>
<div class="v flat">0<span class="from">32</span></div>
<div class="d">按钮/标签/徽标统一换 solid 变体</div>
</div>
<div class="metric">
<div class="k">低于 44px 的触摸目标</div>
<div class="v flat">0<span class="from">42</span></div>
<div class="d">组件库按钮 40px、喜欢键 31px</div>
</div>
</div>
</div>
<div class="panel">
<h2>二、首页对照</h2>
<p class="lead">左侧是改造前(HEAD 版本的真实取值),右侧是改造后。两侧均用 app.wxss 里的真实 token 渲染,1rpx = 0.5px。</p>
<div class="phones">
<!-- ══════════ 改造前 ══════════ -->
<div class="phone-col">
<span class="phone-tag">改造前</span>
<div class="phone"><div class="screen">
<div class="night-a">
<div class="statusbar">9:41</div>
<div class="brand">
<div class="brand-l">
<div class="logo">善</div>
<div style="margin-left:6px">
<div class="brand-name-a">善缘丹阳</div>
<div class="brand-slo-a">公益婚恋服务平台</div>
</div>
</div>
<div class="msg">消息</div>
</div>
<div class="strip-a">
<div class="st-copy">
<div class="st-title-a">完善资料,开启安心相遇</div>
<div class="st-desc">补全 3 项信息即可进入推荐</div>
</div>
<div class="cta-a">去完善</div>
</div>
<div class="banner-a">
<div class="scrim"></div>
<div class="banner-copy">
<div class="kick">公益 · 本地 · 真实 · 安全</div>
<div class="bt-a">在丹阳,遇见更好的你</div>
<div class="bs-a">认真认识,温暖相伴</div>
</div>
</div>
</div>
<div class="entries a">
<div class="egrid">
<div class="eitem a"><div class="eicon a">❤</div><div class="elabel a">找对象</div></div>
<div class="eitem a"><div class="eicon a">🎈</div><div class="elabel a">活动</div></div>
<div class="eitem a"><div class="eicon a">👤</div><div class="elabel a">红娘</div></div>
<div class="eitem a"><div class="eicon a">📖</div><div class="elabel a">课堂</div></div>
</div>
</div>
<div class="sec a">
<div class="shead a">
<div><span class="st-a">今日推荐</span><span class="ssub a">为你认真筛选</span></div>
<div class="sact a">查看更多<span class="caret">›</span></div>
</div>
<div class="card a">
<div class="rec">
<div class="av"></div>
<div class="info">
<div class="nm-a">林晓 · 28</div>
<div class="meta">丹阳 · 教师 · 本科</div>
<div class="tags"><span class="tag">同城</span><span class="tag">年龄相近</span></div>
</div>
<div class="heart-a">❤</div>
</div>
<div class="divider"></div>
<div class="rec">
<div class="av"></div>
<div class="info">
<div class="nm-a">周敏 · 30</div>
<div class="meta">丹阳 · 医护 · 硕士</div>
<div class="tags"><span class="tag">同城</span></div>
</div>
<div class="heart-a">❤</div>
</div>
</div>
</div>
</div></div>
<div class="callout"><div class="bullet">1</div><div class="txt">
<b>夜空只有一条平渐变</b>:参考图里的暖粉光晕、星点、玻璃质感全部缺失,头部是「一块紫布」。
</div></div>
<div class="callout"><div class="bullet">2</div><div class="txt">
<b>层级读不出来</b>:hero 标题 17.5px、区块标题 18px、卡片标题 12.5px —— hero 与区块标题几乎同号。
</div></div>
<div class="callout"><div class="bullet">3</div><div class="txt">
<b>触摸目标不足</b>:「去完善」按钮高 24px、「查看更多」18px,远低于 44px 无障碍下限。
</div></div>
<div class="callout"><div class="bullet">4</div><div class="txt">
<b>对比度不达标</b>:CTA 白字压在珊瑚粉渐变上仅 <span class="bad">2.77:1</span>;文字链接 <code>#FF4F91</code> 仅 <span class="bad">3.10:1</span>。
</div></div>
</div>
<!-- ══════════ 改造后 ══════════ -->
<div class="phone-col">
<span class="phone-tag new">改造后</span>
<div class="phone"><div class="screen">
<div class="night-b">
<div class="statusbar">9:41</div>
<div class="brand">
<div class="brand-l">
<div class="logo b">善</div>
<div style="margin-left:8px">
<div class="brand-name-b">善缘丹阳</div>
<div class="brand-slo-b">公益婚恋服务平台</div>
</div>
</div>
<div class="msg">消息</div>
</div>
<div class="strip-b">
<div class="st-copy">
<div class="st-title-b">完善资料,开启安心相遇</div>
<div class="st-desc">补全 3 项信息即可进入推荐</div>
</div>
<div class="cta-b">去完善</div>
</div>
<div class="banner-b">
<div class="scrim"></div>
<div class="banner-copy">
<div class="kick">公益 · 本地 · 真实 · 安全</div>
<div class="bt-b">在丹阳,遇见更好的你</div>
<div class="bs-b">认真认识,温暖相伴</div>
</div>
</div>
</div>
<div class="entries b">
<div class="egrid">
<div class="eitem b"><div class="eicon b">❤</div><div class="elabel b">找对象</div></div>
<div class="eitem b"><div class="eicon b">🎈</div><div class="elabel b">活动</div></div>
<div class="eitem b"><div class="eicon b">👤</div><div class="elabel b">红娘</div></div>
<div class="eitem b"><div class="eicon b">📖</div><div class="elabel b">课堂</div></div>
</div>
</div>
<div class="sec b">
<div class="shead b">
<div><span class="st-b">今日推荐</span><span class="ssub b">为你认真筛选</span></div>
<div class="sact b">查看更多<span class="caret">›</span></div>
</div>
<div class="card b">
<div class="rec">
<div class="av"></div>
<div class="info">
<div class="nm-b">林晓 · 28</div>
<div class="meta">丹阳 · 教师 · 本科</div>
<div class="tags"><span class="tag">同城</span><span class="tag">年龄相近</span></div>
</div>
<div class="heart-b">❤</div>
</div>
<div class="divider"></div>
<div class="rec">
<div class="av"></div>
<div class="info">
<div class="nm-b">周敏 · 30</div>
<div class="meta">丹阳 · 医护 · 硕士</div>
<div class="tags"><span class="tag">同城</span></div>
</div>
<div class="heart-b">❤</div>
</div>
</div>
</div>
</div></div>
<div class="callout"><div class="bullet">1</div><div class="txt">
<b>三层叠加做成氛围</b>:<code>--mini-starfield</code> 星点 + 夜空渐变 + 两个定位光晕(右上珊瑚粉、左下靛蓝)。全部用 CSS 渐变,零图片、零额外请求。
</div></div>
<div class="callout"><div class="bullet">2</div><div class="txt">
<b>四级排版阶梯</b>:hero <b>24px/700</b> &gt; 区块标题 <b>20px/600</b> &gt; 卡片标题 <b>14px/600</b> &gt; 元信息 12px。
</div></div>
<div class="callout"><div class="bullet">3</div><div class="txt">
<b>触摸目标全部达标</b>:CTA 44px;区块标题右侧「查看更多」由 18px 提到 44px 热区,且热区向左补白不挤压标题。
</div></div>
<div class="callout"><div class="bullet">4</div><div class="txt">
<b>对比度达标</b>:CTA 换 <code>--gradient-brand-solid</code> → <span class="good">4.73:1</span>;文字链接换 <code>--color-primary-strong</code> → <span class="good">5.33:1</span>。
</div></div>
<div class="callout"><div class="bullet">5</div><div class="txt">
<b>标题与卡片对齐</b>:旧版标题比卡片多缩进 32rpx(.section 的 24rpx 与组件自带 32rpx 叠加),安全提醒卡还因 <code>padding:0</code> 顶到屏幕边缘。
</div></div>
</div>
</div>
</div>
<div class="panel">
<h2>三、小屏(≤340px)的行为差异</h2>
<p class="lead">这是本轮改动里唯一一处「功能级」缺陷修复,值得单独看。</p>
<div style="display:flex;gap:34px;flex-wrap:wrap;justify-content:center">
<div class="phone-col">
<span class="phone-tag">改造前</span>
<div class="phone" style="width:320px"><div class="screen" style="background:var(--bg-page);padding-bottom:12px">
<div style="background:linear-gradient(160deg,var(--night-start),var(--night-end));height:70px;border-radius:0 0 21px 21px"></div>
<div class="entries a" style="margin-top:-7px">
<div class="egrid">
<div class="eitem a"><div class="eicon a">❤</div><div class="elabel a">找对象</div></div>
<div class="eitem a"><div class="eicon a">🎈</div><div class="elabel a">活动</div></div>
<div class="eitem a"><div class="eicon a">👤</div><div class="elabel a">红娘</div></div>
<div class="eitem a"><div class="eicon a">📖</div><div class="elabel a">课堂</div></div>
</div>
</div>
<div class="sec a">
<div class="empty a">
<div class="logo-s">善</div>
<div style="flex:1;min-width:0">
<div class="et-a">暂时没有完全符合的人</div>
<div class="ed">我们坚持 Required 条件</div>
</div>
<div style="width:56px"></div>
</div>
<div class="hidden-note">@media (max-width:340px){ .empty-actions{display:none} } —— 两个操作入口整块消失</div>
</div>
</div></div>
</div>
<div class="phone-col">
<span class="phone-tag new">改造后</span>
<div class="phone" style="width:320px"><div class="screen" style="background:var(--bg-page);padding-bottom:12px">
<div style="background:linear-gradient(160deg,var(--night-start),var(--night-end));height:70px;border-radius:0 0 24px 24px"></div>
<div class="entries b" style="margin-top:-7px">
<div class="egrid">
<div class="eitem b"><div class="eicon b">❤</div><div class="elabel b">找对象</div></div>
<div class="eitem b"><div class="eicon b">🎈</div><div class="elabel b">活动</div></div>
<div class="eitem b"><div class="eicon b">👤</div><div class="elabel b">红娘</div></div>
<div class="eitem b"><div class="eicon b">📖</div><div class="elabel b">课堂</div></div>
</div>
</div>
<div class="sec b">
<div class="empty b">
<div class="logo-s">善</div>
<div style="flex:1;min-width:0">
<div class="et-b">暂时没有完全符合的人</div>
<div class="ed b">我们坚持 Required 条件</div>
</div>
<div class="eacts">
<div class="ebtn sec-b">调整条件</div>
<div class="ebtn pri-b">公益红娘</div>
</div>
</div>
<div class="fixed-note">小屏只收紧尺寸与字号,不再砍掉任何入口</div>
</div>
</div></div>
</div>
</div>
</div>
<div class="panel">
<h2>四、设计 token 变更要点</h2>
<p class="lead">品牌色分级是这一版最重要的结构性决定:基础品牌色 <code>#E96B6B</code> 无论做背景还是做文字都不满足 4.5:1,因此拆成三个语义层。</p>
<table>
<thead><tr><th style="width:230px">Token</th><th style="width:130px">取值</th><th style="width:110px">对比度</th><th>用途限制</th></tr></thead>
<tbody>
<tr>
<td><span class="sw"><span class="dot" style="background:#E96B6B"></span><code>--color-primary</code></span></td>
<td><code>#E96B6B</code></td><td class="bad">3.10:1</td>
<td>仅大色块、渐变、光晕、图标底。禁止承载文字。</td>
</tr>
<tr>
<td><span class="sw"><span class="dot" style="background:#B8434A"></span><code>--color-primary-strong</code></span></td>
<td><code>#B8434A</code></td><td class="good">5.33:1</td>
<td>所有品牌色文字、小图标、纯文字链接。</td>
</tr>
<tr>
<td><span class="sw"><span class="dot" style="background:#C24C50"></span><code>--color-primary-solid</code></span></td>
<td><code>#C24C50</code></td><td class="good">4.73:1</td>
<td>实心按钮底(配白字)、小徽标底色。</td>
</tr>
<tr>
<td><code>--gradient-brand</code></td>
<td>#FF6A78 → #E96B6B</td><td class="bad">2.77:1</td>
<td>明亮活泼,仅装饰填充,不得压白字。</td>
</tr>
<tr>
<td><code>--gradient-brand-solid</code></td>
<td>#C24C50 → #B8434A</td><td class="good">4.73 ~ 5.33</td>
<td>所有承载白字的 CTA 渐变(本轮新增)。</td>
</tr>
<tr>
<td><code>--color-text-tertiary</code></td>
<td>#777 → <code>#646C85</code></td><td class="good">5.22:1</td>
<td>说明文字。旧值 4.48:1 卡在阈值下沿。</td>
</tr>
<tr>
<td><code>--mini-glow-coral</code> / <code>--mini-glow-indigo</code></td>
<td>rgba 粉 / 蓝</td><td class="flat">—</td>
<td>夜空光晕层(本轮新增,参考图关键特征)。</td>
</tr>
<tr>
<td><code>--mini-starfield</code></td>
<td>5 个径向渐变</td><td class="flat">—</td>
<td>星点层(本轮新增),叠在夜空渐变之上。</td>
</tr>
<tr>
<td><code>--mini-glass</code> / <code>--mini-hairline</code></td>
<td>rgba(255,255,255,.10/.16)</td><td class="flat">—</td>
<td>深底玻璃面与分隔线(本轮新增)。</td>
</tr>
<tr>
<td><code>--tap-min</code> / <code>--tap-gap</code></td>
<td>88rpx / 16rpx</td><td class="flat">44px</td>
<td>触摸目标下限与最小间距(本轮新增)。</td>
</tr>
<tr>
<td><code>--ease-spring</code> / <code>--press-scale</code></td>
<td>cubic-bezier(.34,1.4,.64,1) / 0.97</td><td class="flat">—</td>
<td>按压回弹与缩放(本轮新增)。</td>
</tr>
</tbody>
</table>
</div>
<div class="panel">
<h2>五、本轮修掉的实质缺陷</h2>
<p class="lead">不只是样式替换 —— 其中三条是会被静默吞掉的语法级错误。</p>
<ul class="clean">
<li><b>3 处声明粘连(脚本副作用)</b>:<code>recommend-card</code>、<code>discover</code>、<code>service-station</code> 里出现
<code>box-shadow:…rgba(255,79,145,.18)min-width:var(--tap-min);</code> 这类<b>缺少分号</b>的合并声明。
浏览器会把整条声明判为非法并丢弃 —— 于是「喜欢」按钮的 44px 热区与阴影双双静默失效,
而花括号平衡、hex 配额等所有静态检查仍然全绿。</li>
<li><b>2 处引用了不存在的 token</b>:<code>--button-press-feedback</code>、<code>--color-bg-input</code> 此前从未定义,
导致过渡动画与输入框背景直接失效(无报错、无告警)。</li>
<li><b>小屏砍掉操作入口</b>:<code>@media (max-width:340px)</code> 里 <code>.empty-actions{display:none}</code>,
在窄屏机型上把「调整条件 / 公益红娘」两个入口整块移除,属功能级缺陷。</li>
<li><b>安全提醒卡错位</b>:旧版 <code>.safety-card{padding:0}</code> 覆盖了 <code>.section</code> 的左右内边距,
该卡片比其它区块宽 48rpx、直接贴到屏幕边缘。</li>
<li><b>触摸目标普遍不足</b>:组件库主按钮 40px、小号 28px、纯文字变体 <code>min-height:auto</code>、
「喜欢」键 31px、区块标题右侧 action 18px —— 全站已统一到 44px 下限。</li>
<li><b>对比度系统性不达标</b>:41 处把品牌基础色当文字用(3.10:1)、32 处把基础色做实心底压白字、
10 处白字压在明亮渐变上(2.77:1)。已按「文字用 strong / 实心底用 solid / 渐变按是否压字分流」三类语义收敛。</li>
<li><b>字重机型不一致</b>:30 处 550/650/750 在 Android 无对应字重会回退,同一设计在不同机型上粗细不一致。</li>
</ul>
</div>
<div class="panel">
<h2>六、验证结果</h2>
<p class="lead">以下为实际执行结果,非声明性描述。</p>
<div class="gate">
<div class="g"><div class="n">18 / 18</div><div class="l">UI 契约门禁全部通过(源码结构 + 关键行为断言)</div></div>
<div class="g"><div class="n">0</div><div class="l">未定义的 token 引用(扫描 88 个 wxss / 131 个 token)</div></div>
<div class="g"><div class="n">88 / 88</div><div class="l">wxss 文件通过声明级体检(无粘连、无空规则、括号平衡)</div></div>
<div class="g"><div class="n">0</div><div class="l">app.wxss 之外的硬编码颜色(56 个 hex 全部是 token 定义)</div></div>
<div class="g"><div class="n">0</div><div class="l">非百位字重 / 非装饰类不可读字号</div></div>
<div class="g"><div class="n">88 / 88</div><div class="l">文件编码统一为 UTF-8 无 BOM(与仓库既有约定一致)</div></div>
</div>
<div class="warnbox" style="margin-top:16px">
<b>尚未验证的部分(不作已验收)</b><br />
· 本页是<b>静态还原</b>,用真实 token 值复刻布局,不是小程序真机截图;动态横幅轮播、真实数据、字号在真实设备上的渲染需要在小程序开发者工具里目视确认。<br />
· 氛围层用到的 <code>background</code> 多层渐变与 <code>radial-gradient</code> 需要在真机(iOS / Android 各一台)复验,尤其确认低端机上不出现色带。<br />
· 布局类改动(首页重做、标题热区加高、触摸目标统一为 44px)尚无自动化视觉回归,需要人工过一遍主要页面。
</div>
</div>
<footer>
善缘丹阳公益婚恋服务平台 · 小程序设计系统 v2 · 生成于 2026-09-22 · 基线 main @ 825fd41
</footer>
</div>
</body>
</html>
+232 -70
View File
@@ -1,72 +1,161 @@
/**
* 丹阳公益婚恋服务平台 - 全局 Design Token
*
* 依据《前端组件库与 Design Token 规范 V1.0》
* 单位说明:rpx(750rpx = 屏幕宽度),规范 px 值按 2x 映射为 rpx
* 禁止页面层写死颜色/间距/圆角,必须引用 var(--token)
* v2(2026-09-22 设计系统夯实)
* ---------------------------------------------------------------
* 本次修订针对审计发现的系统性问题,逐条给出依据:
*
* 1) 品牌色不能承载文字 → 引入「基础色 / -strong」分级
* #E96B6B on 白 = 3.10:1,白字 on #E96B6B = 3.10:1,on #FFF3F2 = 2.85:1,
* 三条路径都不满足正文 4.5:1。故:
* --color-primary 仅用于大色块、渐变、光晕、装饰(非文字)
* --color-primary-strong 用于文字、小图标、纯文字链接(5.33:1 ✓)
* --color-primary-solid 实心按钮底(白字 ≥4.5:1 ✓)
* 功能色(success/warning/danger/info)同此分级。
*
* 2) 次要文字对比度过低
* 旧 --color-text-tertiary(#777) = 4.48(on 白,勉强)/ #999 实测 2.85 却被用了 71 次。
* 现将三级文字压到 #646C85 = 5.22:1,占位符保留浅色(占位符非正文)。
*
* 3) 颜色碎片化
* 审计前全站 182 种 hex、770 次硬编码(54 种灰、60 种蓝紫、40 种红橙)。
* 本文件是唯一的颜色事实源;页面层禁止再写 hex,一律 var(--token)。
*
* 4) 触摸目标
* 组件库默认按钮只有 40px、小号 28px、"喜欢"按钮 31px。
* 统一以 --tap-min(88rpx=44px) 为下限,--tap-gap 为最小间距。
*
* 5) 动效几乎未落地(--motion-* 全站仅 5 次引用)
* 补充 --ease-spring 与 --press-scale,让点击有即时反馈。
*
* 6) 夜间氛围层缺失(参考图有明显的光晕/星点,代码只有纯渐变)
* 新增 --mini-glow-* / --mini-star / --mini-glass / --mini-hairline。
*
* 单位说明:rpx(750rpx = 屏幕宽度,1rpx ≈ 0.5px @375pt)
* 旧 token 名全部保留(88 个 wxss 共 909 处引用),只更新取值,避免大范围失效。
*/
page {
/* ============ 品牌主色(规范 §3) ============ */
--color-primary: #E96B6B;
--color-primary-active: #D95F5F;
/* ============ 品牌主色(分级:色块 / 文字 / 实心按钮) ============ */
--color-primary: #E96B6B; /* 基础色:渐变、光晕、装饰、非文字图形 */
--color-primary-strong: #B8434A; /* 文字与小图标(5.33:1 on 白,4.91:1 on 浅粉底) */
--color-primary-solid: #C24C50; /* 实心按钮底(白字 4.62:1) */
--color-primary-active: #D95F5F; /* 按压态(配合 --color-primary 使用) */
--color-primary-light: #FFF3F2;
--color-primary-lighter: #FFF8F7;
/* ============ 小程序参考图品牌主题 ============ */
/* ============ 小程序参考图品牌主题(夜间紫蓝) ============ */
--mini-night-start: #172A72;
--mini-night-end: #25104F;
--mini-night-soft: #3445A1;
--mini-accent-pink: #FF4F91;
--mini-accent-pink: #FF4F91; /* 点缀色:仅用于色块/装饰,不作正文 */
--mini-accent-coral: #FF6A78;
--mini-card-bg: rgba(255, 255, 255, 0.98);
--mini-text: #1F2744;
--mini-muted: #7D839B;
--mini-card-radius: 24rpx;
--mini-text-on-night: #FFFFFF;
--mini-text-on-night-muted: rgba(255, 255, 255, 0.72);
--mini-text-on-night: #FFFFFF; /* on 深底 13.04:1 ✓ */
--mini-text-on-night-muted: rgba(255, 255, 255, 0.72); /* on 深底 ≈8:1 ✓ */
--mini-shadow: 0 16rpx 40rpx rgba(28, 30, 88, 0.14);
/* ============ 功能色(规范 §4) ============ */
--color-success: #2E9B68;
/* ---- 渐变(集中定义:此前 4 个页面各写了一份「橙红渐变」按钮) ---- */
/* --gradient-brand 明亮活泼,但白字仅 2.77:1 —— 只能用于无文字的装饰填充。 */
--gradient-brand: linear-gradient(135deg, #FF6A78 0%, #E96B6B 100%);
/* 承载白字的 CTA 渐变:两端 #C24C50(4.73:1) / #B8434A(5.33:1) 均达标。 */
--gradient-brand-solid: linear-gradient(135deg, #C24C50 0%, #B8434A 100%);
--gradient-night: linear-gradient(160deg, #172A72 0%, #25104F 100%);
--gradient-night-soft: linear-gradient(160deg, #3445A1 0%, #172A72 100%);
/* ---- 夜间氛围层(v2 新增;参考图有光晕与星点,此前完全没有) ---- */
--mini-glow-coral: rgba(255, 79, 145, 0.40);
--mini-glow-indigo: rgba(94, 124, 255, 0.32);
--mini-glow-soft: rgba(255, 255, 255, 0.10);
--mini-star: rgba(255, 255, 255, 0.70);
--mini-glass: rgba(255, 255, 255, 0.10); /* 深底玻璃面 */
--mini-glass-strong: rgba(255, 255, 255, 0.16);
--mini-hairline: rgba(255, 255, 255, 0.16); /* 深底分隔线 */
--mini-glass-success: rgba(90, 226, 184, 0.16); /* 深底上的成功态玻璃面 */
/* 星点层:多个小径向渐变叠在夜空渐变之上。用 radial-gradient 而非图片,
避免额外请求,也便于随主题换色(index 页脚注:装饰层不承载信息)。 */
--mini-starfield:
radial-gradient(circle at 12% 18%, var(--mini-star) 0, transparent 2.5rpx),
radial-gradient(circle at 31% 66%, var(--mini-star) 0, transparent 2rpx),
radial-gradient(circle at 57% 12%, var(--mini-star) 0, transparent 2rpx),
radial-gradient(circle at 79% 52%, var(--mini-star) 0, transparent 3rpx),
radial-gradient(circle at 93% 84%, var(--mini-star) 0, transparent 2rpx);
/* 横幅压暗层:保证任何底图上的白色标题都有足够对比度 */
--mini-banner-scrim: linear-gradient(90deg, rgba(23, 42, 114, 0.84) 0%, rgba(37, 16, 79, 0.40) 56%, rgba(255, 79, 145, 0.12) 100%);
/* ============ 功能色(同样分级) ============ */
--color-success: #2E9B68; /* 色块/图标 */
--color-success-strong: #17805A; /* 文字(4.92:1 ✓) */
--color-success-light: #ECF8F2;
--color-warning: #E59A32;
--color-warning: #E59A32; /* 色块/图标(作文字仅 2.33:1) */
--color-warning-strong: #9C5F14; /* 文字(5.17:1 ✓) */
--color-warning-light: #FFF7E9;
--color-danger: #D94A4A;
--color-danger: #D94A4A; /* 色块/图标 */
--color-danger-strong: #C62828; /* 文字(5.62:1 ✓) */
--color-danger-light: #FFF0F0;
--color-info: #4A7CD4;
--color-info: #4A7CD4; /* 色块/图标 */
--color-info-strong: #2A5DB0; /* 文字(6.38:1 ✓) */
--color-info-light: #EEF4FF;
/* ============ 中性色(规范 §5-6) ============ */
--color-text-primary: #222222;
--color-text-secondary: #444444;
--color-text-tertiary: #777777;
--color-text-placeholder: #999999;
--color-text-disabled: #B5B5B5;
--color-text-inverse: #FFFFFF; /* 用于 primary/success 等深色背景上的文字 */
/* ============ 强调紫(参考图的标签语言;此前散落成 6 种写法) ============ */
--color-accent-purple: #8B63BC; /* 色块/装饰 */
--color-accent-purple-strong: #7C60BC; /* 文字(5.03:1 ✓) */
--color-accent-purple-light: #F3EEFF;
--color-border: #EEEEEE;
--color-divider: #F0F0F0;
--color-border-focus: #E96B6B;
--color-border-error: #D94A4A;
/* 深色夜空底上的强调色(不可用于浅色底) */
--color-success-on-night: #A6F5D7; /* on #172A72 = 10.35:1 ✓ */
--color-bg-page: #FAFAF8;
/* ============ 文字色(实测对比度 on 白 / on 页面底) ============ */
--color-text-strong: #1A1F36; /* 标题 16.24 / 14.90 ✓ */
--color-text-primary: #2A3050; /* 正文 12.83 / 11.77 ✓ */
--color-text-secondary: #4A5169; /* 次要正文 7.86 / 7.21 ✓ */
--color-text-tertiary: #646C85; /* 说明文字 5.22 / 4.79 ✓(旧 #777 为 4.48) */
--color-text-placeholder: #9AA1B4; /* 占位符(非正文,可浅) */
--color-text-disabled: #B8BDC9;
--color-text-inverse: #FFFFFF; /* 深色背景上的文字 */
/* ============ 边框与分割线 ============ */
--color-border: #E6E8EF;
--color-border-strong: #D8DBE5;
--color-divider: #EFF0F5;
--color-border-focus: #B8434A; /* 焦点环用 strong,保证 3:1 可见度 */
--color-border-error: #C62828;
/* ============ 背景(避免纯白/纯灰平铺,页面底为暖白) ============ */
--color-bg-page: #F6F5F3;
--color-bg-card: #FFFFFF;
--color-bg-disabled: #F3F3F3;
--color-bg-subtle: #F5F6FA; /* 次级区块、内嵌列表 */
--color-bg-muted: #EEF0F6; /* 更弱的填充 */
--color-bg-input: #F7F8FB; /* 表单输入框底(此前被引用但从未定义,导致背景失效) */
--color-bg-disabled: #F3F4F7;
--color-bg-overlay: rgba(0, 0, 0, 0.45);
/* ============ 字体(规范 §7-11) ============ */
/* ============ 字体 ============ */
/* 小程序无法可靠加载 Web Font(wx.loadFontFace 依赖 HTTPS 白名单且有闪动风险),
故使用中文系统字栈:iOS 走苹方、Android 走思源/系统黑体。
排版辨识度靠字号阶梯与字重建立,而非依赖字体本身。 */
--font-family-cn: -apple-system, "PingFang SC", "Noto Sans SC", "Hiragino Sans GB", "Microsoft YaHei", system-ui, sans-serif;
--font-family-number: "SF Pro Display", -apple-system, "DIN Alternate", "PingFang SC", sans-serif;
--font-size-xs: 24rpx; /* 12px */
--font-size-sm: 26rpx; /* 13px */
--font-size-md: 28rpx; /* 14px */
--font-size-base: 32rpx; /* 16px */
--font-size-lg: 36rpx; /* 18px */
--font-size-xl: 40rpx; /* 20px */
--font-size-2xl: 48rpx; /* 24px */
--font-size-3xl: 56rpx; /* 28px */
/* 字号阶梯 —— 正文 32rpx(16px) 起,元信息下限 24rpx(12px) */
--font-size-micro: 22rpx; /* 11px 仅角标/装饰,禁用于正文 */
--font-size-xs: 24rpx; /* 12px 元信息下限 */
--font-size-sm: 26rpx; /* 13px 次要说明 */
--font-size-md: 28rpx; /* 14px 次要正文 */
--font-size-base: 32rpx; /* 16px 正文 */
--font-size-lg: 36rpx; /* 18px 小标题 */
--font-size-xl: 40rpx; /* 20px 区块标题 */
--font-size-2xl: 48rpx; /* 24px 页面标题 */
--font-size-3xl: 56rpx; /* 28px 大标题 */
--font-size-display: 64rpx; /* 32px Hero */
/* 字重:只用 4 档。禁止 550/650/750 等非百位值 —— Android 无对应字重会回退,
导致同一设计在不同机型上粗细不一致(审计发现 30 处)。 */
--font-weight-regular: 400;
--font-weight-medium: 500;
--font-weight-semibold: 600;
@@ -74,51 +163,68 @@ page {
--line-height-tight: 1.25;
--line-height-normal: 1.5;
--line-height-relaxed: 1.7;
--line-height-relaxed: 1.65;
/* ============ 间距(规范 §12,4px 栅格) ============ */
--spacing-1: 8rpx; /* 4px */
--spacing-2: 16rpx; /* 8px */
--spacing-3: 24rpx; /* 12px */
--spacing-4: 32rpx; /* 16px */
--spacing-5: 40rpx; /* 20px */
--spacing-6: 48rpx; /* 24px */
--spacing-8: 64rpx; /* 32px */
--spacing-10: 80rpx; /* 40px */
--spacing-12: 96rpx; /* 48px */
--letter-spacing-tight: 0;
--letter-spacing-wide: 1rpx;
--letter-spacing-wider: 2rpx;
--spacing-page-x: 32rpx; /* 页面左右 16px */
--spacing-section: 48rpx; /* 区块间 24px */
--spacing-card-inner: 32rpx; /* 卡片内部 16px */
--spacing-tight: 16rpx; /* 紧密 8px */
/* ============ 间距(4px 栅格) ============ */
--spacing-1: 8rpx;
--spacing-2: 16rpx;
--spacing-3: 24rpx;
--spacing-4: 32rpx;
--spacing-5: 40rpx;
--spacing-6: 48rpx;
--spacing-8: 64rpx;
--spacing-10: 80rpx;
--spacing-12: 96rpx;
/* ============ 圆角(规范 §14) ============ */
--radius-sm: 16rpx; /* 8px */
--radius-md: 24rpx; /* 12px */
--radius-lg: 32rpx; /* 16px */
--radius-xl: 40rpx; /* 20px */
--spacing-page-x: 32rpx;
--spacing-section: 48rpx;
--spacing-card-inner: 32rpx;
--spacing-tight: 16rpx;
/* ============ 圆角 ============ */
--radius-sm: 16rpx;
--radius-md: 24rpx;
--radius-lg: 32rpx;
--radius-xl: 40rpx;
--radius-2xl: 48rpx;
--radius-full: 9999rpx;
/* ============ 阴影(规范 §15,极轻) ============ */
--shadow-card: 0 8rpx 32rpx rgba(0, 0, 0, 0.04);
/* ============ 阴影(统一为一套,此前 30+ 种近似值) ============ */
--shadow-card: 0 8rpx 28rpx rgba(35, 35, 95, 0.07);
--shadow-raised: 0 12rpx 36rpx rgba(35, 35, 95, 0.10);
--shadow-popup: 0 16rpx 64rpx rgba(0, 0, 0, 0.10);
--shadow-night: 0 16rpx 40rpx rgba(28, 30, 88, 0.18);
/* ============ 边框(规范 §16) ============ */
/* ============ 边框宽度 ============ */
--border-width: 1rpx;
--border-width-strong: 2rpx;
/* ============ 动效(规范 §17) ============ */
/* ============ 触摸目标(无障碍下限 44×44px) ============ */
--tap-min: 88rpx; /* 44px 最小可点区域 */
--tap-comfortable: 96rpx; /* 48px 舒适尺寸:主操作 */
--tap-gap: 16rpx; /* 8px 相邻目标最小间距 */
/* ============ 动效 ============ */
--motion-fast: 120ms;
--motion-normal: 200ms;
--motion-slow: 300ms;
--ease-standard: ease-out;
--ease-standard: cubic-bezier(0.32, 0.72, 0, 1);
--ease-spring: cubic-bezier(0.34, 1.4, 0.64, 1);
--press-scale: 0.97;
--press-opacity: 0.88;
/* ============ 层级 z-index(规范 §90) ============ */
/* ============ 层级 z-index ============ */
--z-base: 1;
--z-sticky: 100;
--z-tabbar: 200;
--z-dropdown: 500;
--z-modal: 1000;
--z-toast: 2000;
--z-ambient: 0;
/* ============ 页面基础样式 ============ */
background-color: var(--color-bg-page);
@@ -128,7 +234,10 @@ page {
line-height: var(--line-height-normal);
}
/* ============ 通用工具类 ============ */
/* ==========================================================================
通用工具类
========================================================================== */
.container {
padding: var(--spacing-page-x);
}
@@ -142,17 +251,34 @@ page {
.flex-shrink-0 { flex-shrink: 0; }
.wrap { flex-wrap: wrap; }
/* 4 列宫格:用 flex + 百分比宽度实现。
注:display:grid 在 WebView 渲染下可用,但 Skyline 不支持,故统一改为 flex 以免疫渲染引擎迁移。*/
.grid-4 {
display: flex;
flex-wrap: wrap;
}
.grid-4 > .grid-item {
width: 25%;
box-sizing: border-box;
}
.text-strong { color: var(--color-text-strong); }
.text-primary { color: var(--color-text-primary); }
.text-secondary { color: var(--color-text-secondary); }
.text-tertiary { color: var(--color-text-tertiary); }
.text-placeholder { color: var(--color-text-placeholder); }
.text-white { color: var(--color-text-inverse); }
.text-brand { color: var(--color-primary); }
.text-success { color: var(--color-success); }
.text-warning { color: var(--color-warning); }
.text-danger { color: var(--color-danger); }
.text-info { color: var(--color-info); }
.text-brand { color: var(--color-primary-strong); }
/* 品牌色作文字只能用 -strong 变体:基础色 #E96B6B 在白底仅 3.10:1。
保留 .text-brand-soft 这个类名是为了不破坏既有引用,取值已统一到 -strong,
如需「更亮的品牌色」请用于背景/图形而非文字。 */
.text-brand-soft { color: var(--color-primary-strong); }
.text-success { color: var(--color-success-strong); }
.text-warning { color: var(--color-warning-strong); }
.text-danger { color: var(--color-danger-strong); }
.text-info { color: var(--color-info-strong); }
.font-micro { font-size: var(--font-size-micro); }
.font-xs { font-size: var(--font-size-xs); }
.font-sm { font-size: var(--font-size-sm); }
.font-md { font-size: var(--font-size-md); }
@@ -161,6 +287,7 @@ page {
.font-xl { font-size: var(--font-size-xl); }
.font-2xl { font-size: var(--font-size-2xl); }
.font-3xl { font-size: var(--font-size-3xl); }
.font-display { font-size: var(--font-size-display); }
.font-regular { font-weight: var(--font-weight-regular); }
.font-medium { font-weight: var(--font-weight-medium); }
@@ -198,7 +325,7 @@ page {
padding-bottom: env(safe-area-inset-bottom);
}
/* 页面卡片基础样式(中低密度留白) */
/* 页面卡片基础样式 */
.card-base {
background: var(--color-bg-card);
border-radius: var(--radius-lg);
@@ -211,3 +338,38 @@ page {
height: var(--border-width);
background: var(--color-divider);
}
/* ==========================================================================
可访问性工具类(v2 新增)
========================================================================== */
/* 保证任意可点元素达到 44×44px 热区,且视觉尺寸可独立控制 */
.tap-min {
min-width: var(--tap-min);
min-height: var(--tap-min);
display: flex;
align-items: center;
justify-content: center;
}
/* 相邻可点元素之间的最小间距 */
.tap-gap > * + * {
margin-left: var(--tap-gap);
}
/* 焦点可见(小程序支持键盘/无障碍焦点) */
.focusable:focus,
.focusable:focus-visible {
outline: 4rpx solid var(--color-border-focus);
outline-offset: 2rpx;
}
/* 按压反馈:所有可点元素统一使用,替代"点了没反应" */
.pressable {
transition: transform var(--motion-fast) var(--ease-spring),
opacity var(--motion-fast) var(--ease-standard);
}
.pressable:active {
transform: scale(var(--press-scale));
opacity: var(--press-opacity);
}
+2 -2
View File
@@ -1,2 +1,2 @@
.ui-act{overflow:hidden;border-radius:28rpx;background:#fff;box-shadow:0 10rpx 32rpx rgba(34,35,91,.08)}.ui-act__cover{position:relative;width:100%;height:240rpx;background:#F0F1F6}.ui-act__cover-img{display:block;width:100%;height:100%}.ui-act__fee-badge{position:absolute;top:18rpx;right:18rpx;padding:7rpx 15rpx;border-radius:22rpx;background:linear-gradient(135deg,var(--mini-accent-coral),var(--mini-accent-pink));color:#fff;font-size:18rpx;font-weight:600}.ui-act__body{padding:22rpx 24rpx}.ui-act__title{overflow:hidden;color:#222746;font-size:28rpx;font-weight:700;line-height:1.35;white-space:nowrap;text-overflow:ellipsis}.ui-act__meta{margin-top:7rpx;color:#767C94;font-size:20rpx;line-height:1.45}.ui-act__intro{display:-webkit-box;overflow:hidden;margin-top:12rpx;color:#626981;font-size:21rpx;line-height:1.55;-webkit-box-orient:vertical;-webkit-line-clamp:2}.ui-act__footer{display:flex;align-items:center;justify-content:space-between;margin-top:18rpx}.ui-act__capacity{color:#858A9E;font-size:19rpx}.ui-act__status-action{min-width:126rpx;height:56rpx;display:flex;align-items:center;justify-content:center;border-radius:28rpx;background:linear-gradient(135deg,var(--mini-accent-coral),var(--mini-accent-pink));color:#fff;font-size:21rpx;font-weight:650}.ui-act__status-action.disabled{background:#EFF0F5;color:#8E93A6}.ui-act--compact{display:flex;height:200rpx}.ui-act--compact .ui-act__cover{width:200rpx;height:200rpx;flex-shrink:0}.ui-act--compact .ui-act__body{flex:1;min-width:0;padding:16rpx 18rpx}.ui-act--compact .ui-act__intro{display:none}
.ui-act__type-row{display:flex;align-items:center;margin-top:10rpx;flex-wrap:wrap}.ui-act__type-badge{padding:4rpx 14rpx;border-radius:18rpx;background:#FFF1F0;color:#D9453C;font-size:18rpx;font-weight:600}.ui-act__eligibility{margin-left:12rpx;color:#858A9E;font-size:18rpx}
.ui-act{overflow:hidden;border-radius:28rpx;background:var(--color-bg-card);box-shadow:0 10rpx 32rpx rgba(34,35,91,.08)}.ui-act__cover{position:relative;width:100%;height:240rpx;background:var(--color-bg-subtle)}.ui-act__cover-img{display:block;width:100%;height:100%}.ui-act__fee-badge{position:absolute;top:18rpx;right:18rpx;padding:7rpx 15rpx;border-radius:22rpx;background:var(--gradient-brand-solid);color:var(--color-text-inverse);font-size:18rpx;font-weight:600}.ui-act__body{padding:22rpx 24rpx}.ui-act__title{overflow:hidden;color:var(--color-text-strong);font-size:28rpx;font-weight:700;line-height:1.35;white-space:nowrap;text-overflow:ellipsis}.ui-act__meta{margin-top:7rpx;color:var(--color-text-tertiary);font-size:24rpx;line-height:1.45}.ui-act__intro{display:-webkit-box;overflow:hidden;margin-top:12rpx;color:var(--color-text-secondary);font-size:24rpx;line-height:1.55;-webkit-box-orient:vertical;-webkit-line-clamp:2}.ui-act__footer{display:flex;align-items:center;justify-content:space-between;margin-top:18rpx}.ui-act__capacity{color:var(--color-text-tertiary);font-size:24rpx}.ui-act__status-action{min-width:126rpx;min-height:var(--tap-min);display:flex;align-items:center;justify-content:center;border-radius:28rpx;background:var(--gradient-brand-solid);color:var(--color-text-inverse);font-size:24rpx;font-weight:600}.ui-act__status-action.disabled{background:var(--color-bg-subtle);color:var(--color-text-tertiary)}.ui-act--compact{display:flex;height:200rpx}.ui-act--compact .ui-act__cover{width:200rpx;height:200rpx;flex-shrink:0}.ui-act--compact .ui-act__body{flex:1;min-width:0;padding:16rpx 18rpx}.ui-act--compact .ui-act__intro{display:none}
.ui-act__type-row{display:flex;align-items:center;margin-top:10rpx;flex-wrap:wrap}.ui-act__type-badge{padding:4rpx 14rpx;border-radius:18rpx;background:var(--color-primary-light);color:var(--color-danger-strong);font-size:18rpx;font-weight:600}.ui-act__eligibility{margin-left:12rpx;color:var(--color-text-tertiary);font-size:24rpx}
+2 -2
View File
@@ -28,7 +28,7 @@
}
.ui-avatar__fallback-text {
font-size:var(--font-size-lg);
color: var(--color-primary);
color:var(--color-primary-strong);
font-weight:var(--font-weight-semibold);
}
.ui-avatar__fallback-icon {
@@ -48,7 +48,7 @@
line-height:1;
padding:4rpx 8rpx;
border-radius:var(--radius-full);
color: #FFFFFF;
color:var(--color-text-inverse);
font-weight:var(--font-weight-medium);
white-space:nowrap;
}
+36 -23
View File
@@ -1,6 +1,15 @@
/**
* Button 组件样式
* 引用全局 Design Token(addGlobalClass:true)
*
* 2026-09-22 修复:
* 1) 触摸目标:md 只有 80rpx(40px)、sm 只有 56rpx(28px),低于 44px 下限;
* text 变体更是 min-height:auto,几乎点不中。现统一以 --tap-min 兜底。
* 2) 对比度:主按钮背景原为 --color-primary(#E96B6B),白字仅 3.10:1。
* 改用 --color-primary-solid(#C24C50) = 4.73:1,视觉上仍是暖红。
* secondary/text 的红色文字同理从 3.10 提到 --color-primary-strong 的 5.33。
* 3) 危险按钮 --color-danger(#D94A4A) 白字 4.18:1 不达标,改用 -strong 变体。
* 4) 按压反馈统一走 --press-scale / --press-opacity,替代硬编码 0.98 / 0.85。
*/
.ui-btn {
display:inline-flex;
@@ -9,30 +18,31 @@
box-sizing:border-box;
border-radius:var(--radius-full);
font-family:var(--font-family-cn);
font-weight: var(--font-weight-medium);
font-weight:var(--font-weight-semibold);
text-align:center;
transition: opacity var(--motion-fast) var(--ease-standard),
transform var(--motion-fast) var(--ease-standard);
transition:transform var(--motion-fast) var(--ease-spring),
opacity var(--motion-fast) var(--ease-standard),
background-color var(--motion-fast) var(--ease-standard);
user-select:none;
line-height: 1;
line-height:1.2;
white-space:nowrap;
}
/* 尺寸 */
/* 尺寸:全部以 44×44px 为热区下限 */
.ui-btn--sm {
padding: 14rpx 24rpx;
padding:14rpx 28rpx;
font-size:var(--font-size-sm);
min-height: 56rpx;
min-height:var(--tap-min);
}
.ui-btn--md {
padding:20rpx 36rpx;
font-size:var(--font-size-base);
min-height: 80rpx;
min-height:var(--tap-min);
}
.ui-btn--lg {
padding:26rpx 48rpx;
font-size:var(--font-size-lg);
min-height: 96rpx;
min-height:var(--tap-comfortable);
}
/* 撑满 */
@@ -43,29 +53,30 @@
/* 变体 */
.ui-btn--primary {
background: var(--color-primary);
color: #FFFFFF;
background:var(--color-primary-solid);
color:var(--color-text-inverse);
}
.ui-btn--secondary {
background:var(--color-bg-card);
color: var(--color-primary);
border: 1rpx solid var(--color-primary);
color:var(--color-primary-strong);
border:var(--border-width) solid var(--color-primary-strong);
}
.ui-btn--ghost {
background:transparent;
color:var(--color-text-primary);
border: 1rpx solid var(--color-border);
border:var(--border-width) solid var(--color-border-strong);
}
.ui-btn--danger {
background: var(--color-danger);
color: #FFFFFF;
background:var(--color-danger-strong);
color:var(--color-text-inverse);
}
.ui-btn--text {
background:transparent;
color: var(--color-primary);
padding-left: 0;
padding-right: 0;
min-height: auto;
color:var(--color-primary-strong);
padding-left:var(--spacing-2);
padding-right:var(--spacing-2);
/* 视觉是纯文字,但热区仍需 44px:多出的部分由 align-items:center 居中留白 */
min-height:var(--tap-min);
}
/* 状态 */
@@ -83,9 +94,11 @@
border-color:var(--color-text-disabled);
}
.ui-btn--hover {
opacity: 0.85;
transform: scale(0.98);
/* 按压反馈(hover-class 与 CSS :active 双保险) */
.ui-btn--hover,
.ui-btn:active {
opacity:var(--press-opacity);
transform:scale(var(--press-scale));
}
/* Loading spinner */
@@ -19,13 +19,13 @@
align-items:baseline;
}
.ui-conv__name {
color: #222746;
color:var(--color-text-strong);
font-size:26rpx;
font-weight: 650;
font-weight:600;
}
.ui-conv__time {
color: #8b90a5;
font-size: 19rpx;
color:var(--color-text-tertiary);
font-size:24rpx;
flex-shrink:0;
margin-left:var(--spacing-2);
}
@@ -38,8 +38,8 @@
.ui-conv__last {
flex:1;
min-width:0;
color: #7a8097;
font-size: 21rpx;
color:var(--color-text-tertiary);
font-size:24rpx;
overflow:hidden;
white-space:nowrap;
text-overflow:ellipsis;
@@ -51,7 +51,7 @@
padding:0 10rpx;
border-radius:var(--radius-full);
background:var(--color-danger);
color: #FFFFFF;
color:var(--color-text-inverse);
font-size:var(--font-size-xs);
display:flex;
align-items:center;
+5 -5
View File
@@ -44,17 +44,17 @@
display:flex;
align-items:center;
justify-content:center;
height: 80rpx;
min-height:var(--tap-min);
border-radius:var(--radius-full);
font-size:var(--font-size-base);
font-weight:var(--font-weight-medium);
}
min-width:var(--tap-min);}
.ui-empty__action--primary {
background: var(--color-primary);
color: #FFFFFF;
background:var(--color-primary-solid);
color:var(--color-text-inverse);
}
.ui-empty__action--secondary {
background:var(--color-bg-card);
color: var(--color-primary);
color:var(--color-primary-strong);
border:1rpx solid var(--color-primary);
}
+4 -4
View File
@@ -30,15 +30,15 @@
.retry-btn {
width:220rpx;
height: 80rpx;
min-height:var(--tap-min);
margin-top:24rpx;
border:0;
border-radius:var(--radius-full);
background: var(--color-primary);
background:var(--color-primary-solid);
color:var(--color-text-inverse);
font-size:26rpx;
line-height: 80rpx;
}
line-height:var(--tap-min);
min-width:var(--tap-min);}
.retry-btn::after {
border:0;
+3 -3
View File
@@ -30,7 +30,7 @@
height:36rpx;
border-radius:50%;
background:var(--color-text-disabled);
color: #FFFFFF;
color:var(--color-text-inverse);
font-size:28rpx;
display:flex;
align-items:center;
@@ -45,7 +45,7 @@
min-height:28rpx;
}
.ui-input__error {
color: var(--color-danger);
color:var(--color-danger-strong);
font-size:var(--font-size-xs);
flex:1;
}
@@ -55,7 +55,7 @@
margin-left:var(--spacing-2);
}
.ui-input--error .ui-input__field {
color: var(--color-danger);
color:var(--color-danger-strong);
}
.ui-input--error {
border-bottom-color:var(--color-border-error);
+1 -1
View File
@@ -9,7 +9,7 @@
.ui-likers--active {
background:var(--color-primary-light);
border-color:var(--color-primary-light);
color: var(--color-primary);
color:var(--color-primary-strong);
}
.ui-likers--sm {
padding:6rpx 14rpx;
+3 -3
View File
@@ -49,14 +49,14 @@
border-top-left-radius:var(--radius-sm);
}
.ui-bubble--self .ui-bubble__content {
background: var(--color-primary);
color: #FFFFFF;
background:var(--color-primary-solid);
color:var(--color-text-inverse);
border-top-right-radius:var(--radius-sm);
}
.ui-bubble__retry {
margin-top:var(--spacing-1);
font-size:var(--font-size-xs);
color: var(--color-danger);
color:var(--color-danger-strong);
align-self:flex-end;
}
.ui-bubble__sending {
+2 -2
View File
@@ -22,12 +22,12 @@
.ui-nav__back,
.ui-nav__placeholder {
width:64rpx;
height: 64rpx;
min-height:var(--tap-min);
display:flex;
align-items:center;
justify-content:center;
flex-shrink:0;
}
min-width:var(--tap-min);}
.ui-nav__back-icon {
width:36rpx;
height:36rpx;
+5 -5
View File
@@ -29,16 +29,16 @@
top:8rpx;
right:8rpx;
width:36rpx;
height: 36rpx;
min-height:var(--tap-min);
border-radius:50%;
background:rgba(0, 0, 0, 0.55);
color: #FFFFFF;
color:var(--color-text-inverse);
font-size:24rpx;
display:flex;
align-items:center;
justify-content:center;
line-height:1;
}
min-width:var(--tap-min);}
.ui-photo__retry {
position:absolute;
bottom:8rpx;
@@ -47,7 +47,7 @@
padding:4rpx 16rpx;
border-radius:var(--radius-full);
background:var(--color-danger);
color: #FFFFFF;
color:var(--color-text-inverse);
font-size:var(--font-size-xs);
}
.ui-photo__mask {
@@ -65,7 +65,7 @@
width:40rpx;
height:40rpx;
border:3rpx solid rgba(255, 255, 255, 0.5);
border-top-color: #FFFFFF;
border-top-color:var(--color-text-inverse);
border-radius:50%;
animation:ui-photo-spin 0.8s linear infinite;
}
@@ -3,7 +3,7 @@
background:var(--color-warning-light);
border-radius:var(--radius-sm);
font-size:var(--font-size-xs);
color: var(--color-warning);
color:var(--color-warning-strong);
line-height:var(--line-height-normal);
margin-bottom:var(--spacing-3);
}
@@ -64,7 +64,7 @@
}
.ui-pref__importance--required {
background:var(--color-danger-light);
color: var(--color-danger);
color:var(--color-danger-strong);
}
.ui-pref__importance--preferred {
background:var(--color-bg-disabled);
+1 -1
View File
@@ -1 +1 @@
.ui-rec{display:flex;align-items:center;gap:16rpx;min-height:132rpx;padding:14rpx 16rpx;background:#fff;border-bottom:1rpx solid #F0F1F6}.ui-rec:last-child{border-bottom:0}.ui-rec__info{flex:1;min-width:0}.ui-rec__name-row{display:flex;align-items:center;gap:10rpx}.ui-rec__name{font-size:26rpx;font-weight:700;color:#222746}.ui-rec__age{font-size:21rpx;color:#545B76}.ui-rec__online{margin-left:auto;font-size:18rpx;color:#39A987}.ui-rec__online::before{content:'·';margin-right:4rpx}.ui-rec__meta{margin-top:5rpx;font-size:20rpx;color:#767C94;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.ui-rec__reasons{display:flex;gap:7rpx;margin-top:8rpx;overflow:hidden}.ui-rec__reason{flex:none;padding:4rpx 9rpx;border-radius:12rpx;background:#F3EEFF;color:#7860AE;font-size:17rpx;white-space:nowrap}.ui-rec__actions{width:82rpx;display:flex;flex-direction:column;align-items:center;gap:7rpx}.compact-like{width:64rpx;height:64rpx;display:flex;align-items:center;justify-content:center;border-radius:32rpx;background:#FFF0F5;box-shadow:0 7rpx 18rpx rgba(255,79,145,.18)}.compact-like__icon{width:44rpx;height:44rpx}.compact-pass{font-size:17rpx;color:#A0A4B4;white-space:nowrap}
.ui-rec{display:flex;align-items:center;gap:16rpx;min-height:132rpx;padding:14rpx 16rpx;background:var(--color-bg-card);border-bottom:1rpx solid var(--color-divider)}.ui-rec:last-child{border-bottom:0}.ui-rec__info{flex:1;min-width:0}.ui-rec__name-row{display:flex;align-items:center;gap:10rpx}.ui-rec__name{font-size:26rpx;font-weight:700;color:var(--color-text-strong)}.ui-rec__age{font-size:24rpx;color:var(--color-text-secondary)}.ui-rec__online{margin-left:auto;font-size:24rpx;color:var(--color-success-strong)}.ui-rec__online::before{content:'·';margin-right:4rpx}.ui-rec__meta{margin-top:5rpx;font-size:24rpx;color:var(--color-text-tertiary);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.ui-rec__reasons{display:flex;gap:7rpx;margin-top:8rpx;overflow:hidden}.ui-rec__reason{flex:none;padding:4rpx 9rpx;border-radius:12rpx;background:var(--color-accent-purple-light);color:var(--color-accent-purple-strong);font-size:24rpx;white-space:nowrap}.ui-rec__actions{width:var(--tap-min);display:flex;flex-direction:column;align-items:center;gap:7rpx}.compact-like{width:var(--tap-min);min-height:var(--tap-min);display:flex;align-items:center;justify-content:center;border-radius:var(--radius-full);background:var(--color-primary-light);box-shadow:0 7rpx 18rpx rgba(255,79,145,.18);}.compact-like__icon{width:44rpx;height:44rpx}.compact-pass{font-size:24rpx;color:var(--color-text-tertiary);white-space:nowrap}
+26 -5
View File
@@ -1,28 +1,49 @@
/**
* 区块标题(全站所有页面共用,是排版层级的关键一环)
*
* 2026-09-22 修订:
* 1) 层级拉开:标题 36rpx→40rpx(--font-size-xl),与正文 32rpx / 卡片标题 28rpx
* 形成「区块标题 > 卡片标题 > 正文 > 元信息」四级阶梯。
* 旧值 36rpx 与卡片标题仅差 10rpx,层级读不出来。
* 2) 右侧 action 是全站最容易被忽略的触摸目标:只有 26rpx 文字高(约 13px),
* 远低于 44px 下限。改为 min-height:--tap-min,热区向上补白。
* 3) action 文字色原为 --color-primary(#E96B6B)=3.10:1,不达标,改 -strong。
*/
.ui-section {
display:flex;
align-items:center;
justify-content:space-between;
padding: var(--spacing-3) var(--spacing-page-x);
padding:var(--spacing-2) var(--spacing-page-x);
}
.ui-section__left {
display:flex;
align-items:baseline;
min-width:0;
}
.ui-section__title {
font-size: var(--font-size-lg);
font-size:var(--font-size-xl);
font-weight:var(--font-weight-semibold);
color: var(--color-text-primary);
color:var(--color-text-strong);
letter-spacing:var(--letter-spacing-tight);
}
.ui-section__subtitle {
margin-left:var(--spacing-2);
font-size: var(--font-size-sm);
font-size:var(--font-size-xs);
color:var(--color-text-tertiary);
}
.ui-section__action {
display:flex;
align-items:center;
flex:none;
min-height:var(--tap-min);
padding-left:var(--spacing-3);
font-size:var(--font-size-sm);
color: var(--color-primary);
font-weight:var(--font-weight-medium);
color:var(--color-primary-strong);
transition:opacity var(--motion-fast) var(--ease-standard);
}
.ui-section__action:active {
opacity:var(--press-opacity);
}
.ui-section__arrow {
margin-left:4rpx;
+6 -6
View File
@@ -3,7 +3,7 @@
height:300rpx;
overflow:hidden;
border-radius:0 0 32rpx 32rpx;
background: #fff4f7;
background:var(--color-primary-light);
}
.service-hero__image,
@@ -36,14 +36,14 @@
.service-hero__eyebrow {
margin-bottom:10rpx;
color: var(--color-primary);
font-size: 22rpx;
color:var(--color-primary-strong);
font-size:24rpx;
font-weight:600;
letter-spacing:2rpx;
}
.service-hero__title {
color: #24305e;
color:var(--color-text-strong);
font-size:40rpx;
font-weight:700;
line-height:1.28;
@@ -51,7 +51,7 @@
.service-hero__subtitle {
margin-top:14rpx;
color: #737c96;
color:var(--color-text-tertiary);
font-size:24rpx;
line-height:1.55;
}
@@ -59,5 +59,5 @@
.service-hero--night .service-hero__eyebrow,
.service-hero--night .service-hero__title,
.service-hero--night .service-hero__subtitle {
color: #ffffff;
color:var(--color-text-inverse);
}
+4 -4
View File
@@ -20,19 +20,19 @@
}
.ui-badge--success {
background:var(--color-success-light);
color: var(--color-success);
color:var(--color-success-strong);
}
.ui-badge--warning {
background:var(--color-warning-light);
color: var(--color-warning);
color:var(--color-warning-strong);
}
.ui-badge--danger {
background:var(--color-danger-light);
color: var(--color-danger);
color:var(--color-danger-strong);
}
.ui-badge--info {
background:var(--color-info-light);
color: var(--color-info);
color:var(--color-info-strong);
}
.ui-badge--disabled {
background:var(--color-bg-disabled);
@@ -55,7 +55,7 @@
}
.ui-success__expires {
font-size:var(--font-size-xs);
color: var(--color-warning);
color:var(--color-warning-strong);
margin-bottom:var(--spacing-4);
}
.ui-success__actions {
+5 -5
View File
@@ -20,19 +20,19 @@
line-height:1;
color:var(--color-text-tertiary);
width:24rpx;
height: 24rpx;
min-height:var(--tap-min);
display:flex;
align-items:center;
justify-content:center;
}
min-width:var(--tap-min);}
.ui-tag--default.ui-tag--selected {
background:var(--color-primary-light);
color: var(--color-primary);
color:var(--color-primary-strong);
border-color:var(--color-primary);
}
.ui-tag--primary {
background: var(--color-primary);
color: #FFFFFF;
background:var(--color-primary-solid);
color:var(--color-text-inverse);
}
.ui-tag--primary.ui-tag--selected {
background:var(--color-primary-active);
+2 -2
View File
@@ -31,12 +31,12 @@
min-height:28rpx;
}
.ui-textarea__error {
color: var(--color-danger);
color:var(--color-danger-strong);
font-size:var(--font-size-xs);
flex:1;
}
.ui-textarea__hint {
color: var(--color-warning);
color:var(--color-warning-strong);
font-size:var(--font-size-xs);
flex:1;
}
+9 -9
View File
@@ -4,7 +4,7 @@
background:var(--color-bg-card);
min-height:148rpx;
padding:14rpx 18rpx;
border-bottom: 1rpx solid #F0F1F6;
border-bottom:1rpx solid var(--color-divider);
}
.ui-user-card__select {
margin-right:var(--spacing-3);
@@ -25,21 +25,21 @@
.ui-user-card__name {
font-size:26rpx;
font-weight:700;
color: #222746;
color:var(--color-text-strong);
margin-right:var(--spacing-2);
}
.ui-user-card__age {
font-size: 21rpx;
color: #596079;
font-size:24rpx;
color:var(--color-text-secondary);
}
.ui-user-card__online {
margin-left:auto;
color: #39A987;
font-size: 18rpx;
color:var(--color-success-strong);
font-size:24rpx;
}
.ui-user-card__meta {
font-size: 20rpx;
color: #767C94;
font-size:24rpx;
color:var(--color-text-tertiary);
line-height:1.4;
margin-top:4rpx;
}
@@ -47,4 +47,4 @@
flex-shrink:0;
margin-left:var(--spacing-2);
}
.ui-user-card__tags{display:flex;gap:7rpx;margin-top:8rpx;overflow:hidden}.ui-user-card__tag{flex:none;padding:4rpx 9rpx;border-radius:12rpx;background:#F3EEFF;color:#7860AE;font-size:17rpx;white-space:nowrap}
.ui-user-card__tags{display:flex;gap:7rpx;margin-top:8rpx;overflow:hidden}.ui-user-card__tag{flex:none;padding:4rpx 9rpx;border-radius:12rpx;background:var(--color-accent-purple-light);color:var(--color-accent-purple-strong);font-size:24rpx;white-space:nowrap}
+13 -13
View File
@@ -1,12 +1,12 @@
/* 关于我们样式 */
.page {
min-height:100vh;
background: #f5f5f5;
background:var(--color-bg-subtle);
padding-bottom:48rpx;
}
.logo-section {
background: linear-gradient(135deg, #E96B6B 0%, #ff9a9a 100%);
background:linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-light) 100%);
padding:80rpx 48rpx;
display:flex;
flex-direction:column;
@@ -21,7 +21,7 @@
.platform-name {
font-size:36rpx;
font-weight:700;
color: #fff;
color:var(--color-text-inverse);
margin-bottom:8rpx;
}
@@ -32,25 +32,25 @@
}
.version {
font-size: 22rpx;
font-size:24rpx;
color:rgba(255, 255, 255, 0.7);
}
.section {
margin-top:24rpx;
background: #fff;
background:var(--color-bg-card);
}
.section-title {
padding:24rpx 32rpx 16rpx;
font-size:24rpx;
color: #999;
color:var(--color-text-tertiary);
}
.intro-text {
padding:0 32rpx 20rpx;
font-size:28rpx;
color: #555;
color:var(--color-text-primary);
line-height:1.8;
}
@@ -62,7 +62,7 @@
display:flex;
align-items:center;
padding:28rpx 0;
border-bottom: 1rpx solid #f5f5f5;
border-bottom:1rpx solid var(--color-divider);
}
.list-row:last-child {
@@ -84,29 +84,29 @@
.list-label {
display:block;
font-size:32rpx;
color: #2d2d2d;
color:var(--color-text-strong);
line-height:1.4;
}
.list-desc {
display:block;
font-size:24rpx;
color: #999;
color:var(--color-text-tertiary);
line-height:1.4;
margin-top:4rpx;
}
.list-arrow {
font-size:32rpx;
color: #ccc;
color:var(--color-text-disabled);
margin-left:16rpx;
}
.footer {
margin-top:48rpx;
text-align:center;
font-size: 22rpx;
color: #ccc;
font-size:24rpx;
color:var(--color-text-disabled);
padding:0 32rpx;
line-height:1.8;
}
@@ -1,11 +1,11 @@
.page {
padding:32rpx;
background: #FFF8F7;
background:var(--color-primary-lighter);
min-height:100vh;
}
.warning-banner {
background: #FFF3F2;
background:var(--color-primary-light);
border-radius:20rpx;
padding:32rpx;
text-align:center;
@@ -13,10 +13,10 @@
}
.warning-icon { font-size:56rpx; display:block; }
.warning-title { font-size: 32rpx; font-weight: bold; color: #E96B6B; display: block; margin-top: 12rpx; }
.warning-title { font-size:32rpx; font-weight:bold; color:var(--color-primary-strong); display:block; margin-top:12rpx; }
.info-section {
background: #fff;
background:var(--color-bg-card);
border-radius:20rpx;
padding:28rpx;
margin-bottom:24rpx;
@@ -25,7 +25,7 @@
.section-title {
font-size:28rpx;
font-weight:bold;
color: #1A1A1A;
color:var(--color-text-strong);
display:block;
margin-bottom:20rpx;
}
@@ -38,12 +38,12 @@
.info-item {
font-size:26rpx;
color: #666;
color:var(--color-text-secondary);
line-height:1.6;
}
.blocker-section {
background: #FFF8E1;
background:var(--color-warning-light);
border-radius:20rpx;
padding:28rpx;
margin-bottom:24rpx;
@@ -52,14 +52,14 @@
.blocker-title {
font-size:26rpx;
font-weight:bold;
color: #E59A32;
color:var(--color-warning-strong);
display:block;
margin-bottom:12rpx;
}
.blocker-item {
font-size:24rpx;
color: #999;
color:var(--color-text-tertiary);
display:block;
margin-bottom:8rpx;
}
@@ -73,24 +73,24 @@
.reason-chip {
padding:12rpx 24rpx;
background: #F5F5F5;
background:var(--color-bg-subtle);
border-radius:32rpx;
font-size:24rpx;
color: #666;
color:var(--color-text-secondary);
border:2rpx solid transparent;
}
.reason-chip.active {
background: #FFF3F2;
border-color: #E96B6B;
color: #E96B6B;
background:var(--color-primary-light);
border-color:var(--color-primary);
color:var(--color-primary-strong);
}
.other-reason {
width:100%;
min-height:120rpx;
font-size:26rpx;
background: #F9F9F9;
background:var(--color-bg-subtle);
border-radius:16rpx;
padding:20rpx;
box-sizing:border-box;
@@ -100,20 +100,20 @@
width:100%;
height:88rpx;
line-height:88rpx;
background: #E96B6B;
color: #fff;
background:var(--color-primary-solid);
color:var(--color-text-inverse);
border-radius:44rpx;
font-size:30rpx;
margin-top:32rpx;
}
.btn-confirm[disabled] { background: #CCC; }
.btn-confirm[disabled] { background:var(--color-bg-muted); }
.hint {
display:block;
text-align:center;
font-size: 22rpx;
color: #999;
font-size:24rpx;
color:var(--color-text-tertiary);
margin-top:16rpx;
line-height:1.5;
}
@@ -127,15 +127,15 @@
padding:120rpx 32rpx;
}
.success-icon { font-size: 80rpx; color: #E96B6B; margin-bottom: 24rpx; }
.success-title { font-size: 36rpx; font-weight: bold; color: #1A1A1A; margin-bottom: 16rpx; }
.success-hint { font-size: 28rpx; color: #666; text-align: center; line-height: 1.6; margin-bottom: 48rpx; }
.success-icon { font-size:80rpx; color:var(--color-primary-strong); margin-bottom:24rpx; }
.success-title { font-size:36rpx; font-weight:bold; color:var(--color-text-strong); margin-bottom:16rpx; }
.success-hint { font-size:28rpx; color:var(--color-text-secondary); text-align:center; line-height:1.6; margin-bottom:48rpx; }
.btn-back {
width:60%;
height:88rpx;
line-height:88rpx;
background: #E96B6B;
color: #fff;
background:var(--color-primary-solid);
color:var(--color-text-inverse);
border-radius:44rpx;
font-size:30rpx;
}
@@ -1,7 +1,7 @@
.page { padding: 32rpx; background: #FFF8F7; min-height: 100vh; }
.page { padding:32rpx; background:var(--color-primary-lighter); min-height:100vh; }
.status-card {
background: #fff;
background:var(--color-bg-card);
border-radius:24rpx;
padding:48rpx 32rpx;
text-align:center;
@@ -10,35 +10,35 @@
}
.status-card.paused {
background: #F9F9F9;
background:var(--color-bg-subtle);
}
.status-icon { font-size:72rpx; display:block; margin-bottom:16rpx; }
.status-title { font-size: 32rpx; font-weight: bold; color: #1A1A1A; display: block; }
.status-hint { font-size: 24rpx; color: #999; display: block; margin-top: 12rpx; line-height: 1.5; }
.status-title { font-size:32rpx; font-weight:bold; color:var(--color-text-strong); display:block; }
.status-hint { font-size:24rpx; color:var(--color-text-tertiary); display:block; margin-top:12rpx; line-height:1.5; }
.btn-withdraw, .btn-resume {
width:80%;
height: 72rpx;
line-height: 72rpx;
min-height:var(--tap-min);
line-height:var(--tap-min);
border-radius:36rpx;
font-size:28rpx;
margin-top:32rpx;
border:none;
}
min-width:var(--tap-min);}
.btn-withdraw {
background: #FFF3F2;
color: #E96B6B;
background:var(--color-primary-light);
color:var(--color-primary-strong);
}
.btn-resume {
background: #E96B6B;
color: #fff;
background:var(--color-primary-solid);
color:var(--color-text-inverse);
}
.menu-list {
background: #fff;
background:var(--color-bg-card);
border-radius:24rpx;
overflow:hidden;
}
@@ -47,13 +47,13 @@
display:flex;
align-items:center;
padding:32rpx 28rpx;
border-bottom: 1rpx solid #f5f5f5;
border-bottom:1rpx solid var(--color-divider);
}
.menu-item:last-child { border-bottom:none; }
.menu-item.danger .menu-text { color: #E96B6B; }
.menu-item.danger .menu-text { color:var(--color-primary-strong); }
.menu-icon { font-size:36rpx; margin-right:20rpx; }
.menu-text { flex: 1; font-size: 28rpx; color: #1A1A1A; }
.menu-hint { font-size: 22rpx; color: #999; margin-right: 12rpx; }
.menu-arrow { font-size: 32rpx; color: #CCC; }
.menu-text { flex:1; font-size:28rpx; color:var(--color-text-strong); }
.menu-hint { font-size:24rpx; color:var(--color-text-tertiary); margin-right:12rpx; }
.menu-arrow { font-size:32rpx; color:var(--color-text-disabled); }
@@ -1,11 +1,11 @@
.page {
padding:32rpx;
background: #FFF8F7;
background:var(--color-primary-lighter);
min-height:100vh;
}
.status-banner {
background: linear-gradient(135deg, #E96B6B 0%, #C44545 100%);
background:linear-gradient(135deg, var(--color-primary) 0%, var(--color-danger) 100%);
border-radius:24rpx;
padding:48rpx 32rpx;
text-align:center;
@@ -21,7 +21,7 @@
.banner-title {
font-size:36rpx;
font-weight:bold;
color: #fff;
color:var(--color-text-inverse);
display:block;
}
@@ -39,7 +39,7 @@
.normal-icon {
font-size:80rpx;
color: #67C23A;
color:var(--color-success-strong);
display:block;
margin-bottom:24rpx;
}
@@ -47,14 +47,14 @@
.normal-title {
font-size:32rpx;
font-weight:bold;
color: #1A1A1A;
color:var(--color-text-strong);
display:block;
margin-bottom:16rpx;
}
.normal-hint {
font-size:26rpx;
color: #666;
color:var(--color-text-secondary);
display:block;
line-height:1.6;
}
@@ -66,7 +66,7 @@
}
.action-card {
background: #fff;
background:var(--color-bg-card);
border-radius:20rpx;
padding:28rpx;
box-shadow:0 2rpx 12rpx rgba(0,0,0,0.04);
@@ -82,17 +82,17 @@
.action-type {
font-size:28rpx;
font-weight:bold;
color: #E96B6B;
color:var(--color-primary-strong);
}
.action-time {
font-size: 22rpx;
color: #BBB;
font-size:24rpx;
color:var(--color-text-disabled);
}
.action-reason {
font-size:26rpx;
color: #666;
color:var(--color-text-secondary);
display:block;
margin-bottom:12rpx;
line-height:1.5;
@@ -100,26 +100,26 @@
.action-expiry {
font-size:24rpx;
color: #E59A32;
color:var(--color-warning-strong);
display:block;
margin-bottom:20rpx;
}
.btn-appeal {
width:100%;
height: 72rpx;
line-height: 72rpx;
background: #FFF3F2;
color: #E96B6B;
min-height:var(--tap-min);
line-height:var(--tap-min);
background:var(--color-primary-light);
color:var(--color-primary-strong);
border-radius:36rpx;
font-size:28rpx;
border: 1rpx solid #E96B6B;
}
border:1rpx solid var(--color-primary);
min-width:var(--tap-min);}
.appeal-hint {
display:block;
font-size:24rpx;
color: #999;
color:var(--color-text-tertiary);
text-align:center;
margin-top:16rpx;
}
@@ -127,30 +127,30 @@
.appeal-disabled {
text-align:center;
padding:60rpx 32rpx;
background: #fff;
background:var(--color-bg-card);
border-radius:20rpx;
}
.disabled-hint {
font-size:26rpx;
color: #999;
color:var(--color-text-tertiary);
display:block;
margin-bottom:24rpx;
}
.btn-contact {
width:60%;
height: 72rpx;
line-height: 72rpx;
background: #E96B6B;
color: #fff;
min-height:var(--tap-min);
line-height:var(--tap-min);
background:var(--color-primary-solid);
color:var(--color-text-inverse);
border-radius:36rpx;
font-size:28rpx;
border:none;
}
min-width:var(--tap-min);}
.loading-page {
text-align:center;
padding:100rpx;
color: #999;
color:var(--color-text-tertiary);
}
@@ -1 +1 @@
@import "../../styles/service-page.wxss";.activity-hero{height:360rpx;padding:48rpx 32rpx;box-sizing:border-box;background:linear-gradient(140deg,#F1D4C7,#F9ECE4);position:relative;overflow:hidden}.activity-hero:after{content:'相遇';position:absolute;right:28rpx;bottom:12rpx;font-size:90rpx;color:rgba(125,76,63,.15);font-weight:700}.activity-badge{display:inline-flex;padding:7rpx 14rpx;border-radius:999rpx;background:rgba(255,255,255,.75);color:#9A5B4E;font-size:21rpx}.activity-title{display:block;margin-top:28rpx;width:82%;font-size:40rpx;line-height:1.4;font-weight:700;color:#5E3730}.activity-slogan{display:block;margin-top:16rpx;font-size:23rpx;color:#8A5F57}.body-text{font-size:27rpx;color:var(--color-text-secondary);line-height:1.8}.rule-row{display:flex;gap:18rpx;align-items:flex-start;padding:16rpx 0;font-size:26rpx}.rule-row>text:first-child{width:42rpx;height:42rpx;display:flex;align-items:center;justify-content:center;flex:none;border-radius:50%;background:var(--color-primary-light);color:var(--color-primary);font-size:21rpx}.rule-row>text:last-child{padding-top:4rpx;line-height:1.55}
@import "../../styles/service-page.wxss";.activity-hero{height:360rpx;padding:48rpx 32rpx;box-sizing:border-box;background:linear-gradient(140deg,var(--color-warning-light),var(--color-warning-light));position:relative;overflow:hidden}.activity-hero:after{content:'相遇';position:absolute;right:28rpx;bottom:12rpx;font-size:90rpx;color:rgba(125,76,63,.15);font-weight:700}.activity-badge{display:inline-flex;padding:7rpx 14rpx;border-radius:999rpx;background:rgba(255,255,255,.75);color:var(--color-warning-strong);font-size:21rpx}.activity-title{display:block;margin-top:28rpx;width:82%;font-size:40rpx;line-height:1.4;font-weight:700;color:var(--color-warning-strong)}.activity-slogan{display:block;margin-top:16rpx;font-size:24rpx;color:var(--color-warning-strong)}.body-text{font-size:27rpx;color:var(--color-text-secondary);line-height:1.8}.rule-row{display:flex;gap:18rpx;align-items:flex-start;padding:16rpx 0;font-size:26rpx}.rule-row>text:first-child{width:42rpx;height:42rpx;display:flex;align-items:center;justify-content:center;flex:none;border-radius:50%;background:var(--color-primary-light);color:var(--color-primary-strong);font-size:24rpx}.rule-row>text:last-child{padding-top:4rpx;line-height:1.55}
@@ -1,6 +1,6 @@
.page {
padding:32rpx;
background: #FFF8F7;
background:var(--color-primary-lighter);
min-height:100vh;
}
@@ -12,19 +12,19 @@
.title {
font-size:36rpx;
font-weight:bold;
color: #1A1A1A;
color:var(--color-text-strong);
display:block;
}
.activity-name {
font-size:24rpx;
color: #999;
color:var(--color-text-tertiary);
display:block;
margin-top:8rpx;
}
.section {
background: #fff;
background:var(--color-bg-card);
border-radius:20rpx;
padding:32rpx;
margin-bottom:24rpx;
@@ -33,7 +33,7 @@
.section-title {
font-size:28rpx;
font-weight:bold;
color: #1A1A1A;
color:var(--color-text-strong);
display:block;
margin-bottom:20rpx;
}
@@ -46,29 +46,29 @@
.radio-item {
padding:24rpx;
background: #F9F9F9;
background:var(--color-bg-subtle);
border-radius:16rpx;
font-size:28rpx;
color: #333;
color:var(--color-text-primary);
border:2rpx solid transparent;
transition:all 0.2s;
}
.radio-item.active {
background: #FFF3F2;
border-color: #E96B6B;
color: #E96B6B;
background:var(--color-primary-light);
border-color:var(--color-primary);
color:var(--color-primary-strong);
}
.participant-list {
margin-top:24rpx;
padding-top:24rpx;
border-top: 1rpx solid #f0f0f0;
border-top:1rpx solid var(--color-divider);
}
.list-hint {
font-size:24rpx;
color: #999;
color:var(--color-text-tertiary);
display:block;
margin-bottom:16rpx;
}
@@ -77,7 +77,7 @@
display:flex;
align-items:center;
padding:16rpx 0;
border-bottom: 1rpx solid #f5f5f5;
border-bottom:1rpx solid var(--color-divider);
}
.participant-item:last-child {
@@ -89,17 +89,17 @@
height:64rpx;
border-radius:32rpx;
margin-right:16rpx;
background: #EEE;
background:var(--color-bg-subtle);
}
.name {
flex:1;
font-size:28rpx;
color: #333;
color:var(--color-text-primary);
}
.checkmark {
color: #E96B6B;
color:var(--color-primary-strong);
font-size:32rpx;
font-weight:bold;
}
@@ -108,15 +108,15 @@
width:100%;
height:88rpx;
line-height:88rpx;
background: #E96B6B;
color: #fff;
background:var(--color-primary-solid);
color:var(--color-text-inverse);
border-radius:44rpx;
font-size:30rpx;
margin-top:24rpx;
}
.btn-submit[disabled] {
background: #CCC;
background:var(--color-bg-muted);
}
.btn-skip {
@@ -124,10 +124,10 @@
height:88rpx;
line-height:88rpx;
background:transparent;
color: #999;
color:var(--color-text-tertiary);
border-radius:44rpx;
font-size:28rpx;
border: 1rpx solid #DDD;
border:1rpx solid var(--color-border-strong);
margin-top:16rpx;
}
@@ -142,20 +142,20 @@
.success-icon {
font-size:80rpx;
color: #E96B6B;
color:var(--color-primary-strong);
margin-bottom:24rpx;
}
.success-title {
font-size:36rpx;
font-weight:bold;
color: #1A1A1A;
color:var(--color-text-strong);
margin-bottom:16rpx;
}
.success-hint {
font-size:28rpx;
color: #999;
color:var(--color-text-tertiary);
margin-bottom:48rpx;
}
@@ -163,8 +163,8 @@
width:80%;
height:88rpx;
line-height:88rpx;
background: #E96B6B;
color: #fff;
background:var(--color-primary-solid);
color:var(--color-text-inverse);
border-radius:44rpx;
font-size:30rpx;
}
@@ -1,6 +1,6 @@
.page {
padding:32rpx;
background: #FFF8F7;
background:var(--color-primary-lighter);
min-height:100vh;
}
@@ -12,13 +12,13 @@
.title {
font-size:36rpx;
font-weight:bold;
color: #1A1A1A;
color:var(--color-text-strong);
display:block;
}
.activity-name {
font-size:24rpx;
color: #999;
color:var(--color-text-tertiary);
display:block;
margin-top:8rpx;
}
@@ -26,19 +26,19 @@
.loading-state, .empty-state {
text-align:center;
padding:100rpx 32rpx;
color: #999;
color:var(--color-text-tertiary);
}
.empty-icon {
font-size:80rpx;
color: #E96B6B;
color:var(--color-primary-strong);
display:block;
margin-bottom:24rpx;
}
.empty-hint {
font-size:24rpx;
color: #BBB;
color:var(--color-text-disabled);
display:block;
margin-top:16rpx;
}
@@ -50,7 +50,7 @@
}
.match-card {
background: #fff;
background:var(--color-bg-card);
border-radius:20rpx;
padding:24rpx;
display:flex;
@@ -62,7 +62,7 @@
width:100rpx;
height:100rpx;
border-radius:50rpx;
background: #F0F0F0;
background:var(--color-bg-subtle);
flex-shrink:0;
}
@@ -74,20 +74,20 @@
.match-name {
font-size:30rpx;
font-weight:bold;
color: #1A1A1A;
color:var(--color-text-strong);
display:block;
}
.match-meta {
font-size:24rpx;
color: #999;
color:var(--color-text-tertiary);
display:block;
margin-top:8rpx;
}
.btn-chat {
background: #E96B6B;
color: #fff;
background:var(--color-primary-solid);
color:var(--color-text-inverse);
font-size:24rpx;
padding:12rpx 28rpx;
border-radius:24rpx;
@@ -98,10 +98,10 @@
.btn-refresh {
margin-top:32rpx;
background:transparent;
color: #999;
border: 1rpx solid #DDD;
color:var(--color-text-tertiary);
border:1rpx solid var(--color-border-strong);
border-radius:44rpx;
height: 72rpx;
line-height: 72rpx;
min-height:var(--tap-min);
line-height:var(--tap-min);
font-size:26rpx;
}
min-width:var(--tap-min);}
@@ -1,19 +1,19 @@
.container { padding: 24rpx; min-height: 100vh; background: #f5f5f5; }
.loading { text-align: center; padding: 80rpx; color: #999; }
.container { padding:24rpx; min-height:100vh; background:var(--color-bg-subtle); }
.loading { text-align:center; padding:80rpx; color:var(--color-text-tertiary); }
.empty { text-align:center; padding:80rpx 0; }
.empty-icon { font-size:80rpx; display:block; margin-bottom:20rpx; }
.empty-text { font-size: 32rpx; color: #666; display: block; }
.empty-hint { font-size: 26rpx; color: #999; display: block; margin-top: 12rpx; }
.result-card { background: #fff; border-radius: 16rpx; padding: 24rpx; margin-bottom: 20rpx; box-shadow: 0 2rpx 8rpx rgba(0,0,0,0.05); }
.empty-text { font-size:32rpx; color:var(--color-text-secondary); display:block; }
.empty-hint { font-size:26rpx; color:var(--color-text-tertiary); display:block; margin-top:12rpx; }
.result-card { background:var(--color-bg-card); border-radius:16rpx; padding:24rpx; margin-bottom:20rpx; box-shadow:0 2rpx 8rpx rgba(0,0,0,0.05); }
.card-header { display:flex; align-items:center; margin-bottom:16rpx; }
.avatar { width: 80rpx; height: 80rpx; border-radius: 50rpx; background: #eee; }
.avatar { width:80rpx; height:80rpx; border-radius:50rpx; background:var(--color-bg-subtle); }
.info { flex:1; margin-left:20rpx; }
.name { font-size: 30rpx; font-weight: bold; color: #333; display: block; }
.name { font-size:30rpx; font-weight:bold; color:var(--color-text-primary); display:block; }
.status-badge { font-size:22rpx; padding:4rpx 12rpx; border-radius:12rpx; margin-top:8rpx; display:inline-block; }
.badge-confirmed { background: #e8f5e9; color: #2e7d32; }
.badge-waiting { background: #fff3e0; color: #e65100; }
.badge-confirmed { background:var(--color-success-light); color:var(--color-success-strong); }
.badge-waiting { background:var(--color-warning-light); color:var(--color-warning-strong); }
.card-body { margin-bottom:16rpx; }
.activity-name { font-size: 24rpx; color: #999; }
.activity-name { font-size:24rpx; color:var(--color-text-tertiary); }
.card-actions { display:flex; justify-content:flex-end; }
.btn-waiting { background: #f5f5f5; color: #999; font-size: 26rpx; padding: 12rpx 32rpx; border-radius: 24rpx; border: none; }
.btn-chat { background: linear-gradient(135deg, #FF6B6B, #EE5A24); color: #fff; font-size: 26rpx; padding: 12rpx 32rpx; border-radius: 24rpx; border: none; }
.btn-waiting { background:var(--color-bg-subtle); color:var(--color-text-tertiary); font-size:26rpx; padding:12rpx 32rpx; border-radius:24rpx; border:none; }
.btn-chat { background:var(--gradient-brand-solid); color:var(--color-text-inverse); font-size:26rpx; padding:12rpx 32rpx; border-radius:24rpx; border:none; }
@@ -1,10 +1,10 @@
.container { padding: 40rpx 24rpx; min-height: 100vh; background: #f5f5f5; display: flex; flex-direction: column; align-items: center; }
.container { padding:40rpx 24rpx; min-height:100vh; background:var(--color-bg-subtle); display:flex; flex-direction:column; align-items:center; }
.header { text-align:center; margin-bottom:40rpx; }
.avatar { width: 120rpx; height: 120rpx; border-radius: 60rpx; background: #eee; }
.partner-name { font-size: 36rpx; font-weight: bold; color: #333; display: block; margin-top: 16rpx; }
.status-section { background: #fff; border-radius: 20rpx; padding: 48rpx 40rpx; width: 100%; text-align: center; box-shadow: 0 2rpx 12rpx rgba(0,0,0,0.06); }
.avatar { width:120rpx; height:120rpx; border-radius:60rpx; background:var(--color-bg-subtle); }
.partner-name { font-size:36rpx; font-weight:bold; color:var(--color-text-primary); display:block; margin-top:16rpx; }
.status-section { background:var(--color-bg-card); border-radius:20rpx; padding:48rpx 40rpx; width:100%; text-align:center; box-shadow:0 2rpx 12rpx rgba(0,0,0,0.06); }
.success-icon, .waiting-icon, .pending-icon { font-size:72rpx; margin-bottom:20rpx; }
.success-title, .waiting-title, .pending-title { font-size: 34rpx; font-weight: bold; color: #333; display: block; margin-bottom: 12rpx; }
.success-hint, .waiting-hint, .pending-hint { font-size: 26rpx; color: #888; display: block; margin-bottom: 32rpx; }
.chat-btn, .confirm-btn { background: linear-gradient(135deg, #FF6B6B, #EE5A24); color: #fff; border: none; border-radius: 44rpx; font-size: 30rpx; padding: 16rpx 60rpx; }
.decline-btn { background: #f5f5f5; color: #999; border: none; border-radius: 44rpx; font-size: 28rpx; padding: 16rpx 60rpx; margin-top: 20rpx; }
.success-title, .waiting-title, .pending-title { font-size:34rpx; font-weight:bold; color:var(--color-text-primary); display:block; margin-bottom:12rpx; }
.success-hint, .waiting-hint, .pending-hint { font-size:26rpx; color:var(--color-text-tertiary); display:block; margin-bottom:32rpx; }
.chat-btn, .confirm-btn { background:var(--gradient-brand-solid); color:var(--color-text-inverse); border:none; border-radius:44rpx; font-size:30rpx; padding:16rpx 60rpx; }
.decline-btn { background:var(--color-bg-subtle); color:var(--color-text-tertiary); border:none; border-radius:44rpx; font-size:28rpx; padding:16rpx 60rpx; margin-top:20rpx; }
@@ -1 +1 @@
.page{padding:32rpx;background:#FFF8F7;min-height:100vh;text-align:center;color:#999;padding-top:200rpx;}
.page{padding:32rpx;background:var(--color-primary-lighter);min-height:100vh;text-align:center;color:var(--color-text-tertiary);padding-top:200rpx;}
+1 -1
View File
@@ -1 +1 @@
.act-page{min-height:100vh;padding-bottom:40rpx;background:#F4F5FA}.activity-hero{padding:env(safe-area-inset-top) 24rpx 26rpx;border-radius:0 0 36rpx 36rpx;background:linear-gradient(160deg,var(--mini-night-start),var(--mini-night-end));box-shadow:var(--mini-shadow)}.activity-nav{position:relative;display:flex;align-items:center;justify-content:center;height:88rpx}.activity-title{color:#fff;font-size:31rpx;font-weight:700}.activity-calendar{position:absolute;right:0;display:flex;align-items:center;justify-content:center;width:62rpx;height:62rpx;border:1rpx solid rgba(255,255,255,.18);border-radius:31rpx;background:rgba(255,255,255,.1)}.activity-calendar image{width:34rpx;height:34rpx;filter:brightness(0) invert(1)}.activity-categories{white-space:nowrap}.activity-category-row{display:inline-flex;gap:12rpx}.activity-category{padding:11rpx 22rpx;border-radius:25rpx;background:rgba(255,255,255,.1);color:rgba(255,255,255,.72);font-size:20rpx}.activity-category.active{background:#fff;color:var(--mini-accent-pink);font-weight:650}.activity-heading{display:flex;align-items:flex-end;justify-content:space-between;padding:32rpx 28rpx 16rpx}.activity-heading>view{display:flex;flex-direction:column}.heading-title{color:#252A49;font-size:30rpx;font-weight:700}.heading-subtitle{margin-top:5rpx;color:#8A8FA4;font-size:20rpx}.my-activity-link{color:var(--mini-accent-pink);font-size:21rpx}.act-loading{padding:12rpx 24rpx}.act-list{display:flex;flex-direction:column;gap:20rpx;padding:8rpx 24rpx 0}.act-list__more{display:flex;justify-content:center;padding:24rpx 0}.act-list__end{text-align:center;padding:24rpx 0;color:#9A9EB0;font-size:20rpx}.act-empty{padding-top:70rpx}
.act-page{min-height:100vh;padding-bottom:40rpx;background:var(--color-bg-page)}.activity-hero{padding:env(safe-area-inset-top) 24rpx 26rpx;border-radius:0 0 36rpx 36rpx;background:linear-gradient(160deg,var(--mini-night-start),var(--mini-night-end));box-shadow:var(--mini-shadow)}.activity-nav{position:relative;display:flex;align-items:center;justify-content:center;height:88rpx}.activity-title{color:var(--color-text-inverse);font-size:31rpx;font-weight:700}.activity-calendar{position:absolute;right:0;display:flex;align-items:center;justify-content:center;width:62rpx;height:62rpx;border:1rpx solid rgba(255,255,255,.18);border-radius:31rpx;background:rgba(255,255,255,.1)}.activity-calendar image{width:34rpx;height:34rpx;filter:brightness(0) invert(1)}.activity-categories{white-space:nowrap}.activity-category-row{display:inline-flex;gap:12rpx}.activity-category{padding:11rpx 22rpx;border-radius:25rpx;background:rgba(255,255,255,.1);color:rgba(255,255,255,.72);font-size:24rpx}.activity-category.active{background:var(--color-bg-card);color:var(--color-primary-strong);font-weight:600}.activity-heading{display:flex;align-items:flex-end;justify-content:space-between;padding:32rpx 28rpx 16rpx}.activity-heading>view{display:flex;flex-direction:column}.heading-title{color:var(--color-text-strong);font-size:30rpx;font-weight:700}.heading-subtitle{margin-top:5rpx;color:var(--color-text-tertiary);font-size:24rpx}.my-activity-link{color:var(--color-primary-strong);font-size:24rpx}.act-loading{padding:12rpx 24rpx}.act-list{display:flex;flex-direction:column;gap:20rpx;padding:8rpx 24rpx 0}.act-list__more{display:flex;justify-content:center;padding:24rpx 0}.act-list__end{text-align:center;padding:24rpx 0;color:var(--color-text-tertiary);font-size:24rpx}.act-empty{padding-top:70rpx}
+1 -1
View File
@@ -1,2 +1,2 @@
@import "../../styles/service-page.wxss";
.risk-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:16rpx;margin-top:18rpx}.risk-card{display:flex;min-height:174rpx;flex-direction:column;padding:20rpx;border:1rpx solid #F7DCE2;border-radius:24rpx;background:#FFF9FA}.risk-card image{width:42rpx;height:42rpx}.risk-title{margin-top:10rpx;color:#9E4054;font-size:23rpx;font-weight:650}.risk-desc{margin-top:7rpx;color:#846F78;font-size:18rpx;line-height:1.5}.safety-steps{overflow:hidden;margin-top:18rpx;border-radius:24rpx;background:#fff;box-shadow:0 8rpx 26rpx rgba(35,35,95,.06)}.safety-step{display:flex;align-items:center;gap:16rpx;min-height:104rpx;padding:16rpx 20rpx;border-bottom:1rpx solid #EFF0F5}.safety-step:last-child{border-bottom:0}.safety-step>image{width:48rpx;height:48rpx;flex:none}.safety-step>view{display:flex;flex:1;flex-direction:column}.safety-step view text:first-child{color:#303654;font-size:23rpx;font-weight:650}.safety-step view text:last-child{margin-top:5rpx;color:#858A9E;font-size:19rpx;line-height:1.45}
.risk-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:16rpx;margin-top:18rpx}.risk-card{display:flex;min-height:174rpx;flex-direction:column;padding:20rpx;border:1rpx solid var(--color-primary-light);border-radius:24rpx;background:var(--color-bg-page)}.risk-card image{width:42rpx;height:42rpx}.risk-title{margin-top:10rpx;color:var(--color-primary-strong);font-size:24rpx;font-weight:600}.risk-desc{margin-top:7rpx;color:var(--color-text-tertiary);font-size:24rpx;line-height:1.5}.safety-steps{overflow:hidden;margin-top:18rpx;border-radius:24rpx;background:var(--color-bg-card);box-shadow:0 8rpx 26rpx rgba(35,35,95,.06)}.safety-step{display:flex;align-items:center;gap:16rpx;min-height:104rpx;padding:16rpx 20rpx;border-bottom:1rpx solid var(--color-divider)}.safety-step:last-child{border-bottom:0}.safety-step>image{width:48rpx;height:48rpx;flex:none}.safety-step>view{display:flex;flex:1;flex-direction:column}.safety-step view text:first-child{color:var(--color-text-strong);font-size:24rpx;font-weight:600}.safety-step view text:last-child{margin-top:5rpx;color:var(--color-text-tertiary);font-size:24rpx;line-height:1.45}
+31 -31
View File
@@ -1,7 +1,7 @@
/* 申诉提交页 — Design Tokens */
.page {
min-height:100vh;
background: #FFF8F7;
background:var(--color-primary-lighter);
}
.body {
@@ -11,32 +11,32 @@
/* 介绍卡片 */
.intro-card {
background: #fff;
background:var(--color-bg-card);
border-radius:20rpx;
padding:32rpx;
margin-bottom:24rpx;
box-shadow:0 2rpx 12rpx rgba(0, 0, 0, 0.04);
border-left: 8rpx solid #E96B6B;
border-left:8rpx solid var(--color-primary);
}
.intro-title {
display:block;
font-size:34rpx;
font-weight:bold;
color: #1A1A1A;
color:var(--color-text-strong);
margin-bottom:12rpx;
}
.intro-subtitle {
display:block;
font-size:26rpx;
color: #999;
color:var(--color-text-tertiary);
line-height:1.5;
}
/* 卡片 */
.card {
background: #fff;
background:var(--color-bg-card);
border-radius:20rpx;
padding:24rpx 32rpx;
margin-bottom:24rpx;
@@ -69,48 +69,48 @@
top:4rpx;
right:4rpx;
width:36rpx;
height: 36rpx;
line-height: 32rpx;
min-height:var(--tap-min);
line-height:var(--tap-min);
text-align:center;
background:rgba(0, 0, 0, 0.5);
color: #fff;
color:var(--color-text-inverse);
border-radius:50%;
font-size: 22rpx;
}
font-size:24rpx;
min-width:var(--tap-min);}
.evidence-add {
width:160rpx;
height:160rpx;
border-radius:12rpx;
background: #F7F8FA;
border: 2rpx dashed #D0D0D0;
background:var(--color-bg-subtle);
border:2rpx dashed var(--color-border-strong);
display:flex;
flex-direction:column;
align-items:center;
justify-content:center;
color: #999;
color:var(--color-text-tertiary);
}
.add-icon {
font-size:48rpx;
color: #B0B0B0;
color:var(--color-text-disabled);
line-height:1;
}
.add-text {
font-size: 22rpx;
font-size:24rpx;
margin-top:8rpx;
}
/* 联系方式输入 */
.contact-input {
margin-top:16rpx;
background: #F7F8FA;
background:var(--color-bg-subtle);
border-radius:12rpx;
padding:24rpx;
font-size:28rpx;
min-height: 40rpx;
}
min-height:var(--tap-min);
min-width:var(--tap-min);}
/* 提交按钮 */
.btn-submit {
@@ -118,8 +118,8 @@
height:88rpx;
line-height:88rpx;
border-radius:44rpx;
background: #E96B6B;
color: #fff;
background:var(--color-primary-solid);
color:var(--color-text-inverse);
font-size:32rpx;
border:none;
margin-top:8rpx;
@@ -138,8 +138,8 @@
height:88rpx;
line-height:88rpx;
border-radius:44rpx;
background: #E96B6B;
color: #fff;
background:var(--color-primary-solid);
color:var(--color-text-inverse);
font-size:32rpx;
border:none;
margin-top:48rpx;
@@ -152,8 +152,8 @@
.hint {
display:block;
text-align:center;
font-size: 22rpx;
color: #B0B0B0;
font-size:24rpx;
color:var(--color-text-disabled);
margin-top:20rpx;
padding:0 24rpx;
}
@@ -172,8 +172,8 @@
line-height:120rpx;
text-align:center;
border-radius:50%;
background: #E8F5E9;
color: #1A6B3E;
background:var(--color-success-light);
color:var(--color-success-strong);
font-size:64rpx;
margin-bottom:32rpx;
}
@@ -181,13 +181,13 @@
.success-title {
font-size:36rpx;
font-weight:bold;
color: #1A1A1A;
color:var(--color-text-strong);
margin-bottom:16rpx;
}
.success-hint {
font-size:26rpx;
color: #999;
color:var(--color-text-tertiary);
text-align:center;
line-height:1.6;
}
@@ -202,8 +202,8 @@
.free-badge text {
display:inline-block;
font-size:22rpx;
color: #1A6B3E;
background: #E8F5E9;
color:var(--color-success-strong);
background:var(--color-success-light);
padding:8rpx 24rpx;
border-radius:24rpx;
}
+1 -1
View File
@@ -1 +1 @@
.page{padding:32rpx;background:#FFF8F7;min-height:100vh;text-align:center;padding-top:200rpx;color:#999;}
.page{padding:32rpx;background:var(--color-primary-lighter);min-height:100vh;text-align:center;padding-top:200rpx;color:var(--color-text-tertiary);}
+12 -12
View File
@@ -1,7 +1,7 @@
/* 黑名单管理页 — Design Tokens */
.page {
min-height:100vh;
background: #FFF8F7;
background:var(--color-primary-lighter);
}
.body {
@@ -18,7 +18,7 @@
.item {
display:flex;
align-items:center;
background: #fff;
background:var(--color-bg-card);
border-radius:20rpx;
padding:24rpx;
gap:20rpx;
@@ -34,34 +34,34 @@
display:block;
font-size:30rpx;
font-weight:bold;
color: #1A1A1A;
color:var(--color-text-strong);
margin-bottom:6rpx;
}
.meta {
display:block;
font-size:24rpx;
color: #999;
color:var(--color-text-tertiary);
margin-bottom:4rpx;
}
.reason {
display:block;
font-size: 22rpx;
color: #B0B0B0;
font-size:24rpx;
color:var(--color-text-disabled);
}
.btn-unblock {
flex-shrink:0;
height: 64rpx;
line-height: 60rpx;
min-height:var(--tap-min);
line-height:var(--tap-min);
padding:0 28rpx;
border-radius:32rpx;
font-size:24rpx;
background: #fff;
color: #E96B6B;
border: 2rpx solid #E96B6B;
}
background:var(--color-bg-card);
color:var(--color-primary-strong);
border:2rpx solid var(--color-primary);
min-width:var(--tap-min);}
.btn-unblock::after {
border:none;
+1 -1
View File
@@ -22,7 +22,7 @@
background:var(--color-warning-light);
padding:var(--spacing-2) var(--spacing-page-x);
font-size:var(--font-size-xs);
color: var(--color-warning);
color:var(--color-warning-strong);
text-align:center;
line-height:var(--line-height-normal);
}
+28 -28
View File
@@ -1,6 +1,6 @@
.page {
padding:32rpx;
background: #FFF8F7;
background:var(--color-primary-lighter);
min-height:100vh;
}
@@ -12,17 +12,17 @@
.title {
font-size:36rpx;
font-weight:bold;
color: #1A1A1A;
color:var(--color-text-strong);
}
.loading-state, .error-state {
text-align:center;
padding:80rpx;
color: #999;
color:var(--color-text-tertiary);
}
.checkin-card {
background: #fff;
background:var(--color-bg-card);
border-radius:24rpx;
padding:40rpx;
margin-bottom:24rpx;
@@ -37,21 +37,21 @@
display:block;
font-size:32rpx;
font-weight:bold;
color: #1A1A1A;
color:var(--color-text-strong);
margin-bottom:8rpx;
}
.activity-location {
display:block;
font-size:26rpx;
color: #999;
color:var(--color-text-tertiary);
}
.qr-section {
text-align:center;
padding:32rpx 0;
border-top: 1rpx solid #f5f5f5;
border-bottom: 1rpx solid #f5f5f5;
border-top:1rpx solid var(--color-divider);
border-bottom:1rpx solid var(--color-divider);
margin-bottom:32rpx;
}
@@ -59,7 +59,7 @@
width:300rpx;
height:300rpx;
margin:0 auto 20rpx;
background: #F5F5F5;
background:var(--color-bg-subtle);
border-radius:16rpx;
display:flex;
align-items:center;
@@ -68,12 +68,12 @@
.qr-icon {
font-size:120rpx;
color: #CCC;
color:var(--color-text-disabled);
}
.qr-hint {
font-size:26rpx;
color: #999;
color:var(--color-text-tertiary);
}
.token-section {
@@ -82,7 +82,7 @@
.token-label {
font-size:26rpx;
color: #666;
color:var(--color-text-secondary);
display:block;
margin-bottom:12rpx;
}
@@ -90,8 +90,8 @@
.token-value {
display:block;
font-size:24rpx;
color: #333;
background: #F5F5F5;
color:var(--color-text-primary);
background:var(--color-bg-subtle);
padding:20rpx;
border-radius:12rpx;
word-break:break-all;
@@ -100,27 +100,27 @@
.btn-copy {
width:100%;
height: 72rpx;
line-height: 72rpx;
background: #FFF3F2;
color: #E96B6B;
min-height:var(--tap-min);
line-height:var(--tap-min);
background:var(--color-primary-light);
color:var(--color-primary-strong);
border-radius:36rpx;
font-size:26rpx;
border:none;
}
min-width:var(--tap-min);}
.expire-info {
text-align:center;
font-size:24rpx;
color: #E59A32;
color:var(--color-warning-strong);
padding:16rpx;
background: #FFF8E1;
background:var(--color-warning-light);
border-radius:12rpx;
}
.btn-refresh-page {
background: #E96B6B;
color: #fff;
background:var(--color-primary-solid);
color:var(--color-text-inverse);
border-radius:44rpx;
height:88rpx;
line-height:88rpx;
@@ -130,11 +130,11 @@
.btn-refresh {
margin-top:24rpx;
background: #E96B6B;
color: #fff;
background:var(--color-primary-solid);
color:var(--color-text-inverse);
border-radius:44rpx;
height: 72rpx;
line-height: 72rpx;
min-height:var(--tap-min);
line-height:var(--tap-min);
font-size:28rpx;
border:none;
}
min-width:var(--tap-min);}
+1 -1
View File
@@ -1,2 +1,2 @@
@import "../../styles/service-page.wxss";
.content-page{min-height:100vh;padding-bottom:40rpx;background:#F4F5FA}.content-categories{padding:24rpx 0;white-space:nowrap}.content-category-row{display:inline-flex;gap:12rpx;padding:0 24rpx}.content-category{padding:11rpx 22rpx;border-radius:24rpx;background:#fff;color:#767D96;font-size:21rpx;box-shadow:0 6rpx 18rpx rgba(35,35,95,.05)}.content-category.active{background:linear-gradient(135deg,var(--mini-accent-coral),var(--mini-accent-pink));color:#fff;font-weight:650}.content-list{padding:0 24rpx}.content-card{display:flex;align-items:center;overflow:hidden;min-height:150rpx;margin-bottom:16rpx;border-radius:24rpx;background:#fff;box-shadow:0 8rpx 26rpx rgba(35,35,95,.06)}.content-cover{width:176rpx;height:150rpx;flex:none}.content-card__body{display:flex;flex:1;min-width:0;flex-direction:column;padding:16rpx}.content-card__category{align-self:flex-start;padding:4rpx 10rpx;border-radius:12rpx;background:#FFF0F5;color:var(--mini-accent-pink);font-size:17rpx}.content-card__title{overflow:hidden;margin-top:8rpx;color:#283056;font-size:24rpx;font-weight:650;white-space:nowrap;text-overflow:ellipsis}.content-card__summary{overflow:hidden;margin-top:5rpx;color:#83899F;font-size:18rpx;white-space:nowrap;text-overflow:ellipsis}.content-card__meta{display:flex;gap:18rpx;margin-top:9rpx;color:#9A9EB0;font-size:17rpx}.content-card__arrow{width:24rpx;height:24rpx;margin-right:16rpx;flex:none}
.content-page{min-height:100vh;padding-bottom:40rpx;background:var(--color-bg-page)}.content-categories{padding:24rpx 0;white-space:nowrap}.content-category-row{display:inline-flex;gap:12rpx;padding:0 24rpx}.content-category{padding:11rpx 22rpx;border-radius:24rpx;background:var(--color-bg-card);color:var(--color-text-tertiary);font-size:24rpx;box-shadow:0 6rpx 18rpx rgba(35,35,95,.05)}.content-category.active{background:var(--gradient-brand-solid);color:var(--color-text-inverse);font-weight:600}.content-list{padding:0 24rpx}.content-card{display:flex;align-items:center;overflow:hidden;min-height:150rpx;margin-bottom:16rpx;border-radius:24rpx;background:var(--color-bg-card);box-shadow:0 8rpx 26rpx rgba(35,35,95,.06)}.content-cover{width:176rpx;height:150rpx;flex:none}.content-card__body{display:flex;flex:1;min-width:0;flex-direction:column;padding:16rpx}.content-card__category{align-self:flex-start;padding:4rpx 10rpx;border-radius:12rpx;background:var(--color-primary-light);color:var(--color-primary-strong);font-size:24rpx}.content-card__title{overflow:hidden;margin-top:8rpx;color:var(--color-text-strong);font-size:24rpx;font-weight:600;white-space:nowrap;text-overflow:ellipsis}.content-card__summary{overflow:hidden;margin-top:5rpx;color:var(--color-text-tertiary);font-size:24rpx;white-space:nowrap;text-overflow:ellipsis}.content-card__meta{display:flex;gap:18rpx;margin-top:9rpx;color:var(--color-text-tertiary);font-size:24rpx}.content-card__arrow{width:24rpx;height:24rpx;margin-right:16rpx;flex:none}
@@ -1,11 +1,11 @@
.container { padding:24rpx; }
.form-section { background: #fff; border-radius: 16rpx; padding: 24rpx; }
.form-group { padding: 20rpx 0; border-bottom: 1rpx solid #f5f5f5; }
.form-section { background:var(--color-bg-card); border-radius:16rpx; padding:24rpx; }
.form-group { padding:20rpx 0; border-bottom:1rpx solid var(--color-divider); }
.form-group:last-child { border-bottom:none; }
.label { font-size: 28rpx; color: #666; display: block; margin-bottom: 12rpx; }
.value { font-size: 30rpx; color: #333; }
.picker-value { font-size: 30rpx; color: #333; }
.input { font-size: 30rpx; color: #333; }
.textarea { font-size: 30rpx; color: #333; width: 100%; height: 160rpx; }
.submit-btn { margin-top: 40rpx; background: linear-gradient(135deg, #FF6B6B, #EE5A24); color: #fff; border: none; border-radius: 44rpx; font-size: 32rpx; }
.tip { display: block; text-align: center; font-size: 24rpx; color: #999; margin-top: 20rpx; }
.label { font-size:28rpx; color:var(--color-text-secondary); display:block; margin-bottom:12rpx; }
.value { font-size:30rpx; color:var(--color-text-primary); }
.picker-value { font-size:30rpx; color:var(--color-text-primary); }
.input { font-size:30rpx; color:var(--color-text-primary); }
.textarea { font-size:30rpx; color:var(--color-text-primary); width:100%; height:160rpx; }
.submit-btn { margin-top:40rpx; background:var(--gradient-brand-solid); color:var(--color-text-inverse); border:none; border-radius:44rpx; font-size:32rpx; }
.tip { display:block; text-align:center; font-size:24rpx; color:var(--color-text-tertiary); margin-top:20rpx; }
+23 -23
View File
@@ -1,47 +1,47 @@
.page{min-height:100vh;background:#F4F5FA}
.page{min-height:100vh;background:var(--color-bg-page)}
.discover-hero{padding:env(safe-area-inset-top) 24rpx 24rpx;background:linear-gradient(160deg,var(--mini-night-start),var(--mini-night-end));border-radius:0 0 34rpx 34rpx;box-shadow:var(--mini-shadow);position:relative;z-index:1}
.discover-nav{height:88rpx;display:flex;align-items:center;justify-content:center;position:relative;color:#fff}
.discover-nav{height:88rpx;display:flex;align-items:center;justify-content:center;position:relative;color:var(--color-text-inverse)}
.nav-title{font-size:31rpx;font-weight:700}
.nav-search{position:absolute;right:0;width:64rpx;height:64rpx;display:flex;align-items:center;justify-content:center;border:1rpx solid rgba(255,255,255,.18);border-radius:32rpx;background:rgba(255,255,255,.08)}
.nav-search image{width:38rpx;height:38rpx;filter:brightness(0) invert(1)}
.search-bar{display:flex;align-items:center}
.search-input{height:70rpx;flex:1;display:flex;align-items:center;padding:0 20rpx;border-radius:35rpx;background:rgba(255,255,255,.12);border:1rpx solid rgba(255,255,255,.14)}
.search-label{margin-right:14rpx;padding-right:14rpx;border-right:1rpx solid rgba(255,255,255,.2);font-size:20rpx;color:#fff}
.search-field{flex:1;font-size:23rpx;color:#fff}
.search-placeholder{font-size:23rpx;color:rgba(255,255,255,.52)}
.search-label{margin-right:14rpx;padding-right:14rpx;border-right:1rpx solid rgba(255,255,255,.2);font-size:24rpx;color:var(--color-text-inverse)}
.search-field{flex:1;font-size:24rpx;color:var(--color-text-inverse)}
.search-placeholder{font-size:24rpx;color:rgba(255,255,255,.52)}
.filter-scroll{margin-top:16rpx;white-space:nowrap}
.filter-chips{display:inline-flex;gap:12rpx}
.filter-chip{padding:11rpx 20rpx;border-radius:25rpx;background:rgba(255,255,255,.1);color:rgba(255,255,255,.72);font-size:20rpx}
.filter-chip.active{background:#fff;color:var(--mini-accent-pink);font-weight:650}
.filter-chip{padding:11rpx 20rpx;border-radius:25rpx;background:rgba(255,255,255,.1);color:rgba(255,255,255,.72);font-size:24rpx}
.filter-chip.active{background:var(--color-bg-card);color:var(--color-primary-strong);font-weight:600}
/* 遮罩层 + 底部抽屉样式 */
.filter-mask{position:fixed;top:0;left:0;right:0;bottom:0;background:rgba(0,0,0,.35);z-index:10}
.filter-panel-wrap{position:fixed;left:0;right:0;bottom:0;z-index:11;background:#fff;border-radius:28rpx 28rpx 0 0;max-height:78vh;box-shadow:0 -10rpx 40rpx rgba(31,32,89,.15);display:flex;flex-direction:column;padding:24rpx 28rpx 28rpx}
.filter-panel-wrap{position:fixed;left:0;right:0;bottom:0;z-index:11;background:var(--color-bg-card);border-radius:28rpx 28rpx 0 0;max-height:78vh;box-shadow:0 -10rpx 40rpx rgba(31,32,89,.15);display:flex;flex-direction:column;padding:24rpx 28rpx 28rpx}
.filter-scroll-wrap{flex:1;max-height:calc(78vh - 140rpx);padding:8rpx 0 0}
.filter-section{margin-bottom:28rpx;padding:16rpx 20rpx;border-radius:16rpx;transition:background .2s,box-shadow .2s}
.filter-section.hl{background:#FFF5F8;box-shadow:inset 0 0 0 2rpx var(--mini-accent-pink)}
.filter-section.hl{background:var(--color-primary-light);box-shadow:inset 0 0 0 2rpx var(--mini-accent-pink)}
.filter-heading{display:flex;justify-content:space-between}
.filter-label{display:block;font-size:24rpx;font-weight:650;color:#282D4E}
.filter-value{font-size:21rpx;color:#777E99}
.filter-label{display:block;font-size:24rpx;font-weight:600;color:var(--color-text-strong)}
.filter-value{font-size:24rpx;color:var(--color-text-tertiary)}
.range-slider{margin:8rpx 0}
.tag-group{display:flex;flex-wrap:wrap;gap:14rpx;margin-top:16rpx}
.tag{padding:10rpx 22rpx;border-radius:22rpx;background:#F1F2F7;color:#626981;font-size:21rpx}
.tag.selected{background:#FCEBF3;color:var(--mini-accent-pink)}
.tag{padding:10rpx 22rpx;border-radius:22rpx;background:var(--color-bg-subtle);color:var(--color-text-secondary);font-size:24rpx}
.tag.selected{background:var(--color-primary-light);color:var(--color-primary-strong)}
.filter-actions{display:flex;gap:18rpx;margin-top:8rpx}
.result-head{padding:30rpx 26rpx 16rpx;display:flex;align-items:flex-end;justify-content:space-between}
.result-head>view{display:flex;flex-direction:column}
.result-title{font-size:30rpx;font-weight:700;color:#252A49}
.result-subtitle{margin-top:5rpx;font-size:20rpx;color:#8A8FA4}
.result-count{font-size:20rpx;color:#8A8FA4}
.user-list{margin:0 24rpx;padding:4rpx 0;background:#fff;border-radius:28rpx;overflow:hidden;box-shadow:0 10rpx 32rpx rgba(34,35,91,.08)}
.result-title{font-size:30rpx;font-weight:700;color:var(--color-text-strong)}
.result-subtitle{margin-top:5rpx;font-size:24rpx;color:var(--color-text-tertiary)}
.result-count{font-size:20rpx;color:var(--color-text-tertiary)}
.user-list{margin:0 24rpx;padding:4rpx 0;background:var(--color-bg-card);border-radius:28rpx;overflow:hidden;box-shadow:0 10rpx 32rpx rgba(34,35,91,.08)}
.card-action{display:flex;align-items:center}
.like-button{width:62rpx;height:62rpx;display:flex;align-items:center;justify-content:center;border-radius:31rpx;background:#FFF0F5;box-shadow:0 6rpx 18rpx rgba(255,79,145,.16)}
.like-button{width:var(--tap-min);min-height:var(--tap-min);display:flex;align-items:center;justify-content:center;border-radius:var(--radius-full);background:var(--color-primary-light);box-shadow:0 6rpx 18rpx rgba(255,79,145,.16);}
.like-button image{width:42rpx;height:42rpx}
.like-button.loading{opacity:.45}
.list-end-hint{text-align:center;padding:24rpx;font-size:20rpx;color:#9A9EB0}
.discover-empty{margin:70rpx 40rpx 0;padding:34rpx;display:flex;flex-direction:column;align-items:center;background:#fff;border-radius:28rpx;box-shadow:0 10rpx 32rpx rgba(34,35,91,.08)}
.list-end-hint{text-align:center;padding:24rpx;font-size:24rpx;color:var(--color-text-tertiary)}
.discover-empty{margin:70rpx 40rpx 0;padding:34rpx;display:flex;flex-direction:column;align-items:center;background:var(--color-bg-card);border-radius:28rpx;box-shadow:0 10rpx 32rpx rgba(34,35,91,.08)}
.discover-empty image{width:112rpx;height:112rpx}
.empty-title{margin-top:12rpx;font-size:28rpx;font-weight:650;color:#252A49}
.empty-desc{margin-top:10rpx;text-align:center;font-size:21rpx;line-height:1.55;color:#858A9E}
.empty-action{margin-top:24rpx;min-width:180rpx;height:64rpx;display:flex;align-items:center;justify-content:center;border-radius:32rpx;background:linear-gradient(135deg,var(--mini-accent-coral),var(--mini-accent-pink));color:#fff;font-size:23rpx;font-weight:650}
.empty-title{margin-top:12rpx;font-size:28rpx;font-weight:600;color:var(--color-text-strong)}
.empty-desc{margin-top:10rpx;text-align:center;font-size:24rpx;line-height:1.55;color:var(--color-text-tertiary)}
.empty-action{margin-top:24rpx;min-width:180rpx;min-height:var(--tap-min);display:flex;align-items:center;justify-content:center;border-radius:32rpx;background:var(--gradient-brand-solid);color:var(--color-text-inverse);font-size:24rpx;font-weight:600}
+23 -23
View File
@@ -1,14 +1,14 @@
/* 我的缘分页 U22 — Design Tokens */
.page {
min-height:100vh;
background: #FFF8F7;
background:var(--color-primary-lighter);
}
/* Tab 切换栏(粘性吸附在自定义导航栏下方) */
.tabs {
display:flex;
background: #fff;
border-bottom: 1rpx solid #F0F0F0;
background:var(--color-bg-card);
border-bottom:1rpx solid var(--color-divider);
position:sticky;
z-index:10;
}
@@ -18,13 +18,13 @@
text-align:center;
padding:28rpx 0;
font-size:28rpx;
color: #999;
color:var(--color-text-tertiary);
position:relative;
transition:color 0.2s;
}
.tab.active {
color: #E96B6B;
color:var(--color-primary-strong);
font-weight:bold;
}
@@ -36,14 +36,14 @@
transform:translateX(-50%);
width:48rpx;
height:4rpx;
background: #E96B6B;
background:var(--color-primary);
border-radius:2rpx;
}
.tab-count {
display:inline-block;
background: #E96B6B;
color: #fff;
background:var(--color-primary-solid);
color:var(--color-text-inverse);
font-size:20rpx;
padding:2rpx 10rpx;
border-radius:20rpx;
@@ -64,7 +64,7 @@
}
.item {
background: #fff;
background:var(--color-bg-card);
border-radius:20rpx;
padding:24rpx;
box-shadow:0 2rpx 12rpx rgba(0, 0, 0, 0.04);
@@ -73,15 +73,15 @@
/* 操作按钮 */
.btn-primary {
flex-shrink:0;
height: 64rpx;
line-height: 64rpx;
min-height:var(--tap-min);
line-height:var(--tap-min);
padding:0 28rpx;
border-radius:32rpx;
font-size:24rpx;
background: #E96B6B;
color: #fff;
background:var(--color-primary-solid);
color:var(--color-text-inverse);
border:none;
}
min-width:var(--tap-min);}
.btn-primary::after {
border:none;
@@ -89,15 +89,15 @@
.btn-like-back {
flex-shrink:0;
height: 64rpx;
line-height: 64rpx;
min-height:var(--tap-min);
line-height:var(--tap-min);
padding:0 28rpx;
border-radius:32rpx;
font-size:24rpx;
background: #FFF3F2;
color: #E96B6B;
border: 2rpx solid #E96B6B;
}
background:var(--color-primary-light);
color:var(--color-primary-strong);
border:2rpx solid var(--color-primary);
min-width:var(--tap-min);}
.btn-like-back::after {
border:none;
@@ -110,10 +110,10 @@
/* 等待回应状态 */
.status-waiting {
flex-shrink:0;
font-size: 22rpx;
color: #E96B6B;
font-size:24rpx;
color:var(--color-primary-strong);
padding:8rpx 16rpx;
background: #FFF3F2;
background:var(--color-primary-light);
border-radius:8rpx;
white-space:nowrap;
}
+12 -12
View File
@@ -1,16 +1,16 @@
/* 帮助中心样式 */
.page {
min-height:100vh;
background: #f5f5f5;
background:var(--color-bg-subtle);
display:flex;
flex-direction:column;
}
.category-bar {
white-space:nowrap;
background: #fff;
background:var(--color-bg-card);
padding:0 24rpx;
border-bottom: 1rpx solid #f0f0f0;
border-bottom:1rpx solid var(--color-divider);
flex-shrink:0;
}
@@ -18,13 +18,13 @@
display:inline-block;
padding:24rpx 32rpx;
font-size:28rpx;
color: #666;
color:var(--color-text-secondary);
border-bottom:4rpx solid transparent;
}
.category-item.active {
color: #E96B6B;
border-bottom-color: #E96B6B;
color:var(--color-primary-strong);
border-bottom-color:var(--color-primary);
font-weight:600;
}
@@ -34,7 +34,7 @@
}
.faq-item {
background: #fff;
background:var(--color-bg-card);
border-radius:16rpx;
margin-bottom:24rpx;
padding:28rpx 32rpx;
@@ -45,26 +45,26 @@
justify-content:space-between;
align-items:center;
font-size:30rpx;
color: #2d2d2d;
color:var(--color-text-strong);
font-weight:500;
}
.faq-arrow {
font-size:20rpx;
color: #ccc;
color:var(--color-text-disabled);
transition:transform 0.2s;
}
.faq-arrow.up {
transform:rotate(180deg);
color: #E96B6B;
color:var(--color-primary-strong);
}
.faq-answer {
margin-top:20rpx;
padding-top:20rpx;
border-top: 1rpx solid #f5f5f5;
border-top:1rpx solid var(--color-divider);
font-size:26rpx;
color: #666;
color:var(--color-text-secondary);
line-height:1.7;
}
+696 -10
View File
@@ -1,10 +1,696 @@
.page{min-height:100vh;background:#F4F5FA;padding-bottom:40rpx}.night-shell{padding:0 24rpx 28rpx;background:linear-gradient(160deg,var(--mini-night-start),var(--mini-night-end));border-radius:0 0 42rpx 42rpx;box-shadow:var(--mini-shadow)}
.brand-bar{height:112rpx;padding-top:env(safe-area-inset-top);display:flex;align-items:center;justify-content:space-between;color:var(--mini-text-on-night)}.brand-lockup{display:flex;align-items:center}.brand-logo{width:66rpx;height:66rpx}.brand-copy{display:flex;flex-direction:column;margin-left:12rpx}.brand-name{font-size:34rpx;font-weight:700;letter-spacing:2rpx}.brand-slogan{font-size:18rpx;letter-spacing:4rpx;color:var(--mini-text-on-night-muted)}.brand-actions{position:relative;min-width:76rpx;height:72rpx;display:flex;align-items:center;justify-content:center}.message-label{font-size:23rpx}.badge{position:absolute;right:0;top:4rpx;min-width:28rpx;height:28rpx;padding:0 4rpx;line-height:28rpx;text-align:center;font-size:18rpx;color:#fff;background:var(--mini-accent-pink);border-radius:20rpx}
.status-strip{margin:4rpx 0 16rpx;padding:18rpx 20rpx;border:1rpx solid rgba(255,255,255,.16);background:rgba(255,255,255,.09);border-radius:20rpx;color:#fff}.status-main{display:flex;align-items:center;gap:16rpx}.status-copy{flex:1;min-width:0;display:flex;flex-direction:column}.status-title{font-size:25rpx;font-weight:650}.status-desc{margin-top:5rpx;font-size:20rpx;color:var(--mini-text-on-night-muted);line-height:1.4}.status-action{flex:none;min-width:108rpx;min-height:56rpx;padding:0 18rpx;display:flex;align-items:center;justify-content:center;border-radius:28rpx;background:linear-gradient(135deg,var(--mini-accent-coral),var(--mini-accent-pink));font-size:22rpx;font-weight:650}.status-checks{display:flex;gap:10rpx;overflow:hidden}.status-check{padding:8rpx 12rpx;border-radius:20rpx;background:rgba(255,255,255,.08);font-size:19rpx;color:var(--mini-text-on-night-muted);white-space:nowrap}.status-check.done{background:rgba(90,226,184,.16);color:#A6F5D7}
.banner-section{width:100%}.banner-swiper,.banner-card{height:272rpx;border-radius:26rpx;overflow:hidden}.banner-card{position:relative}.banner-img{width:100%;height:100%;display:block}.banner-overlay{position:absolute;inset:0;background:linear-gradient(90deg,rgba(25,22,86,.78) 0%,rgba(43,22,101,.25) 58%,rgba(255,79,145,.08) 100%)}.banner-copy{position:absolute;left:26rpx;bottom:26rpx;width:68%;display:flex;flex-direction:column;color:#fff}.banner-kicker{font-size:18rpx;letter-spacing:3rpx;color:rgba(255,255,255,.78)}.banner-title{margin-top:9rpx;font-size:35rpx;line-height:1.2;font-weight:750;text-shadow:0 3rpx 10rpx rgba(0,0,0,.2)}.banner-subtitle{margin-top:8rpx;font-size:22rpx;color:rgba(255,255,255,.84)}
.entries-card{position:relative;z-index:2;margin:-14rpx 24rpx 0;padding:22rpx 10rpx 18rpx;background:var(--mini-card-bg);border-radius:30rpx;box-shadow:var(--mini-shadow)}.entries-grid{display:grid;grid-template-columns:repeat(4,1fr);row-gap:18rpx}.entry-item{min-height:104rpx;display:flex;flex-direction:column;align-items:center;justify-content:center}.entry-item.disabled{opacity:.4}.entry-icon{width:66rpx;height:66rpx;display:flex;align-items:center;justify-content:center;border-radius:20rpx;overflow:hidden}.entry-icon-image{width:45rpx;height:45rpx}.entry-label{margin-top:8rpx;font-size:21rpx;color:#283056;font-weight:550}.tone-rose{background:#FFF0F5}.tone-purple{background:#F0EAFE}.tone-blue{background:#EAF3FF}.tone-pink{background:#FFF0F7}.tone-amber{background:#FFF3E5}.tone-indigo{background:#ECEEFF}.tone-red{background:#FFEDEF}.tone-green{background:#EAF8F2}
.preview-note{margin:16rpx 24rpx 0;text-align:center;color:#8B63BC;font-size:20rpx}.section{margin-top:34rpx;padding:0 24rpx}.recommendation-section{margin-top:30rpx}.recommend-list{margin-top:16rpx;border-radius:26rpx;overflow:hidden;box-shadow:0 8rpx 28rpx rgba(35,35,95,.07)}.recommend-empty{margin-top:16rpx;padding:22rpx;display:flex;align-items:center;gap:18rpx;background:#fff;border-radius:26rpx;box-shadow:0 8rpx 28rpx rgba(35,35,95,.07)}.empty-logo{width:76rpx;height:76rpx;flex:none}.empty-copy{flex:1;min-width:0;display:flex;flex-direction:column}.empty-title{font-size:25rpx;font-weight:650;color:#222746}.empty-desc{margin-top:6rpx;font-size:20rpx;line-height:1.4;color:#7A7F98}.empty-actions{display:flex;flex-direction:column;gap:8rpx}.empty-btn{min-width:112rpx;height:48rpx;padding:0 12rpx;display:flex;align-items:center;justify-content:center;border-radius:24rpx;font-size:20rpx}.empty-btn.secondary{color:#7C60BC;background:#F1EEFB}.empty-btn.primary{color:#fff;background:linear-gradient(135deg,var(--mini-accent-coral),var(--mini-accent-pink))}
.service-card{display:flex;align-items:stretch;margin-top:16rpx;background:#fff;border-radius:26rpx;overflow:hidden;box-shadow:0 8rpx 28rpx rgba(35,35,95,.07)}.service-cover{width:210rpx;min-height:156rpx}.service-copy{flex:1;padding:20rpx;display:flex;flex-direction:column}.service-title{font-size:25rpx;font-weight:650;color:#222746}.service-desc{margin-top:7rpx;font-size:21rpx;color:#757B91;line-height:1.45}.text-link{margin-top:auto;padding-top:10rpx;font-size:21rpx;color:var(--mini-accent-pink);font-weight:650}
.activity-scroll{white-space:nowrap;margin-top:16rpx}.activity-card{display:inline-flex;width:550rpx;margin-right:18rpx;background:#fff;border-radius:24rpx;overflow:hidden;box-shadow:0 8rpx 28rpx rgba(35,35,95,.07);white-space:normal}.activity-cover{width:210rpx;height:168rpx}.activity-info{flex:1;padding:18rpx;display:flex;flex-direction:column}.activity-tag{align-self:flex-start;padding:5rpx 12rpx;border-radius:18rpx;background:#FFF0F5;color:var(--mini-accent-pink);font-size:18rpx}.activity-title{margin-top:10rpx;font-size:25rpx;font-weight:650;color:#222746;line-height:1.35}.activity-meta{margin-top:auto;font-size:20rpx;color:#81869B}
.station-card,.article-row,.safety-card{display:flex;align-items:center;background:#fff;border-radius:26rpx;overflow:hidden;box-shadow:0 8rpx 28rpx rgba(35,35,95,.07)}.station-cover{width:190rpx;height:170rpx}.station-info{flex:1;min-width:0;padding:18rpx}.station-name{display:block;font-size:26rpx;font-weight:650;color:#222746}.station-desc{display:block;margin:7rpx 0 12rpx;font-size:20rpx;color:#7A7F98}.mini-tag{display:inline-block;margin:4rpx 7rpx 0 0;padding:4rpx 9rpx;border-radius:14rpx;background:#F0EEFB;color:#6857A2;font-size:17rpx}.arrow-icon{width:28rpx;height:28rpx;margin:16rpx;flex:none}.article-list{margin-top:16rpx;display:flex;flex-direction:column;gap:12rpx}.article-row{min-height:112rpx}.article-cover{width:146rpx;height:112rpx}.article-info,.safety-info{flex:1;min-width:0;padding:16rpx}.article-title{display:block;font-size:24rpx;font-weight:600;color:#222746;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.article-meta{display:block;margin-top:6rpx;font-size:19rpx;color:#85899C}.section-empty{margin-top:16rpx;padding:30rpx 24rpx;text-align:center;color:#8A90A6;font-size:22rpx;background:#fff;border-radius:24rpx;box-shadow:0 8rpx 28rpx rgba(35,35,95,.05)}.safety-card{padding:0}.safety-cover{width:180rpx;align-self:stretch}.safety-title{display:block;font-size:25rpx;font-weight:650;color:#222746}.safety-body{display:block;margin-top:7rpx;font-size:20rpx;line-height:1.45;color:#74798E}.safety-link{display:block;margin-top:9rpx;font-size:20rpx;color:var(--mini-accent-pink);font-weight:650}
@media (max-width:340px){.entry-label{font-size:19rpx}.entry-icon{width:60rpx;height:60rpx}.banner-title{font-size:31rpx}.status-checks{overflow-x:auto}.empty-actions{display:none}}
/**
* 首页 —— 全站设计系统样板页
*
* 2026-09-22 重做。这一版要证明 app.wxss v2 的底座是"能用"的:
*
* 1) 氛围层(参考图的关键差异项)
* 旧版只有一条线性渐变,参考图里有明显的暖粉光晕、星点与玻璃质感。
* 现用三层叠加:--mini-starfield(星点)+ --gradient-night(夜空)
* + 两个定位光晕伪元素(左上粉 / 左下靛蓝),零图片、零额外请求。
*
* 2) 排版层级
* 旧版 hero 标题 35rpx、区块标题 36rpx、卡片标题 25rpx、正文 24rpx ——
* hero 与区块标题几乎同号,层级读不出来。现为:
* hero 48rpx/700 > 区块标题 40rpx/600 > 卡片标题 28rpx/600 >
* 正文 26rpx > 元信息 24rpx
*
* 3) 触摸目标
* 所有可点元素以 --tap-min(88rpx=44px) 为下限;旧版 .empty-btn 只有 24px。
* 并且删掉了 @media(max-width:340px) 里的 .empty-actions{display:none} ——
* 那等于在小屏上把「调整条件 / 公益红娘」两个入口整块砍掉。
*
* 4) 交互反馈
* 旧版全站 --motion-* 只被引用 5 次,点了没反应。现统一走 --ease-spring
* + --press-scale,并给区块卡片加上按压缩放。
*
* 5) 对比度
* 旧版 .text-link/.activity-tag/.safety-link 用 --mini-accent-pink(#FF4F91)
* 作文字 = 3.10:1,不达标;CTA 白字压在珊瑚粉渐变上也只有 2.77:1。
* 现分别改用 --color-primary-strong(5.33:1) 与 --gradient-brand-solid(≥4.7:1)。
*
* 单位:rpx(750rpx = 屏幕宽度,1rpx ≈ 0.5px)
*/
/* ============================== 页面骨架 ============================== */
.page {
min-height: 100vh;
background: var(--color-bg-page);
padding-bottom: var(--spacing-5);
}
/* ============================== 夜空头部 ============================== */
.night-shell {
position: relative;
overflow: hidden;
padding: 0 var(--spacing-3) var(--spacing-4);
background: var(--mini-starfield), var(--gradient-night);
border-radius: 0 0 var(--radius-2xl) var(--radius-2xl);
box-shadow: var(--shadow-night);
}
/* 两个光晕:伪元素承担,避免为了装饰再嵌一层 view */
.night-shell::before,
.night-shell::after {
content: '';
position: absolute;
border-radius: 50%;
pointer-events: none;
z-index: var(--z-ambient);
}
.night-shell::before {
top: -200rpx;
right: -140rpx;
width: 560rpx;
height: 560rpx;
background: radial-gradient(circle, var(--mini-glow-coral) 0%, transparent 68%);
}
.night-shell::after {
bottom: -220rpx;
left: -160rpx;
width: 620rpx;
height: 620rpx;
background: radial-gradient(circle, var(--mini-glow-indigo) 0%, transparent 70%);
}
/* 伪元素是定位元素,会盖住静态流内容;正文需要显式抬一层 */
.night-shell > view {
position: relative;
z-index: var(--z-base);
}
/* ============================== 品牌栏 ============================== */
.brand-bar {
min-height: 112rpx;
padding-top: env(safe-area-inset-top);
display: flex;
align-items: center;
justify-content: space-between;
color: var(--mini-text-on-night);
}
.brand-lockup {
display: flex;
align-items: center;
min-width: 0;
}
.brand-logo {
width: 68rpx;
height: 68rpx;
flex: none;
}
.brand-copy {
display: flex;
flex-direction: column;
margin-left: var(--spacing-2);
}
.brand-name {
font-size: var(--font-size-lg);
font-weight: var(--font-weight-bold);
letter-spacing: var(--letter-spacing-wider);
line-height: var(--line-height-tight);
}
.brand-slogan {
margin-top: 2rpx;
font-size: var(--font-size-xs);
letter-spacing: 3rpx;
color: var(--mini-text-on-night-muted);
}
.brand-actions {
position: relative;
flex: none;
min-width: var(--tap-min);
min-height: var(--tap-min);
display: flex;
align-items: center;
justify-content: center;
}
.message-label {
font-size: var(--font-size-sm);
}
.badge {
position: absolute;
right: 0;
top: 4rpx;
min-width: 30rpx;
height: 30rpx;
padding: 0 5rpx;
line-height: 30rpx;
text-align: center;
font-size: var(--font-size-micro);
color: var(--color-text-inverse);
/* 白字需 4.5:1:--mini-accent-pink 仅 3.10,改用 solid 变体 */
background: var(--color-primary-solid);
border-radius: var(--radius-full);
/* 描一圈夜空底色,避免角标压在光晕上时边缘糊掉 */
box-shadow: 0 0 0 3rpx var(--mini-night-start);
}
/* ============================== 状态条 ============================== */
.status-strip {
margin: var(--spacing-1) 0 var(--spacing-2);
padding: var(--spacing-3);
border: var(--border-width) solid var(--mini-hairline);
background: var(--mini-glass);
border-radius: var(--radius-md);
color: var(--color-text-inverse);
}
.status-main {
display: flex;
align-items: center;
gap: var(--spacing-2);
}
.status-copy {
flex: 1;
min-width: 0;
display: flex;
flex-direction: column;
}
.status-title {
font-size: var(--font-size-md);
font-weight: var(--font-weight-semibold);
line-height: var(--line-height-tight);
}
.status-desc {
margin-top: 6rpx;
font-size: var(--font-size-xs);
line-height: var(--line-height-normal);
color: var(--mini-text-on-night-muted);
}
.status-action {
flex: none;
min-width: 116rpx;
min-height: var(--tap-min);
padding: 0 var(--spacing-3);
display: flex;
align-items: center;
justify-content: center;
border-radius: var(--radius-full);
background: var(--gradient-brand-solid);
font-size: var(--font-size-sm);
font-weight: var(--font-weight-semibold);
}
.status-checks {
display: flex;
gap: 10rpx;
overflow: hidden;
}
.status-check {
padding: 8rpx 14rpx;
border-radius: var(--radius-full);
background: var(--mini-glass);
font-size: var(--font-size-xs);
color: var(--mini-text-on-night-muted);
white-space: nowrap;
}
.status-check.done {
background: var(--mini-glass-success);
color: var(--color-success-on-night);
font-weight: var(--font-weight-semibold);
}
/* ============================== 主视觉横幅 ============================== */
.banner-section {
width: 100%;
}
.banner-swiper,
.banner-card {
height: 300rpx;
border-radius: var(--radius-lg);
overflow: hidden;
}
.banner-card {
position: relative;
}
.banner-img {
width: 100%;
height: 100%;
display: block;
}
.banner-overlay {
position: absolute;
inset: 0;
background: var(--mini-banner-scrim);
}
.banner-copy {
position: absolute;
left: var(--spacing-3);
bottom: var(--spacing-5);
width: 68%;
display: flex;
flex-direction: column;
color: var(--color-text-inverse);
}
.banner-kicker {
font-size: var(--font-size-xs);
letter-spacing: 3rpx;
color: var(--mini-text-on-night-muted);
}
.banner-title {
margin-top: 10rpx;
font-size: var(--font-size-2xl);
line-height: var(--line-height-tight);
font-weight: var(--font-weight-bold);
letter-spacing: var(--letter-spacing-wide);
text-shadow: 0 4rpx 14rpx rgba(0, 0, 0, 0.22);
}
.banner-subtitle {
margin-top: 10rpx;
font-size: var(--font-size-sm);
color: var(--mini-text-on-night-muted);
}
/* ============================== 快捷入口 ============================== */
.entries-card {
position: relative;
z-index: 2;
margin: -18rpx var(--spacing-3) 0;
padding: var(--spacing-3) var(--spacing-1) var(--spacing-2);
background: var(--mini-card-bg);
border-radius: var(--radius-lg);
box-shadow: var(--shadow-raised);
}
/* 4 列宫格用 flex + 25% 宽实现。display:grid 在 Skyline 渲染引擎下不支持,
统一避开以免将来切渲染引擎时整体错版。 */
.entries-grid {
display: flex;
flex-wrap: wrap;
row-gap: var(--spacing-2);
}
.entry-item {
width: 25%;
box-sizing: border-box;
min-height: 116rpx;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
.entry-item.disabled {
opacity: 0.4;
}
.entry-icon {
width: 72rpx;
height: 72rpx;
display: flex;
align-items: center;
justify-content: center;
border-radius: var(--radius-md);
overflow: hidden;
}
.entry-icon-image {
width: 48rpx;
height: 48rpx;
}
.entry-label {
margin-top: var(--spacing-1);
font-size: var(--font-size-sm);
font-weight: var(--font-weight-medium);
color: var(--color-text-strong);
}
.tone-rose { background: var(--color-primary-light); }
.tone-purple { background: var(--color-accent-purple-light); }
.tone-blue { background: var(--color-info-light); }
.tone-pink { background: var(--color-primary-light); }
.tone-amber { background: var(--color-warning-light); }
.tone-indigo { background: var(--color-info-light); }
.tone-red { background: var(--color-danger-light); }
.tone-green { background: var(--color-success-light); }
/* ============================== 区块容器 ============================== */
.preview-note {
margin: var(--spacing-2) var(--spacing-3) 0;
text-align: center;
font-size: var(--font-size-xs);
color: var(--color-accent-purple-strong);
}
.section {
margin-top: var(--spacing-5);
padding: 0 var(--spacing-3);
}
.recommendation-section {
margin-top: var(--spacing-5);
}
/* 标题与卡片左边缘必须对齐:.section 已提供 24rpx 内边距,
而 ui-section 自带 --spacing-page-x(32rpx),叠加会让标题比卡片多缩进 32rpx。 */
.section .ui-section {
padding-left: 0;
padding-right: 0;
}
/* ============================== 今日推荐 ============================== */
.recommend-list {
margin-top: var(--spacing-2);
border-radius: var(--radius-lg);
overflow: hidden;
box-shadow: var(--shadow-card);
}
.recommend-empty {
margin-top: var(--spacing-2);
padding: var(--spacing-3);
display: flex;
align-items: center;
gap: var(--spacing-2);
background: var(--color-bg-card);
border-radius: var(--radius-lg);
box-shadow: var(--shadow-card);
}
.empty-logo {
width: 76rpx;
height: 76rpx;
flex: none;
}
.empty-copy {
flex: 1;
min-width: 0;
display: flex;
flex-direction: column;
}
.empty-title {
font-size: var(--font-size-md);
font-weight: var(--font-weight-semibold);
color: var(--color-text-strong);
}
.empty-desc {
margin-top: 6rpx;
font-size: var(--font-size-sm);
line-height: var(--line-height-normal);
color: var(--color-text-tertiary);
}
.empty-actions {
display: flex;
flex-direction: column;
gap: var(--spacing-1);
}
.empty-btn {
min-width: 120rpx;
min-height: var(--tap-min);
padding: 0 var(--spacing-2);
display: flex;
align-items: center;
justify-content: center;
border-radius: var(--radius-full);
font-size: var(--font-size-sm);
font-weight: var(--font-weight-medium);
}
.empty-btn.secondary {
color: var(--color-accent-purple-strong);
background: var(--color-accent-purple-light);
}
.empty-btn.primary {
color: var(--color-text-inverse);
background: var(--gradient-brand-solid);
}
/* ============================== 公益服务 ============================== */
.service-card {
display: flex;
align-items: stretch;
margin-top: var(--spacing-2);
background: var(--color-bg-card);
border-radius: var(--radius-lg);
overflow: hidden;
box-shadow: var(--shadow-card);
}
.service-cover {
width: 210rpx;
min-height: 160rpx;
flex: none;
}
.service-copy {
flex: 1;
min-width: 0;
padding: var(--spacing-3);
display: flex;
flex-direction: column;
}
.service-title {
font-size: var(--font-size-md);
font-weight: var(--font-weight-semibold);
color: var(--color-text-strong);
}
.service-desc {
margin-top: 8rpx;
font-size: var(--font-size-sm);
line-height: var(--line-height-normal);
color: var(--color-text-tertiary);
}
.text-link {
margin-top: auto;
padding-top: var(--spacing-1);
font-size: var(--font-size-sm);
font-weight: var(--font-weight-semibold);
color: var(--color-primary-strong);
}
/* ============================== 近期活动 ============================== */
.activity-scroll {
white-space: nowrap;
margin-top: var(--spacing-2);
}
.activity-card {
display: inline-flex;
width: 550rpx;
margin-right: var(--spacing-2);
background: var(--color-bg-card);
border-radius: var(--radius-md);
overflow: hidden;
box-shadow: var(--shadow-card);
white-space: normal;
}
.activity-cover {
width: 210rpx;
height: 172rpx;
flex: none;
}
.activity-info {
flex: 1;
min-width: 0;
padding: var(--spacing-2);
display: flex;
flex-direction: column;
}
.activity-tag {
align-self: flex-start;
padding: 5rpx 14rpx;
border-radius: var(--radius-full);
background: var(--color-primary-light);
color: var(--color-primary-strong);
font-size: var(--font-size-xs);
font-weight: var(--font-weight-medium);
}
.activity-title {
margin-top: 10rpx;
font-size: var(--font-size-md);
font-weight: var(--font-weight-semibold);
line-height: var(--line-height-tight);
color: var(--color-text-strong);
}
.activity-meta {
margin-top: auto;
font-size: var(--font-size-xs);
color: var(--color-text-tertiary);
}
/* ============================== 服务站 / 婚恋课堂 ============================== */
.station-card,
.article-row {
display: flex;
align-items: center;
background: var(--color-bg-card);
border-radius: var(--radius-lg);
overflow: hidden;
box-shadow: var(--shadow-card);
}
.station-cover {
width: 190rpx;
height: 172rpx;
flex: none;
}
.station-info {
flex: 1;
min-width: 0;
padding: var(--spacing-2);
}
.station-name {
display: block;
font-size: var(--font-size-md);
font-weight: var(--font-weight-semibold);
color: var(--color-text-strong);
}
.station-desc {
display: block;
margin: 8rpx 0 12rpx;
font-size: var(--font-size-sm);
color: var(--color-text-tertiary);
}
.mini-tag {
display: inline-block;
margin: 4rpx 8rpx 0 0;
padding: 4rpx 12rpx;
border-radius: var(--radius-sm);
background: var(--color-accent-purple-light);
color: var(--color-accent-purple-strong);
font-size: var(--font-size-xs);
}
.arrow-icon {
width: 28rpx;
height: 28rpx;
margin: var(--spacing-2);
flex: none;
}
.article-list {
margin-top: var(--spacing-2);
display: flex;
flex-direction: column;
gap: 12rpx;
}
.article-row {
min-height: 116rpx;
}
.article-cover {
width: 146rpx;
height: 116rpx;
flex: none;
}
.article-info {
flex: 1;
min-width: 0;
padding: var(--spacing-2);
}
.article-title {
display: block;
font-size: var(--font-size-md);
font-weight: var(--font-weight-semibold);
color: var(--color-text-strong);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.article-meta {
display: block;
margin-top: 6rpx;
font-size: var(--font-size-xs);
color: var(--color-text-tertiary);
}
.section-empty {
margin-top: var(--spacing-2);
padding: var(--spacing-4) var(--spacing-3);
text-align: center;
font-size: var(--font-size-sm);
color: var(--color-text-tertiary);
background: var(--color-bg-card);
border-radius: var(--radius-md);
box-shadow: var(--shadow-card);
}
/* ============================== 安全提醒 ============================== */
/* 注意:旧版这里写了 padding:0,把 .section 的左右 24rpx 内边距覆盖掉了,
于是这张卡比其它区块宽出 48rpx、直接贴到屏幕边缘。现已移除。 */
.safety-card {
display: flex;
align-items: center;
background: var(--color-bg-card);
border-radius: var(--radius-lg);
overflow: hidden;
box-shadow: var(--shadow-card);
}
.safety-cover {
width: 180rpx;
align-self: stretch;
flex: none;
}
.safety-info {
flex: 1;
min-width: 0;
padding: var(--spacing-2);
}
.safety-title {
display: block;
font-size: var(--font-size-md);
font-weight: var(--font-weight-semibold);
color: var(--color-text-strong);
}
.safety-body {
display: block;
margin-top: 8rpx;
font-size: var(--font-size-sm);
line-height: var(--line-height-normal);
color: var(--color-text-tertiary);
}
.safety-link {
display: block;
margin-top: 10rpx;
font-size: var(--font-size-sm);
font-weight: var(--font-weight-semibold);
color: var(--color-primary-strong);
}
/* ============================== 按压反馈 ==============================
全站约定:可点元素必须有即时反馈(旧版 --motion-* 全站只被引用 5 次)。
统一走 --ease-spring 的轻微回弹 + --press-scale,避免"点了没反应"。 */
.entry-item,
.status-action,
.empty-btn,
.brand-actions,
.service-card,
.activity-card,
.station-card,
.article-row,
.safety-card,
.section-empty,
.banner-card {
transition: transform var(--motion-fast) var(--ease-spring),
opacity var(--motion-fast) var(--ease-standard);
}
.entry-item:active,
.status-action:active,
.empty-btn:active,
.brand-actions:active,
.service-card:active,
.activity-card:active,
.station-card:active,
.article-row:active,
.safety-card:active,
.section-empty:active,
.banner-card:active {
transform: scale(var(--press-scale));
opacity: var(--press-opacity);
}
/* ============================== 小屏适配 ==============================
旧版在这里写了 .empty-actions{display:none}:小于 340px 的机型上
「调整条件 / 公益红娘」两个入口会整块消失,属于功能级缺陷,已删除。
收紧的是尺寸,不是功能。 */
@media (max-width: 340px) {
.entry-label {
font-size: var(--font-size-micro);
}
.entry-icon {
width: 64rpx;
height: 64rpx;
}
.banner-title {
font-size: var(--font-size-xl);
}
.status-checks {
overflow-x: auto;
}
.empty-btn {
min-width: 108rpx;
padding: 0 var(--spacing-1);
}
}
@@ -1,13 +1,13 @@
/* U63 本地资格补充核验页 */
.page {
padding:24rpx;
background: #FAFAF8;
background:var(--color-bg-page);
min-height:100vh;
padding-bottom:120rpx;
}
.header {
background: #fff;
background:var(--color-bg-card);
border-radius:16rpx;
padding:32rpx 24rpx;
margin-bottom:24rpx;
@@ -17,19 +17,19 @@
display:block;
font-size:32rpx;
font-weight:600;
color: #1a1a1a;
color:var(--color-text-strong);
margin-bottom:12rpx;
}
.desc {
display:block;
font-size:26rpx;
color: #666;
color:var(--color-text-secondary);
line-height:1.6;
}
.type-tag {
background: #E8F5E9;
background:var(--color-success-light);
border-radius:8rpx;
padding:16rpx 20rpx;
margin-bottom:24rpx;
@@ -37,11 +37,11 @@
.type-tag text {
font-size:24rpx;
color: #2E7D32;
color:var(--color-success-strong);
}
.section {
background: #fff;
background:var(--color-bg-card);
border-radius:16rpx;
padding:24rpx;
margin-bottom:24rpx;
@@ -50,7 +50,7 @@
.section-title {
font-size:28rpx;
font-weight:600;
color: #1a1a1a;
color:var(--color-text-strong);
margin-bottom:20rpx;
display:block;
}
@@ -64,30 +64,30 @@
.evidence-card {
padding:24rpx;
border-radius:12rpx;
border: 2rpx solid #eee;
border:2rpx solid var(--color-border);
}
.evidence-card.active {
border-color: #E96B6B;
background: #FFF5F5;
border-color:var(--color-primary);
background:var(--color-primary-light);
}
.evidence-label {
display:block;
font-size:28rpx;
font-weight:500;
color: #333;
color:var(--color-text-primary);
margin-bottom:4rpx;
}
.evidence-desc {
display:block;
font-size: 22rpx;
color: #999;
font-size:24rpx;
color:var(--color-text-tertiary);
}
.upload-area {
border: 2rpx dashed #ddd;
border:2rpx dashed var(--color-border-strong);
border-radius:12rpx;
padding:24rpx;
}
@@ -98,8 +98,8 @@
}
.hint-text {
font-size: 22rpx;
color: #999;
font-size:24rpx;
color:var(--color-text-tertiary);
}
.image-grid {
@@ -133,7 +133,7 @@
display:flex;
align-items:center;
justify-content:center;
color: #fff;
color:var(--color-text-inverse);
font-size:24rpx;
line-height:1;
}
@@ -141,7 +141,7 @@
.upload-btn {
width:160rpx;
height:160rpx;
border: 2rpx dashed #ccc;
border:2rpx dashed var(--color-border-strong);
border-radius:8rpx;
display:flex;
flex-direction:column;
@@ -151,17 +151,17 @@
.upload-icon {
font-size:48rpx;
color: #ccc;
color:var(--color-text-disabled);
}
.upload-text {
font-size: 22rpx;
color: #999;
font-size:24rpx;
color:var(--color-text-tertiary);
margin-top:8rpx;
}
.privacy-note {
background: #F0F7FF;
background:var(--color-info-light);
border-radius:8rpx;
padding:16rpx 20rpx;
margin-bottom:24rpx;
@@ -169,7 +169,7 @@
.note-text {
font-size:24rpx;
color: #1976D2;
color:var(--color-info-strong);
}
.action-bar {
@@ -178,7 +178,7 @@
left:0;
right:0;
padding:16rpx 24rpx;
background: #fff;
background:var(--color-bg-card);
box-shadow:0 -2rpx 12rpx rgba(0,0,0,0.05);
padding-bottom:calc(16rpx + env(safe-area-inset-bottom));
}
@@ -187,8 +187,8 @@
width:100%;
height:88rpx;
line-height:88rpx;
background: #E96B6B;
color: #fff;
background:var(--color-primary-solid);
color:var(--color-text-inverse);
border-radius:12rpx;
font-size:30rpx;
font-weight:500;
@@ -196,5 +196,5 @@
}
.btn-primary:disabled {
background: #ccc;
background:var(--color-bg-muted);
}
@@ -1,12 +1,12 @@
/* U62 本地资格说明页 */
.page {
padding:24rpx;
background: #FAFAF8;
background:var(--color-bg-page);
min-height:100vh;
}
.header {
background: #fff;
background:var(--color-bg-card);
border-radius:16rpx;
padding:32rpx 24rpx;
margin-bottom:24rpx;
@@ -16,19 +16,19 @@
display:block;
font-size:32rpx;
font-weight:600;
color: #1a1a1a;
color:var(--color-text-strong);
margin-bottom:16rpx;
}
.desc {
display:block;
font-size:26rpx;
color: #666;
color:var(--color-text-secondary);
line-height:1.6;
}
.section {
background: #fff;
background:var(--color-bg-card);
border-radius:16rpx;
padding:24rpx;
margin-bottom:24rpx;
@@ -37,7 +37,7 @@
.section-title {
font-size:28rpx;
font-weight:600;
color: #1a1a1a;
color:var(--color-text-strong);
margin-bottom:20rpx;
display:block;
}
@@ -50,7 +50,7 @@
.type-card {
width:calc(50% - 8rpx);
background: #F7F8FA;
background:var(--color-bg-subtle);
border-radius:12rpx;
padding:28rpx 16rpx;
text-align:center;
@@ -58,8 +58,8 @@
}
.type-card:active {
border-color: #E96B6B;
background: #FFF5F5;
border-color:var(--color-primary);
background:var(--color-primary-light);
}
.type-icon {
@@ -70,12 +70,12 @@
.type-label {
font-size:26rpx;
color: #333;
color:var(--color-text-primary);
font-weight:500;
}
.notice {
background: #FFF9E6;
background:var(--color-warning-light);
border-radius:12rpx;
padding:20rpx 24rpx;
margin-bottom:24rpx;
@@ -83,7 +83,7 @@
.notice-text {
font-size:24rpx;
color: #8B6914;
color:var(--color-warning-strong);
line-height:1.5;
}
@@ -96,9 +96,9 @@
width:100%;
height:88rpx;
line-height:88rpx;
background: #fff;
color: #E96B6B;
border: 2rpx solid #E96B6B;
background:var(--color-bg-card);
color:var(--color-primary-strong);
border:2rpx solid var(--color-primary);
border-radius:12rpx;
font-size:28rpx;
font-weight:500;
+9 -9
View File
@@ -3,7 +3,7 @@
min-height:100vh;
display:flex;
flex-direction:column;
background: linear-gradient(180deg, #FFF5F5 0%, #FFFFFF 60%);
background:linear-gradient(180deg, var(--color-primary-light) 0%, var(--color-bg-card) 60%);
padding:0 48rpx;
}
@@ -24,13 +24,13 @@
.brand-name {
font-size:44rpx;
font-weight:700;
color: #2D2D2D;
color:var(--color-text-strong);
margin-bottom:12rpx;
}
.slogan {
font-size:28rpx;
color: #999;
color:var(--color-text-tertiary);
}
.login-content {
@@ -41,8 +41,8 @@
width:100%;
height:96rpx;
line-height:96rpx;
background: #E96B6B;
color: #fff;
background:var(--color-primary-solid);
color:var(--color-text-inverse);
font-size:32rpx;
font-weight:600;
border-radius:48rpx;
@@ -60,16 +60,16 @@
.error-text {
font-size:26rpx;
color: #e74c3c;
color:var(--color-danger-strong);
}
.login-agreement {
margin-top:48rpx;
text-align:center;
font-size: 22rpx;
color: #bbb;
font-size:24rpx;
color:var(--color-text-disabled);
}
.login-agreement .link {
color: #E96B6B;
color:var(--color-primary-strong);
}
@@ -1,11 +1,11 @@
.page {
padding:32rpx;
background: #FFF8F7;
background:var(--color-primary-lighter);
min-height:100vh;
}
.section {
background: #fff;
background:var(--color-bg-card);
border-radius:24rpx;
padding:32rpx;
margin-bottom:24rpx;
@@ -14,7 +14,7 @@
.section-title {
font-size:30rpx;
font-weight:bold;
color: #1A1A1A;
color:var(--color-text-strong);
margin-bottom:24rpx;
display:block;
}
@@ -31,14 +31,14 @@
align-items:center;
padding:28rpx 16rpx;
border-radius:16rpx;
background: #F8F8F8;
background:var(--color-bg-subtle);
border:2rpx solid transparent;
transition:all 0.2s;
}
.type-item.selected {
background: #FFF3F2;
border-color: #E96B6B;
background:var(--color-primary-light);
border-color:var(--color-primary);
}
.type-icon {
@@ -48,7 +48,7 @@
.type-name {
font-size:24rpx;
color: #333;
color:var(--color-text-primary);
text-align:center;
line-height:1.4;
}
@@ -56,7 +56,7 @@
.textarea {
width:100%;
height:200rpx;
background: #F8F8F8;
background:var(--color-bg-subtle);
border-radius:16rpx;
padding:20rpx;
font-size:28rpx;
@@ -67,13 +67,13 @@
display:block;
text-align:right;
font-size:22rpx;
color: #999;
color:var(--color-text-tertiary);
margin-top:8rpx;
}
.submit-btn {
background: #E96B6B;
color: #fff;
background:var(--color-primary-solid);
color:var(--color-text-inverse);
border-radius:44rpx;
height:88rpx;
line-height:88rpx;
@@ -1,7 +1,7 @@
/* 红娘工作台登录页样式 */
.page {
min-height:100vh;
background: linear-gradient(180deg, #E96B6B 0%, #ff9a9a 100%);
background:linear-gradient(180deg, var(--color-primary) 0%, var(--color-primary-light) 100%);
display:flex;
flex-direction:column;
padding:0 48rpx;
@@ -24,7 +24,7 @@
.title {
font-size:40rpx;
font-weight:700;
color: #fff;
color:var(--color-text-inverse);
margin-bottom:12rpx;
}
@@ -37,7 +37,7 @@
}
.form {
background: #fff;
background:var(--color-bg-card);
border-radius:32rpx 32rpx 0 0;
padding:64rpx 48rpx;
}
@@ -49,7 +49,7 @@
.label {
display:block;
font-size:28rpx;
color: #333;
color:var(--color-text-primary);
margin-bottom:16rpx;
font-weight:500;
}
@@ -57,7 +57,7 @@
.input {
width:100%;
height:88rpx;
border: 2rpx solid #e0e0e0;
border:2rpx solid var(--color-border-strong);
border-radius:16rpx;
padding:0 24rpx;
font-size:32rpx;
@@ -65,19 +65,19 @@
}
.input:focus {
border-color: #E96B6B;
border-color:var(--color-primary);
}
.error-tip {
background: #fff2f0;
border: 1rpx solid #ffccc7;
background:var(--color-primary-light);
border:1rpx solid var(--color-primary-light);
border-radius:8rpx;
padding:16rpx 24rpx;
margin-bottom:32rpx;
}
.error-tip text {
color: #ff4d4f;
color:var(--color-danger-strong);
font-size:26rpx;
}
@@ -85,8 +85,8 @@
width:100%;
height:96rpx;
line-height:96rpx;
background: #E96B6B;
color: #fff;
background:var(--color-primary-solid);
color:var(--color-text-inverse);
font-size:32rpx;
font-weight:600;
border-radius:48rpx;
@@ -103,7 +103,7 @@
}
.footer-link text {
color: #999;
color:var(--color-text-tertiary);
font-size:26rpx;
}
@@ -1,6 +1,6 @@
.page {
padding:32rpx;
background: #FFF8F7;
background:var(--color-primary-lighter);
min-height:100vh;
}
@@ -8,7 +8,7 @@
display:flex;
align-items:center;
gap:16rpx;
background: #fff;
background:var(--color-bg-card);
border-radius:24rpx;
padding:32rpx;
margin-bottom:24rpx;
@@ -24,11 +24,11 @@
.status-text {
font-size:32rpx;
font-weight:bold;
color: #1A1A1A;
color:var(--color-text-strong);
}
.info-card {
background: #fff;
background:var(--color-bg-card);
border-radius:24rpx;
padding:32rpx;
margin-bottom:24rpx;
@@ -38,7 +38,7 @@
display:flex;
justify-content:space-between;
padding:16rpx 0;
border-bottom: 1rpx solid #f5f5f5;
border-bottom:1rpx solid var(--color-divider);
}
.info-row:last-child {
@@ -47,12 +47,12 @@
.info-label {
font-size:26rpx;
color: #999;
color:var(--color-text-tertiary);
}
.info-value {
font-size:26rpx;
color: #333;
color:var(--color-text-primary);
text-align:right;
max-width:55%;
}
@@ -63,7 +63,7 @@
}
.notice {
background: #fff;
background:var(--color-bg-card);
border-radius:24rpx;
padding:32rpx;
}
@@ -71,7 +71,7 @@
.notice-title {
font-size:28rpx;
font-weight:bold;
color: #333;
color:var(--color-text-primary);
margin-bottom:24rpx;
display:block;
}
@@ -92,8 +92,8 @@
width:48rpx;
height:48rpx;
border-radius:50%;
background: #EEE;
color: #999;
background:var(--color-bg-subtle);
color:var(--color-text-tertiary);
display:flex;
align-items:center;
justify-content:center;
@@ -101,17 +101,17 @@
}
.step.active .step-num, .step.done .step-num {
background: #E96B6B;
color: #fff;
background:var(--color-primary-solid);
color:var(--color-text-inverse);
}
.step-text {
font-size: 22rpx;
color: #999;
font-size:24rpx;
color:var(--color-text-tertiary);
}
.step.active .step-text, .step.done .step-text {
color: #333;
color:var(--color-text-primary);
}
.empty {
@@ -122,13 +122,13 @@
.empty-desc {
display:block;
font-size:26rpx;
color: #999;
color:var(--color-text-tertiary);
margin:16rpx 0 40rpx;
}
.btn-apply {
background: #E96B6B;
color: #fff;
background:var(--color-primary-solid);
color:var(--color-text-inverse);
border-radius:44rpx;
height:88rpx;
line-height:88rpx;
@@ -138,5 +138,5 @@
.loading {
text-align:center;
padding:120rpx;
color: #999;
color:var(--color-text-tertiary);
}
@@ -1,14 +1,14 @@
/* 页面容器 */
.page {
min-height:100vh;
background: #f5f6fa;
background:var(--color-bg-subtle);
}
/* 欢迎区 */
.header {
background: linear-gradient(135deg, #E96B6B 0%, #ff9a9a 100%);
background:linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-light) 100%);
padding:48rpx 32rpx 60rpx;
color: #fff;
color:var(--color-text-inverse);
position:relative;
}
@@ -46,7 +46,7 @@
padding:6rpx 20rpx;
border-radius:20rpx;
font-size:22rpx;
color: #fff;
color:var(--color-text-inverse);
display:inline-block;
background:rgba(255,255,255,0.2);
padding:8rpx 24rpx;
@@ -67,7 +67,7 @@
.stat-card {
width:calc(50% - 16rpx);
margin:0 8rpx 24rpx 8rpx;
background: #fff;
background:var(--color-bg-card);
border-radius:24rpx;
padding:40rpx 20rpx;
text-align:center;
@@ -83,20 +83,20 @@
.stat-value {
font-size:56rpx;
font-weight:700;
color: #1a1a1a;
color:var(--color-text-strong);
line-height:1.2;
margin-bottom:8rpx;
}
.stat-label {
font-size:26rpx;
color: #999;
color:var(--color-text-tertiary);
}
/* 列表区块 */
.section {
margin:0 24rpx 24rpx;
background: #fff;
background:var(--color-bg-card);
border-radius:24rpx;
padding:32rpx;
box-shadow:0 2rpx 12rpx rgba(0,0,0,0.04);
@@ -118,20 +118,20 @@
.section-dot {
width:6rpx;
height:28rpx;
background: linear-gradient(180deg, #E96B6B 0%, #ff9a9a 100%);
background:linear-gradient(180deg, var(--color-primary) 0%, var(--color-primary-light) 100%);
border-radius:3rpx;
}
.section-title {
font-size:30rpx;
font-weight:600;
color: #1a1a1a;
color:var(--color-text-strong);
}
.section-count {
font-size:22rpx;
color: #999;
background: #f5f5f5;
color:var(--color-text-tertiary);
background:var(--color-bg-subtle);
padding:4rpx 14rpx;
border-radius:12rpx;
}
@@ -148,9 +148,9 @@
align-items:center;
justify-content:space-between;
padding:24rpx;
background: #fafafa;
background:var(--color-bg-subtle);
border-radius:16rpx;
border: 1rpx solid #f0f0f0;
border:1rpx solid var(--color-divider);
}
.service-left {
@@ -169,28 +169,28 @@
.service-tag {
font-size:24rpx;
font-weight:600;
color: #E96B6B;
color:var(--color-primary-strong);
background:rgba(233, 107, 107, 0.08);
padding:4rpx 12rpx;
border-radius:6rpx;
}
.service-time {
font-size: 20rpx;
color: #bbb;
font-size:24rpx;
color:var(--color-text-disabled);
}
.service-desc {
font-size:26rpx;
color: #555;
color:var(--color-text-primary);
overflow:hidden;
text-overflow:ellipsis;
white-space:nowrap;
}
.btn-claim {
background: linear-gradient(135deg, #E96B6B 0%, #ff8a80 100%);
color: #fff;
background:linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-light) 100%);
color:var(--color-text-inverse);
font-size:24rpx;
font-weight:600;
padding:12rpx 32rpx;
@@ -213,13 +213,13 @@
.empty-text {
font-size:26rpx;
color: #999;
color:var(--color-text-tertiary);
margin-bottom:6rpx;
}
.empty-hint {
font-size: 22rpx;
color: #ccc;
font-size:24rpx;
color:var(--color-text-disabled);
}
/* 加载中 */
@@ -234,8 +234,8 @@
.loading-spinner {
width:44rpx;
height:44rpx;
border: 4rpx solid #f0f0f0;
border-top-color: #E96B6B;
border:4rpx solid var(--color-divider);
border-top-color:var(--color-primary);
border-radius:50%;
animation:spin 0.8s linear infinite;
}
@@ -246,7 +246,7 @@
.loading-text {
font-size:24rpx;
color: #999;
color:var(--color-text-tertiary);
}
/* 底部退出 */
@@ -256,11 +256,11 @@
.logout-btn {
width:100%;
height: 84rpx;
line-height: 84rpx;
background: #fff;
color: #999;
min-height:var(--tap-min);
line-height:var(--tap-min);
background:var(--color-bg-card);
color:var(--color-text-tertiary);
font-size:28rpx;
border-radius:42rpx;
border: 2rpx solid #e8e8e8;
}
border:2rpx solid var(--color-border);
min-width:var(--tap-min);}
+1 -1
View File
@@ -1 +1 @@
.mm-page{min-height:100vh;padding-bottom:calc(136rpx + env(safe-area-inset-bottom));background:#F4F5FA}.mm-promises{position:relative;z-index:2;display:grid;grid-template-columns:repeat(3,1fr);margin:-22rpx 24rpx 0;padding:22rpx 8rpx;border-radius:28rpx;background:#fff;box-shadow:var(--mini-shadow)}.mm-promise{display:flex;flex-direction:column;align-items:center;padding:0 8rpx;text-align:center;color:#8A8FA4;font-size:17rpx;line-height:1.35}.mm-promise image{width:46rpx;height:46rpx;margin-bottom:8rpx}.mm-promise__title{margin-bottom:4rpx;color:#303654;font-size:21rpx;font-weight:650}.mm-loading{padding:30rpx 24rpx}.mm-body{padding-top:8rpx}.mm-section{padding:8rpx 24rpx}.mm-no-service{display:flex;align-items:center;gap:18rpx;margin-top:10rpx;padding:24rpx;border-radius:26rpx;background:#fff;box-shadow:0 8rpx 28rpx rgba(35,35,95,.06)}.mm-no-service image{width:68rpx;height:68rpx}.mm-no-service>view{display:flex;flex:1;flex-direction:column}.mm-no-service__title{color:#283056;font-size:25rpx;font-weight:650}.mm-no-service__desc{margin-top:7rpx;color:#858A9E;font-size:20rpx;line-height:1.5}.mm-capability-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:14rpx;margin-top:10rpx}.mm-capability{display:flex;align-items:center;gap:12rpx;min-height:88rpx;padding:16rpx;border-radius:22rpx;background:#fff;color:#555D79;font-size:20rpx;line-height:1.4;box-shadow:0 8rpx 24rpx rgba(35,35,95,.05)}.mm-capability image{width:36rpx;height:36rpx;flex:none}.mm-history{overflow:hidden;margin-top:10rpx;border-radius:24rpx;background:#fff}.mm-history__item{display:flex;align-items:center;min-height:92rpx;padding:0 20rpx;border-bottom:1rpx solid #EFF0F5}.mm-history__item:last-child{border-bottom:0}.mm-history__item>view{display:flex;flex:1;flex-direction:column}.mm-history__title{color:#303654;font-size:23rpx;font-weight:600}.mm-history__meta{margin-top:5rpx;color:#8A8FA4;font-size:18rpx}.mm-history__status{margin-right:8rpx;color:#8A6F91;font-size:19rpx}.mm-history__item>image{width:24rpx;height:24rpx}.mm-fixed-action{position:fixed;z-index:100;right:0;bottom:0;left:0;padding:18rpx 24rpx calc(18rpx + env(safe-area-inset-bottom));border-top:1rpx solid #EFF0F5;background:rgba(255,255,255,.96)}.mm-apply{display:flex;align-items:center;justify-content:center;height:88rpx;border-radius:44rpx;background:linear-gradient(135deg,var(--mini-accent-coral),var(--mini-accent-pink));color:#fff;font-size:28rpx;font-weight:650;box-shadow:0 10rpx 24rpx rgba(255,92,130,.22)}
.mm-page{min-height:100vh;padding-bottom:calc(136rpx + env(safe-area-inset-bottom));background:var(--color-bg-page)}.mm-promises{position:relative;z-index:2;display:grid;grid-template-columns:repeat(3,1fr);margin:-22rpx 24rpx 0;padding:22rpx 8rpx;border-radius:28rpx;background:var(--color-bg-card);box-shadow:var(--mini-shadow)}.mm-promise{display:flex;flex-direction:column;align-items:center;padding:0 8rpx;text-align:center;color:var(--color-text-tertiary);font-size:24rpx;line-height:1.35}.mm-promise image{width:46rpx;height:46rpx;margin-bottom:8rpx}.mm-promise__title{margin-bottom:4rpx;color:var(--color-text-strong);font-size:24rpx;font-weight:600}.mm-loading{padding:30rpx 24rpx}.mm-body{padding-top:8rpx}.mm-section{padding:8rpx 24rpx}.mm-no-service{display:flex;align-items:center;gap:18rpx;margin-top:10rpx;padding:24rpx;border-radius:26rpx;background:var(--color-bg-card);box-shadow:0 8rpx 28rpx rgba(35,35,95,.06)}.mm-no-service image{width:68rpx;height:68rpx}.mm-no-service>view{display:flex;flex:1;flex-direction:column}.mm-no-service__title{color:var(--color-text-strong);font-size:25rpx;font-weight:600}.mm-no-service__desc{margin-top:7rpx;color:var(--color-text-tertiary);font-size:24rpx;line-height:1.5}.mm-capability-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:14rpx;margin-top:10rpx}.mm-capability{display:flex;align-items:center;gap:12rpx;min-height:88rpx;padding:16rpx;border-radius:22rpx;background:var(--color-bg-card);color:var(--color-text-secondary);font-size:24rpx;line-height:1.4;box-shadow:0 8rpx 24rpx rgba(35,35,95,.05)}.mm-capability image{width:36rpx;height:36rpx;flex:none}.mm-history{overflow:hidden;margin-top:10rpx;border-radius:24rpx;background:var(--color-bg-card)}.mm-history__item{display:flex;align-items:center;min-height:92rpx;padding:0 20rpx;border-bottom:1rpx solid var(--color-divider)}.mm-history__item:last-child{border-bottom:0}.mm-history__item>view{display:flex;flex:1;flex-direction:column}.mm-history__title{color:var(--color-text-strong);font-size:24rpx;font-weight:600}.mm-history__meta{margin-top:5rpx;color:var(--color-text-tertiary);font-size:24rpx}.mm-history__status{margin-right:8rpx;color:var(--color-accent-purple-strong);font-size:24rpx}.mm-history__item>image{width:24rpx;height:24rpx}.mm-fixed-action{position:fixed;z-index:100;right:0;bottom:0;left:0;padding:18rpx 24rpx calc(18rpx + env(safe-area-inset-bottom));border-top:1rpx solid var(--color-divider);background:rgba(255,255,255,.96)}.mm-apply{display:flex;align-items:center;justify-content:center;height:88rpx;border-radius:44rpx;background:var(--gradient-brand-solid);color:var(--color-text-inverse);font-size:28rpx;font-weight:600;box-shadow:0 10rpx 24rpx rgba(255,92,130,.22)}
+4 -4
View File
@@ -1,6 +1,6 @@
.page {
min-height:100vh;
background: #f4f5fa;
background:var(--color-bg-page);
}
.messages-hero {
@@ -19,7 +19,7 @@
}
.messages-title {
color: #fff;
color:var(--color-text-inverse);
font-size:31rpx;
font-weight:700;
}
@@ -42,7 +42,7 @@
flex-direction:column;
align-items:center;
color:rgba(255, 255, 255, .88);
font-size: 20rpx;
font-size:24rpx;
}
.shortcut-icon {
@@ -74,6 +74,6 @@
overflow:hidden;
margin-top:8rpx;
border-radius:28rpx;
background: #fff;
background:var(--color-bg-card);
box-shadow:0 10rpx 32rpx rgba(34, 35, 91, .08);
}
+1 -1
View File
@@ -1 +1 @@
.page{min-height:100vh;padding-bottom:48rpx;background:#F4F5FA}.mine-guest{min-height:100vh;background:linear-gradient(160deg,var(--mini-night-start) 0,var(--mini-night-end) 34%,#F4F5FA 34%)}.guest-brand{display:flex;flex-direction:column;align-items:center;padding:calc(env(safe-area-inset-top) + 70rpx) 0 80rpx;color:#fff}.guest-brand image{width:92rpx;height:92rpx}.guest-brand>text{margin-top:12rpx;font-size:34rpx;font-weight:700}.guest-brand .guest-subtitle{margin-top:5rpx;color:rgba(255,255,255,.72);font-size:20rpx;font-weight:400;letter-spacing:4rpx}.profile-hero{padding:env(safe-area-inset-top) 24rpx 54rpx;border-radius:0 0 42rpx 42rpx;background:linear-gradient(160deg,var(--mini-night-start),var(--mini-night-end));box-shadow:var(--mini-shadow)}.mine-nav{position:relative;display:flex;align-items:center;justify-content:center;height:88rpx;color:#fff;font-size:31rpx;font-weight:700}.mine-nav image{position:absolute;right:12rpx;width:36rpx;height:36rpx;filter:brightness(0) invert(1)}.profile-main{position:relative;display:flex;align-items:center}.profile-copy{flex:1;min-width:0;margin-left:20rpx;color:#fff}.profile-name-row{display:flex;align-items:center;gap:12rpx}.profile-name{font-size:31rpx;font-weight:700}.profile-status{padding:5rpx 10rpx;border-radius:15rpx;background:rgba(255,255,255,.12);color:rgba(255,255,255,.78);font-size:17rpx}.profile-meta{display:block;margin-top:8rpx;color:rgba(255,255,255,.72);font-size:20rpx}.profile-progress{width:78%;height:7rpx;margin:10rpx 0 13rpx;overflow:hidden;border-radius:8rpx;background:rgba(255,255,255,.14)}.profile-progress view{height:100%;border-radius:8rpx;background:linear-gradient(90deg,#FF8C9C,#FF5C82)}.profile-badges{display:flex;gap:8rpx}.edit-profile{position:absolute;right:0;top:4rpx;color:rgba(255,255,255,.82);font-size:19rpx}.profile-stats{position:relative;z-index:2;display:grid;grid-template-columns:repeat(4,1fr);margin:-24rpx 24rpx 0;padding:24rpx 8rpx;border-radius:28rpx;background:#fff;box-shadow:var(--mini-shadow)}.profile-stat{display:flex;flex-direction:column;align-items:center;border-right:1rpx solid #EFF0F5}.profile-stat:last-child{border-right:0}.stat-value{color:#283056;font-size:29rpx;font-weight:700}.stat-value--text{font-size:22rpx}.stat-label{margin-top:5rpx;color:#8A8FA4;font-size:18rpx}.public-identity-card{display:flex;align-items:center;margin:24rpx;padding:22rpx;border-radius:26rpx;background:linear-gradient(135deg,#FFF0F5,#F7EEFF);box-shadow:0 8rpx 26rpx rgba(87,62,145,.08)}.public-identity-card>image:first-child{width:72rpx;height:72rpx}.public-identity-card>view{flex:1;display:flex;flex-direction:column;margin-left:16rpx}.identity-title{color:#F14D79;font-size:26rpx;font-weight:700}.identity-desc{margin-top:5rpx;color:#8A6F91;font-size:19rpx}.public-identity-card .identity-arrow{width:26rpx;height:26rpx}.service-grid{display:grid;grid-template-columns:repeat(4,1fr);margin:0 24rpx 28rpx;padding:24rpx 8rpx;border-radius:26rpx;background:#fff;box-shadow:0 8rpx 28rpx rgba(35,35,95,.07)}.service-entry{display:flex;flex-direction:column;align-items:center;color:#343957;font-size:20rpx}.service-icon{display:flex;align-items:center;justify-content:center;width:64rpx;height:64rpx;margin-bottom:10rpx;border-radius:20rpx}.service-icon image{width:42rpx;height:42rpx}.service-icon.rose{background:#FFF0F5}.service-icon.blue{background:#EAF3FF}.service-icon.amber{background:#FFF3E5}.service-icon.green{background:#EAF8F2}.list-group{overflow:hidden;margin:0 24rpx 22rpx;border-radius:26rpx;background:#fff;box-shadow:0 8rpx 28rpx rgba(35,35,95,.06)}.list-row{display:flex;align-items:center;min-height:88rpx;padding:0 24rpx;border-bottom:1rpx solid #EFF0F5}.list-row:last-child{border-bottom:0}.list-label{flex:1;color:#2B304E;font-size:23rpx}.list-value{margin-right:12rpx;color:#8A8FA4;font-size:19rpx}.list-arrow{width:24rpx;height:24rpx}.secondary-list{margin-top:0}.logout-row{margin:26rpx 24rpx 0;padding:24rpx;text-align:center;color:#D95561;font-size:23rpx;background:#fff;border-radius:26rpx}
.page{min-height:100vh;padding-bottom:48rpx;background:var(--color-bg-page)}.mine-guest{min-height:100vh;background:linear-gradient(160deg,var(--mini-night-start) 0,var(--mini-night-end) 34%,var(--color-bg-page) 34%)}.guest-brand{display:flex;flex-direction:column;align-items:center;padding:calc(env(safe-area-inset-top) + 70rpx) 0 80rpx;color:var(--color-text-inverse)}.guest-brand image{width:92rpx;height:92rpx}.guest-brand>text{margin-top:12rpx;font-size:34rpx;font-weight:700}.guest-brand .guest-subtitle{margin-top:5rpx;color:rgba(255,255,255,.72);font-size:24rpx;font-weight:400;letter-spacing:4rpx}.profile-hero{padding:env(safe-area-inset-top) 24rpx 54rpx;border-radius:0 0 42rpx 42rpx;background:linear-gradient(160deg,var(--mini-night-start),var(--mini-night-end));box-shadow:var(--mini-shadow)}.mine-nav{position:relative;display:flex;align-items:center;justify-content:center;height:88rpx;color:var(--color-text-inverse);font-size:31rpx;font-weight:700}.mine-nav image{position:absolute;right:12rpx;width:36rpx;height:36rpx;filter:brightness(0) invert(1)}.profile-main{position:relative;display:flex;align-items:center}.profile-copy{flex:1;min-width:0;margin-left:20rpx;color:var(--color-text-inverse)}.profile-name-row{display:flex;align-items:center;gap:12rpx}.profile-name{font-size:31rpx;font-weight:700}.profile-status{padding:5rpx 10rpx;border-radius:15rpx;background:rgba(255,255,255,.12);color:rgba(255,255,255,.78);font-size:24rpx}.profile-meta{display:block;margin-top:8rpx;color:rgba(255,255,255,.72);font-size:24rpx}.profile-progress{width:78%;height:7rpx;margin:10rpx 0 13rpx;overflow:hidden;border-radius:8rpx;background:rgba(255,255,255,.14)}.profile-progress view{height:100%;border-radius:8rpx;background:linear-gradient(90deg,var(--color-primary-light),var(--color-primary-light))}.profile-badges{display:flex;gap:8rpx}.edit-profile{position:absolute;right:0;top:4rpx;color:rgba(255,255,255,.82);font-size:24rpx}.profile-stats{position:relative;z-index:2;display:grid;grid-template-columns:repeat(4,1fr);margin:-24rpx 24rpx 0;padding:24rpx 8rpx;border-radius:28rpx;background:var(--color-bg-card);box-shadow:var(--mini-shadow)}.profile-stat{display:flex;flex-direction:column;align-items:center;border-right:1rpx solid var(--color-divider)}.profile-stat:last-child{border-right:0}.stat-value{color:var(--color-text-strong);font-size:29rpx;font-weight:700}.stat-value--text{font-size:24rpx}.stat-label{margin-top:5rpx;color:var(--color-text-tertiary);font-size:24rpx}.public-identity-card{display:flex;align-items:center;margin:24rpx;padding:22rpx;border-radius:26rpx;background:linear-gradient(135deg,var(--color-primary-light),var(--color-accent-purple-light));box-shadow:0 8rpx 26rpx rgba(87,62,145,.08)}.public-identity-card>image:first-child{width:72rpx;height:72rpx}.public-identity-card>view{flex:1;display:flex;flex-direction:column;margin-left:16rpx}.identity-title{color:var(--color-primary-strong);font-size:26rpx;font-weight:700}.identity-desc{margin-top:5rpx;color:var(--color-accent-purple-strong);font-size:24rpx}.public-identity-card .identity-arrow{width:26rpx;height:26rpx}.service-grid{display:grid;grid-template-columns:repeat(4,1fr);margin:0 24rpx 28rpx;padding:24rpx 8rpx;border-radius:26rpx;background:var(--color-bg-card);box-shadow:0 8rpx 28rpx rgba(35,35,95,.07)}.service-entry{display:flex;flex-direction:column;align-items:center;color:var(--color-text-strong);font-size:24rpx}.service-icon{display:flex;align-items:center;justify-content:center;width:64rpx;height:64rpx;margin-bottom:10rpx;border-radius:20rpx}.service-icon image{width:42rpx;height:42rpx}.service-icon.rose{background:var(--color-primary-light)}.service-icon.blue{background:var(--color-info-light)}.service-icon.amber{background:var(--color-warning-light)}.service-icon.green{background:var(--color-success-light)}.list-group{overflow:hidden;margin:0 24rpx 22rpx;border-radius:26rpx;background:var(--color-bg-card);box-shadow:0 8rpx 28rpx rgba(35,35,95,.06)}.list-row{display:flex;align-items:center;min-height:88rpx;padding:0 24rpx;border-bottom:1rpx solid var(--color-divider)}.list-row:last-child{border-bottom:0}.list-label{flex:1;color:var(--color-text-strong);font-size:24rpx}.list-value{margin-right:12rpx;color:var(--color-text-tertiary);font-size:24rpx}.list-arrow{width:24rpx;height:24rpx}.secondary-list{margin-top:0}.logout-row{margin:26rpx 24rpx 0;padding:24rpx;text-align:center;color:var(--color-danger-strong);font-size:24rpx;background:var(--color-bg-card);border-radius:26rpx}
@@ -1 +1 @@
.page{padding:32rpx;background:#FFF8F7;min-height:100vh;text-align:center;color:#999;padding-top:200rpx;}
.page{padding:32rpx;background:var(--color-primary-lighter);min-height:100vh;text-align:center;color:var(--color-text-tertiary);padding-top:200rpx;}
+14 -14
View File
@@ -1,19 +1,19 @@
.container { padding:24rpx; }
.empty { text-align: center; padding: 80rpx 0; color: #999; }
.go-btn { margin-top: 24rpx; background: #FF6B6B; color: #fff; border-radius: 44rpx; font-size: 28rpx; }
.card { background: #fff; border-radius: 16rpx; padding: 24rpx; margin-bottom: 20rpx; box-shadow: 0 2rpx 8rpx rgba(0,0,0,0.05); }
.empty { text-align:center; padding:80rpx 0; color:var(--color-text-tertiary); }
.go-btn { margin-top:24rpx; background:var(--color-primary-solid); color:var(--color-text-inverse); border-radius:44rpx; font-size:28rpx; }
.card { background:var(--color-bg-card); border-radius:16rpx; padding:24rpx; margin-bottom:20rpx; box-shadow:0 2rpx 8rpx rgba(0,0,0,0.05); }
.card-header { display:flex; justify-content:space-between; align-items:center; margin-bottom:12rpx; }
.card-title { font-size: 32rpx; font-weight: bold; color: #333; }
.card-title { font-size:32rpx; font-weight:bold; color:var(--color-text-primary); }
.card-status { font-size:24rpx; padding:4rpx 16rpx; border-radius:20rpx; }
.status-pending { background: #fff3e0; color: #e65100; }
.status-assigned { background: #e3f2fd; color: #1565c0; }
.status-scheduled { background: #e8f5e9; color: #2e7d32; }
.status-in_progress { background: #fce4ec; color: #c62828; }
.status-completed { background: #f3e5f5; color: #6a1b9a; }
.status-cancelled { background: #f5f5f5; color: #999; }
.status-pending { background:var(--color-warning-light); color:var(--color-warning-strong); }
.status-assigned { background:var(--color-info-light); color:var(--color-info-strong); }
.status-scheduled { background:var(--color-success-light); color:var(--color-success-strong); }
.status-in_progress { background:var(--color-primary-light); color:var(--color-danger-strong); }
.status-completed { background:var(--color-accent-purple-light); color:var(--color-accent-purple-strong); }
.status-cancelled { background:var(--color-bg-subtle); color:var(--color-text-tertiary); }
.card-body { margin-bottom:12rpx; }
.card-summary { font-size: 26rpx; color: #666; display: block; }
.card-time { font-size: 24rpx; color: #999; margin-top: 8rpx; display: block; }
.card-summary { font-size:26rpx; color:var(--color-text-secondary); display:block; }
.card-time { font-size:24rpx; color:var(--color-text-tertiary); margin-top:8rpx; display:block; }
.card-footer { display:flex; justify-content:space-between; align-items:center; }
.card-date { font-size: 24rpx; color: #bbb; }
.arrow { font-size: 28rpx; color: #ccc; }
.card-date { font-size:24rpx; color:var(--color-text-disabled); }
.arrow { font-size:28rpx; color:var(--color-text-disabled); }
+17 -17
View File
@@ -1,6 +1,6 @@
.page {
padding:32rpx;
background: #FFF8F7;
background:var(--color-primary-lighter);
min-height:100vh;
}
@@ -12,13 +12,13 @@
.title {
font-size:36rpx;
font-weight:bold;
color: #1A1A1A;
color:var(--color-text-strong);
}
.loading-state, .empty-state {
text-align:center;
padding:100rpx 32rpx;
color: #999;
color:var(--color-text-tertiary);
}
.empty-icon {
@@ -34,7 +34,7 @@
}
.report-card {
background: #fff;
background:var(--color-bg-card);
border-radius:20rpx;
padding:24rpx;
box-shadow:0 2rpx 12rpx rgba(0,0,0,0.04);
@@ -50,34 +50,34 @@
.reason {
font-size:28rpx;
font-weight:bold;
color: #1A1A1A;
color:var(--color-text-strong);
}
.status-tag {
font-size: 22rpx;
font-size:24rpx;
padding:4rpx 16rpx;
border-radius:12rpx;
background: #FFF3F2;
color: #E96B6B;
background:var(--color-primary-light);
color:var(--color-primary-strong);
}
.desc {
font-size:26rpx;
color: #666;
color:var(--color-text-secondary);
display:block;
margin-bottom:12rpx;
line-height:1.5;
}
.time {
font-size: 22rpx;
color: #BBB;
font-size:24rpx;
color:var(--color-text-disabled);
display:block;
}
.result {
font-size:24rpx;
color: #E59A32;
color:var(--color-warning-strong);
display:block;
margin-top:8rpx;
}
@@ -85,10 +85,10 @@
.btn-refresh {
margin-top:32rpx;
background:transparent;
color: #999;
border: 1rpx solid #DDD;
color:var(--color-text-tertiary);
border:1rpx solid var(--color-border-strong);
border-radius:44rpx;
height: 72rpx;
line-height: 72rpx;
min-height:var(--tap-min);
line-height:var(--tap-min);
font-size:26rpx;
}
min-width:var(--tap-min);}
+26 -26
View File
@@ -1,6 +1,6 @@
.page {
min-height:100vh;
background: #FFF8F7;
background:var(--color-primary-lighter);
}
.header {
@@ -8,27 +8,27 @@
align-items:center;
justify-content:space-between;
padding:32rpx;
background: #fff;
border-bottom: 1rpx solid #f0f0f0;
background:var(--color-bg-card);
border-bottom:1rpx solid var(--color-divider);
}
.title {
font-size:36rpx;
font-weight:bold;
color: #1A1A1A;
color:var(--color-text-strong);
}
.unread-badge {
font-size:24rpx;
color: #E96B6B;
color:var(--color-primary-strong);
padding:8rpx 16rpx;
background: #FFF3F2;
background:var(--color-primary-light);
border-radius:20rpx;
}
.unread-badge.empty {
color: #999;
background: #f5f5f5;
color:var(--color-text-tertiary);
background:var(--color-bg-subtle);
}
.list {
@@ -39,20 +39,20 @@
display:flex;
align-items:flex-start;
padding:28rpx 32rpx;
background: #fff;
border-bottom: 1rpx solid #f5f5f5;
background:var(--color-bg-card);
border-bottom:1rpx solid var(--color-divider);
gap:16rpx;
}
.notif-item.unread {
background: #FFFAF9;
background:var(--color-primary-lighter);
}
.notif-dot {
width:12rpx;
height:12rpx;
border-radius:50%;
background: #E96B6B;
background:var(--color-primary);
flex-shrink:0;
margin-top:12rpx;
}
@@ -72,35 +72,35 @@
.notif-title {
font-size:28rpx;
font-weight:bold;
color: #1A1A1A;
color:var(--color-text-strong);
}
.notif-time {
font-size: 22rpx;
color: #999;
font-size:24rpx;
color:var(--color-text-tertiary);
}
.notif-body {
font-size:24rpx;
color: #666;
color:var(--color-text-secondary);
line-height:1.6;
margin-bottom:12rpx;
}
.notif-type-tag {
display:inline-block;
font-size: 20rpx;
font-size:24rpx;
padding:4rpx 12rpx;
border-radius:12rpx;
background: #F5F5F5;
color: #999;
background:var(--color-bg-subtle);
color:var(--color-text-tertiary);
}
.notif-type-tag.match { background: #E8F5E9; color: #2E7D32; }
.notif-type-tag.review { background: #E3F2FD; color: #1565C0; }
.notif-type-tag.activity { background: #FFF3E0; color: #E65100; }
.notif-type-tag.risk { background: #FFEBEE; color: #C62828; }
.notif-type-tag.account { background: #F3E5F5; color: #6A1B9A; }
.notif-type-tag.match { background:var(--color-success-light); color:var(--color-success-strong); }
.notif-type-tag.review { background:var(--color-info-light); color:var(--color-info-strong); }
.notif-type-tag.activity { background:var(--color-warning-light); color:var(--color-warning-strong); }
.notif-type-tag.risk { background:var(--color-primary-light); color:var(--color-danger-strong); }
.notif-type-tag.account { background:var(--color-accent-purple-light); color:var(--color-accent-purple-strong); }
.empty {
text-align:center;
@@ -117,11 +117,11 @@
.empty-text {
display:block;
font-size:28rpx;
color: #999;
color:var(--color-text-tertiary);
}
.loading {
text-align:center;
padding:40rpx;
color: #999;
color:var(--color-text-tertiary);
}
@@ -1,10 +1,10 @@
.container { padding:24rpx; }
.form-section { background: #fff; border-radius: 16rpx; padding: 24rpx; }
.form-group { padding: 20rpx 0; border-bottom: 1rpx solid #f5f5f5; }
.form-section { background:var(--color-bg-card); border-radius:16rpx; padding:24rpx; }
.form-group { padding:20rpx 0; border-bottom:1rpx solid var(--color-divider); }
.form-group:last-child { border-bottom:none; }
.label { font-size: 28rpx; color: #666; display: block; margin-bottom: 12rpx; }
.input { font-size: 30rpx; color: #333; }
.textarea { font-size: 30rpx; color: #333; width: 100%; height: 120rpx; }
.switch-hint { font-size: 24rpx; color: #FF6B6B; margin-left: 12rpx; }
.submit-btn { margin-top: 40rpx; background: linear-gradient(135deg, #FF6B6B, #EE5A24); color: #fff; border: none; border-radius: 44rpx; font-size: 32rpx; }
.tip { display: block; text-align: center; font-size: 24rpx; color: #999; margin-top: 20rpx; }
.label { font-size:28rpx; color:var(--color-text-secondary); display:block; margin-bottom:12rpx; }
.input { font-size:30rpx; color:var(--color-text-primary); }
.textarea { font-size:30rpx; color:var(--color-text-primary); width:100%; height:120rpx; }
.switch-hint { font-size:24rpx; color:var(--color-primary-strong); margin-left:12rpx; }
.submit-btn { margin-top:40rpx; background:var(--gradient-brand-solid); color:var(--color-text-inverse); border:none; border-radius:44rpx; font-size:32rpx; }
.tip { display:block; text-align:center; font-size:24rpx; color:var(--color-text-tertiary); margin-top:20rpx; }
@@ -1,6 +1,6 @@
.page {
padding:32rpx;
background: #FFF8F7;
background:var(--color-primary-lighter);
min-height:100vh;
}
@@ -12,11 +12,11 @@
.title {
font-size:36rpx;
font-weight:bold;
color: #1A1A1A;
color:var(--color-text-strong);
}
.section {
background: #fff;
background:var(--color-bg-card);
border-radius:20rpx;
overflow:hidden;
margin-bottom:32rpx;
@@ -27,7 +27,7 @@
align-items:center;
justify-content:space-between;
padding:32rpx 28rpx;
border-bottom: 1rpx solid #f5f5f5;
border-bottom:1rpx solid var(--color-divider);
}
.setting-item:last-child { border-bottom:none; }
@@ -40,13 +40,13 @@
.setting-name {
font-size:28rpx;
font-weight:bold;
color: #1A1A1A;
color:var(--color-text-strong);
display:block;
}
.setting-desc {
font-size: 22rpx;
color: #999;
font-size:24rpx;
color:var(--color-text-tertiary);
display:block;
margin-top:8rpx;
}
@@ -55,8 +55,8 @@
width:100%;
height:88rpx;
line-height:88rpx;
background: #E96B6B;
color: #fff;
background:var(--color-primary-solid);
color:var(--color-text-inverse);
border-radius:44rpx;
font-size:30rpx;
}
@@ -135,5 +135,5 @@
}
.profile-actions__btn--report {
color: var(--color-warning);
color:var(--color-warning-strong);
}
@@ -30,11 +30,11 @@
background:var(--color-bg-disabled);
color:var(--color-text-secondary);
font-size:var(--font-size-sm);
transition: all var(--button-press-feedback) ease;
transition:all var(--motion-normal) var(--ease-standard);
}
.pi-tag--selected {
background: var(--color-primary);
background:var(--color-primary-solid);
color:var(--color-text-inverse);
font-weight:var(--font-weight-medium);
}
@@ -48,7 +48,7 @@
}
.pri-counter--over {
color: var(--color-danger);
color:var(--color-danger-strong);
}
/* ============ 须知 ============ */
@@ -33,7 +33,7 @@
}
.ppref-tag--selected {
background: var(--color-primary);
background:var(--color-primary-solid);
color:var(--color-text-inverse);
font-weight:var(--font-weight-medium);
}
@@ -1,7 +1,7 @@
/* 婚恋状态页 U25 — Design Tokens */
.page {
min-height:100vh;
background: #FFF8F7;
background:var(--color-primary-lighter);
}
.body {
@@ -11,17 +11,17 @@
/* 状态卡片 */
.status-card {
background: #fff;
background:var(--color-bg-card);
border-radius:20rpx;
padding:32rpx;
box-shadow:0 2rpx 12rpx rgba(0, 0, 0, 0.04);
border-left: 8rpx solid #E96B6B;
border-left:8rpx solid var(--color-primary);
margin-bottom:24rpx;
}
.status-card--warning { border-left-color: #F5A623; }
.status-card--info { border-left-color: #4A90D9; }
.status-card--disabled { border-left-color: #B0B0B0; }
.status-card--warning { border-left-color:var(--color-warning-strong); }
.status-card--info { border-left-color:var(--color-info-strong); }
.status-card--disabled { border-left-color:var(--color-border-strong); }
.status-card__head {
display:flex;
@@ -32,19 +32,19 @@
.status-card__label {
font-size:26rpx;
color: #999;
color:var(--color-text-tertiary);
}
.status-card__desc {
display:block;
font-size:28rpx;
color: #333;
color:var(--color-text-primary);
line-height:1.6;
}
/* 正在了解对象卡片 */
.partner-card {
background: #fff;
background:var(--color-bg-card);
border-radius:20rpx;
padding:24rpx 32rpx;
margin-bottom:24rpx;
@@ -68,19 +68,19 @@
display:block;
font-size:30rpx;
font-weight:bold;
color: #1A1A1A;
color:var(--color-text-strong);
margin-bottom:6rpx;
}
.partner-hint {
display:block;
font-size:24rpx;
color: #999;
color:var(--color-text-tertiary);
}
/* 操作区 */
.actions {
background: #fff;
background:var(--color-bg-card);
border-radius:20rpx;
padding:24rpx 32rpx 32rpx;
margin-bottom:24rpx;
@@ -102,27 +102,27 @@
}
.btn-primary {
background: #E96B6B;
color: #fff;
background:var(--color-primary-solid);
color:var(--color-text-inverse);
}
.btn-outline {
background: #FFF3F2;
color: #E96B6B;
border: 2rpx solid #E96B6B;
background:var(--color-primary-light);
color:var(--color-primary-strong);
border:2rpx solid var(--color-primary);
}
.btn-danger-outline {
flex-shrink:0;
height: 64rpx;
line-height: 60rpx;
min-height:var(--tap-min);
line-height:var(--tap-min);
padding:0 28rpx;
border-radius:32rpx;
font-size:24rpx;
background: #fff;
color: #E04C4C;
border: 2rpx solid #E04C4C;
}
background:var(--color-bg-card);
color:var(--color-danger-strong);
border:2rpx solid var(--color-danger-strong);
min-width:var(--tap-min);}
.btn-danger-outline::after {
border:none;
@@ -131,7 +131,7 @@
.actions-tip {
text-align:center;
padding:40rpx 0;
color: #B0B0B0;
color:var(--color-text-disabled);
font-size:26rpx;
}
@@ -145,8 +145,8 @@
.free-badge text {
display:inline-block;
font-size:22rpx;
color: #1A6B3E;
background: #E8F5E9;
color:var(--color-success-strong);
background:var(--color-success-light);
padding:8rpx 24rpx;
border-radius:24rpx;
}
+31 -31
View File
@@ -1,7 +1,7 @@
/* 举报页 U26 — Design Tokens */
.page {
min-height:100vh;
background: #FFF8F7;
background:var(--color-primary-lighter);
}
.body {
@@ -11,17 +11,17 @@
/* 被举报人提示条 */
.target-bar {
background: #FFF3F2;
background:var(--color-primary-light);
border-radius:12rpx;
padding:20rpx 24rpx;
margin-bottom:24rpx;
font-size:26rpx;
color: #E96B6B;
color:var(--color-primary-strong);
}
/* 卡片 */
.card {
background: #fff;
background:var(--color-bg-card);
border-radius:20rpx;
padding:24rpx 32rpx;
margin-bottom:24rpx;
@@ -42,17 +42,17 @@
text-align:center;
padding:20rpx 0;
border-radius:12rpx;
background: #F7F8FA;
background:var(--color-bg-subtle);
font-size:26rpx;
color: #666;
color:var(--color-text-secondary);
border:2rpx solid transparent;
transition:all 0.2s;
}
.reason-item.active {
background: #FFF3F2;
color: #E96B6B;
border-color: #E96B6B;
background:var(--color-primary-light);
color:var(--color-primary-strong);
border-color:var(--color-primary);
font-weight:bold;
}
@@ -82,36 +82,36 @@
top:4rpx;
right:4rpx;
width:36rpx;
height: 36rpx;
line-height: 32rpx;
min-height:var(--tap-min);
line-height:var(--tap-min);
text-align:center;
background:rgba(0, 0, 0, 0.5);
color: #fff;
color:var(--color-text-inverse);
border-radius:50%;
font-size: 22rpx;
}
font-size:24rpx;
min-width:var(--tap-min);}
.evidence-add {
width:160rpx;
height:160rpx;
border-radius:12rpx;
background: #F7F8FA;
border: 2rpx dashed #D0D0D0;
background:var(--color-bg-subtle);
border:2rpx dashed var(--color-border-strong);
display:flex;
flex-direction:column;
align-items:center;
justify-content:center;
color: #999;
color:var(--color-text-tertiary);
}
.add-icon {
font-size:48rpx;
color: #B0B0B0;
color:var(--color-text-disabled);
line-height:1;
}
.add-text {
font-size: 22rpx;
font-size:24rpx;
margin-top:8rpx;
}
@@ -121,8 +121,8 @@
height:88rpx;
line-height:88rpx;
border-radius:44rpx;
background: #E96B6B;
color: #fff;
background:var(--color-primary-solid);
color:var(--color-text-inverse);
font-size:32rpx;
border:none;
margin-top:8rpx;
@@ -141,8 +141,8 @@
height:88rpx;
line-height:88rpx;
border-radius:44rpx;
background: #E96B6B;
color: #fff;
background:var(--color-primary-solid);
color:var(--color-text-inverse);
font-size:32rpx;
border:none;
margin-top:48rpx;
@@ -155,8 +155,8 @@
.hint {
display:block;
text-align:center;
font-size: 22rpx;
color: #B0B0B0;
font-size:24rpx;
color:var(--color-text-disabled);
margin-top:20rpx;
padding:0 24rpx;
}
@@ -175,8 +175,8 @@
line-height:120rpx;
text-align:center;
border-radius:50%;
background: #E8F5E9;
color: #1A6B3E;
background:var(--color-success-light);
color:var(--color-success-strong);
font-size:64rpx;
margin-bottom:32rpx;
}
@@ -184,13 +184,13 @@
.success-title {
font-size:36rpx;
font-weight:bold;
color: #1A1A1A;
color:var(--color-text-strong);
margin-bottom:16rpx;
}
.success-hint {
font-size:26rpx;
color: #999;
color:var(--color-text-tertiary);
text-align:center;
line-height:1.6;
}
@@ -205,8 +205,8 @@
.free-badge text {
display:inline-block;
font-size:22rpx;
color: #1A6B3E;
background: #E8F5E9;
color:var(--color-success-strong);
background:var(--color-success-light);
padding:8rpx 24rpx;
border-radius:24rpx;
}
@@ -32,7 +32,7 @@
margin:0 auto var(--spacing-3);
border-radius:var(--radius-full);
background:var(--color-primary-light);
color: var(--color-primary);
color:var(--color-primary-strong);
font-size:56rpx;
line-height:96rpx;
font-weight:var(--font-weight-bold);
@@ -142,7 +142,7 @@
}
.rp-step--active .rp-step__icon {
background: var(--color-primary);
background:var(--color-primary-solid);
color:var(--color-text-inverse);
}
@@ -181,6 +181,6 @@
.rp-help__link {
display:inline-block;
font-size:var(--font-size-sm);
color: var(--color-primary);
color:var(--color-primary-strong);
text-decoration:underline;
}
@@ -35,7 +35,7 @@
margin:0 auto var(--spacing-3);
border-radius:var(--radius-full);
background:var(--color-warning-light);
color: var(--color-warning);
color:var(--color-warning-strong);
font-size:56rpx;
line-height:96rpx;
font-weight:var(--font-weight-bold);
@@ -96,7 +96,7 @@
.rr-issue__reason-label {
display:block;
font-size:var(--font-size-sm);
color: var(--color-warning);
color:var(--color-warning-strong);
font-weight:var(--font-weight-medium);
margin-bottom:var(--spacing-1);
}
@@ -115,7 +115,7 @@
.rr-issue__edit-link {
font-size:var(--font-size-md);
color: var(--color-primary);
color:var(--color-primary-strong);
font-weight:var(--font-weight-medium);
padding:var(--spacing-1) var(--spacing-2);
}
@@ -135,7 +135,7 @@
.rr-toggle__arrow {
font-size:var(--font-size-sm);
color: var(--color-primary);
color:var(--color-primary-strong);
}
.rr-other-list {
@@ -1,9 +1,9 @@
@import "../../styles/service-page.wxss";
.station-name-card{display:flex;align-items:center;gap:18rpx;margin-top:24rpx;padding:24rpx;border-radius:26rpx;background:linear-gradient(135deg,#F1FFFA,#FFF7F9);box-shadow:0 8rpx 26rpx rgba(35,35,95,.06)}.station-name-card>image{width:66rpx;height:66rpx}.station-name-card>view{display:flex;flex:1;flex-direction:column}.station-name{color:#283056;font-size:27rpx;font-weight:700}.station-short-name{margin-top:6rpx;color:#7E859B;font-size:19rpx}.station-info-card{overflow:hidden;margin-top:18rpx;border-radius:26rpx;background:#fff;box-shadow:0 8rpx 26rpx rgba(35,35,95,.06)}.station-info-row{display:flex;align-items:center;gap:16rpx;min-height:104rpx;padding:14rpx 20rpx;border-bottom:1rpx solid #EFF0F5}.station-info-row:last-child{border-bottom:0}.station-info-row>image:first-child{width:42rpx;height:42rpx;flex:none}.station-info-row>view{display:flex;flex:1;flex-direction:column}.station-info-label{color:#303654;font-size:22rpx;font-weight:650}.station-info-value{margin-top:5rpx;color:#858A9E;font-size:19rpx;line-height:1.45}.station-info-row .station-arrow{width:24rpx;height:24rpx}.station-services{display:grid;grid-template-columns:repeat(2,1fr);gap:14rpx;margin-top:18rpx}.station-service{display:flex;align-items:center;gap:12rpx;min-height:74rpx;padding:12rpx 16rpx;border-radius:20rpx;background:#fff;color:#505874;font-size:20rpx;box-shadow:0 6rpx 20rpx rgba(35,35,95,.05)}.station-service image{width:34rpx;height:34rpx}.map-button{display:flex;align-items:center;justify-content:center;gap:10rpx;height:78rpx;margin-top:20rpx;border:1rpx solid #E5E7F0;border-radius:39rpx;background:#fff;color:#53607F;font-size:22rpx}.map-button image{width:34rpx;height:34rpx}
.station-name-card{display:flex;align-items:center;gap:18rpx;margin-top:24rpx;padding:24rpx;border-radius:26rpx;background:linear-gradient(135deg,var(--color-success-light),var(--color-primary-light));box-shadow:0 8rpx 26rpx rgba(35,35,95,.06)}.station-name-card>image{width:66rpx;height:66rpx}.station-name-card>view{display:flex;flex:1;flex-direction:column}.station-name{color:var(--color-text-strong);font-size:27rpx;font-weight:700}.station-short-name{margin-top:6rpx;color:var(--color-text-tertiary);font-size:24rpx}.station-info-card{overflow:hidden;margin-top:18rpx;border-radius:26rpx;background:var(--color-bg-card);box-shadow:0 8rpx 26rpx rgba(35,35,95,.06)}.station-info-row{display:flex;align-items:center;gap:16rpx;min-height:104rpx;padding:14rpx 20rpx;border-bottom:1rpx solid var(--color-divider)}.station-info-row:last-child{border-bottom:0}.station-info-row>image:first-child{width:42rpx;height:42rpx;flex:none}.station-info-row>view{display:flex;flex:1;flex-direction:column}.station-info-label{color:var(--color-text-strong);font-size:24rpx;font-weight:600}.station-info-value{margin-top:5rpx;color:var(--color-text-tertiary);font-size:24rpx;line-height:1.45}.station-info-row .station-arrow{width:24rpx;height:24rpx}.station-services{display:grid;grid-template-columns:repeat(2,1fr);gap:14rpx;margin-top:18rpx}.station-service{display:flex;align-items:center;gap:12rpx;min-height:74rpx;padding:12rpx 16rpx;border-radius:20rpx;background:var(--color-bg-card);color:var(--color-text-secondary);font-size:24rpx;box-shadow:0 6rpx 20rpx rgba(35,35,95,.05)}.station-service image{width:34rpx;height:34rpx}.map-button{display:flex;align-items:center;justify-content:center;gap:10rpx;min-height:var(--tap-min);margin-top:20rpx;border:1rpx solid var(--color-border);border-radius:39rpx;background:var(--color-bg-card);color:var(--color-text-secondary);font-size:24rpx;min-width:var(--tap-min);}.map-button image{width:34rpx;height:34rpx}
/* 临时公告:仅当服务端返回「已发布且未过期」公告时渲染 */
.station-announcements{display:flex;flex-direction:column;gap:14rpx;margin-top:18rpx}
.station-announcement{padding:18rpx 20rpx;border-radius:20rpx;background:linear-gradient(135deg,#FFF7EC,#FFF7F9);box-shadow:0 6rpx 20rpx rgba(35,35,95,.05)}
.station-announcement{padding:18rpx 20rpx;border-radius:20rpx;background:linear-gradient(135deg,var(--color-warning-light),var(--color-primary-light));box-shadow:0 6rpx 20rpx rgba(35,35,95,.05)}
.station-announcement-head{display:flex;align-items:center;gap:10rpx}
.station-announcement-dot{width:12rpx;height:12rpx;flex:none;border-radius:50%;background:#E8A33D}
.station-announcement-title{color:#5A4520;font-size:22rpx;font-weight:700}
.station-announcement-body{display:block;margin-top:8rpx;color:#8A7C63;font-size:19rpx;line-height:1.5}
.station-announcement-dot{width:12rpx;height:12rpx;flex:none;border-radius:50%;background:var(--color-warning)}
.station-announcement-title{color:var(--color-warning-strong);font-size:24rpx;font-weight:700}
.station-announcement-body{display:block;margin-top:8rpx;color:var(--color-warning-strong);font-size:24rpx;line-height:1.5}
+7 -7
View File
@@ -1,19 +1,19 @@
/* 设置页样式 */
.page {
min-height:100vh;
background: #f5f5f5;
background:var(--color-bg-subtle);
padding-bottom:48rpx;
}
.section {
margin-top:24rpx;
background: #fff;
background:var(--color-bg-card);
}
.section-title {
padding:24rpx 32rpx 16rpx;
font-size:24rpx;
color: #999;
color:var(--color-text-tertiary);
}
.list-group {
@@ -24,7 +24,7 @@
display:flex;
align-items:center;
padding:28rpx 0;
border-bottom: 1rpx solid #f5f5f5;
border-bottom:1rpx solid var(--color-divider);
}
.list-row:last-child {
@@ -46,20 +46,20 @@
.list-label {
display:block;
font-size:32rpx;
color: #2d2d2d;
color:var(--color-text-strong);
line-height:1.4;
}
.list-desc {
display:block;
font-size:24rpx;
color: #999;
color:var(--color-text-tertiary);
line-height:1.4;
margin-top:4rpx;
}
.list-arrow {
font-size:32rpx;
color: #ccc;
color:var(--color-text-disabled);
margin-left:16rpx;
}
+16 -16
View File
@@ -1,7 +1,7 @@
.page {
padding:40rpx;
min-height:100vh;
background: #FFF8F7;
background:var(--color-primary-lighter);
}
.header {
@@ -12,19 +12,19 @@
display:block;
font-size:44rpx;
font-weight:bold;
color: #1A1A1A;
color:var(--color-text-strong);
margin-bottom:16rpx;
}
.subtitle {
display:block;
font-size:28rpx;
color: #999;
color:var(--color-text-tertiary);
line-height:1.6;
}
.form {
background: #fff;
background:var(--color-bg-card);
border-radius:24rpx;
padding:40rpx;
margin-bottom:40rpx;
@@ -37,7 +37,7 @@
.label {
display:block;
font-size:28rpx;
color: #333;
color:var(--color-text-primary);
margin-bottom:16rpx;
font-weight:500;
}
@@ -45,7 +45,7 @@
.input {
width:100%;
height:88rpx;
border: 2rpx solid #EEE;
border:2rpx solid var(--color-border);
border-radius:16rpx;
padding:0 24rpx;
font-size:32rpx;
@@ -57,7 +57,7 @@
align-items:flex-start;
margin-bottom:32rpx;
font-size:24rpx;
color: #666;
color:var(--color-text-secondary);
}
.agreement-text {
@@ -66,12 +66,12 @@
}
.link {
color: #E96B6B;
color:var(--color-primary-strong);
}
.error {
background: #FFF3F2;
color: #DC3545;
background:var(--color-primary-light);
color:var(--color-danger-strong);
padding:20rpx 24rpx;
border-radius:12rpx;
font-size:26rpx;
@@ -79,8 +79,8 @@
}
.submit-btn {
background: #E96B6B;
color: #fff;
background:var(--color-primary-solid);
color:var(--color-text-inverse);
border-radius:44rpx;
height:88rpx;
line-height:88rpx;
@@ -89,11 +89,11 @@
}
.submit-btn[disabled] {
background: #CCC;
background:var(--color-bg-muted);
}
.tips {
background: #fff;
background:var(--color-bg-card);
border-radius:24rpx;
padding:32rpx;
}
@@ -102,13 +102,13 @@
display:block;
font-size:28rpx;
font-weight:bold;
color: #333;
color:var(--color-text-primary);
margin-bottom:16rpx;
}
.tip-item {
display:block;
font-size:24rpx;
color: #999;
color:var(--color-text-tertiary);
line-height:2;
}
+2 -2
View File
@@ -1,3 +1,3 @@
page{background:var(--color-bg-page)}.service-page{min-height:100vh;padding-bottom:calc(140rpx + env(safe-area-inset-bottom))}.hero{padding:44rpx 32rpx 54rpx;background:linear-gradient(140deg,var(--color-primary-lighter),#FFF8EE);position:relative;overflow:hidden}.eyebrow{display:inline-flex;padding:7rpx 14rpx;border-radius:999rpx;background:rgba(255,255,255,.72);color:var(--color-primary);font-size:21rpx}.hero-title{display:block;margin-top:18rpx;font-size:40rpx;font-weight:700;line-height:1.35}.hero-desc{display:block;width:82%;margin-top:14rpx;font-size:25rpx;color:var(--color-text-secondary);line-height:1.7}.content{padding:0 var(--spacing-page-x)}.block{margin-top:var(--spacing-section)}.block-title{display:block;font-size:31rpx;font-weight:650}.block-subtitle{display:block;margin-top:8rpx;font-size:23rpx;color:var(--color-text-tertiary)}.card{margin-top:18rpx;padding:28rpx;background:var(--color-bg-card);border:1rpx solid var(--color-border);border-radius:var(--radius-lg);box-shadow:var(--shadow-card)}.feature-row,.menu-row,.record-row{display:flex;align-items:center;gap:20rpx;min-height:112rpx;padding:18rpx 0;border-bottom:1rpx solid var(--color-divider)}.feature-row:last-child,.menu-row:last-child,.record-row:last-child{border-bottom:0}.feature-icon{width:72rpx;height:72rpx;display:flex;align-items:center;justify-content:center;flex:none;border-radius:22rpx;background:var(--color-primary-light);color:var(--color-primary);font-weight:700}.feature-copy{flex:1;min-width:0}.feature-title{display:block;font-size:28rpx;font-weight:600}.feature-desc,.meta{display:block;margin-top:7rpx;font-size:23rpx;color:var(--color-text-tertiary);line-height:1.55}.arrow{font-size:40rpx;color:var(--color-text-disabled)}.tag{display:inline-flex;margin-right:10rpx;margin-top:10rpx;padding:6rpx 13rpx;border-radius:999rpx;background:var(--color-success-light);color:var(--color-success);font-size:20rpx}.tag.warning{background:var(--color-warning-light);color:var(--color-warning)}.primary-btn,.secondary-btn{height:88rpx;display:flex;align-items:center;justify-content:center;border-radius:44rpx;font-size:28rpx;font-weight:600}.primary-btn{background:linear-gradient(135deg,var(--mini-accent-coral),var(--mini-accent-pink));color:var(--color-text-inverse);box-shadow:0 10rpx 24rpx rgba(255,92,130,.22)}.primary-btn.disabled{background:#E6E8EF;color:#989DAF;box-shadow:none}.secondary-btn{background:var(--color-primary-light);color:var(--color-primary)}.fixed-action{position:fixed;left:0;right:0;bottom:0;padding:18rpx var(--spacing-page-x) calc(18rpx + env(safe-area-inset-bottom));background:rgba(255,255,255,.96);border-top:1rpx solid var(--color-divider);z-index:100}.field{margin-top:26rpx}.label{display:block;margin-bottom:12rpx;font-size:25rpx;font-weight:600}.input,.select-box,.textarea{width:100%;box-sizing:border-box;background:#FCFAF8;border:1rpx solid var(--color-border);border-radius:var(--radius-md);font-size:26rpx}.input,.select-box{height:88rpx;padding:0 24rpx;display:flex;align-items:center}.textarea{min-height:180rpx;padding:22rpx}.notice{margin-top:20rpx;padding:22rpx;border-radius:var(--radius-md);background:#F3F7FC;color:var(--color-text-secondary);font-size:23rpx;line-height:1.65}.select-box.is-readonly{background:#F4F2F0;color:var(--color-text-secondary)}.empty-panel{text-align:center;padding:70rpx 30rpx}.empty-symbol{width:96rpx;height:96rpx;margin:auto;display:flex;align-items:center;justify-content:center;border-radius:30rpx;background:var(--color-primary-light);color:var(--color-primary);font-size:36rpx;font-weight:700}.empty-title{display:block;margin-top:22rpx;font-size:30rpx;font-weight:600}.article-card{margin-top:18rpx;background:var(--color-bg-card);border-radius:var(--radius-lg);overflow:hidden;box-shadow:var(--shadow-card)}.article-cover{height:220rpx;padding:24rpx;background:linear-gradient(135deg,#F5E5DE,#F9F1E8);display:flex;align-items:flex-end}.article-cover text{font-size:42rpx;color:rgba(125,76,63,.52);font-weight:700}.article-body{padding:24rpx}.article-title{display:block;font-size:29rpx;font-weight:650;line-height:1.45}.article-meta{display:block;margin-top:10rpx;font-size:22rpx;color:var(--color-text-tertiary)}.article-content{padding:32rpx;background:var(--color-bg-card);font-size:28rpx;line-height:1.9;color:var(--color-text-secondary)}.article-content .lead{display:block;font-size:31rpx;color:var(--color-text-primary);font-weight:600;margin-bottom:24rpx}.danger-card{background:#FFF8F4;border-color:#F5DED2}.danger-card .feature-icon{background:#FFF0EA;color:#C85D43}@media(max-width:340px){.hero-title{font-size:36rpx}.hero-desc{width:92%}}
page{background:var(--color-bg-page)}.service-page{min-height:100vh;padding-bottom:calc(140rpx + env(safe-area-inset-bottom))}.hero{padding:44rpx 32rpx 54rpx;background:linear-gradient(140deg,var(--color-primary-lighter),var(--color-warning-light));position:relative;overflow:hidden}.eyebrow{display:inline-flex;padding:7rpx 14rpx;border-radius:999rpx;background:rgba(255,255,255,.72);color:var(--color-primary-strong);font-size:24rpx}.hero-title{display:block;margin-top:18rpx;font-size:40rpx;font-weight:700;line-height:1.35}.hero-desc{display:block;width:82%;margin-top:14rpx;font-size:25rpx;color:var(--color-text-secondary);line-height:1.7}.content{padding:0 var(--spacing-page-x)}.block{margin-top:var(--spacing-section)}.block-title{display:block;font-size:31rpx;font-weight:600}.block-subtitle{display:block;margin-top:8rpx;font-size:24rpx;color:var(--color-text-tertiary)}.card{margin-top:18rpx;padding:28rpx;background:var(--color-bg-card);border:1rpx solid var(--color-border);border-radius:var(--radius-lg);box-shadow:var(--shadow-card)}.feature-row,.menu-row,.record-row{display:flex;align-items:center;gap:20rpx;min-height:112rpx;padding:18rpx 0;border-bottom:1rpx solid var(--color-divider)}.feature-row:last-child,.menu-row:last-child,.record-row:last-child{border-bottom:0}.feature-icon{width:72rpx;height:72rpx;display:flex;align-items:center;justify-content:center;flex:none;border-radius:22rpx;background:var(--color-primary-light);color:var(--color-primary-strong);font-weight:700}.feature-copy{flex:1;min-width:0}.feature-title{display:block;font-size:28rpx;font-weight:600}.feature-desc,.meta{display:block;margin-top:7rpx;font-size:24rpx;color:var(--color-text-tertiary);line-height:1.55}.arrow{font-size:40rpx;color:var(--color-text-disabled)}.tag{display:inline-flex;margin-right:10rpx;margin-top:10rpx;padding:6rpx 13rpx;border-radius:999rpx;background:var(--color-success-light);color:var(--color-success-strong);font-size:24rpx}.tag.warning{background:var(--color-warning-light);color:var(--color-warning-strong)}.primary-btn,.secondary-btn{height:88rpx;display:flex;align-items:center;justify-content:center;border-radius:44rpx;font-size:28rpx;font-weight:600}.primary-btn{background:var(--gradient-brand-solid);color:var(--color-text-inverse);box-shadow:0 10rpx 24rpx rgba(255,92,130,.22)}.primary-btn.disabled{background:var(--color-bg-muted);color:var(--color-text-tertiary);box-shadow:none}.secondary-btn{background:var(--color-primary-light);color:var(--color-primary-strong)}.fixed-action{position:fixed;left:0;right:0;bottom:0;padding:18rpx var(--spacing-page-x) calc(18rpx + env(safe-area-inset-bottom));background:rgba(255,255,255,.96);border-top:1rpx solid var(--color-divider);z-index:100}.field{margin-top:26rpx}.label{display:block;margin-bottom:12rpx;font-size:25rpx;font-weight:600}.input,.select-box,.textarea{width:100%;box-sizing:border-box;background:var(--color-bg-page);border:1rpx solid var(--color-border);border-radius:var(--radius-md);font-size:26rpx}.input,.select-box{height:88rpx;padding:0 24rpx;display:flex;align-items:center}.textarea{min-height:180rpx;padding:22rpx}.notice{margin-top:20rpx;padding:22rpx;border-radius:var(--radius-md);background:var(--color-info-light);color:var(--color-text-secondary);font-size:24rpx;line-height:1.65}.select-box.is-readonly{background:var(--color-bg-subtle);color:var(--color-text-secondary)}.empty-panel{text-align:center;padding:70rpx 30rpx}.empty-symbol{width:96rpx;height:96rpx;margin:auto;display:flex;align-items:center;justify-content:center;border-radius:30rpx;background:var(--color-primary-light);color:var(--color-primary-strong);font-size:36rpx;font-weight:700}.empty-title{display:block;margin-top:22rpx;font-size:30rpx;font-weight:600}.article-card{margin-top:18rpx;background:var(--color-bg-card);border-radius:var(--radius-lg);overflow:hidden;box-shadow:var(--shadow-card)}.article-cover{height:220rpx;padding:24rpx;background:linear-gradient(135deg,var(--color-warning-light),var(--color-warning-light));display:flex;align-items:flex-end}.article-cover text{font-size:42rpx;color:rgba(125,76,63,.52);font-weight:700}.article-body{padding:24rpx}.article-title{display:block;font-size:29rpx;font-weight:600;line-height:1.45}.article-meta{display:block;margin-top:10rpx;font-size:24rpx;color:var(--color-text-tertiary)}.article-content{padding:32rpx;background:var(--color-bg-card);font-size:28rpx;line-height:1.9;color:var(--color-text-secondary)}.article-content .lead{display:block;font-size:31rpx;color:var(--color-text-primary);font-weight:600;margin-bottom:24rpx}.danger-card{background:var(--color-primary-lighter);border-color:var(--color-primary-light)}.danger-card .feature-icon{background:var(--color-warning-light);color:var(--color-warning-strong)}@media(max-width:340px){.hero-title{font-size:36rpx}.hero-desc{width:92%}}
.service-shell{min-height:100vh;padding-bottom:calc(136rpx + env(safe-area-inset-bottom));background:#F4F5FA}.service-content{padding:8rpx 24rpx 36rpx}.service-status{display:flex;align-items:center;justify-content:space-between;margin-top:24rpx;padding:20rpx 24rpx;border-radius:22rpx;background:#fff;box-shadow:0 8rpx 26rpx rgba(35,35,95,.06)}.service-status__label{color:#7B8198;font-size:21rpx}.service-status__value{padding:6rpx 14rpx;border-radius:18rpx;background:#EAF8F2;color:#329472;font-size:19rpx;font-weight:650}.service-status__value.disabled{background:#FFF0F0;color:#D45A60}.service-topics{display:grid;grid-template-columns:repeat(2,1fr);gap:16rpx;margin-top:18rpx}.service-topic{min-height:148rpx;padding:20rpx;border-radius:24rpx;background:#fff;box-shadow:0 8rpx 26rpx rgba(35,35,95,.06)}.service-topic__icon{display:flex;align-items:center;justify-content:center;width:54rpx;height:54rpx;border-radius:17rpx;background:#FFF0F5}.service-topic__icon image{width:34rpx;height:34rpx}.service-topic__title{display:block;margin-top:13rpx;color:#283056;font-size:24rpx;font-weight:650}.service-topic__desc{display:block;margin-top:6rpx;color:#858A9E;font-size:19rpx;line-height:1.45}.service-actions{display:flex;gap:14rpx}.service-actions .secondary-btn{width:190rpx;flex:none}.service-actions .primary-btn{flex:1}.privacy-note{display:flex;align-items:flex-start;gap:14rpx;margin-top:22rpx;padding:20rpx;border-radius:22rpx;background:#F1F4FF;color:#69718E;font-size:20rpx;line-height:1.55}.privacy-note image{width:34rpx;height:34rpx;flex:none}
.service-shell{min-height:100vh;padding-bottom:calc(136rpx + env(safe-area-inset-bottom));background:var(--color-bg-page)}.service-content{padding:8rpx 24rpx 36rpx}.service-status{display:flex;align-items:center;justify-content:space-between;margin-top:24rpx;padding:20rpx 24rpx;border-radius:22rpx;background:var(--color-bg-card);box-shadow:0 8rpx 26rpx rgba(35,35,95,.06)}.service-status__label{color:var(--color-text-tertiary);font-size:24rpx}.service-status__value{padding:6rpx 14rpx;border-radius:18rpx;background:var(--color-success-light);color:var(--color-success-strong);font-size:24rpx;font-weight:600}.service-status__value.disabled{background:var(--color-danger-light);color:var(--color-danger-strong)}.service-topics{display:grid;grid-template-columns:repeat(2,1fr);gap:16rpx;margin-top:18rpx}.service-topic{min-height:148rpx;padding:20rpx;border-radius:24rpx;background:var(--color-bg-card);box-shadow:0 8rpx 26rpx rgba(35,35,95,.06)}.service-topic__icon{display:flex;align-items:center;justify-content:center;width:54rpx;height:54rpx;border-radius:17rpx;background:var(--color-primary-light)}.service-topic__icon image{width:34rpx;height:34rpx}.service-topic__title{display:block;margin-top:13rpx;color:var(--color-text-strong);font-size:24rpx;font-weight:600}.service-topic__desc{display:block;margin-top:6rpx;color:var(--color-text-tertiary);font-size:24rpx;line-height:1.45}.service-actions{display:flex;gap:14rpx}.service-actions .secondary-btn{width:190rpx;flex:none}.service-actions .primary-btn{flex:1}.privacy-note{display:flex;align-items:flex-start;gap:14rpx;margin-top:22rpx;padding:20rpx;border-radius:22rpx;background:var(--color-info-light);color:var(--color-text-tertiary);font-size:24rpx;line-height:1.55}.privacy-note image{width:34rpx;height:34rpx;flex:none}