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

问题: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}
+40 -40
View File
@@ -1,59 +1,59 @@
.ui-avatar {
position: relative;
flex-shrink: 0;
background: var(--color-bg-disabled);
overflow: hidden;
position:relative;
flex-shrink:0;
background:var(--color-bg-disabled);
overflow:hidden;
}
.ui-avatar--circle { border-radius: 50%; }
.ui-avatar--square { border-radius: var(--radius-md); }
.ui-avatar--circle { border-radius:50%; }
.ui-avatar--square { border-radius:var(--radius-md); }
/* 尺寸:sm 60 / md 88 / lg 120 / xl 160 */
.ui-avatar--sm { width: 60rpx; height: 60rpx; }
.ui-avatar--md { width: 88rpx; height: 88rpx; }
.ui-avatar--lg { width: 120rpx; height: 120rpx; }
.ui-avatar--xl { width: 160rpx; height: 160rpx; }
.ui-avatar--sm { width:60rpx; height:60rpx; }
.ui-avatar--md { width:88rpx; height:88rpx; }
.ui-avatar--lg { width:120rpx; height:120rpx; }
.ui-avatar--xl { width:160rpx; height:160rpx; }
.ui-avatar__img {
width: 100%;
height: 100%;
display: block;
width:100%;
height:100%;
display:block;
}
.ui-avatar__fallback {
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
background: var(--color-primary-light);
width:100%;
height:100%;
display:flex;
align-items:center;
justify-content:center;
background:var(--color-primary-light);
}
.ui-avatar__fallback-text {
font-size: var(--font-size-lg);
color: var(--color-primary);
font-weight: var(--font-weight-semibold);
font-size:var(--font-size-lg);
color:var(--color-primary-strong);
font-weight:var(--font-weight-semibold);
}
.ui-avatar__fallback-icon {
width: 100%;
height: 100%;
width:100%;
height:100%;
}
.ui-avatar__badges {
position: absolute;
bottom: -4rpx;
left: 50%;
transform: translateX(-50%);
display: flex;
gap: 6rpx;
position:absolute;
bottom:-4rpx;
left:50%;
transform:translateX(-50%);
display:flex;
gap:6rpx;
}
.ui-avatar__badge {
font-size: 16rpx;
line-height: 1;
padding: 4rpx 8rpx;
border-radius: var(--radius-full);
color: #FFFFFF;
font-weight: var(--font-weight-medium);
white-space: nowrap;
font-size:16rpx;
line-height:1;
padding:4rpx 8rpx;
border-radius:var(--radius-full);
color:var(--color-text-inverse);
font-weight:var(--font-weight-medium);
white-space:nowrap;
}
.ui-avatar__badge--verified { background: var(--color-success); }
.ui-avatar__badge--reviewed { background: var(--color-info); }
.ui-avatar__badge--verified { background:var(--color-success); }
.ui-avatar__badge--reviewed { background:var(--color-info); }
/* 小尺寸时隐藏徽标避免溢出 */
.ui-avatar--sm .ui-avatar__badges { display: none; }
.ui-avatar--sm .ui-avatar__badges { display:none; }
+75 -62
View File
@@ -1,111 +1,124 @@
/**
* Button 组件样式
* 引用全局 Design Token(addGlobalClass: true)
* 引用全局 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;
align-items: center;
justify-content: center;
box-sizing: border-box;
border-radius: var(--radius-full);
font-family: var(--font-family-cn);
font-weight: var(--font-weight-medium);
text-align: center;
transition: opacity var(--motion-fast) var(--ease-standard),
transform var(--motion-fast) var(--ease-standard);
user-select: none;
line-height: 1;
white-space: nowrap;
display:inline-flex;
align-items:center;
justify-content:center;
box-sizing:border-box;
border-radius:var(--radius-full);
font-family:var(--font-family-cn);
font-weight:var(--font-weight-semibold);
text-align:center;
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.2;
white-space:nowrap;
}
/* 尺寸 */
/* 尺寸:全部以 44×44px 为热区下限 */
.ui-btn--sm {
padding: 14rpx 24rpx;
font-size: var(--font-size-sm);
min-height: 56rpx;
padding:14rpx 28rpx;
font-size:var(--font-size-sm);
min-height:var(--tap-min);
}
.ui-btn--md {
padding: 20rpx 36rpx;
font-size: var(--font-size-base);
min-height: 80rpx;
padding:20rpx 36rpx;
font-size:var(--font-size-base);
min-height:var(--tap-min);
}
.ui-btn--lg {
padding: 26rpx 48rpx;
font-size: var(--font-size-lg);
min-height: 96rpx;
padding:26rpx 48rpx;
font-size:var(--font-size-lg);
min-height:var(--tap-comfortable);
}
/* 撑满 */
.ui-btn--block {
display: flex;
width: 100%;
display:flex;
width:100%;
}
/* 变体 */
.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);
background:var(--color-bg-card);
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);
background:transparent;
color:var(--color-text-primary);
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;
background:transparent;
color:var(--color-primary-strong);
padding-left:var(--spacing-2);
padding-right:var(--spacing-2);
/* 视觉是纯文字,但热区仍需 44px:多出的部分由 align-items:center 居中留白 */
min-height:var(--tap-min);
}
/* 状态 */
.ui-btn--disabled,
.ui-btn--loading {
opacity: 0.55;
opacity:0.55;
}
.ui-btn--disabled.ui-btn--primary,
.ui-btn--disabled.ui-btn--danger {
background: var(--color-text-disabled);
background:var(--color-text-disabled);
}
.ui-btn--disabled.ui-btn--secondary,
.ui-btn--disabled.ui-btn--ghost {
color: var(--color-text-disabled);
border-color: var(--color-text-disabled);
color:var(--color-text-disabled);
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 */
.ui-btn__spinner {
width: 28rpx;
height: 28rpx;
margin-right: 12rpx;
display: flex;
align-items: center;
justify-content: center;
width:28rpx;
height:28rpx;
margin-right:12rpx;
display:flex;
align-items:center;
justify-content:center;
}
.ui-btn__spinner-dot {
width: 18rpx;
height: 18rpx;
border-radius: 50%;
border: 3rpx solid currentColor;
border-top-color: transparent;
animation: ui-btn-spin 0.7s linear infinite;
width:18rpx;
height:18rpx;
border-radius:50%;
border:3rpx solid currentColor;
border-top-color:transparent;
animation:ui-btn-spin 0.7s linear infinite;
}
@keyframes ui-btn-spin {
from { transform: rotate(0deg); }
to { transform: rotate(360deg); }
from { transform:rotate(0deg); }
to { transform:rotate(360deg); }
}
+46 -46
View File
@@ -1,66 +1,66 @@
.ui-conv {
display: flex;
align-items: center;
background: var(--color-bg-card);
padding: 18rpx 20rpx;
border-bottom: 1rpx solid var(--color-divider);
display:flex;
align-items:center;
background:var(--color-bg-card);
padding:18rpx 20rpx;
border-bottom:1rpx solid var(--color-divider);
}
.ui-conv--disabled {
opacity: 0.6;
opacity:0.6;
}
.ui-conv__body {
flex: 1;
min-width: 0;
margin-left: var(--spacing-3);
flex:1;
min-width:0;
margin-left:var(--spacing-3);
}
.ui-conv__top {
display: flex;
justify-content: space-between;
align-items: baseline;
display:flex;
justify-content:space-between;
align-items:baseline;
}
.ui-conv__name {
color: #222746;
font-size: 26rpx;
font-weight: 650;
color:var(--color-text-strong);
font-size:26rpx;
font-weight:600;
}
.ui-conv__time {
color: #8b90a5;
font-size: 19rpx;
flex-shrink: 0;
margin-left: var(--spacing-2);
color:var(--color-text-tertiary);
font-size:24rpx;
flex-shrink:0;
margin-left:var(--spacing-2);
}
.ui-conv__bottom {
display: flex;
justify-content: space-between;
align-items: center;
margin-top: var(--spacing-1);
display:flex;
justify-content:space-between;
align-items:center;
margin-top:var(--spacing-1);
}
.ui-conv__last {
flex: 1;
min-width: 0;
color: #7a8097;
font-size: 21rpx;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
margin-right: var(--spacing-2);
flex:1;
min-width:0;
color:var(--color-text-tertiary);
font-size:24rpx;
overflow:hidden;
white-space:nowrap;
text-overflow:ellipsis;
margin-right:var(--spacing-2);
}
.ui-conv__badge {
min-width: 36rpx;
height: 36rpx;
padding: 0 10rpx;
border-radius: var(--radius-full);
background: var(--color-danger);
color: #FFFFFF;
font-size: var(--font-size-xs);
display: flex;
align-items: center;
justify-content: center;
line-height: 1;
flex-shrink: 0;
min-width:36rpx;
height:36rpx;
padding:0 10rpx;
border-radius:var(--radius-full);
background:var(--color-danger);
color:var(--color-text-inverse);
font-size:var(--font-size-xs);
display:flex;
align-items:center;
justify-content:center;
line-height:1;
flex-shrink:0;
}
.ui-conv__status-hint {
margin-top: var(--spacing-1);
font-size: var(--font-size-xs);
color: var(--color-text-tertiary);
margin-top:var(--spacing-1);
font-size:var(--font-size-xs);
color:var(--color-text-tertiary);
}
@@ -1,47 +1,47 @@
.ui-dialog-mask {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: var(--color-bg-overlay);
z-index: var(--z-modal);
display: flex;
align-items: center;
justify-content: center;
padding: 0 var(--spacing-6);
position:fixed;
top:0;
left:0;
right:0;
bottom:0;
background:var(--color-bg-overlay);
z-index:var(--z-modal);
display:flex;
align-items:center;
justify-content:center;
padding:0 var(--spacing-6);
}
.ui-dialog {
width: 100%;
max-width: 600rpx;
background: var(--color-bg-card);
border-radius: var(--radius-lg);
padding: var(--spacing-5) var(--spacing-4) var(--spacing-4);
box-shadow: var(--shadow-popup);
animation: ui-dialog-in var(--motion-normal) var(--ease-standard);
width:100%;
max-width:600rpx;
background:var(--color-bg-card);
border-radius:var(--radius-lg);
padding:var(--spacing-5) var(--spacing-4) var(--spacing-4);
box-shadow:var(--shadow-popup);
animation:ui-dialog-in var(--motion-normal) var(--ease-standard);
}
@keyframes ui-dialog-in {
from { transform: scale(0.92); opacity: 0; }
to { transform: scale(1); opacity: 1; }
from { transform:scale(0.92); opacity:0; }
to { transform:scale(1); opacity:1; }
}
.ui-dialog__title {
font-size: var(--font-size-xl);
font-weight: var(--font-weight-semibold);
color: var(--color-text-primary);
text-align: center;
margin-bottom: var(--spacing-3);
font-size:var(--font-size-xl);
font-weight:var(--font-weight-semibold);
color:var(--color-text-primary);
text-align:center;
margin-bottom:var(--spacing-3);
}
.ui-dialog__content {
font-size: var(--font-size-md);
color: var(--color-text-secondary);
line-height: var(--line-height-relaxed);
text-align: center;
margin-bottom: var(--spacing-5);
font-size:var(--font-size-md);
color:var(--color-text-secondary);
line-height:var(--line-height-relaxed);
text-align:center;
margin-bottom:var(--spacing-5);
}
.ui-dialog__actions {
display: flex;
gap: var(--spacing-2);
display:flex;
gap:var(--spacing-2);
}
.ui-dialog__btn {
flex: 1;
flex:1;
}
+43 -43
View File
@@ -1,60 +1,60 @@
.ui-empty {
display: flex;
flex-direction: column;
align-items: center;
padding: var(--spacing-10) var(--spacing-page-x);
text-align: center;
display:flex;
flex-direction:column;
align-items:center;
padding:var(--spacing-10) var(--spacing-page-x);
text-align:center;
}
.ui-empty__illustration {
width: 160rpx;
height: 160rpx;
border-radius: 50%;
background: var(--color-bg-disabled);
display: flex;
align-items: center;
justify-content: center;
margin-bottom: var(--spacing-4);
width:160rpx;
height:160rpx;
border-radius:50%;
background:var(--color-bg-disabled);
display:flex;
align-items:center;
justify-content:center;
margin-bottom:var(--spacing-4);
}
.ui-empty__icon {
width: 72rpx;
height: 72rpx;
opacity: 0.72;
width:72rpx;
height:72rpx;
opacity:0.72;
}
.ui-empty__title {
font-size: var(--font-size-lg);
font-weight: var(--font-weight-medium);
color: var(--color-text-primary);
margin-bottom: var(--spacing-2);
font-size:var(--font-size-lg);
font-weight:var(--font-weight-medium);
color:var(--color-text-primary);
margin-bottom:var(--spacing-2);
}
.ui-empty__desc {
font-size: var(--font-size-sm);
color: var(--color-text-tertiary);
line-height: var(--line-height-relaxed);
max-width: 480rpx;
font-size:var(--font-size-sm);
color:var(--color-text-tertiary);
line-height:var(--line-height-relaxed);
max-width:480rpx;
}
.ui-empty__actions {
display: flex;
flex-direction: column;
gap: var(--spacing-2);
margin-top: var(--spacing-6);
width: 100%;
max-width: 480rpx;
display:flex;
flex-direction:column;
gap:var(--spacing-2);
margin-top:var(--spacing-6);
width:100%;
max-width:480rpx;
}
.ui-empty__action {
display: flex;
align-items: center;
justify-content: center;
height: 80rpx;
border-radius: var(--radius-full);
font-size: var(--font-size-base);
font-weight: var(--font-weight-medium);
}
display:flex;
align-items:center;
justify-content:center;
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);
border: 1rpx solid var(--color-primary);
background:var(--color-bg-card);
color:var(--color-primary-strong);
border:1rpx solid var(--color-primary);
}
+25 -25
View File
@@ -1,45 +1,45 @@
.error-state {
padding: 64rpx 32rpx;
text-align: center;
background: var(--color-bg-card);
border-radius: var(--radius-lg);
padding:64rpx 32rpx;
text-align:center;
background:var(--color-bg-card);
border-radius:var(--radius-lg);
}
.error-icon {
display: block;
width: 72rpx;
height: 72rpx;
margin: 0 auto 20rpx;
display:block;
width:72rpx;
height:72rpx;
margin:0 auto 20rpx;
}
.error-title,
.error-desc {
display: block;
display:block;
}
.error-title {
font-size: 30rpx;
font-weight: 600;
font-size:30rpx;
font-weight:600;
}
.error-desc {
margin-top: 8rpx;
color: var(--color-text-tertiary);
font-size: 24rpx;
margin-top:8rpx;
color:var(--color-text-tertiary);
font-size:24rpx;
}
.retry-btn {
width: 220rpx;
height: 80rpx;
margin-top: 24rpx;
border: 0;
border-radius: var(--radius-full);
background: var(--color-primary);
color: var(--color-text-inverse);
font-size: 26rpx;
line-height: 80rpx;
}
width:220rpx;
min-height:var(--tap-min);
margin-top:24rpx;
border:0;
border-radius:var(--radius-full);
background:var(--color-primary-solid);
color:var(--color-text-inverse);
font-size:26rpx;
line-height:var(--tap-min);
min-width:var(--tap-min);}
.retry-btn::after {
border: 0;
border:0;
}
+45 -45
View File
@@ -1,69 +1,69 @@
.ui-input {
padding: var(--spacing-3) 0;
border-bottom: 1rpx solid var(--color-border);
position: relative;
padding:var(--spacing-3) 0;
border-bottom:1rpx solid var(--color-border);
position:relative;
}
.ui-input__label {
font-size: var(--font-size-sm);
color: var(--color-text-tertiary);
margin-bottom: var(--spacing-2);
font-size:var(--font-size-sm);
color:var(--color-text-tertiary);
margin-bottom:var(--spacing-2);
}
.ui-input__field-wrap {
display: flex;
align-items: center;
display:flex;
align-items:center;
}
.ui-input__field {
flex: 1;
min-width: 0;
font-size: var(--font-size-base);
color: var(--color-text-primary);
padding: var(--spacing-2) 0;
line-height: var(--line-height-normal);
flex:1;
min-width:0;
font-size:var(--font-size-base);
color:var(--color-text-primary);
padding:var(--spacing-2) 0;
line-height:var(--line-height-normal);
}
.ui-input__placeholder {
color: var(--color-text-placeholder);
color:var(--color-text-placeholder);
}
.ui-input__clear {
flex-shrink: 0;
margin-left: var(--spacing-2);
width: 36rpx;
height: 36rpx;
border-radius: 50%;
background: var(--color-text-disabled);
color: #FFFFFF;
font-size: 28rpx;
display: flex;
align-items: center;
justify-content: center;
line-height: 1;
flex-shrink:0;
margin-left:var(--spacing-2);
width:36rpx;
height:36rpx;
border-radius:50%;
background:var(--color-text-disabled);
color:var(--color-text-inverse);
font-size:28rpx;
display:flex;
align-items:center;
justify-content:center;
line-height:1;
}
.ui-input__footer {
display: flex;
justify-content: space-between;
align-items: flex-start;
margin-top: var(--spacing-1);
min-height: 28rpx;
display:flex;
justify-content:space-between;
align-items:flex-start;
margin-top:var(--spacing-1);
min-height:28rpx;
}
.ui-input__error {
color: var(--color-danger);
font-size: var(--font-size-xs);
flex: 1;
color:var(--color-danger-strong);
font-size:var(--font-size-xs);
flex:1;
}
.ui-input__count {
color: var(--color-text-tertiary);
font-size: var(--font-size-xs);
margin-left: var(--spacing-2);
color:var(--color-text-tertiary);
font-size:var(--font-size-xs);
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);
border-bottom-color:var(--color-border-error);
}
.ui-input--disabled .ui-input__field {
color: var(--color-text-disabled);
background: var(--color-bg-disabled);
border-radius: var(--radius-sm);
padding-left: var(--spacing-2);
padding-right: var(--spacing-2);
color:var(--color-text-disabled);
background:var(--color-bg-disabled);
border-radius:var(--radius-sm);
padding-left:var(--spacing-2);
padding-right:var(--spacing-2);
}
+26 -26
View File
@@ -1,42 +1,42 @@
.ui-likers {
display: inline-flex;
align-items: center;
background: var(--color-bg-card);
border-radius: var(--radius-full);
border: 1rpx solid var(--color-border);
color: var(--color-text-tertiary);
display:inline-flex;
align-items:center;
background:var(--color-bg-card);
border-radius:var(--radius-full);
border:1rpx solid var(--color-border);
color:var(--color-text-tertiary);
}
.ui-likers--active {
background: var(--color-primary-light);
border-color: var(--color-primary-light);
color: var(--color-primary);
background:var(--color-primary-light);
border-color:var(--color-primary-light);
color:var(--color-primary-strong);
}
.ui-likers--sm {
padding: 6rpx 14rpx;
font-size: var(--font-size-xs);
padding:6rpx 14rpx;
font-size:var(--font-size-xs);
}
.ui-likers--md {
padding: 8rpx 18rpx;
font-size: var(--font-size-sm);
padding:8rpx 18rpx;
font-size:var(--font-size-sm);
}
.ui-likers--lg {
padding: 12rpx 24rpx;
font-size: var(--font-size-md);
padding:12rpx 24rpx;
font-size:var(--font-size-md);
}
.ui-likers__icon {
width: 24rpx;
height: 24rpx;
display: flex;
align-items: center;
justify-content: center;
margin-right: 8rpx;
width:24rpx;
height:24rpx;
display:flex;
align-items:center;
justify-content:center;
margin-right:8rpx;
}
.ui-likers__heart {
width: 20rpx;
height: 18rpx;
background: currentColor;
clip-path: polygon(50% 100%, 0 38%, 18% 8%, 50% 28%, 82% 8%, 100% 38%);
width:20rpx;
height:18rpx;
background:currentColor;
clip-path:polygon(50% 100%, 0 38%, 18% 8%, 50% 28%, 82% 8%, 100% 38%);
}
.ui-likers__text {
font-size: inherit;
font-size:inherit;
}
+52 -52
View File
@@ -1,91 +1,91 @@
.ui-loading--block {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: var(--spacing-8) var(--spacing-page-x);
display:flex;
flex-direction:column;
align-items:center;
justify-content:center;
padding:var(--spacing-8) var(--spacing-page-x);
}
.ui-loading--inline {
display: inline-flex;
align-items: center;
display:inline-flex;
align-items:center;
}
.ui-loading__spinner {
width: 60rpx;
height: 60rpx;
display: flex;
align-items: center;
justify-content: center;
width:60rpx;
height:60rpx;
display:flex;
align-items:center;
justify-content:center;
}
.ui-loading__spinner-icon {
width: 48rpx;
height: 48rpx;
animation: ui-loading-spin 0.8s linear infinite;
width:48rpx;
height:48rpx;
animation:ui-loading-spin 0.8s linear infinite;
}
@keyframes ui-loading-spin {
from { transform: rotate(0deg); }
to { transform: rotate(360deg); }
from { transform:rotate(0deg); }
to { transform:rotate(360deg); }
}
.ui-loading__text {
margin-top: var(--spacing-3);
font-size: var(--font-size-sm);
color: var(--color-text-tertiary);
margin-top:var(--spacing-3);
font-size:var(--font-size-sm);
color:var(--color-text-tertiary);
}
/* Skeleton */
.ui-loading__skeleton {
width: 100%;
width:100%;
}
.ui-loading__skeleton-row {
display: flex;
align-items: center;
padding: var(--spacing-3) var(--spacing-page-x);
background: var(--color-bg-card);
border-bottom: 1rpx solid var(--color-divider);
display:flex;
align-items:center;
padding:var(--spacing-3) var(--spacing-page-x);
background:var(--color-bg-card);
border-bottom:1rpx solid var(--color-divider);
}
.ui-loading__skeleton-avatar {
width: 88rpx;
height: 88rpx;
border-radius: 50%;
background: var(--color-bg-disabled);
margin-right: var(--spacing-3);
flex-shrink: 0;
width:88rpx;
height:88rpx;
border-radius:50%;
background:var(--color-bg-disabled);
margin-right:var(--spacing-3);
flex-shrink:0;
}
.ui-loading__skeleton-content {
flex: 1;
min-width: 0;
flex:1;
min-width:0;
}
.ui-loading__skeleton-line {
height: 24rpx;
background: var(--color-bg-disabled);
border-radius: var(--radius-sm);
position: relative;
overflow: hidden;
height:24rpx;
background:var(--color-bg-disabled);
border-radius:var(--radius-sm);
position:relative;
overflow:hidden;
}
.ui-loading__skeleton-line--title {
width: 40%;
margin-bottom: var(--spacing-2);
width:40%;
margin-bottom:var(--spacing-2);
}
.ui-loading__skeleton-line--meta {
width: 70%;
width:70%;
}
/* shimmer */
.ui-loading__skeleton-line::after,
.ui-loading__skeleton-avatar::after {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: linear-gradient(
content:'';
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
background:linear-gradient(
90deg,
transparent 0%,
rgba(255, 255, 255, 0.55) 50%,
transparent 100%
);
animation: ui-loading-shimmer 1.4s ease-in-out infinite;
animation:ui-loading-shimmer 1.4s ease-in-out infinite;
}
@keyframes ui-loading-shimmer {
0% { transform: translateX(-100%); }
100% { transform: translateX(100%); }
0% { transform:translateX(-100%); }
100% { transform:translateX(100%); }
}
+32 -32
View File
@@ -1,52 +1,52 @@
.ui-mm {
background: var(--color-bg-card);
border-radius: 26rpx;
padding: 24rpx;
margin-top: 10rpx;
box-shadow: 0 8rpx 28rpx rgba(35,35,95,.06);
background:var(--color-bg-card);
border-radius:26rpx;
padding:24rpx;
margin-top:10rpx;
box-shadow:0 8rpx 28rpx rgba(35,35,95,.06);
}
.ui-mm__header {
display: block;
display:block;
}
.ui-mm__title-row {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: var(--spacing-2);
display:flex;
justify-content:space-between;
align-items:center;
margin-bottom:var(--spacing-2);
}
.ui-mm__title {
font-size: var(--font-size-lg);
font-weight: var(--font-weight-semibold);
color: var(--color-text-primary);
font-size:var(--font-size-lg);
font-weight:var(--font-weight-semibold);
color:var(--color-text-primary);
}
.ui-mm__mm-info {
font-size: var(--font-size-md);
color: var(--color-text-secondary);
margin-bottom: var(--spacing-2);
font-size:var(--font-size-md);
color:var(--color-text-secondary);
margin-bottom:var(--spacing-2);
}
.ui-mm__req {
padding: var(--spacing-2) var(--spacing-3);
background: var(--color-bg-disabled);
border-radius: var(--radius-sm);
margin-bottom: var(--spacing-2);
padding:var(--spacing-2) var(--spacing-3);
background:var(--color-bg-disabled);
border-radius:var(--radius-sm);
margin-bottom:var(--spacing-2);
}
.ui-mm__req-label {
font-size: var(--font-size-xs);
color: var(--color-text-tertiary);
font-size:var(--font-size-xs);
color:var(--color-text-tertiary);
}
.ui-mm__req-content {
font-size: var(--font-size-sm);
color: var(--color-text-secondary);
line-height: var(--line-height-normal);
display: block;
margin-top: 4rpx;
font-size:var(--font-size-sm);
color:var(--color-text-secondary);
line-height:var(--line-height-normal);
display:block;
margin-top:4rpx;
}
.ui-mm__follow-up {
font-size: var(--font-size-xs);
color: var(--color-text-tertiary);
font-size:var(--font-size-xs);
color:var(--color-text-tertiary);
}
.ui-mm__footer {
margin-top: var(--spacing-3);
padding-top: var(--spacing-3);
border-top: 1rpx solid var(--color-divider);
margin-top:var(--spacing-3);
padding-top:var(--spacing-3);
border-top:1rpx solid var(--color-divider);
}
+48 -48
View File
@@ -1,78 +1,78 @@
.ui-bubble {
padding: var(--spacing-1) var(--spacing-page-x);
padding:var(--spacing-1) var(--spacing-page-x);
}
.ui-bubble__time {
text-align: center;
margin: var(--spacing-3) 0;
font-size: var(--font-size-xs);
color: var(--color-text-tertiary);
text-align:center;
margin:var(--spacing-3) 0;
font-size:var(--font-size-xs);
color:var(--color-text-tertiary);
}
.ui-bubble__system {
text-align: center;
font-size: var(--font-size-sm);
color: var(--color-text-tertiary);
background: var(--color-bg-disabled);
padding: var(--spacing-1) var(--spacing-3);
border-radius: var(--radius-sm);
display: inline-block;
margin: 0 auto;
text-align:center;
font-size:var(--font-size-sm);
color:var(--color-text-tertiary);
background:var(--color-bg-disabled);
padding:var(--spacing-1) var(--spacing-3);
border-radius:var(--radius-sm);
display:inline-block;
margin:0 auto;
}
.ui-bubble__row {
display: flex;
align-items: flex-end;
display:flex;
align-items:flex-end;
}
.ui-bubble--other .ui-bubble__row {
justify-content: flex-start;
justify-content:flex-start;
}
.ui-bubble--self .ui-bubble__row {
justify-content: flex-end;
justify-content:flex-end;
}
.ui-bubble__content-wrap {
display: flex;
flex-direction: column;
max-width: 70%;
margin: 0 var(--spacing-2);
display:flex;
flex-direction:column;
max-width:70%;
margin:0 var(--spacing-2);
}
.ui-bubble--self .ui-bubble__content-wrap {
align-items: flex-end;
align-items:flex-end;
}
.ui-bubble__content {
padding: var(--spacing-2) var(--spacing-3);
border-radius: var(--radius-lg);
font-size: var(--font-size-base);
line-height: var(--line-height-normal);
word-break: break-all;
padding:var(--spacing-2) var(--spacing-3);
border-radius:var(--radius-lg);
font-size:var(--font-size-base);
line-height:var(--line-height-normal);
word-break:break-all;
}
.ui-bubble--other .ui-bubble__content {
background: var(--color-bg-card);
color: var(--color-text-primary);
border-top-left-radius: var(--radius-sm);
background:var(--color-bg-card);
color:var(--color-text-primary);
border-top-left-radius:var(--radius-sm);
}
.ui-bubble--self .ui-bubble__content {
background: var(--color-primary);
color: #FFFFFF;
border-top-right-radius: var(--radius-sm);
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);
align-self: flex-end;
margin-top:var(--spacing-1);
font-size:var(--font-size-xs);
color:var(--color-danger-strong);
align-self:flex-end;
}
.ui-bubble__sending {
margin-top: var(--spacing-1);
display: flex;
align-items: center;
justify-content: flex-end;
margin-top:var(--spacing-1);
display:flex;
align-items:center;
justify-content:flex-end;
}
.ui-bubble__sending-dot {
width: 16rpx;
height: 16rpx;
border-radius: 50%;
background: var(--color-text-disabled);
animation: ui-bubble-pulse 1s ease-in-out infinite;
width:16rpx;
height:16rpx;
border-radius:50%;
background:var(--color-text-disabled);
animation:ui-bubble-pulse 1s ease-in-out infinite;
}
@keyframes ui-bubble-pulse {
0%, 100% { opacity: 0.3; }
50% { opacity: 1; }
0%, 100% { opacity:0.3; }
50% { opacity:1; }
}
+35 -35
View File
@@ -1,51 +1,51 @@
.ui-nav {
position: sticky;
top: 0;
left: 0;
width: 100%;
z-index: var(--z-sticky);
box-sizing: border-box;
position:sticky;
top:0;
left:0;
width:100%;
z-index:var(--z-sticky);
box-sizing:border-box;
}
.ui-nav--card {
background: var(--color-bg-card);
border-bottom: 1rpx solid var(--color-divider);
background:var(--color-bg-card);
border-bottom:1rpx solid var(--color-divider);
}
.ui-nav--transparent {
background: transparent;
background:transparent;
}
.ui-nav__bar {
display: flex;
align-items: center;
height: 88rpx;
padding: 0 var(--spacing-2);
display:flex;
align-items:center;
height:88rpx;
padding:0 var(--spacing-2);
}
.ui-nav__back,
.ui-nav__placeholder {
width: 64rpx;
height: 64rpx;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
width: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;
width:36rpx;
height:36rpx;
}
.ui-nav__title {
flex: 1;
text-align: center;
font-size: var(--font-size-lg);
font-weight: var(--font-weight-semibold);
color: var(--color-text-primary);
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
flex:1;
text-align:center;
font-size:var(--font-size-lg);
font-weight:var(--font-weight-semibold);
color:var(--color-text-primary);
overflow:hidden;
white-space:nowrap;
text-overflow:ellipsis;
}
.ui-nav__right {
flex-shrink: 0;
min-width: 64rpx;
display: flex;
align-items: center;
justify-content: flex-end;
flex-shrink:0;
min-width:64rpx;
display:flex;
align-items:center;
justify-content:flex-end;
}
+71 -71
View File
@@ -1,99 +1,99 @@
.ui-photo__list {
display: flex;
flex-wrap: wrap;
gap: var(--spacing-2);
display:flex;
flex-wrap:wrap;
gap:var(--spacing-2);
}
.ui-photo__item,
.ui-photo__add {
width: 200rpx;
height: 200rpx;
border-radius: var(--radius-md);
position: relative;
overflow: hidden;
width:200rpx;
height:200rpx;
border-radius:var(--radius-md);
position:relative;
overflow:hidden;
}
.ui-photo__item {
background: var(--color-bg-disabled);
background:var(--color-bg-disabled);
}
.ui-photo__img {
width: 100%;
height: 100%;
display: block;
width:100%;
height:100%;
display:block;
}
.ui-photo__status {
position: absolute;
top: 8rpx;
left: 8rpx;
position:absolute;
top:8rpx;
left:8rpx;
}
.ui-photo__remove {
position: absolute;
top: 8rpx;
right: 8rpx;
width: 36rpx;
height: 36rpx;
border-radius: 50%;
background: rgba(0, 0, 0, 0.55);
color: #FFFFFF;
font-size: 24rpx;
display: flex;
align-items: center;
justify-content: center;
line-height: 1;
}
position:absolute;
top:8rpx;
right:8rpx;
width:36rpx;
min-height:var(--tap-min);
border-radius:50%;
background:rgba(0, 0, 0, 0.55);
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;
left: 50%;
transform: translateX(-50%);
padding: 4rpx 16rpx;
border-radius: var(--radius-full);
background: var(--color-danger);
color: #FFFFFF;
font-size: var(--font-size-xs);
position:absolute;
bottom:8rpx;
left:50%;
transform:translateX(-50%);
padding:4rpx 16rpx;
border-radius:var(--radius-full);
background:var(--color-danger);
color:var(--color-text-inverse);
font-size:var(--font-size-xs);
}
.ui-photo__mask {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.4);
display: flex;
align-items: center;
justify-content: center;
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
background:rgba(0, 0, 0, 0.4);
display:flex;
align-items:center;
justify-content:center;
}
.ui-photo__spinner {
width: 40rpx;
height: 40rpx;
border: 3rpx solid rgba(255, 255, 255, 0.5);
border-top-color: #FFFFFF;
border-radius: 50%;
animation: ui-photo-spin 0.8s linear infinite;
width:40rpx;
height:40rpx;
border:3rpx solid rgba(255, 255, 255, 0.5);
border-top-color:var(--color-text-inverse);
border-radius:50%;
animation:ui-photo-spin 0.8s linear infinite;
}
@keyframes ui-photo-spin {
from { transform: rotate(0deg); }
to { transform: rotate(360deg); }
from { transform:rotate(0deg); }
to { transform:rotate(360deg); }
}
.ui-photo__add {
background: var(--color-bg-disabled);
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
border: 2rpx dashed var(--color-text-disabled);
background:var(--color-bg-disabled);
display:flex;
flex-direction:column;
align-items:center;
justify-content:center;
border:2rpx dashed var(--color-text-disabled);
}
.ui-photo__add-icon {
font-size: var(--font-size-2xl);
color: var(--color-text-tertiary);
line-height: 1;
font-size:var(--font-size-2xl);
color:var(--color-text-tertiary);
line-height:1;
}
.ui-photo__add-text {
margin-top: var(--spacing-1);
font-size: var(--font-size-xs);
color: var(--color-text-tertiary);
margin-top:var(--spacing-1);
font-size:var(--font-size-xs);
color:var(--color-text-tertiary);
}
.ui-photo__hint {
margin-top: var(--spacing-2);
font-size: var(--font-size-xs);
color: var(--color-text-tertiary);
line-height: var(--line-height-normal);
margin-top:var(--spacing-2);
font-size:var(--font-size-xs);
color:var(--color-text-tertiary);
line-height:var(--line-height-normal);
}
+48 -48
View File
@@ -1,72 +1,72 @@
.ui-pref__hint {
padding: var(--spacing-2) var(--spacing-3);
background: var(--color-warning-light);
border-radius: var(--radius-sm);
font-size: var(--font-size-xs);
color: var(--color-warning);
line-height: var(--line-height-normal);
margin-bottom: var(--spacing-3);
padding:var(--spacing-2) var(--spacing-3);
background:var(--color-warning-light);
border-radius:var(--radius-sm);
font-size:var(--font-size-xs);
color:var(--color-warning-strong);
line-height:var(--line-height-normal);
margin-bottom:var(--spacing-3);
}
.ui-pref__row {
display: flex;
align-items: center;
padding: var(--spacing-3) 0;
border-bottom: 1rpx solid var(--color-divider);
display:flex;
align-items:center;
padding:var(--spacing-3) 0;
border-bottom:1rpx solid var(--color-divider);
}
.ui-pref__label {
width: 140rpx;
font-size: var(--font-size-md);
color: var(--color-text-secondary);
flex-shrink: 0;
width:140rpx;
font-size:var(--font-size-md);
color:var(--color-text-secondary);
flex-shrink:0;
}
.ui-pref__range {
display: flex;
align-items: center;
flex: 1;
min-width: 0;
display:flex;
align-items:center;
flex:1;
min-width:0;
}
.ui-pref__num {
flex: 1;
min-width: 0;
height: 64rpx;
padding: 0 var(--spacing-2);
border: 1rpx solid var(--color-border);
border-radius: var(--radius-sm);
font-size: var(--font-size-md);
text-align: center;
flex:1;
min-width:0;
height:64rpx;
padding:0 var(--spacing-2);
border:1rpx solid var(--color-border);
border-radius:var(--radius-sm);
font-size:var(--font-size-md);
text-align:center;
}
.ui-pref__dash {
margin: 0 var(--spacing-2);
color: var(--color-text-tertiary);
margin:0 var(--spacing-2);
color:var(--color-text-tertiary);
}
.ui-pref__tags {
flex: 1;
min-width: 0;
display: flex;
flex-wrap: wrap;
gap: var(--spacing-1);
flex:1;
min-width:0;
display:flex;
flex-wrap:wrap;
gap:var(--spacing-1);
}
.ui-pref__picker {
flex: 1;
flex:1;
}
.ui-pref__picker-value {
padding: var(--spacing-2) 0;
font-size: var(--font-size-md);
color: var(--color-text-primary);
padding:var(--spacing-2) 0;
font-size:var(--font-size-md);
color:var(--color-text-primary);
}
.ui-pref__importance {
margin-left: var(--spacing-2);
padding: 6rpx 16rpx;
border-radius: var(--radius-full);
font-size: var(--font-size-xs);
font-weight: var(--font-weight-medium);
flex-shrink: 0;
margin-left:var(--spacing-2);
padding:6rpx 16rpx;
border-radius:var(--radius-full);
font-size:var(--font-size-xs);
font-weight:var(--font-weight-medium);
flex-shrink:0;
}
.ui-pref__importance--required {
background: var(--color-danger-light);
color: var(--color-danger);
background:var(--color-danger-light);
color:var(--color-danger-strong);
}
.ui-pref__importance--preferred {
background: var(--color-bg-disabled);
color: var(--color-text-tertiary);
background:var(--color-bg-disabled);
color:var(--color-text-tertiary);
}
+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}
+40 -19
View File
@@ -1,31 +1,52 @@
/**
* 区块标题(全站所有页面共用,是排版层级的关键一环)
*
* 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);
display:flex;
align-items:center;
justify-content:space-between;
padding:var(--spacing-2) var(--spacing-page-x);
}
.ui-section__left {
display: flex;
align-items: baseline;
display:flex;
align-items:baseline;
min-width:0;
}
.ui-section__title {
font-size: var(--font-size-lg);
font-weight: var(--font-weight-semibold);
color: var(--color-text-primary);
font-size:var(--font-size-xl);
font-weight:var(--font-weight-semibold);
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);
color: var(--color-text-tertiary);
margin-left:var(--spacing-2);
font-size:var(--font-size-xs);
color:var(--color-text-tertiary);
}
.ui-section__action {
display: flex;
align-items: center;
font-size: var(--font-size-sm);
color: var(--color-primary);
display:flex;
align-items:center;
flex:none;
min-height:var(--tap-min);
padding-left:var(--spacing-3);
font-size:var(--font-size-sm);
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;
width: 24rpx;
height: 24rpx;
margin-left:4rpx;
width:24rpx;
height:24rpx;
}
+34 -34
View File
@@ -1,63 +1,63 @@
.service-hero {
position: relative;
height: 300rpx;
overflow: hidden;
border-radius: 0 0 32rpx 32rpx;
background: #fff4f7;
position:relative;
height:300rpx;
overflow:hidden;
border-radius:0 0 32rpx 32rpx;
background:var(--color-primary-light);
}
.service-hero__image,
.service-hero__veil {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
position:absolute;
inset:0;
width:100%;
height:100%;
}
.service-hero__veil {
background: linear-gradient(90deg, rgba(255, 250, 252, 0.98) 0%, rgba(255, 250, 252, 0.82) 38%, rgba(255, 250, 252, 0.08) 70%);
background:linear-gradient(90deg, rgba(255, 250, 252, 0.98) 0%, rgba(255, 250, 252, 0.82) 38%, rgba(255, 250, 252, 0.08) 70%);
}
.service-hero--night .service-hero__veil {
background: linear-gradient(90deg, rgba(18, 24, 83, 0.92) 0%, rgba(34, 31, 111, 0.64) 42%, rgba(34, 31, 111, 0.08) 72%);
background:linear-gradient(90deg, rgba(18, 24, 83, 0.92) 0%, rgba(34, 31, 111, 0.64) 42%, rgba(34, 31, 111, 0.08) 72%);
}
.service-hero__content {
position: relative;
z-index: 1;
display: flex;
flex-direction: column;
justify-content: center;
width: 54%;
height: 100%;
padding: 0 36rpx;
box-sizing: border-box;
position:relative;
z-index:1;
display:flex;
flex-direction:column;
justify-content:center;
width:54%;
height:100%;
padding:0 36rpx;
box-sizing:border-box;
}
.service-hero__eyebrow {
margin-bottom: 10rpx;
color: var(--color-primary);
font-size: 22rpx;
font-weight: 600;
letter-spacing: 2rpx;
margin-bottom:10rpx;
color:var(--color-primary-strong);
font-size:24rpx;
font-weight:600;
letter-spacing:2rpx;
}
.service-hero__title {
color: #24305e;
font-size: 40rpx;
font-weight: 700;
line-height: 1.28;
color:var(--color-text-strong);
font-size:40rpx;
font-weight:700;
line-height:1.28;
}
.service-hero__subtitle {
margin-top: 14rpx;
color: #737c96;
font-size: 24rpx;
line-height: 1.55;
margin-top:14rpx;
color:var(--color-text-tertiary);
font-size:24rpx;
line-height:1.55;
}
.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);
}
+24 -24
View File
@@ -1,40 +1,40 @@
.ui-badge {
display: inline-flex;
align-items: center;
padding: 4rpx 14rpx;
border-radius: var(--radius-full);
font-size: var(--font-size-xs);
font-weight: var(--font-weight-medium);
line-height: 1.4;
white-space: nowrap;
display:inline-flex;
align-items:center;
padding:4rpx 14rpx;
border-radius:var(--radius-full);
font-size:var(--font-size-xs);
font-weight:var(--font-weight-medium);
line-height:1.4;
white-space:nowrap;
}
.ui-badge__dot {
width: 8rpx;
height: 8rpx;
border-radius: 50%;
background: currentColor;
margin-right: 8rpx;
width:8rpx;
height:8rpx;
border-radius:50%;
background:currentColor;
margin-right:8rpx;
}
.ui-badge__label {
font-size: inherit;
font-size:inherit;
}
.ui-badge--success {
background: var(--color-success-light);
color: var(--color-success);
background:var(--color-success-light);
color:var(--color-success-strong);
}
.ui-badge--warning {
background: var(--color-warning-light);
color: var(--color-warning);
background:var(--color-warning-light);
color:var(--color-warning-strong);
}
.ui-badge--danger {
background: var(--color-danger-light);
color: var(--color-danger);
background:var(--color-danger-light);
color:var(--color-danger-strong);
}
.ui-badge--info {
background: var(--color-info-light);
color: var(--color-info);
background:var(--color-info-light);
color:var(--color-info-strong);
}
.ui-badge--disabled {
background: var(--color-bg-disabled);
color: var(--color-text-disabled);
background:var(--color-bg-disabled);
color:var(--color-text-disabled);
}
@@ -1,67 +1,67 @@
.ui-success-mask {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: var(--color-bg-overlay);
z-index: var(--z-modal);
display: flex;
align-items: center;
justify-content: center;
padding: 0 var(--spacing-6);
position:fixed;
top:0;
left:0;
right:0;
bottom:0;
background:var(--color-bg-overlay);
z-index:var(--z-modal);
display:flex;
align-items:center;
justify-content:center;
padding:0 var(--spacing-6);
}
.ui-success {
width: 100%;
max-width: 600rpx;
background: var(--color-bg-card);
border-radius: var(--radius-lg);
padding: var(--spacing-6) var(--spacing-4) var(--spacing-4);
text-align: center;
box-shadow: var(--shadow-popup);
animation: ui-success-in var(--motion-normal) var(--ease-standard);
width:100%;
max-width:600rpx;
background:var(--color-bg-card);
border-radius:var(--radius-lg);
padding:var(--spacing-6) var(--spacing-4) var(--spacing-4);
text-align:center;
box-shadow:var(--shadow-popup);
animation:ui-success-in var(--motion-normal) var(--ease-standard);
}
@keyframes ui-success-in {
from { transform: scale(0.92); opacity: 0; }
to { transform: scale(1); opacity: 1; }
from { transform:scale(0.92); opacity:0; }
to { transform:scale(1); opacity:1; }
}
.ui-success__heart {
width: 120rpx;
height: 120rpx;
margin: 0 auto var(--spacing-3);
background: var(--color-primary-light);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
width:120rpx;
height:120rpx;
margin:0 auto var(--spacing-3);
background:var(--color-primary-light);
border-radius:50%;
display:flex;
align-items:center;
justify-content:center;
}
.ui-success__heart-icon {
width: 56rpx;
height: 56rpx;
background: var(--color-primary);
clip-path: polygon(50% 100%, 0 38%, 18% 18%, 50% 38%, 82% 18%, 100% 38%);
width:56rpx;
height:56rpx;
background:var(--color-primary);
clip-path:polygon(50% 100%, 0 38%, 18% 18%, 50% 38%, 82% 18%, 100% 38%);
}
.ui-success__title {
font-size: var(--font-size-xl);
font-weight: var(--font-weight-semibold);
color: var(--color-text-primary);
margin-bottom: var(--spacing-2);
font-size:var(--font-size-xl);
font-weight:var(--font-weight-semibold);
color:var(--color-text-primary);
margin-bottom:var(--spacing-2);
}
.ui-success__content {
font-size: var(--font-size-md);
color: var(--color-text-secondary);
line-height: var(--line-height-relaxed);
margin-bottom: var(--spacing-2);
font-size:var(--font-size-md);
color:var(--color-text-secondary);
line-height:var(--line-height-relaxed);
margin-bottom:var(--spacing-2);
}
.ui-success__expires {
font-size: var(--font-size-xs);
color: var(--color-warning);
margin-bottom: var(--spacing-4);
font-size:var(--font-size-xs);
color:var(--color-warning-strong);
margin-bottom:var(--spacing-4);
}
.ui-success__actions {
display: flex;
gap: var(--spacing-2);
display:flex;
gap:var(--spacing-2);
}
.ui-success__btn {
flex: 1;
flex:1;
}
+31 -31
View File
@@ -1,46 +1,46 @@
.ui-tag {
display: inline-flex;
align-items: center;
padding: 10rpx 20rpx;
border-radius: var(--radius-full);
font-size: var(--font-size-sm);
line-height: 1.3;
background: var(--color-bg-disabled);
color: var(--color-text-secondary);
border: 1rpx solid transparent;
transition: all var(--motion-fast) var(--ease-standard);
user-select: none;
display:inline-flex;
align-items:center;
padding:10rpx 20rpx;
border-radius:var(--radius-full);
font-size:var(--font-size-sm);
line-height:1.3;
background:var(--color-bg-disabled);
color:var(--color-text-secondary);
border:1rpx solid transparent;
transition:all var(--motion-fast) var(--ease-standard);
user-select:none;
}
.ui-tag__label {
font-size: inherit;
font-size:inherit;
}
.ui-tag__close {
margin-left: 8rpx;
font-size: var(--font-size-md);
line-height: 1;
color: var(--color-text-tertiary);
width: 24rpx;
height: 24rpx;
display: flex;
align-items: center;
justify-content: center;
}
margin-left:8rpx;
font-size:var(--font-size-md);
line-height:1;
color:var(--color-text-tertiary);
width: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);
border-color: var(--color-primary);
background:var(--color-primary-light);
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);
background:var(--color-primary-active);
}
.ui-tag--disabled {
opacity: 0.55;
opacity:0.55;
}
.ui-tag--hover {
opacity: 0.85;
transform: scale(0.97);
opacity:0.85;
transform:scale(0.97);
}
+32 -32
View File
@@ -1,56 +1,56 @@
.ui-textarea {
padding: var(--spacing-3) 0;
border-bottom: 1rpx solid var(--color-border);
padding:var(--spacing-3) 0;
border-bottom:1rpx solid var(--color-border);
}
.ui-textarea__label {
font-size: var(--font-size-sm);
color: var(--color-text-tertiary);
margin-bottom: var(--spacing-2);
font-size:var(--font-size-sm);
color:var(--color-text-tertiary);
margin-bottom:var(--spacing-2);
}
.ui-textarea__field-wrap {
background: var(--color-bg-card);
border-radius: var(--radius-md);
padding: var(--spacing-2) var(--spacing-3);
border: 1rpx solid var(--color-border);
background:var(--color-bg-card);
border-radius:var(--radius-md);
padding:var(--spacing-2) var(--spacing-3);
border:1rpx solid var(--color-border);
}
.ui-textarea__field {
width: 100%;
font-size: var(--font-size-base);
color: var(--color-text-primary);
line-height: var(--line-height-normal);
min-height: 144rpx;
width:100%;
font-size:var(--font-size-base);
color:var(--color-text-primary);
line-height:var(--line-height-normal);
min-height:144rpx;
}
.ui-textarea__placeholder {
color: var(--color-text-placeholder);
color:var(--color-text-placeholder);
}
.ui-textarea__footer {
display: flex;
justify-content: space-between;
align-items: flex-start;
margin-top: var(--spacing-1);
min-height: 28rpx;
display:flex;
justify-content:space-between;
align-items:flex-start;
margin-top:var(--spacing-1);
min-height:28rpx;
}
.ui-textarea__error {
color: var(--color-danger);
font-size: var(--font-size-xs);
flex: 1;
color:var(--color-danger-strong);
font-size:var(--font-size-xs);
flex:1;
}
.ui-textarea__hint {
color: var(--color-warning);
font-size: var(--font-size-xs);
flex: 1;
color:var(--color-warning-strong);
font-size:var(--font-size-xs);
flex:1;
}
.ui-textarea__count {
color: var(--color-text-tertiary);
font-size: var(--font-size-xs);
margin-left: var(--spacing-2);
color:var(--color-text-tertiary);
font-size:var(--font-size-xs);
margin-left:var(--spacing-2);
}
.ui-textarea--error .ui-textarea__field-wrap {
border-color: var(--color-border-error);
border-color:var(--color-border-error);
}
.ui-textarea--disabled .ui-textarea__field {
color: var(--color-text-disabled);
color:var(--color-text-disabled);
}
.ui-textarea--disabled .ui-textarea__field-wrap {
background: var(--color-bg-disabled);
background:var(--color-bg-disabled);
}
+30 -30
View File
@@ -1,50 +1,50 @@
.ui-user-card {
display: flex;
align-items: center;
background: var(--color-bg-card);
min-height: 148rpx;
padding: 14rpx 18rpx;
border-bottom: 1rpx solid #F0F1F6;
display:flex;
align-items:center;
background:var(--color-bg-card);
min-height:148rpx;
padding:14rpx 18rpx;
border-bottom:1rpx solid var(--color-divider);
}
.ui-user-card__select {
margin-right: var(--spacing-3);
margin-right:var(--spacing-3);
}
.ui-user-card__checkbox {
transform: scale(.82);
transform:scale(.82);
}
.ui-user-card__body {
flex: 1;
min-width: 0;
margin-left: 16rpx;
flex:1;
min-width:0;
margin-left:16rpx;
}
.ui-user-card__name-row {
display: flex;
align-items: baseline;
margin-bottom: var(--spacing-1);
display:flex;
align-items:baseline;
margin-bottom:var(--spacing-1);
}
.ui-user-card__name {
font-size: 26rpx;
font-weight: 700;
color: #222746;
margin-right: var(--spacing-2);
font-size:26rpx;
font-weight:700;
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;
margin-left:auto;
color:var(--color-success-strong);
font-size:24rpx;
}
.ui-user-card__meta {
font-size: 20rpx;
color: #767C94;
line-height: 1.4;
margin-top: 4rpx;
font-size:24rpx;
color:var(--color-text-tertiary);
line-height:1.4;
margin-top:4rpx;
}
.ui-user-card__actions {
flex-shrink: 0;
margin-left: var(--spacing-2);
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}
+58 -58
View File
@@ -1,112 +1,112 @@
/* 关于我们样式 */
.page {
min-height: 100vh;
background: #f5f5f5;
padding-bottom: 48rpx;
min-height:100vh;
background:var(--color-bg-subtle);
padding-bottom:48rpx;
}
.logo-section {
background: linear-gradient(135deg, #E96B6B 0%, #ff9a9a 100%);
padding: 80rpx 48rpx;
display: flex;
flex-direction: column;
align-items: center;
background:linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-light) 100%);
padding:80rpx 48rpx;
display:flex;
flex-direction:column;
align-items:center;
}
.logo-icon {
font-size: 100rpx;
margin-bottom: 24rpx;
font-size:100rpx;
margin-bottom:24rpx;
}
.platform-name {
font-size: 36rpx;
font-weight: 700;
color: #fff;
margin-bottom: 8rpx;
font-size:36rpx;
font-weight:700;
color:var(--color-text-inverse);
margin-bottom:8rpx;
}
.slogan {
font-size: 26rpx;
color: rgba(255, 255, 255, 0.85);
margin-bottom: 32rpx;
font-size:26rpx;
color:rgba(255, 255, 255, 0.85);
margin-bottom:32rpx;
}
.version {
font-size: 22rpx;
color: rgba(255, 255, 255, 0.7);
font-size:24rpx;
color:rgba(255, 255, 255, 0.7);
}
.section {
margin-top: 24rpx;
background: #fff;
margin-top:24rpx;
background:var(--color-bg-card);
}
.section-title {
padding: 24rpx 32rpx 16rpx;
font-size: 24rpx;
color: #999;
padding:24rpx 32rpx 16rpx;
font-size:24rpx;
color:var(--color-text-tertiary);
}
.intro-text {
padding: 0 32rpx 20rpx;
font-size: 28rpx;
color: #555;
line-height: 1.8;
padding:0 32rpx 20rpx;
font-size:28rpx;
color:var(--color-text-primary);
line-height:1.8;
}
.list-group {
padding: 0 32rpx;
padding:0 32rpx;
}
.list-row {
display: flex;
align-items: center;
padding: 28rpx 0;
border-bottom: 1rpx solid #f5f5f5;
display:flex;
align-items:center;
padding:28rpx 0;
border-bottom:1rpx solid var(--color-divider);
}
.list-row:last-child {
border-bottom: none;
border-bottom:none;
}
.list-icon {
font-size: 36rpx;
margin-right: 24rpx;
width: 48rpx;
text-align: center;
font-size:36rpx;
margin-right:24rpx;
width:48rpx;
text-align:center;
}
.list-info {
flex: 1;
min-width: 0;
flex:1;
min-width:0;
}
.list-label {
display: block;
font-size: 32rpx;
color: #2d2d2d;
line-height: 1.4;
display:block;
font-size:32rpx;
color:var(--color-text-strong);
line-height:1.4;
}
.list-desc {
display: block;
font-size: 24rpx;
color: #999;
line-height: 1.4;
margin-top: 4rpx;
display:block;
font-size:24rpx;
color:var(--color-text-tertiary);
line-height:1.4;
margin-top:4rpx;
}
.list-arrow {
font-size: 32rpx;
color: #ccc;
margin-left: 16rpx;
font-size:32rpx;
color:var(--color-text-disabled);
margin-left:16rpx;
}
.footer {
margin-top: 48rpx;
text-align: center;
font-size: 22rpx;
color: #ccc;
padding: 0 32rpx;
line-height: 1.8;
margin-top:48rpx;
text-align:center;
font-size:24rpx;
color:var(--color-text-disabled);
padding:0 32rpx;
line-height:1.8;
}
@@ -1,141 +1,141 @@
.page {
padding: 32rpx;
background: #FFF8F7;
min-height: 100vh;
padding:32rpx;
background:var(--color-primary-lighter);
min-height:100vh;
}
.warning-banner {
background: #FFF3F2;
border-radius: 20rpx;
padding: 32rpx;
text-align: center;
margin-bottom: 32rpx;
background:var(--color-primary-light);
border-radius:20rpx;
padding:32rpx;
text-align:center;
margin-bottom:32rpx;
}
.warning-icon { font-size: 56rpx; display: block; }
.warning-title { font-size: 32rpx; font-weight: bold; color: #E96B6B; display: block; margin-top: 12rpx; }
.warning-icon { font-size:56rpx; display:block; }
.warning-title { font-size:32rpx; font-weight:bold; color:var(--color-primary-strong); display:block; margin-top:12rpx; }
.info-section {
background: #fff;
border-radius: 20rpx;
padding: 28rpx;
margin-bottom: 24rpx;
background:var(--color-bg-card);
border-radius:20rpx;
padding:28rpx;
margin-bottom:24rpx;
}
.section-title {
font-size: 28rpx;
font-weight: bold;
color: #1A1A1A;
display: block;
margin-bottom: 20rpx;
font-size:28rpx;
font-weight:bold;
color:var(--color-text-strong);
display:block;
margin-bottom:20rpx;
}
.info-list {
display: flex;
flex-direction: column;
gap: 12rpx;
display:flex;
flex-direction:column;
gap:12rpx;
}
.info-item {
font-size: 26rpx;
color: #666;
line-height: 1.6;
font-size:26rpx;
color:var(--color-text-secondary);
line-height:1.6;
}
.blocker-section {
background: #FFF8E1;
border-radius: 20rpx;
padding: 28rpx;
margin-bottom: 24rpx;
background:var(--color-warning-light);
border-radius:20rpx;
padding:28rpx;
margin-bottom:24rpx;
}
.blocker-title {
font-size: 26rpx;
font-weight: bold;
color: #E59A32;
display: block;
margin-bottom: 12rpx;
font-size:26rpx;
font-weight:bold;
color:var(--color-warning-strong);
display:block;
margin-bottom:12rpx;
}
.blocker-item {
font-size: 24rpx;
color: #999;
display: block;
margin-bottom: 8rpx;
font-size:24rpx;
color:var(--color-text-tertiary);
display:block;
margin-bottom:8rpx;
}
.reason-options {
display: flex;
flex-wrap: wrap;
gap: 16rpx;
margin-bottom: 16rpx;
display:flex;
flex-wrap:wrap;
gap:16rpx;
margin-bottom:16rpx;
}
.reason-chip {
padding: 12rpx 24rpx;
background: #F5F5F5;
border-radius: 32rpx;
font-size: 24rpx;
color: #666;
border: 2rpx solid transparent;
padding:12rpx 24rpx;
background:var(--color-bg-subtle);
border-radius:32rpx;
font-size:24rpx;
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;
border-radius: 16rpx;
padding: 20rpx;
box-sizing: border-box;
width:100%;
min-height:120rpx;
font-size:26rpx;
background:var(--color-bg-subtle);
border-radius:16rpx;
padding:20rpx;
box-sizing:border-box;
}
.btn-confirm {
width: 100%;
height: 88rpx;
line-height: 88rpx;
background: #E96B6B;
color: #fff;
border-radius: 44rpx;
font-size: 30rpx;
margin-top: 32rpx;
width:100%;
height:88rpx;
line-height:88rpx;
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;
margin-top: 16rpx;
line-height: 1.5;
display:block;
text-align:center;
font-size:24rpx;
color:var(--color-text-tertiary);
margin-top:16rpx;
line-height:1.5;
}
/* 成功状态 */
.submitted {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 120rpx 32rpx;
display:flex;
flex-direction:column;
align-items:center;
justify-content:center;
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;
border-radius: 44rpx;
font-size: 30rpx;
width:60%;
height:88rpx;
line-height:88rpx;
background:var(--color-primary-solid);
color:var(--color-text-inverse);
border-radius:44rpx;
font-size:30rpx;
}
@@ -1,59 +1,59 @@
.page { padding: 32rpx; background: #FFF8F7; min-height: 100vh; }
.page { padding:32rpx; background:var(--color-primary-lighter); min-height:100vh; }
.status-card {
background: #fff;
border-radius: 24rpx;
padding: 48rpx 32rpx;
text-align: center;
margin-bottom: 32rpx;
box-shadow: 0 2rpx 12rpx rgba(0,0,0,0.04);
background:var(--color-bg-card);
border-radius:24rpx;
padding:48rpx 32rpx;
text-align:center;
margin-bottom:32rpx;
box-shadow:0 2rpx 12rpx rgba(0,0,0,0.04);
}
.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-icon { font-size:72rpx; display:block; margin-bottom:16rpx; }
.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;
border-radius: 36rpx;
font-size: 28rpx;
margin-top: 32rpx;
border: none;
}
width:80%;
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;
border-radius: 24rpx;
overflow: hidden;
background:var(--color-bg-card);
border-radius:24rpx;
overflow:hidden;
}
.menu-item {
display: flex;
align-items: center;
padding: 32rpx 28rpx;
border-bottom: 1rpx solid #f5f5f5;
display:flex;
align-items:center;
padding:32rpx 28rpx;
border-bottom:1rpx solid var(--color-divider);
}
.menu-item:last-child { border-bottom: none; }
.menu-item.danger .menu-text { color: #E96B6B; }
.menu-item:last-child { border-bottom:none; }
.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-icon { font-size:36rpx; margin-right:20rpx; }
.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,156 +1,156 @@
.page {
padding: 32rpx;
background: #FFF8F7;
min-height: 100vh;
padding:32rpx;
background:var(--color-primary-lighter);
min-height:100vh;
}
.status-banner {
background: linear-gradient(135deg, #E96B6B 0%, #C44545 100%);
border-radius: 24rpx;
padding: 48rpx 32rpx;
text-align: center;
margin-bottom: 32rpx;
background:linear-gradient(135deg, var(--color-primary) 0%, var(--color-danger) 100%);
border-radius:24rpx;
padding:48rpx 32rpx;
text-align:center;
margin-bottom:32rpx;
}
.banner-icon {
font-size: 72rpx;
display: block;
margin-bottom: 16rpx;
font-size:72rpx;
display:block;
margin-bottom:16rpx;
}
.banner-title {
font-size: 36rpx;
font-weight: bold;
color: #fff;
display: block;
font-size:36rpx;
font-weight:bold;
color:var(--color-text-inverse);
display:block;
}
.banner-status {
font-size: 26rpx;
color: rgba(255,255,255,0.85);
display: block;
margin-top: 12rpx;
font-size:26rpx;
color:rgba(255,255,255,0.85);
display:block;
margin-top:12rpx;
}
.normal-state {
text-align: center;
padding: 80rpx 32rpx;
text-align:center;
padding:80rpx 32rpx;
}
.normal-icon {
font-size: 80rpx;
color: #67C23A;
display: block;
margin-bottom: 24rpx;
font-size:80rpx;
color:var(--color-success-strong);
display:block;
margin-bottom:24rpx;
}
.normal-title {
font-size: 32rpx;
font-weight: bold;
color: #1A1A1A;
display: block;
margin-bottom: 16rpx;
font-size:32rpx;
font-weight:bold;
color:var(--color-text-strong);
display:block;
margin-bottom:16rpx;
}
.normal-hint {
font-size: 26rpx;
color: #666;
display: block;
line-height: 1.6;
font-size:26rpx;
color:var(--color-text-secondary);
display:block;
line-height:1.6;
}
.actions-list {
display: flex;
flex-direction: column;
gap: 20rpx;
display:flex;
flex-direction:column;
gap:20rpx;
}
.action-card {
background: #fff;
border-radius: 20rpx;
padding: 28rpx;
box-shadow: 0 2rpx 12rpx rgba(0,0,0,0.04);
background:var(--color-bg-card);
border-radius:20rpx;
padding:28rpx;
box-shadow:0 2rpx 12rpx rgba(0,0,0,0.04);
}
.action-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 16rpx;
display:flex;
justify-content:space-between;
align-items:center;
margin-bottom:16rpx;
}
.action-type {
font-size: 28rpx;
font-weight: bold;
color: #E96B6B;
font-size:28rpx;
font-weight:bold;
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;
display: block;
margin-bottom: 12rpx;
line-height: 1.5;
font-size:26rpx;
color:var(--color-text-secondary);
display:block;
margin-bottom:12rpx;
line-height:1.5;
}
.action-expiry {
font-size: 24rpx;
color: #E59A32;
display: block;
margin-bottom: 20rpx;
font-size:24rpx;
color:var(--color-warning-strong);
display:block;
margin-bottom:20rpx;
}
.btn-appeal {
width: 100%;
height: 72rpx;
line-height: 72rpx;
background: #FFF3F2;
color: #E96B6B;
border-radius: 36rpx;
font-size: 28rpx;
border: 1rpx solid #E96B6B;
}
width:100%;
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 var(--color-primary);
min-width:var(--tap-min);}
.appeal-hint {
display: block;
font-size: 24rpx;
color: #999;
text-align: center;
margin-top: 16rpx;
display:block;
font-size:24rpx;
color:var(--color-text-tertiary);
text-align:center;
margin-top:16rpx;
}
.appeal-disabled {
text-align: center;
padding: 60rpx 32rpx;
background: #fff;
border-radius: 20rpx;
text-align:center;
padding:60rpx 32rpx;
background:var(--color-bg-card);
border-radius:20rpx;
}
.disabled-hint {
font-size: 26rpx;
color: #999;
display: block;
margin-bottom: 24rpx;
font-size:26rpx;
color:var(--color-text-tertiary);
display:block;
margin-bottom:24rpx;
}
.btn-contact {
width: 60%;
height: 72rpx;
line-height: 72rpx;
background: #E96B6B;
color: #fff;
border-radius: 36rpx;
font-size: 28rpx;
border: none;
}
width:60%;
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;
text-align:center;
padding:100rpx;
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,170 +1,170 @@
.page {
padding: 32rpx;
background: #FFF8F7;
min-height: 100vh;
padding:32rpx;
background:var(--color-primary-lighter);
min-height:100vh;
}
.header {
text-align: center;
margin-bottom: 32rpx;
text-align:center;
margin-bottom:32rpx;
}
.title {
font-size: 36rpx;
font-weight: bold;
color: #1A1A1A;
display: block;
font-size:36rpx;
font-weight:bold;
color:var(--color-text-strong);
display:block;
}
.activity-name {
font-size: 24rpx;
color: #999;
display: block;
margin-top: 8rpx;
font-size:24rpx;
color:var(--color-text-tertiary);
display:block;
margin-top:8rpx;
}
.section {
background: #fff;
border-radius: 20rpx;
padding: 32rpx;
margin-bottom: 24rpx;
background:var(--color-bg-card);
border-radius:20rpx;
padding:32rpx;
margin-bottom:24rpx;
}
.section-title {
font-size: 28rpx;
font-weight: bold;
color: #1A1A1A;
display: block;
margin-bottom: 20rpx;
font-size:28rpx;
font-weight:bold;
color:var(--color-text-strong);
display:block;
margin-bottom:20rpx;
}
.radio-group {
display: flex;
flex-direction: column;
gap: 16rpx;
display:flex;
flex-direction:column;
gap:16rpx;
}
.radio-item {
padding: 24rpx;
background: #F9F9F9;
border-radius: 16rpx;
font-size: 28rpx;
color: #333;
border: 2rpx solid transparent;
transition: all 0.2s;
padding:24rpx;
background:var(--color-bg-subtle);
border-radius:16rpx;
font-size:28rpx;
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;
margin-top:24rpx;
padding-top:24rpx;
border-top:1rpx solid var(--color-divider);
}
.list-hint {
font-size: 24rpx;
color: #999;
display: block;
margin-bottom: 16rpx;
font-size:24rpx;
color:var(--color-text-tertiary);
display:block;
margin-bottom:16rpx;
}
.participant-item {
display: flex;
align-items: center;
padding: 16rpx 0;
border-bottom: 1rpx solid #f5f5f5;
display:flex;
align-items:center;
padding:16rpx 0;
border-bottom:1rpx solid var(--color-divider);
}
.participant-item:last-child {
border-bottom: none;
border-bottom:none;
}
.avatar {
width: 64rpx;
height: 64rpx;
border-radius: 32rpx;
margin-right: 16rpx;
background: #EEE;
width:64rpx;
height:64rpx;
border-radius:32rpx;
margin-right:16rpx;
background:var(--color-bg-subtle);
}
.name {
flex: 1;
font-size: 28rpx;
color: #333;
flex:1;
font-size:28rpx;
color:var(--color-text-primary);
}
.checkmark {
color: #E96B6B;
font-size: 32rpx;
font-weight: bold;
color:var(--color-primary-strong);
font-size:32rpx;
font-weight:bold;
}
.btn-submit {
width: 100%;
height: 88rpx;
line-height: 88rpx;
background: #E96B6B;
color: #fff;
border-radius: 44rpx;
font-size: 30rpx;
margin-top: 24rpx;
width:100%;
height:88rpx;
line-height:88rpx;
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 {
width: 100%;
height: 88rpx;
line-height: 88rpx;
background: transparent;
color: #999;
border-radius: 44rpx;
font-size: 28rpx;
border: 1rpx solid #DDD;
margin-top: 16rpx;
width:100%;
height:88rpx;
line-height:88rpx;
background:transparent;
color:var(--color-text-tertiary);
border-radius:44rpx;
font-size:28rpx;
border:1rpx solid var(--color-border-strong);
margin-top:16rpx;
}
/* 已提交状态 */
.submitted {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 120rpx 32rpx;
display:flex;
flex-direction:column;
align-items:center;
justify-content:center;
padding:120rpx 32rpx;
}
.success-icon {
font-size: 80rpx;
color: #E96B6B;
margin-bottom: 24rpx;
font-size:80rpx;
color:var(--color-primary-strong);
margin-bottom:24rpx;
}
.success-title {
font-size: 36rpx;
font-weight: bold;
color: #1A1A1A;
margin-bottom: 16rpx;
font-size:36rpx;
font-weight:bold;
color:var(--color-text-strong);
margin-bottom:16rpx;
}
.success-hint {
font-size: 28rpx;
color: #999;
margin-bottom: 48rpx;
font-size:28rpx;
color:var(--color-text-tertiary);
margin-bottom:48rpx;
}
.btn-home {
width: 80%;
height: 88rpx;
line-height: 88rpx;
background: #E96B6B;
color: #fff;
border-radius: 44rpx;
font-size: 30rpx;
width:80%;
height:88rpx;
line-height:88rpx;
background:var(--color-primary-solid);
color:var(--color-text-inverse);
border-radius:44rpx;
font-size:30rpx;
}
@@ -1,107 +1,107 @@
.page {
padding: 32rpx;
background: #FFF8F7;
min-height: 100vh;
padding:32rpx;
background:var(--color-primary-lighter);
min-height:100vh;
}
.header {
text-align: center;
margin-bottom: 32rpx;
text-align:center;
margin-bottom:32rpx;
}
.title {
font-size: 36rpx;
font-weight: bold;
color: #1A1A1A;
display: block;
font-size:36rpx;
font-weight:bold;
color:var(--color-text-strong);
display:block;
}
.activity-name {
font-size: 24rpx;
color: #999;
display: block;
margin-top: 8rpx;
font-size:24rpx;
color:var(--color-text-tertiary);
display:block;
margin-top:8rpx;
}
.loading-state, .empty-state {
text-align: center;
padding: 100rpx 32rpx;
color: #999;
text-align:center;
padding:100rpx 32rpx;
color:var(--color-text-tertiary);
}
.empty-icon {
font-size: 80rpx;
color: #E96B6B;
display: block;
margin-bottom: 24rpx;
font-size:80rpx;
color:var(--color-primary-strong);
display:block;
margin-bottom:24rpx;
}
.empty-hint {
font-size: 24rpx;
color: #BBB;
display: block;
margin-top: 16rpx;
font-size:24rpx;
color:var(--color-text-disabled);
display:block;
margin-top:16rpx;
}
.match-list {
display: flex;
flex-direction: column;
gap: 20rpx;
display:flex;
flex-direction:column;
gap:20rpx;
}
.match-card {
background: #fff;
border-radius: 20rpx;
padding: 24rpx;
display: flex;
align-items: center;
box-shadow: 0 2rpx 12rpx rgba(0,0,0,0.04);
background:var(--color-bg-card);
border-radius:20rpx;
padding:24rpx;
display:flex;
align-items:center;
box-shadow:0 2rpx 12rpx rgba(0,0,0,0.04);
}
.match-avatar {
width: 100rpx;
height: 100rpx;
border-radius: 50rpx;
background: #F0F0F0;
flex-shrink: 0;
width:100rpx;
height:100rpx;
border-radius:50rpx;
background:var(--color-bg-subtle);
flex-shrink:0;
}
.match-info {
flex: 1;
margin-left: 24rpx;
flex:1;
margin-left:24rpx;
}
.match-name {
font-size: 30rpx;
font-weight: bold;
color: #1A1A1A;
display: block;
font-size:30rpx;
font-weight:bold;
color:var(--color-text-strong);
display:block;
}
.match-meta {
font-size: 24rpx;
color: #999;
display: block;
margin-top: 8rpx;
font-size:24rpx;
color:var(--color-text-tertiary);
display:block;
margin-top:8rpx;
}
.btn-chat {
background: #E96B6B;
color: #fff;
font-size: 24rpx;
padding: 12rpx 28rpx;
border-radius: 24rpx;
border: none;
line-height: 1.4;
background:var(--color-primary-solid);
color:var(--color-text-inverse);
font-size:24rpx;
padding:12rpx 28rpx;
border-radius:24rpx;
border:none;
line-height:1.4;
}
.btn-refresh {
margin-top: 32rpx;
background: transparent;
color: #999;
border: 1rpx solid #DDD;
border-radius: 44rpx;
height: 72rpx;
line-height: 72rpx;
font-size: 26rpx;
}
margin-top:32rpx;
background:transparent;
color:var(--color-text-tertiary);
border:1rpx solid var(--color-border-strong);
border-radius:44rpx;
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; }
.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); }
.card-header { display: flex; align-items: center; margin-bottom: 16rpx; }
.avatar { width: 80rpx; height: 80rpx; border-radius: 50rpx; background: #eee; }
.info { flex: 1; margin-left: 20rpx; }
.name { font-size: 30rpx; font-weight: bold; color: #333; 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; }
.card-body { margin-bottom: 16rpx; }
.activity-name { font-size: 24rpx; color: #999; }
.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; }
.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: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:var(--color-bg-subtle); }
.info { flex:1; margin-left:20rpx; }
.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: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:var(--color-text-tertiary); }
.card-actions { display:flex; justify-content:flex-end; }
.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; }
.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); }
.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; }
.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: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: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}
+126 -126
View File
@@ -1,209 +1,209 @@
/* 申诉提交页 — Design Tokens */
.page {
min-height: 100vh;
background: #FFF8F7;
min-height:100vh;
background:var(--color-primary-lighter);
}
.body {
padding: 24rpx;
box-sizing: border-box;
padding:24rpx;
box-sizing:border-box;
}
/* 介绍卡片 */
.intro-card {
background: #fff;
border-radius: 20rpx;
padding: 32rpx;
margin-bottom: 24rpx;
box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.04);
border-left: 8rpx solid #E96B6B;
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 var(--color-primary);
}
.intro-title {
display: block;
font-size: 34rpx;
font-weight: bold;
color: #1A1A1A;
margin-bottom: 12rpx;
display:block;
font-size:34rpx;
font-weight:bold;
color:var(--color-text-strong);
margin-bottom:12rpx;
}
.intro-subtitle {
display: block;
font-size: 26rpx;
color: #999;
line-height: 1.5;
display:block;
font-size:26rpx;
color:var(--color-text-tertiary);
line-height:1.5;
}
/* 卡片 */
.card {
background: #fff;
border-radius: 20rpx;
padding: 24rpx 32rpx;
margin-bottom: 24rpx;
box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.04);
background:var(--color-bg-card);
border-radius:20rpx;
padding:24rpx 32rpx;
margin-bottom:24rpx;
box-shadow:0 2rpx 12rpx rgba(0, 0, 0, 0.04);
}
/* 证据 */
.evidence-list {
display: flex;
flex-wrap: wrap;
gap: 16rpx;
margin-top: 16rpx;
display:flex;
flex-wrap:wrap;
gap:16rpx;
margin-top:16rpx;
}
.evidence-item {
position: relative;
width: 160rpx;
height: 160rpx;
border-radius: 12rpx;
overflow: hidden;
position:relative;
width:160rpx;
height:160rpx;
border-radius:12rpx;
overflow:hidden;
}
.evidence-item image {
width: 100%;
height: 100%;
width:100%;
height:100%;
}
.remove-btn {
position: absolute;
top: 4rpx;
right: 4rpx;
width: 36rpx;
height: 36rpx;
line-height: 32rpx;
text-align: center;
background: rgba(0, 0, 0, 0.5);
color: #fff;
border-radius: 50%;
font-size: 22rpx;
}
position:absolute;
top:4rpx;
right:4rpx;
width:36rpx;
min-height:var(--tap-min);
line-height:var(--tap-min);
text-align:center;
background:rgba(0, 0, 0, 0.5);
color:var(--color-text-inverse);
border-radius:50%;
font-size:24rpx;
min-width:var(--tap-min);}
.evidence-add {
width: 160rpx;
height: 160rpx;
border-radius: 12rpx;
background: #F7F8FA;
border: 2rpx dashed #D0D0D0;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
color: #999;
width:160rpx;
height:160rpx;
border-radius:12rpx;
background:var(--color-bg-subtle);
border:2rpx dashed var(--color-border-strong);
display:flex;
flex-direction:column;
align-items:center;
justify-content:center;
color:var(--color-text-tertiary);
}
.add-icon {
font-size: 48rpx;
color: #B0B0B0;
line-height: 1;
font-size:48rpx;
color:var(--color-text-disabled);
line-height:1;
}
.add-text {
font-size: 22rpx;
margin-top: 8rpx;
font-size:24rpx;
margin-top:8rpx;
}
/* 联系方式输入 */
.contact-input {
margin-top: 16rpx;
background: #F7F8FA;
border-radius: 12rpx;
padding: 24rpx;
font-size: 28rpx;
min-height: 40rpx;
}
margin-top:16rpx;
background:var(--color-bg-subtle);
border-radius:12rpx;
padding:24rpx;
font-size:28rpx;
min-height:var(--tap-min);
min-width:var(--tap-min);}
/* 提交按钮 */
.btn-submit {
width: 100%;
height: 88rpx;
line-height: 88rpx;
border-radius: 44rpx;
background: #E96B6B;
color: #fff;
font-size: 32rpx;
border: none;
margin-top: 8rpx;
width:100%;
height:88rpx;
line-height:88rpx;
border-radius:44rpx;
background:var(--color-primary-solid);
color:var(--color-text-inverse);
font-size:32rpx;
border:none;
margin-top:8rpx;
}
.btn-submit::after {
border: none;
border:none;
}
.btn-submit[disabled] {
opacity: 0.5;
opacity:0.5;
}
.btn-primary {
width: 80%;
height: 88rpx;
line-height: 88rpx;
border-radius: 44rpx;
background: #E96B6B;
color: #fff;
font-size: 32rpx;
border: none;
margin-top: 48rpx;
width:80%;
height:88rpx;
line-height:88rpx;
border-radius:44rpx;
background:var(--color-primary-solid);
color:var(--color-text-inverse);
font-size:32rpx;
border:none;
margin-top:48rpx;
}
.btn-primary::after {
border: none;
border:none;
}
.hint {
display: block;
text-align: center;
font-size: 22rpx;
color: #B0B0B0;
margin-top: 20rpx;
padding: 0 24rpx;
display:block;
text-align:center;
font-size:24rpx;
color:var(--color-text-disabled);
margin-top:20rpx;
padding:0 24rpx;
}
/* 成功态 */
.success-wrap {
display: flex;
flex-direction: column;
align-items: center;
padding: 120rpx 48rpx;
display:flex;
flex-direction:column;
align-items:center;
padding:120rpx 48rpx;
}
.success-icon {
width: 120rpx;
height: 120rpx;
line-height: 120rpx;
text-align: center;
border-radius: 50%;
background: #E8F5E9;
color: #1A6B3E;
font-size: 64rpx;
margin-bottom: 32rpx;
width:120rpx;
height:120rpx;
line-height:120rpx;
text-align:center;
border-radius:50%;
background:var(--color-success-light);
color:var(--color-success-strong);
font-size:64rpx;
margin-bottom:32rpx;
}
.success-title {
font-size: 36rpx;
font-weight: bold;
color: #1A1A1A;
margin-bottom: 16rpx;
font-size:36rpx;
font-weight:bold;
color:var(--color-text-strong);
margin-bottom:16rpx;
}
.success-hint {
font-size: 26rpx;
color: #999;
text-align: center;
line-height: 1.6;
font-size:26rpx;
color:var(--color-text-tertiary);
text-align:center;
line-height:1.6;
}
/* 公益免费标识 */
.free-badge {
text-align: center;
padding: 24rpx;
margin-top: 16rpx;
text-align:center;
padding:24rpx;
margin-top:16rpx;
}
.free-badge text {
display: inline-block;
font-size: 22rpx;
color: #1A6B3E;
background: #E8F5E9;
padding: 8rpx 24rpx;
border-radius: 24rpx;
display:inline-block;
font-size:22rpx;
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);}
+40 -40
View File
@@ -1,72 +1,72 @@
/* 黑名单管理页 — Design Tokens */
.page {
min-height: 100vh;
background: #FFF8F7;
min-height:100vh;
background:var(--color-primary-lighter);
}
.body {
padding: 24rpx;
box-sizing: border-box;
padding:24rpx;
box-sizing:border-box;
}
.list {
display: flex;
flex-direction: column;
gap: 16rpx;
display:flex;
flex-direction:column;
gap:16rpx;
}
.item {
display: flex;
align-items: center;
background: #fff;
border-radius: 20rpx;
padding: 24rpx;
gap: 20rpx;
box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.04);
display:flex;
align-items:center;
background:var(--color-bg-card);
border-radius:20rpx;
padding:24rpx;
gap:20rpx;
box-shadow:0 2rpx 12rpx rgba(0, 0, 0, 0.04);
}
.info {
flex: 1;
min-width: 0;
flex:1;
min-width:0;
}
.name {
display: block;
font-size: 30rpx;
font-weight: bold;
color: #1A1A1A;
margin-bottom: 6rpx;
display:block;
font-size:30rpx;
font-weight:bold;
color:var(--color-text-strong);
margin-bottom:6rpx;
}
.meta {
display: block;
font-size: 24rpx;
color: #999;
margin-bottom: 4rpx;
display:block;
font-size:24rpx;
color:var(--color-text-tertiary);
margin-bottom:4rpx;
}
.reason {
display: block;
font-size: 22rpx;
color: #B0B0B0;
display:block;
font-size:24rpx;
color:var(--color-text-disabled);
}
.btn-unblock {
flex-shrink: 0;
height: 64rpx;
line-height: 60rpx;
padding: 0 28rpx;
border-radius: 32rpx;
font-size: 24rpx;
background: #fff;
color: #E96B6B;
border: 2rpx solid #E96B6B;
}
flex-shrink:0;
min-height:var(--tap-min);
line-height:var(--tap-min);
padding:0 28rpx;
border-radius:32rpx;
font-size:24rpx;
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;
border:none;
}
.btn-unblock.disabled {
opacity: 0.5;
opacity:0.5;
}
+44 -44
View File
@@ -2,77 +2,77 @@
* 聊天详情页样式(重构后大幅简化,气泡主体样式封装在 ui-message-bubble 内)
*/
.page {
display: flex;
flex-direction: column;
height: 100vh;
background: var(--color-bg-page);
box-sizing: border-box;
display:flex;
flex-direction:column;
height:100vh;
background:var(--color-bg-page);
box-sizing:border-box;
}
/* 右上角更多按钮 */
.more-btn {
font-size: 40rpx;
color: var(--color-text-secondary);
padding: 0 var(--spacing-2);
line-height: 1;
font-size:40rpx;
color:var(--color-text-secondary);
padding:0 var(--spacing-2);
line-height:1;
}
/* 安全提示 */
.safety-tip {
background: var(--color-warning-light);
padding: var(--spacing-2) var(--spacing-page-x);
font-size: var(--font-size-xs);
color: var(--color-warning);
text-align: center;
line-height: var(--line-height-normal);
background:var(--color-warning-light);
padding:var(--spacing-2) var(--spacing-page-x);
font-size:var(--font-size-xs);
color:var(--color-warning-strong);
text-align:center;
line-height:var(--line-height-normal);
}
/* 消息列表 */
.msg-list {
flex: 1;
min-height: 0;
box-sizing: border-box;
padding: var(--spacing-2) 0;
flex:1;
min-height:0;
box-sizing:border-box;
padding:var(--spacing-2) 0;
}
.load-more-hint {
text-align: center;
padding: var(--spacing-2);
color: var(--color-text-tertiary);
font-size: var(--font-size-xs);
text-align:center;
padding:var(--spacing-2);
color:var(--color-text-tertiary);
font-size:var(--font-size-xs);
}
/* 输入栏 */
.input-bar {
background: var(--color-bg-card);
padding: var(--spacing-2) var(--spacing-page-x);
padding-bottom: calc(var(--spacing-2) + env(safe-area-inset-bottom));
border-top: var(--border-width) solid var(--color-border);
background:var(--color-bg-card);
padding:var(--spacing-2) var(--spacing-page-x);
padding-bottom:calc(var(--spacing-2) + env(safe-area-inset-bottom));
border-top:var(--border-width) solid var(--color-border);
}
.input-wrapper {
display: flex;
align-items: center;
gap: var(--spacing-2);
display:flex;
align-items:center;
gap:var(--spacing-2);
}
.input {
flex: 1;
height: 72rpx;
background: var(--color-bg-page);
border-radius: var(--radius-full);
padding: 0 var(--spacing-3);
font-size: var(--font-size-md);
color: var(--color-text-primary);
flex:1;
height:72rpx;
background:var(--color-bg-page);
border-radius:var(--radius-full);
padding:0 var(--spacing-3);
font-size:var(--font-size-md);
color:var(--color-text-primary);
}
/* 会话已停用 */
.blocked-tip {
background: var(--color-bg-card);
text-align: center;
padding: var(--spacing-5) var(--spacing-page-x);
padding-bottom: calc(var(--spacing-5) + env(safe-area-inset-bottom));
color: var(--color-text-tertiary);
font-size: var(--font-size-sm);
border-top: var(--border-width) solid var(--color-border);
background:var(--color-bg-card);
text-align:center;
padding:var(--spacing-5) var(--spacing-page-x);
padding-bottom:calc(var(--spacing-5) + env(safe-area-inset-bottom));
color:var(--color-text-tertiary);
font-size:var(--font-size-sm);
border-top:var(--border-width) solid var(--color-border);
}
+86 -86
View File
@@ -1,140 +1,140 @@
.page {
padding: 32rpx;
background: #FFF8F7;
min-height: 100vh;
padding:32rpx;
background:var(--color-primary-lighter);
min-height:100vh;
}
.header {
text-align: center;
margin-bottom: 32rpx;
text-align:center;
margin-bottom:32rpx;
}
.title {
font-size: 36rpx;
font-weight: bold;
color: #1A1A1A;
font-size:36rpx;
font-weight:bold;
color:var(--color-text-strong);
}
.loading-state, .error-state {
text-align: center;
padding: 80rpx;
color: #999;
text-align:center;
padding:80rpx;
color:var(--color-text-tertiary);
}
.checkin-card {
background: #fff;
border-radius: 24rpx;
padding: 40rpx;
margin-bottom: 24rpx;
background:var(--color-bg-card);
border-radius:24rpx;
padding:40rpx;
margin-bottom:24rpx;
}
.activity-info {
text-align: center;
margin-bottom: 32rpx;
text-align:center;
margin-bottom:32rpx;
}
.activity-title {
display: block;
font-size: 32rpx;
font-weight: bold;
color: #1A1A1A;
margin-bottom: 8rpx;
display:block;
font-size:32rpx;
font-weight:bold;
color:var(--color-text-strong);
margin-bottom:8rpx;
}
.activity-location {
display: block;
font-size: 26rpx;
color: #999;
display:block;
font-size:26rpx;
color:var(--color-text-tertiary);
}
.qr-section {
text-align: center;
padding: 32rpx 0;
border-top: 1rpx solid #f5f5f5;
border-bottom: 1rpx solid #f5f5f5;
margin-bottom: 32rpx;
text-align:center;
padding:32rpx 0;
border-top:1rpx solid var(--color-divider);
border-bottom:1rpx solid var(--color-divider);
margin-bottom:32rpx;
}
.qr-placeholder {
width: 300rpx;
height: 300rpx;
margin: 0 auto 20rpx;
background: #F5F5F5;
border-radius: 16rpx;
display: flex;
align-items: center;
justify-content: center;
width:300rpx;
height:300rpx;
margin:0 auto 20rpx;
background:var(--color-bg-subtle);
border-radius:16rpx;
display:flex;
align-items:center;
justify-content:center;
}
.qr-icon {
font-size: 120rpx;
color: #CCC;
font-size:120rpx;
color:var(--color-text-disabled);
}
.qr-hint {
font-size: 26rpx;
color: #999;
font-size:26rpx;
color:var(--color-text-tertiary);
}
.token-section {
margin-bottom: 24rpx;
margin-bottom:24rpx;
}
.token-label {
font-size: 26rpx;
color: #666;
display: block;
margin-bottom: 12rpx;
font-size:26rpx;
color:var(--color-text-secondary);
display:block;
margin-bottom:12rpx;
}
.token-value {
display: block;
font-size: 24rpx;
color: #333;
background: #F5F5F5;
padding: 20rpx;
border-radius: 12rpx;
word-break: break-all;
margin-bottom: 16rpx;
display:block;
font-size:24rpx;
color:var(--color-text-primary);
background:var(--color-bg-subtle);
padding:20rpx;
border-radius:12rpx;
word-break:break-all;
margin-bottom:16rpx;
}
.btn-copy {
width: 100%;
height: 72rpx;
line-height: 72rpx;
background: #FFF3F2;
color: #E96B6B;
border-radius: 36rpx;
font-size: 26rpx;
border: none;
}
width:100%;
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;
padding: 16rpx;
background: #FFF8E1;
border-radius: 12rpx;
text-align:center;
font-size:24rpx;
color:var(--color-warning-strong);
padding:16rpx;
background:var(--color-warning-light);
border-radius:12rpx;
}
.btn-refresh-page {
background: #E96B6B;
color: #fff;
border-radius: 44rpx;
height: 88rpx;
line-height: 88rpx;
font-size: 30rpx;
margin-top: 24rpx;
background:var(--color-primary-solid);
color:var(--color-text-inverse);
border-radius:44rpx;
height:88rpx;
line-height:88rpx;
font-size:30rpx;
margin-top:24rpx;
}
.btn-refresh {
margin-top: 24rpx;
background: #E96B6B;
color: #fff;
border-radius: 44rpx;
height: 72rpx;
line-height: 72rpx;
font-size: 28rpx;
border: none;
}
margin-top:24rpx;
background:var(--color-primary-solid);
color:var(--color-text-inverse);
border-radius:44rpx;
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-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; }
.container { padding:24rpx; }
.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: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}
+72 -72
View File
@@ -1,119 +1,119 @@
/* 我的缘分页 U22 — Design Tokens */
.page {
min-height: 100vh;
background: #FFF8F7;
min-height:100vh;
background:var(--color-primary-lighter);
}
/* Tab 切换栏(粘性吸附在自定义导航栏下方) */
.tabs {
display: flex;
background: #fff;
border-bottom: 1rpx solid #F0F0F0;
position: sticky;
z-index: 10;
display:flex;
background:var(--color-bg-card);
border-bottom:1rpx solid var(--color-divider);
position:sticky;
z-index:10;
}
.tab {
flex: 1;
text-align: center;
padding: 28rpx 0;
font-size: 28rpx;
color: #999;
position: relative;
transition: color 0.2s;
flex:1;
text-align:center;
padding:28rpx 0;
font-size:28rpx;
color:var(--color-text-tertiary);
position:relative;
transition:color 0.2s;
}
.tab.active {
color: #E96B6B;
font-weight: bold;
color:var(--color-primary-strong);
font-weight:bold;
}
.tab.active::after {
content: '';
position: absolute;
bottom: 0;
left: 50%;
transform: translateX(-50%);
width: 48rpx;
height: 4rpx;
background: #E96B6B;
border-radius: 2rpx;
content:'';
position:absolute;
bottom:0;
left:50%;
transform:translateX(-50%);
width:48rpx;
height:4rpx;
background:var(--color-primary);
border-radius:2rpx;
}
.tab-count {
display: inline-block;
background: #E96B6B;
color: #fff;
font-size: 20rpx;
padding: 2rpx 10rpx;
border-radius: 20rpx;
margin-left: 8rpx;
vertical-align: middle;
display:inline-block;
background:var(--color-primary-solid);
color:var(--color-text-inverse);
font-size:20rpx;
padding:2rpx 10rpx;
border-radius:20rpx;
margin-left:8rpx;
vertical-align:middle;
}
/* 列表容器 */
.list-wrap {
padding: 24rpx;
box-sizing: border-box;
padding:24rpx;
box-sizing:border-box;
}
.list {
display: flex;
flex-direction: column;
gap: 16rpx;
display:flex;
flex-direction:column;
gap:16rpx;
}
.item {
background: #fff;
border-radius: 20rpx;
padding: 24rpx;
box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.04);
background:var(--color-bg-card);
border-radius:20rpx;
padding:24rpx;
box-shadow:0 2rpx 12rpx rgba(0, 0, 0, 0.04);
}
/* 操作按钮 */
.btn-primary {
flex-shrink: 0;
height: 64rpx;
line-height: 64rpx;
padding: 0 28rpx;
border-radius: 32rpx;
font-size: 24rpx;
background: #E96B6B;
color: #fff;
border: none;
}
flex-shrink:0;
min-height:var(--tap-min);
line-height:var(--tap-min);
padding:0 28rpx;
border-radius:32rpx;
font-size:24rpx;
background:var(--color-primary-solid);
color:var(--color-text-inverse);
border:none;
min-width:var(--tap-min);}
.btn-primary::after {
border: none;
border:none;
}
.btn-like-back {
flex-shrink: 0;
height: 64rpx;
line-height: 64rpx;
padding: 0 28rpx;
border-radius: 32rpx;
font-size: 24rpx;
background: #FFF3F2;
color: #E96B6B;
border: 2rpx solid #E96B6B;
}
flex-shrink:0;
min-height:var(--tap-min);
line-height:var(--tap-min);
padding:0 28rpx;
border-radius:32rpx;
font-size:24rpx;
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;
border:none;
}
.btn-like-back.disabled {
opacity: 0.5;
opacity:0.5;
}
/* 等待回应状态 */
.status-waiting {
flex-shrink: 0;
font-size: 22rpx;
color: #E96B6B;
padding: 8rpx 16rpx;
background: #FFF3F2;
border-radius: 8rpx;
white-space: nowrap;
flex-shrink:0;
font-size:24rpx;
color:var(--color-primary-strong);
padding:8rpx 16rpx;
background:var(--color-primary-light);
border-radius:8rpx;
white-space:nowrap;
}
+40 -40
View File
@@ -1,70 +1,70 @@
/* 帮助中心样式 */
.page {
min-height: 100vh;
background: #f5f5f5;
display: flex;
flex-direction: column;
min-height:100vh;
background:var(--color-bg-subtle);
display:flex;
flex-direction:column;
}
.category-bar {
white-space: nowrap;
background: #fff;
padding: 0 24rpx;
border-bottom: 1rpx solid #f0f0f0;
flex-shrink: 0;
white-space:nowrap;
background:var(--color-bg-card);
padding:0 24rpx;
border-bottom:1rpx solid var(--color-divider);
flex-shrink:0;
}
.category-item {
display: inline-block;
padding: 24rpx 32rpx;
font-size: 28rpx;
color: #666;
border-bottom: 4rpx solid transparent;
display:inline-block;
padding:24rpx 32rpx;
font-size:28rpx;
color:var(--color-text-secondary);
border-bottom:4rpx solid transparent;
}
.category-item.active {
color: #E96B6B;
border-bottom-color: #E96B6B;
font-weight: 600;
color:var(--color-primary-strong);
border-bottom-color:var(--color-primary);
font-weight:600;
}
.faq-list {
flex: 1;
padding: 24rpx 32rpx;
flex:1;
padding:24rpx 32rpx;
}
.faq-item {
background: #fff;
border-radius: 16rpx;
margin-bottom: 24rpx;
padding: 28rpx 32rpx;
background:var(--color-bg-card);
border-radius:16rpx;
margin-bottom:24rpx;
padding:28rpx 32rpx;
}
.faq-question {
display: flex;
justify-content: space-between;
align-items: center;
font-size: 30rpx;
color: #2d2d2d;
font-weight: 500;
display:flex;
justify-content:space-between;
align-items:center;
font-size:30rpx;
color:var(--color-text-strong);
font-weight:500;
}
.faq-arrow {
font-size: 20rpx;
color: #ccc;
transition: transform 0.2s;
font-size:20rpx;
color:var(--color-text-disabled);
transition:transform 0.2s;
}
.faq-arrow.up {
transform: rotate(180deg);
color: #E96B6B;
transform:rotate(180deg);
color:var(--color-primary-strong);
}
.faq-answer {
margin-top: 20rpx;
padding-top: 20rpx;
border-top: 1rpx solid #f5f5f5;
font-size: 26rpx;
color: #666;
line-height: 1.7;
margin-top:20rpx;
padding-top:20rpx;
border-top:1rpx solid var(--color-divider);
font-size:26rpx;
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,200 +1,200 @@
/* U63 本地资格补充核验页 */
.page {
padding: 24rpx;
background: #FAFAF8;
min-height: 100vh;
padding-bottom: 120rpx;
padding:24rpx;
background:var(--color-bg-page);
min-height:100vh;
padding-bottom:120rpx;
}
.header {
background: #fff;
border-radius: 16rpx;
padding: 32rpx 24rpx;
margin-bottom: 24rpx;
background:var(--color-bg-card);
border-radius:16rpx;
padding:32rpx 24rpx;
margin-bottom:24rpx;
}
.title {
display: block;
font-size: 32rpx;
font-weight: 600;
color: #1a1a1a;
margin-bottom: 12rpx;
display:block;
font-size:32rpx;
font-weight:600;
color:var(--color-text-strong);
margin-bottom:12rpx;
}
.desc {
display: block;
font-size: 26rpx;
color: #666;
line-height: 1.6;
display:block;
font-size:26rpx;
color:var(--color-text-secondary);
line-height:1.6;
}
.type-tag {
background: #E8F5E9;
border-radius: 8rpx;
padding: 16rpx 20rpx;
margin-bottom: 24rpx;
background:var(--color-success-light);
border-radius:8rpx;
padding:16rpx 20rpx;
margin-bottom:24rpx;
}
.type-tag text {
font-size: 24rpx;
color: #2E7D32;
font-size:24rpx;
color:var(--color-success-strong);
}
.section {
background: #fff;
border-radius: 16rpx;
padding: 24rpx;
margin-bottom: 24rpx;
background:var(--color-bg-card);
border-radius:16rpx;
padding:24rpx;
margin-bottom:24rpx;
}
.section-title {
font-size: 28rpx;
font-weight: 600;
color: #1a1a1a;
margin-bottom: 20rpx;
display: block;
font-size:28rpx;
font-weight:600;
color:var(--color-text-strong);
margin-bottom:20rpx;
display:block;
}
.evidence-list {
display: flex;
flex-direction: column;
gap: 12rpx;
display:flex;
flex-direction:column;
gap:12rpx;
}
.evidence-card {
padding: 24rpx;
border-radius: 12rpx;
border: 2rpx solid #eee;
padding:24rpx;
border-radius:12rpx;
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;
margin-bottom: 4rpx;
display:block;
font-size:28rpx;
font-weight:500;
color:var(--color-text-primary);
margin-bottom:4rpx;
}
.evidence-desc {
display: block;
font-size: 22rpx;
color: #999;
display:block;
font-size:24rpx;
color:var(--color-text-tertiary);
}
.upload-area {
border: 2rpx dashed #ddd;
border-radius: 12rpx;
padding: 24rpx;
border:2rpx dashed var(--color-border-strong);
border-radius:12rpx;
padding:24rpx;
}
.upload-hint {
text-align: center;
margin-bottom: 16rpx;
text-align:center;
margin-bottom:16rpx;
}
.hint-text {
font-size: 22rpx;
color: #999;
font-size:24rpx;
color:var(--color-text-tertiary);
}
.image-grid {
display: flex;
flex-wrap: wrap;
gap: 16rpx;
display:flex;
flex-wrap:wrap;
gap:16rpx;
}
.image-item {
width: 160rpx;
height: 160rpx;
position: relative;
border-radius: 8rpx;
overflow: hidden;
width:160rpx;
height:160rpx;
position:relative;
border-radius:8rpx;
overflow:hidden;
}
.image-preview {
width: 100%;
height: 100%;
object-fit: cover;
width:100%;
height:100%;
object-fit:cover;
}
.image-remove {
position: absolute;
top: 4rpx;
right: 4rpx;
width: 36rpx;
height: 36rpx;
background: rgba(0,0,0,0.5);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
color: #fff;
font-size: 24rpx;
line-height: 1;
position:absolute;
top:4rpx;
right:4rpx;
width:36rpx;
height:36rpx;
background:rgba(0,0,0,0.5);
border-radius:50%;
display:flex;
align-items:center;
justify-content:center;
color:var(--color-text-inverse);
font-size:24rpx;
line-height:1;
}
.upload-btn {
width: 160rpx;
height: 160rpx;
border: 2rpx dashed #ccc;
border-radius: 8rpx;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
width:160rpx;
height:160rpx;
border:2rpx dashed var(--color-border-strong);
border-radius:8rpx;
display:flex;
flex-direction:column;
align-items:center;
justify-content:center;
}
.upload-icon {
font-size: 48rpx;
color: #ccc;
font-size:48rpx;
color:var(--color-text-disabled);
}
.upload-text {
font-size: 22rpx;
color: #999;
margin-top: 8rpx;
font-size:24rpx;
color:var(--color-text-tertiary);
margin-top:8rpx;
}
.privacy-note {
background: #F0F7FF;
border-radius: 8rpx;
padding: 16rpx 20rpx;
margin-bottom: 24rpx;
background:var(--color-info-light);
border-radius:8rpx;
padding:16rpx 20rpx;
margin-bottom:24rpx;
}
.note-text {
font-size: 24rpx;
color: #1976D2;
font-size:24rpx;
color:var(--color-info-strong);
}
.action-bar {
position: fixed;
bottom: 0;
left: 0;
right: 0;
padding: 16rpx 24rpx;
background: #fff;
box-shadow: 0 -2rpx 12rpx rgba(0,0,0,0.05);
padding-bottom: calc(16rpx + env(safe-area-inset-bottom));
position:fixed;
bottom:0;
left:0;
right:0;
padding:16rpx 24rpx;
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));
}
.btn-primary {
width: 100%;
height: 88rpx;
line-height: 88rpx;
background: #E96B6B;
color: #fff;
border-radius: 12rpx;
font-size: 30rpx;
font-weight: 500;
border: none;
width:100%;
height:88rpx;
line-height:88rpx;
background:var(--color-primary-solid);
color:var(--color-text-inverse);
border-radius:12rpx;
font-size:30rpx;
font-weight:500;
border:none;
}
.btn-primary:disabled {
background: #ccc;
background:var(--color-bg-muted);
}
@@ -1,105 +1,105 @@
/* U62 本地资格说明页 */
.page {
padding: 24rpx;
background: #FAFAF8;
min-height: 100vh;
padding:24rpx;
background:var(--color-bg-page);
min-height:100vh;
}
.header {
background: #fff;
border-radius: 16rpx;
padding: 32rpx 24rpx;
margin-bottom: 24rpx;
background:var(--color-bg-card);
border-radius:16rpx;
padding:32rpx 24rpx;
margin-bottom:24rpx;
}
.title {
display: block;
font-size: 32rpx;
font-weight: 600;
color: #1a1a1a;
margin-bottom: 16rpx;
display:block;
font-size:32rpx;
font-weight:600;
color:var(--color-text-strong);
margin-bottom:16rpx;
}
.desc {
display: block;
font-size: 26rpx;
color: #666;
line-height: 1.6;
display:block;
font-size:26rpx;
color:var(--color-text-secondary);
line-height:1.6;
}
.section {
background: #fff;
border-radius: 16rpx;
padding: 24rpx;
margin-bottom: 24rpx;
background:var(--color-bg-card);
border-radius:16rpx;
padding:24rpx;
margin-bottom:24rpx;
}
.section-title {
font-size: 28rpx;
font-weight: 600;
color: #1a1a1a;
margin-bottom: 20rpx;
display: block;
font-size:28rpx;
font-weight:600;
color:var(--color-text-strong);
margin-bottom:20rpx;
display:block;
}
.type-list {
display: flex;
flex-wrap: wrap;
gap: 16rpx;
display:flex;
flex-wrap:wrap;
gap:16rpx;
}
.type-card {
width: calc(50% - 8rpx);
background: #F7F8FA;
border-radius: 12rpx;
padding: 28rpx 16rpx;
text-align: center;
border: 2rpx solid transparent;
width:calc(50% - 8rpx);
background:var(--color-bg-subtle);
border-radius:12rpx;
padding:28rpx 16rpx;
text-align:center;
border:2rpx solid transparent;
}
.type-card:active {
border-color: #E96B6B;
background: #FFF5F5;
border-color:var(--color-primary);
background:var(--color-primary-light);
}
.type-icon {
font-size: 40rpx;
display: block;
margin-bottom: 8rpx;
font-size:40rpx;
display:block;
margin-bottom:8rpx;
}
.type-label {
font-size: 26rpx;
color: #333;
font-weight: 500;
font-size:26rpx;
color:var(--color-text-primary);
font-weight:500;
}
.notice {
background: #FFF9E6;
border-radius: 12rpx;
padding: 20rpx 24rpx;
margin-bottom: 24rpx;
background:var(--color-warning-light);
border-radius:12rpx;
padding:20rpx 24rpx;
margin-bottom:24rpx;
}
.notice-text {
font-size: 24rpx;
color: #8B6914;
line-height: 1.5;
font-size:24rpx;
color:var(--color-warning-strong);
line-height:1.5;
}
.action-bar {
margin-top: 32rpx;
padding-bottom: 48rpx;
margin-top:32rpx;
padding-bottom:48rpx;
}
.btn-secondary {
width: 100%;
height: 88rpx;
line-height: 88rpx;
background: #fff;
color: #E96B6B;
border: 2rpx solid #E96B6B;
border-radius: 12rpx;
font-size: 28rpx;
font-weight: 500;
width:100%;
height:88rpx;
line-height:88rpx;
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;
}
+39 -39
View File
@@ -1,75 +1,75 @@
/* 登录页样式 */
.page {
min-height: 100vh;
display: flex;
flex-direction: column;
background: linear-gradient(180deg, #FFF5F5 0%, #FFFFFF 60%);
padding: 0 48rpx;
min-height:100vh;
display:flex;
flex-direction:column;
background:linear-gradient(180deg, var(--color-primary-light) 0%, var(--color-bg-card) 60%);
padding:0 48rpx;
}
.logo-area {
flex: 1;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding-top: 160rpx;
flex:1;
display:flex;
flex-direction:column;
align-items:center;
justify-content:center;
padding-top:160rpx;
}
.logo-icon {
font-size: 120rpx;
margin-bottom: 24rpx;
font-size:120rpx;
margin-bottom:24rpx;
}
.brand-name {
font-size: 44rpx;
font-weight: 700;
color: #2D2D2D;
margin-bottom: 12rpx;
font-size:44rpx;
font-weight:700;
color:var(--color-text-strong);
margin-bottom:12rpx;
}
.slogan {
font-size: 28rpx;
color: #999;
font-size:28rpx;
color:var(--color-text-tertiary);
}
.login-content {
padding-bottom: 80rpx;
padding-bottom:80rpx;
}
.login-btn {
width: 100%;
height: 96rpx;
line-height: 96rpx;
background: #E96B6B;
color: #fff;
font-size: 32rpx;
font-weight: 600;
border-radius: 48rpx;
border: none;
width:100%;
height:96rpx;
line-height:96rpx;
background:var(--color-primary-solid);
color:var(--color-text-inverse);
font-size:32rpx;
font-weight:600;
border-radius:48rpx;
border:none;
}
.login-btn.loading {
opacity: 0.7;
opacity:0.7;
}
.login-hint {
margin-top: 24rpx;
text-align: center;
margin-top:24rpx;
text-align:center;
}
.error-text {
font-size: 26rpx;
color: #e74c3c;
font-size:26rpx;
color:var(--color-danger-strong);
}
.login-agreement {
margin-top: 48rpx;
text-align: center;
font-size: 22rpx;
color: #bbb;
margin-top:48rpx;
text-align:center;
font-size:24rpx;
color:var(--color-text-disabled);
}
.login-agreement .link {
color: #E96B6B;
color:var(--color-primary-strong);
}
@@ -1,82 +1,82 @@
.page {
padding: 32rpx;
background: #FFF8F7;
min-height: 100vh;
padding:32rpx;
background:var(--color-primary-lighter);
min-height:100vh;
}
.section {
background: #fff;
border-radius: 24rpx;
padding: 32rpx;
margin-bottom: 24rpx;
background:var(--color-bg-card);
border-radius:24rpx;
padding:32rpx;
margin-bottom:24rpx;
}
.section-title {
font-size: 30rpx;
font-weight: bold;
color: #1A1A1A;
margin-bottom: 24rpx;
display: block;
font-size:30rpx;
font-weight:bold;
color:var(--color-text-strong);
margin-bottom:24rpx;
display:block;
}
.type-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 16rpx;
display:grid;
grid-template-columns:1fr 1fr;
gap:16rpx;
}
.type-item {
display: flex;
flex-direction: column;
align-items: center;
padding: 28rpx 16rpx;
border-radius: 16rpx;
background: #F8F8F8;
border: 2rpx solid transparent;
transition: all 0.2s;
display:flex;
flex-direction:column;
align-items:center;
padding:28rpx 16rpx;
border-radius:16rpx;
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 {
font-size: 48rpx;
margin-bottom: 12rpx;
font-size:48rpx;
margin-bottom:12rpx;
}
.type-name {
font-size: 24rpx;
color: #333;
text-align: center;
line-height: 1.4;
font-size:24rpx;
color:var(--color-text-primary);
text-align:center;
line-height:1.4;
}
.textarea {
width: 100%;
height: 200rpx;
background: #F8F8F8;
border-radius: 16rpx;
padding: 20rpx;
font-size: 28rpx;
box-sizing: border-box;
width:100%;
height:200rpx;
background:var(--color-bg-subtle);
border-radius:16rpx;
padding:20rpx;
font-size:28rpx;
box-sizing:border-box;
}
.char-count {
display: block;
text-align: right;
font-size: 22rpx;
color: #999;
margin-top: 8rpx;
display:block;
text-align:right;
font-size:22rpx;
color:var(--color-text-tertiary);
margin-top:8rpx;
}
.submit-btn {
background: #E96B6B;
color: #fff;
border-radius: 44rpx;
height: 88rpx;
line-height: 88rpx;
font-size: 32rpx;
margin-top: 40rpx;
background:var(--color-primary-solid);
color:var(--color-text-inverse);
border-radius:44rpx;
height:88rpx;
line-height:88rpx;
font-size:32rpx;
margin-top:40rpx;
}
@@ -1,115 +1,115 @@
/* 红娘工作台登录页样式 */
.page {
min-height: 100vh;
background: linear-gradient(180deg, #E96B6B 0%, #ff9a9a 100%);
display: flex;
flex-direction: column;
padding: 0 48rpx;
min-height:100vh;
background:linear-gradient(180deg, var(--color-primary) 0%, var(--color-primary-light) 100%);
display:flex;
flex-direction:column;
padding:0 48rpx;
}
.header {
flex: 1;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 120rpx 0;
flex:1;
display:flex;
flex-direction:column;
align-items:center;
justify-content:center;
padding:120rpx 0;
}
.logo {
font-size: 120rpx;
margin-bottom: 24rpx;
font-size:120rpx;
margin-bottom:24rpx;
}
.title {
font-size: 40rpx;
font-weight: 700;
color: #fff;
margin-bottom: 12rpx;
font-size:40rpx;
font-weight:700;
color:var(--color-text-inverse);
margin-bottom:12rpx;
}
.subtitle {
font-size: 28rpx;
color: rgba(255, 255, 255, 0.8);
background: rgba(255, 255, 255, 0.2);
padding: 8rpx 32rpx;
border-radius: 20rpx;
font-size:28rpx;
color:rgba(255, 255, 255, 0.8);
background:rgba(255, 255, 255, 0.2);
padding:8rpx 32rpx;
border-radius:20rpx;
}
.form {
background: #fff;
border-radius: 32rpx 32rpx 0 0;
padding: 64rpx 48rpx;
background:var(--color-bg-card);
border-radius:32rpx 32rpx 0 0;
padding:64rpx 48rpx;
}
.input-group {
margin-bottom: 40rpx;
margin-bottom:40rpx;
}
.label {
display: block;
font-size: 28rpx;
color: #333;
margin-bottom: 16rpx;
font-weight: 500;
display:block;
font-size:28rpx;
color:var(--color-text-primary);
margin-bottom:16rpx;
font-weight:500;
}
.input {
width: 100%;
height: 88rpx;
border: 2rpx solid #e0e0e0;
border-radius: 16rpx;
padding: 0 24rpx;
font-size: 32rpx;
box-sizing: border-box;
width:100%;
height:88rpx;
border:2rpx solid var(--color-border-strong);
border-radius:16rpx;
padding:0 24rpx;
font-size:32rpx;
box-sizing:border-box;
}
.input:focus {
border-color: #E96B6B;
border-color:var(--color-primary);
}
.error-tip {
background: #fff2f0;
border: 1rpx solid #ffccc7;
border-radius: 8rpx;
padding: 16rpx 24rpx;
margin-bottom: 32rpx;
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;
font-size: 26rpx;
color:var(--color-danger-strong);
font-size:26rpx;
}
.login-btn {
width: 100%;
height: 96rpx;
line-height: 96rpx;
background: #E96B6B;
color: #fff;
font-size: 32rpx;
font-weight: 600;
border-radius: 48rpx;
border: none;
width:100%;
height:96rpx;
line-height:96rpx;
background:var(--color-primary-solid);
color:var(--color-text-inverse);
font-size:32rpx;
font-weight:600;
border-radius:48rpx;
border:none;
}
.login-btn[disabled] {
opacity: 0.6;
opacity:0.6;
}
.footer-link {
text-align: center;
margin-top: 32rpx;
text-align:center;
margin-top:32rpx;
}
.footer-link text {
color: #999;
font-size: 26rpx;
color:var(--color-text-tertiary);
font-size:26rpx;
}
.hint {
text-align: center;
padding: 40rpx;
color: rgba(255, 255, 255, 0.7);
font-size: 24rpx;
text-align:center;
padding:40rpx;
color:rgba(255, 255, 255, 0.7);
font-size:24rpx;
}
@@ -1,142 +1,142 @@
.page {
padding: 32rpx;
background: #FFF8F7;
min-height: 100vh;
padding:32rpx;
background:var(--color-primary-lighter);
min-height:100vh;
}
.status-card {
display: flex;
align-items: center;
gap: 16rpx;
background: #fff;
border-radius: 24rpx;
padding: 32rpx;
margin-bottom: 24rpx;
display:flex;
align-items:center;
gap:16rpx;
background:var(--color-bg-card);
border-radius:24rpx;
padding:32rpx;
margin-bottom:24rpx;
}
.status-dot {
width: 20rpx;
height: 20rpx;
border-radius: 50%;
flex-shrink: 0;
width:20rpx;
height:20rpx;
border-radius:50%;
flex-shrink:0;
}
.status-text {
font-size: 32rpx;
font-weight: bold;
color: #1A1A1A;
font-size:32rpx;
font-weight:bold;
color:var(--color-text-strong);
}
.info-card {
background: #fff;
border-radius: 24rpx;
padding: 32rpx;
margin-bottom: 24rpx;
background:var(--color-bg-card);
border-radius:24rpx;
padding:32rpx;
margin-bottom:24rpx;
}
.info-row {
display: flex;
justify-content: space-between;
padding: 16rpx 0;
border-bottom: 1rpx solid #f5f5f5;
display:flex;
justify-content:space-between;
padding:16rpx 0;
border-bottom:1rpx solid var(--color-divider);
}
.info-row:last-child {
border-bottom: none;
border-bottom:none;
}
.info-label {
font-size: 26rpx;
color: #999;
font-size:26rpx;
color:var(--color-text-tertiary);
}
.info-value {
font-size: 26rpx;
color: #333;
text-align: right;
max-width: 55%;
font-size:26rpx;
color:var(--color-text-primary);
text-align:right;
max-width:55%;
}
.info-value.desc {
text-align: right;
line-height: 1.6;
text-align:right;
line-height:1.6;
}
.notice {
background: #fff;
border-radius: 24rpx;
padding: 32rpx;
background:var(--color-bg-card);
border-radius:24rpx;
padding:32rpx;
}
.notice-title {
font-size: 28rpx;
font-weight: bold;
color: #333;
margin-bottom: 24rpx;
display: block;
font-size:28rpx;
font-weight:bold;
color:var(--color-text-primary);
margin-bottom:24rpx;
display:block;
}
.steps {
display: flex;
justify-content: space-between;
display:flex;
justify-content:space-between;
}
.step {
display: flex;
flex-direction: column;
align-items: center;
gap: 8rpx;
display:flex;
flex-direction:column;
align-items:center;
gap:8rpx;
}
.step-num {
width: 48rpx;
height: 48rpx;
border-radius: 50%;
background: #EEE;
color: #999;
display: flex;
align-items: center;
justify-content: center;
font-size: 24rpx;
width:48rpx;
height:48rpx;
border-radius:50%;
background:var(--color-bg-subtle);
color:var(--color-text-tertiary);
display:flex;
align-items:center;
justify-content:center;
font-size:24rpx;
}
.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 {
text-align: center;
padding: 120rpx 40rpx;
text-align:center;
padding:120rpx 40rpx;
}
.empty-desc {
display: block;
font-size: 26rpx;
color: #999;
margin: 16rpx 0 40rpx;
display:block;
font-size:26rpx;
color:var(--color-text-tertiary);
margin:16rpx 0 40rpx;
}
.btn-apply {
background: #E96B6B;
color: #fff;
border-radius: 44rpx;
height: 88rpx;
line-height: 88rpx;
font-size: 30rpx;
background:var(--color-primary-solid);
color:var(--color-text-inverse);
border-radius:44rpx;
height:88rpx;
line-height:88rpx;
font-size:30rpx;
}
.loading {
text-align: center;
padding: 120rpx;
color: #999;
text-align:center;
padding:120rpx;
color:var(--color-text-tertiary);
}
@@ -1,266 +1,266 @@
/* 页面容器 */
.page {
min-height: 100vh;
background: #f5f6fa;
min-height:100vh;
background:var(--color-bg-subtle);
}
/* 欢迎区 */
.header {
background: linear-gradient(135deg, #E96B6B 0%, #ff9a9a 100%);
padding: 48rpx 32rpx 60rpx;
color: #fff;
position: relative;
background:linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-light) 100%);
padding:48rpx 32rpx 60rpx;
color:var(--color-text-inverse);
position:relative;
}
.header-top {
display: flex;
align-items: center;
gap: 24rpx;
display:flex;
align-items:center;
gap:24rpx;
}
.avatar {
width: 88rpx;
height: 88rpx;
background: rgba(255,255,255,0.25);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 44rpx;
width:88rpx;
height:88rpx;
background:rgba(255,255,255,0.25);
border-radius:50%;
display:flex;
align-items:center;
justify-content:center;
font-size:44rpx;
}
.greeting {
font-size: 38rpx;
font-weight: 700;
margin-bottom: 6rpx;
font-size:38rpx;
font-weight:700;
margin-bottom:6rpx;
}
.date {
font-size: 24rpx;
opacity: 0.85;
font-size:24rpx;
opacity:0.85;
}
.header-badge {
margin: 12rpx 0 0 112rpx;
background: rgba(255,255,255,0.25);
padding: 6rpx 20rpx;
border-radius: 20rpx;
font-size: 22rpx;
color: #fff;
display: inline-block;
background: rgba(255,255,255,0.2);
padding: 8rpx 24rpx;
border-radius: 24rpx;
font-size: 22rpx;
margin:12rpx 0 0 112rpx;
background:rgba(255,255,255,0.25);
padding:6rpx 20rpx;
border-radius:20rpx;
font-size:22rpx;
color:var(--color-text-inverse);
display:inline-block;
background:rgba(255,255,255,0.2);
padding:8rpx 24rpx;
border-radius:24rpx;
font-size:22rpx;
}
/* 数据概览 - 2x2 网格 */
.stats-container {
display: flex;
flex-wrap: wrap;
padding: 0 24rpx;
margin-top: 24rpx;
position: relative;
z-index: 10;
display:flex;
flex-wrap:wrap;
padding:0 24rpx;
margin-top:24rpx;
position:relative;
z-index:10;
}
.stat-card {
width: calc(50% - 16rpx);
margin: 0 8rpx 24rpx 8rpx;
background: #fff;
border-radius: 24rpx;
padding: 40rpx 20rpx;
text-align: center;
box-shadow: 0 8rpx 32rpx rgba(0,0,0,0.1);
box-sizing: border-box;
width:calc(50% - 16rpx);
margin:0 8rpx 24rpx 8rpx;
background:var(--color-bg-card);
border-radius:24rpx;
padding:40rpx 20rpx;
text-align:center;
box-shadow:0 8rpx 32rpx rgba(0,0,0,0.1);
box-sizing:border-box;
}
.stat-icon {
font-size: 48rpx;
margin-bottom: 16rpx;
font-size:48rpx;
margin-bottom:16rpx;
}
.stat-value {
font-size: 56rpx;
font-weight: 700;
color: #1a1a1a;
line-height: 1.2;
margin-bottom: 8rpx;
font-size:56rpx;
font-weight:700;
color:var(--color-text-strong);
line-height:1.2;
margin-bottom:8rpx;
}
.stat-label {
font-size: 26rpx;
color: #999;
font-size:26rpx;
color:var(--color-text-tertiary);
}
/* 列表区块 */
.section {
margin: 0 24rpx 24rpx;
background: #fff;
border-radius: 24rpx;
padding: 32rpx;
box-shadow: 0 2rpx 12rpx rgba(0,0,0,0.04);
margin:0 24rpx 24rpx;
background:var(--color-bg-card);
border-radius:24rpx;
padding:32rpx;
box-shadow:0 2rpx 12rpx rgba(0,0,0,0.04);
}
.section-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 24rpx;
display:flex;
justify-content:space-between;
align-items:center;
margin-bottom:24rpx;
}
.section-title-wrap {
display: flex;
align-items: center;
gap: 12rpx;
display:flex;
align-items:center;
gap:12rpx;
}
.section-dot {
width: 6rpx;
height: 28rpx;
background: linear-gradient(180deg, #E96B6B 0%, #ff9a9a 100%);
border-radius: 3rpx;
width:6rpx;
height:28rpx;
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;
font-size:30rpx;
font-weight:600;
color:var(--color-text-strong);
}
.section-count {
font-size: 22rpx;
color: #999;
background: #f5f5f5;
padding: 4rpx 14rpx;
border-radius: 12rpx;
font-size:22rpx;
color:var(--color-text-tertiary);
background:var(--color-bg-subtle);
padding:4rpx 14rpx;
border-radius:12rpx;
}
/* 服务列表 */
.service-list {
display: flex;
flex-direction: column;
gap: 16rpx;
display:flex;
flex-direction:column;
gap:16rpx;
}
.service-card {
display: flex;
align-items: center;
justify-content: space-between;
padding: 24rpx;
background: #fafafa;
border-radius: 16rpx;
border: 1rpx solid #f0f0f0;
display:flex;
align-items:center;
justify-content:space-between;
padding:24rpx;
background:var(--color-bg-subtle);
border-radius:16rpx;
border:1rpx solid var(--color-divider);
}
.service-left {
flex: 1;
min-width: 0;
margin-right: 20rpx;
flex:1;
min-width:0;
margin-right:20rpx;
}
.service-header {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 8rpx;
display:flex;
align-items:center;
justify-content:space-between;
margin-bottom:8rpx;
}
.service-tag {
font-size: 24rpx;
font-weight: 600;
color: #E96B6B;
background: rgba(233, 107, 107, 0.08);
padding: 4rpx 12rpx;
border-radius: 6rpx;
font-size:24rpx;
font-weight:600;
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;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
font-size:26rpx;
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;
font-size: 24rpx;
font-weight: 600;
padding: 12rpx 32rpx;
border-radius: 24rpx;
border: none;
box-shadow: 0 4rpx 12rpx rgba(233, 107, 107, 0.25);
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;
border-radius:24rpx;
border:none;
box-shadow:0 4rpx 12rpx rgba(233, 107, 107, 0.25);
}
/* 空状态 */
.empty-state {
text-align: center;
padding: 80rpx 40rpx;
text-align:center;
padding:80rpx 40rpx;
}
.empty-illustration {
font-size: 88rpx;
margin-bottom: 16rpx;
opacity: 0.5;
font-size:88rpx;
margin-bottom:16rpx;
opacity:0.5;
}
.empty-text {
font-size: 26rpx;
color: #999;
margin-bottom: 6rpx;
font-size:26rpx;
color:var(--color-text-tertiary);
margin-bottom:6rpx;
}
.empty-hint {
font-size: 22rpx;
color: #ccc;
font-size:24rpx;
color:var(--color-text-disabled);
}
/* 加载中 */
.loading-wrap {
display: flex;
flex-direction: column;
align-items: center;
padding: 120rpx 0;
gap: 20rpx;
display:flex;
flex-direction:column;
align-items:center;
padding:120rpx 0;
gap:20rpx;
}
.loading-spinner {
width: 44rpx;
height: 44rpx;
border: 4rpx solid #f0f0f0;
border-top-color: #E96B6B;
border-radius: 50%;
animation: spin 0.8s linear infinite;
width:44rpx;
height:44rpx;
border:4rpx solid var(--color-divider);
border-top-color:var(--color-primary);
border-radius:50%;
animation:spin 0.8s linear infinite;
}
@keyframes spin {
to { transform: rotate(360deg); }
to { transform:rotate(360deg); }
}
.loading-text {
font-size: 24rpx;
color: #999;
font-size:24rpx;
color:var(--color-text-tertiary);
}
/* 底部退出 */
.footer {
padding: 40rpx 32rpx 20rpx;
padding:40rpx 32rpx 20rpx;
}
.logout-btn {
width: 100%;
height: 84rpx;
line-height: 84rpx;
background: #fff;
color: #999;
font-size: 28rpx;
border-radius: 42rpx;
border: 2rpx solid #e8e8e8;
}
width:100%;
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 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)}
+46 -46
View File
@@ -1,79 +1,79 @@
.page {
min-height: 100vh;
background: #f4f5fa;
min-height:100vh;
background:var(--color-bg-page);
}
.messages-hero {
padding: env(safe-area-inset-top) 24rpx 34rpx;
border-radius: 0 0 36rpx 36rpx;
background: linear-gradient(160deg, var(--mini-night-start), var(--mini-night-end));
box-shadow: var(--mini-shadow);
padding:env(safe-area-inset-top) 24rpx 34rpx;
border-radius:0 0 36rpx 36rpx;
background:linear-gradient(160deg, var(--mini-night-start), var(--mini-night-end));
box-shadow:var(--mini-shadow);
}
.messages-nav {
position: relative;
display: flex;
align-items: center;
justify-content: center;
height: 88rpx;
position:relative;
display:flex;
align-items:center;
justify-content:center;
height:88rpx;
}
.messages-title {
color: #fff;
font-size: 31rpx;
font-weight: 700;
color:var(--color-text-inverse);
font-size:31rpx;
font-weight:700;
}
.messages-search {
position: absolute;
right: 14rpx;
width: 34rpx;
height: 34rpx;
position:absolute;
right:14rpx;
width:34rpx;
height:34rpx;
}
.message-shortcuts {
display: grid;
grid-template-columns: repeat(4, 1fr);
padding: 22rpx 8rpx 4rpx;
display:grid;
grid-template-columns:repeat(4, 1fr);
padding:22rpx 8rpx 4rpx;
}
.message-shortcut {
display: flex;
flex-direction: column;
align-items: center;
color: rgba(255, 255, 255, .88);
font-size: 20rpx;
display:flex;
flex-direction:column;
align-items:center;
color:rgba(255, 255, 255, .88);
font-size:24rpx;
}
.shortcut-icon {
display: flex;
align-items: center;
justify-content: center;
width: 72rpx;
height: 72rpx;
margin-bottom: 12rpx;
border: 1rpx solid rgba(255, 255, 255, .2);
border-radius: 26rpx;
display:flex;
align-items:center;
justify-content:center;
width:72rpx;
height:72rpx;
margin-bottom:12rpx;
border:1rpx solid rgba(255, 255, 255, .2);
border-radius:26rpx;
}
.shortcut-icon image {
width: 45rpx;
height: 45rpx;
width:45rpx;
height:45rpx;
}
.shortcut-icon--blue { background: rgba(79, 139, 255, .28); }
.shortcut-icon--pink { background: rgba(255, 92, 130, .28); }
.shortcut-icon--purple { background: rgba(154, 107, 255, .28); }
.shortcut-icon--coral { background: rgba(240, 106, 100, .28); }
.shortcut-icon--blue { background:rgba(79, 139, 255, .28); }
.shortcut-icon--pink { background:rgba(255, 92, 130, .28); }
.shortcut-icon--purple { background:rgba(154, 107, 255, .28); }
.shortcut-icon--coral { background:rgba(240, 106, 100, .28); }
.messages-content {
padding: 16rpx 24rpx 40rpx;
padding:16rpx 24rpx 40rpx;
}
.conversation-list {
overflow: hidden;
margin-top: 8rpx;
border-radius: 28rpx;
background: #fff;
box-shadow: 0 10rpx 32rpx rgba(34, 35, 91, .08);
overflow:hidden;
margin-top:8rpx;
border-radius:28rpx;
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;}
+19 -19
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); }
.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-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; }
.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-footer { display: flex; justify-content: space-between; align-items: center; }
.card-date { font-size: 24rpx; color: #bbb; }
.arrow { font-size: 28rpx; color: #ccc; }
.container { padding:24rpx; }
.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:var(--color-text-primary); }
.card-status { font-size:24rpx; padding:4rpx 16rpx; border-radius:20rpx; }
.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: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:var(--color-text-disabled); }
.arrow { font-size:28rpx; color:var(--color-text-disabled); }
+54 -54
View File
@@ -1,94 +1,94 @@
.page {
padding: 32rpx;
background: #FFF8F7;
min-height: 100vh;
padding:32rpx;
background:var(--color-primary-lighter);
min-height:100vh;
}
.header {
text-align: center;
margin-bottom: 32rpx;
text-align:center;
margin-bottom:32rpx;
}
.title {
font-size: 36rpx;
font-weight: bold;
color: #1A1A1A;
font-size:36rpx;
font-weight:bold;
color:var(--color-text-strong);
}
.loading-state, .empty-state {
text-align: center;
padding: 100rpx 32rpx;
color: #999;
text-align:center;
padding:100rpx 32rpx;
color:var(--color-text-tertiary);
}
.empty-icon {
font-size: 80rpx;
display: block;
margin-bottom: 24rpx;
font-size:80rpx;
display:block;
margin-bottom:24rpx;
}
.report-list {
display: flex;
flex-direction: column;
gap: 20rpx;
display:flex;
flex-direction:column;
gap:20rpx;
}
.report-card {
background: #fff;
border-radius: 20rpx;
padding: 24rpx;
box-shadow: 0 2rpx 12rpx rgba(0,0,0,0.04);
background:var(--color-bg-card);
border-radius:20rpx;
padding:24rpx;
box-shadow:0 2rpx 12rpx rgba(0,0,0,0.04);
}
.card-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 12rpx;
display:flex;
justify-content:space-between;
align-items:center;
margin-bottom:12rpx;
}
.reason {
font-size: 28rpx;
font-weight: bold;
color: #1A1A1A;
font-size:28rpx;
font-weight:bold;
color:var(--color-text-strong);
}
.status-tag {
font-size: 22rpx;
padding: 4rpx 16rpx;
border-radius: 12rpx;
background: #FFF3F2;
color: #E96B6B;
font-size:24rpx;
padding:4rpx 16rpx;
border-radius:12rpx;
background:var(--color-primary-light);
color:var(--color-primary-strong);
}
.desc {
font-size: 26rpx;
color: #666;
display: block;
margin-bottom: 12rpx;
line-height: 1.5;
font-size:26rpx;
color:var(--color-text-secondary);
display:block;
margin-bottom:12rpx;
line-height:1.5;
}
.time {
font-size: 22rpx;
color: #BBB;
display: block;
font-size:24rpx;
color:var(--color-text-disabled);
display:block;
}
.result {
font-size: 24rpx;
color: #E59A32;
display: block;
margin-top: 8rpx;
font-size:24rpx;
color:var(--color-warning-strong);
display:block;
margin-top:8rpx;
}
.btn-refresh {
margin-top: 32rpx;
background: transparent;
color: #999;
border: 1rpx solid #DDD;
border-radius: 44rpx;
height: 72rpx;
line-height: 72rpx;
font-size: 26rpx;
}
margin-top:32rpx;
background:transparent;
color:var(--color-text-tertiary);
border:1rpx solid var(--color-border-strong);
border-radius:44rpx;
min-height:var(--tap-min);
line-height:var(--tap-min);
font-size:26rpx;
min-width:var(--tap-min);}
+70 -70
View File
@@ -1,127 +1,127 @@
.page {
min-height: 100vh;
background: #FFF8F7;
min-height:100vh;
background:var(--color-primary-lighter);
}
.header {
display: flex;
align-items: center;
justify-content: space-between;
padding: 32rpx;
background: #fff;
border-bottom: 1rpx solid #f0f0f0;
display:flex;
align-items:center;
justify-content:space-between;
padding:32rpx;
background:var(--color-bg-card);
border-bottom:1rpx solid var(--color-divider);
}
.title {
font-size: 36rpx;
font-weight: bold;
color: #1A1A1A;
font-size:36rpx;
font-weight:bold;
color:var(--color-text-strong);
}
.unread-badge {
font-size: 24rpx;
color: #E96B6B;
padding: 8rpx 16rpx;
background: #FFF3F2;
border-radius: 20rpx;
font-size:24rpx;
color:var(--color-primary-strong);
padding:8rpx 16rpx;
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 {
height: calc(100vh - 120rpx);
height:calc(100vh - 120rpx);
}
.notif-item {
display: flex;
align-items: flex-start;
padding: 28rpx 32rpx;
background: #fff;
border-bottom: 1rpx solid #f5f5f5;
gap: 16rpx;
display:flex;
align-items:flex-start;
padding:28rpx 32rpx;
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;
flex-shrink: 0;
margin-top: 12rpx;
width:12rpx;
height:12rpx;
border-radius:50%;
background:var(--color-primary);
flex-shrink:0;
margin-top:12rpx;
}
.notif-content {
flex: 1;
min-width: 0;
flex:1;
min-width:0;
}
.notif-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 8rpx;
display:flex;
justify-content:space-between;
align-items:center;
margin-bottom:8rpx;
}
.notif-title {
font-size: 28rpx;
font-weight: bold;
color: #1A1A1A;
font-size:28rpx;
font-weight:bold;
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;
line-height: 1.6;
margin-bottom: 12rpx;
font-size:24rpx;
color:var(--color-text-secondary);
line-height:1.6;
margin-bottom:12rpx;
}
.notif-type-tag {
display: inline-block;
font-size: 20rpx;
padding: 4rpx 12rpx;
border-radius: 12rpx;
background: #F5F5F5;
color: #999;
display:inline-block;
font-size:24rpx;
padding:4rpx 12rpx;
border-radius:12rpx;
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;
padding: 120rpx 40rpx;
text-align:center;
padding:120rpx 40rpx;
}
.empty-img {
width: 160rpx;
height: 160rpx;
margin-bottom: 24rpx;
opacity: 0.5;
width:160rpx;
height:160rpx;
margin-bottom:24rpx;
opacity:0.5;
}
.empty-text {
display: block;
font-size: 28rpx;
color: #999;
display:block;
font-size:28rpx;
color:var(--color-text-tertiary);
}
.loading {
text-align: center;
padding: 40rpx;
color: #999;
text-align:center;
padding:40rpx;
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-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; }
.container { padding:24rpx; }
.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: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,62 +1,62 @@
.page {
padding: 32rpx;
background: #FFF8F7;
min-height: 100vh;
padding:32rpx;
background:var(--color-primary-lighter);
min-height:100vh;
}
.header {
text-align: center;
margin-bottom: 32rpx;
text-align:center;
margin-bottom:32rpx;
}
.title {
font-size: 36rpx;
font-weight: bold;
color: #1A1A1A;
font-size:36rpx;
font-weight:bold;
color:var(--color-text-strong);
}
.section {
background: #fff;
border-radius: 20rpx;
overflow: hidden;
margin-bottom: 32rpx;
background:var(--color-bg-card);
border-radius:20rpx;
overflow:hidden;
margin-bottom:32rpx;
}
.setting-item {
display: flex;
align-items: center;
justify-content: space-between;
padding: 32rpx 28rpx;
border-bottom: 1rpx solid #f5f5f5;
display:flex;
align-items:center;
justify-content:space-between;
padding:32rpx 28rpx;
border-bottom:1rpx solid var(--color-divider);
}
.setting-item:last-child { border-bottom: none; }
.setting-item:last-child { border-bottom:none; }
.setting-info {
flex: 1;
margin-right: 20rpx;
flex:1;
margin-right:20rpx;
}
.setting-name {
font-size: 28rpx;
font-weight: bold;
color: #1A1A1A;
display: block;
font-size:28rpx;
font-weight:bold;
color:var(--color-text-strong);
display:block;
}
.setting-desc {
font-size: 22rpx;
color: #999;
display: block;
margin-top: 8rpx;
font-size:24rpx;
color:var(--color-text-tertiary);
display:block;
margin-top:8rpx;
}
.btn-save {
width: 100%;
height: 88rpx;
line-height: 88rpx;
background: #E96B6B;
color: #fff;
border-radius: 44rpx;
font-size: 30rpx;
width:100%;
height:88rpx;
line-height:88rpx;
background:var(--color-primary-solid);
color:var(--color-text-inverse);
border-radius:44rpx;
font-size:30rpx;
}
+47 -47
View File
@@ -3,99 +3,99 @@
*/
.pb-page {
min-height: 100vh;
background: var(--color-bg-page);
padding-bottom: calc(160rpx + env(safe-area-inset-bottom));
min-height:100vh;
background:var(--color-bg-page);
padding-bottom:calc(160rpx + env(safe-area-inset-bottom));
}
.pb-body {
padding: var(--spacing-2) var(--spacing-page-x);
padding:var(--spacing-2) var(--spacing-page-x);
}
.pb-section {
margin-bottom: var(--spacing-3);
margin-bottom:var(--spacing-3);
}
/* ============ 只读区 ============ */
.pb-readonly {
margin-top: var(--spacing-2);
margin-top:var(--spacing-2);
}
.pb-row {
display: flex;
justify-content: space-between;
align-items: center;
padding: var(--spacing-3) 0;
border-bottom: var(--border-width) solid var(--color-divider);
display:flex;
justify-content:space-between;
align-items:center;
padding:var(--spacing-3) 0;
border-bottom:var(--border-width) solid var(--color-divider);
}
.pb-row:last-child {
border-bottom: none;
border-bottom:none;
}
.pb-row__label {
font-size: var(--font-size-md);
color: var(--color-text-tertiary);
font-size:var(--font-size-md);
color:var(--color-text-tertiary);
}
.pb-row__value {
font-size: var(--font-size-md);
color: var(--color-text-primary);
font-weight: var(--font-weight-medium);
font-size:var(--font-size-md);
color:var(--color-text-primary);
font-weight:var(--font-weight-medium);
}
/* ============ 表单 ============ */
.pb-form {
margin-top: var(--spacing-2);
margin-top:var(--spacing-2);
}
.pb-field {
display: flex;
align-items: center;
justify-content: space-between;
padding: var(--spacing-3) 0;
border-bottom: var(--border-width) solid var(--color-divider);
min-height: 88rpx;
display:flex;
align-items:center;
justify-content:space-between;
padding:var(--spacing-3) 0;
border-bottom:var(--border-width) solid var(--color-divider);
min-height:88rpx;
}
.pb-field:last-child {
border-bottom: none;
border-bottom:none;
}
.pb-field__label {
font-size: var(--font-size-md);
color: var(--color-text-primary);
flex-shrink: 0;
width: 180rpx;
font-size:var(--font-size-md);
color:var(--color-text-primary);
flex-shrink:0;
width:180rpx;
}
.pb-field__value {
flex: 1;
text-align: right;
font-size: var(--font-size-md);
color: var(--color-text-primary);
flex:1;
text-align:right;
font-size:var(--font-size-md);
color:var(--color-text-primary);
}
.pb-field__value--placeholder {
color: var(--color-text-placeholder);
color:var(--color-text-placeholder);
}
.pb-field__input {
flex: 1;
text-align: right;
font-size: var(--font-size-md);
color: var(--color-text-primary);
flex:1;
text-align:right;
font-size:var(--font-size-md);
color:var(--color-text-primary);
}
/* ============ 底部 ============ */
.pb-actions {
position: fixed;
bottom: 0;
left: 0;
right: 0;
padding: var(--spacing-2) var(--spacing-page-x);
padding-bottom: calc(var(--spacing-2) + env(safe-area-inset-bottom));
background: var(--color-bg-card);
border-top: var(--border-width) solid var(--color-divider);
z-index: var(--z-sticky);
position:fixed;
bottom:0;
left:0;
right:0;
padding:var(--spacing-2) var(--spacing-page-x);
padding-bottom:calc(var(--spacing-2) + env(safe-area-inset-bottom));
background:var(--color-bg-card);
border-top:var(--border-width) solid var(--color-divider);
z-index:var(--z-sticky);
}
@@ -3,170 +3,170 @@
*/
.pcfm-page {
min-height: 100vh;
background: var(--color-bg-page);
padding-bottom: calc(160rpx + env(safe-area-inset-bottom));
min-height:100vh;
background:var(--color-bg-page);
padding-bottom:calc(160rpx + env(safe-area-inset-bottom));
}
.pcfm-loading,
.pcfm-empty {
display: flex;
align-items: center;
justify-content: center;
min-height: 60vh;
display:flex;
align-items:center;
justify-content:center;
min-height:60vh;
}
.pcfm-body {
padding: var(--spacing-2) var(--spacing-page-x);
padding:var(--spacing-2) var(--spacing-page-x);
}
/* 卡片基类继承全局 .card-base(仅补充外边距) */
.pcfm-section,
.pcfm-status {
margin-bottom: var(--spacing-3);
margin-bottom:var(--spacing-3);
}
/* ============ 审核状态条 ============ */
.pcfm-status__row {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--spacing-2);
display:flex;
align-items:center;
justify-content:space-between;
gap:var(--spacing-2);
}
.pcfm-status__label {
font-size: var(--font-size-md);
color: var(--color-text-primary);
font-weight: var(--font-weight-medium);
font-size:var(--font-size-md);
color:var(--color-text-primary);
font-weight:var(--font-weight-medium);
}
.pcfm-status__comment {
margin-top: var(--spacing-2);
padding-top: var(--spacing-2);
border-top: var(--border-width) solid var(--color-divider);
margin-top:var(--spacing-2);
padding-top:var(--spacing-2);
border-top:var(--border-width) solid var(--color-divider);
}
.pcfm-status__comment-title {
font-size: var(--font-size-sm);
color: var(--color-text-secondary);
display: block;
margin-bottom: var(--spacing-1);
font-size:var(--font-size-sm);
color:var(--color-text-secondary);
display:block;
margin-bottom:var(--spacing-1);
}
.pcfm-status__comment-text {
font-size: var(--font-size-sm);
color: var(--color-text-primary);
line-height: 1.6;
display: block;
font-size:var(--font-size-sm);
color:var(--color-text-primary);
line-height:1.6;
display:block;
}
/* ============ 资料完整度 ============ */
.pcfm-progress {
margin-top: var(--spacing-2);
margin-top:var(--spacing-2);
}
.pcfm-progress__track {
height: 12rpx;
background: var(--color-bg-disabled);
border-radius: var(--radius-full);
overflow: hidden;
height:12rpx;
background:var(--color-bg-disabled);
border-radius:var(--radius-full);
overflow:hidden;
}
.pcfm-progress__fill {
height: 100%;
background: var(--color-primary);
border-radius: var(--radius-full);
transition: width 0.3s ease;
height:100%;
background:var(--color-primary);
border-radius:var(--radius-full);
transition:width 0.3s ease;
}
.pcfm-progress__hint {
display: block;
margin-top: var(--spacing-2);
font-size: var(--font-size-sm);
color: var(--color-text-tertiary);
text-align: right;
display:block;
margin-top:var(--spacing-2);
font-size:var(--font-size-sm);
color:var(--color-text-tertiary);
text-align:right;
}
/* ============ 资料概览 ============ */
.pcfm-summary {
margin-top: var(--spacing-2);
margin-top:var(--spacing-2);
}
.pcfm-info {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--spacing-3);
padding: var(--spacing-3) 0;
border-bottom: var(--border-width) solid var(--color-divider);
min-height: 88rpx;
display:flex;
align-items:center;
justify-content:space-between;
gap:var(--spacing-3);
padding:var(--spacing-3) 0;
border-bottom:var(--border-width) solid var(--color-divider);
min-height:88rpx;
}
.pcfm-info:last-child {
border-bottom: none;
border-bottom:none;
}
.pcfm-info__label {
font-size: var(--font-size-md);
color: var(--color-text-secondary);
flex-shrink: 0;
font-size:var(--font-size-md);
color:var(--color-text-secondary);
flex-shrink:0;
}
.pcfm-info__value {
font-size: var(--font-size-md);
color: var(--color-text-primary);
text-align: right;
word-break: break-all;
flex: 1;
font-size:var(--font-size-md);
color:var(--color-text-primary);
text-align:right;
word-break:break-all;
flex:1;
}
/* ============ 自我介绍 ============ */
.pcfm-intro {
margin-top: var(--spacing-2);
padding: var(--spacing-2) var(--spacing-3);
background: var(--color-bg-page);
border-radius: var(--radius-md);
margin-top:var(--spacing-2);
padding:var(--spacing-2) var(--spacing-3);
background:var(--color-bg-page);
border-radius:var(--radius-md);
}
.pcfm-intro__text {
font-size: var(--font-size-sm);
color: var(--color-text-primary);
line-height: 1.7;
display: block;
font-size:var(--font-size-sm);
color:var(--color-text-primary);
line-height:1.7;
display:block;
}
/* ============ 择偶条件摘要 ============ */
.pcfm-pref {
margin-top: var(--spacing-2);
margin-top:var(--spacing-2);
}
/* ============ 提交须知 ============ */
.pcfm-notice {
background: var(--color-primary-light);
border-radius: var(--radius-lg);
padding: var(--spacing-3) var(--spacing-4);
background:var(--color-primary-light);
border-radius:var(--radius-lg);
padding:var(--spacing-3) var(--spacing-4);
}
.pcfm-notice__list {
margin-top: var(--spacing-2);
margin-top:var(--spacing-2);
}
.pcfm-notice__item {
display: block;
font-size: var(--font-size-sm);
color: var(--color-text-secondary);
line-height: 2;
display:block;
font-size:var(--font-size-sm);
color:var(--color-text-secondary);
line-height:2;
}
/* ============ 底部按钮 ============ */
.pcfm-actions {
position: fixed;
bottom: 0;
left: 0;
right: 0;
padding: var(--spacing-2) var(--spacing-page-x);
padding-bottom: calc(var(--spacing-2) + env(safe-area-inset-bottom));
background: var(--color-bg-card);
border-top: var(--border-width) solid var(--color-divider);
z-index: var(--z-sticky);
position:fixed;
bottom:0;
left:0;
right:0;
padding:var(--spacing-2) var(--spacing-page-x);
padding-bottom:calc(var(--spacing-2) + env(safe-area-inset-bottom));
background:var(--color-bg-card);
border-top:var(--border-width) solid var(--color-divider);
z-index:var(--z-sticky);
}
@@ -4,136 +4,136 @@
*/
.profile-page {
min-height: 100vh;
background: var(--color-bg-page);
padding-bottom: calc(160rpx + env(safe-area-inset-bottom));
min-height:100vh;
background:var(--color-bg-page);
padding-bottom:calc(160rpx + env(safe-area-inset-bottom));
}
/* ============ 加载/空状态 ============ */
.profile-loading,
.profile-empty {
padding-top: 200rpx;
display: flex;
justify-content: center;
padding-top:200rpx;
display:flex;
justify-content:center;
}
/* ============ 顶部信息 ============ */
.profile-header {
display: flex;
align-items: center;
gap: var(--spacing-4);
padding: var(--spacing-5) var(--spacing-page-x);
background: var(--color-bg-card);
display:flex;
align-items:center;
gap:var(--spacing-4);
padding:var(--spacing-5) var(--spacing-page-x);
background:var(--color-bg-card);
}
.profile-header__info {
flex: 1;
min-width: 0;
flex:1;
min-width:0;
}
.profile-header__name-row {
display: flex;
align-items: baseline;
gap: var(--spacing-2);
margin-bottom: var(--spacing-1);
display:flex;
align-items:baseline;
gap:var(--spacing-2);
margin-bottom:var(--spacing-1);
}
.profile-header__name {
font-size: var(--font-size-lg);
font-weight: var(--font-weight-bold);
color: var(--color-text-primary);
font-size:var(--font-size-lg);
font-weight:var(--font-weight-bold);
color:var(--color-text-primary);
}
.profile-header__age {
font-size: var(--font-size-md);
color: var(--color-text-tertiary);
font-size:var(--font-size-md);
color:var(--color-text-tertiary);
}
.profile-header__meta {
font-size: var(--font-size-sm);
color: var(--color-text-tertiary);
line-height: var(--line-height-normal);
font-size:var(--font-size-sm);
color:var(--color-text-tertiary);
line-height:var(--line-height-normal);
}
.profile-header__badges {
display: flex;
flex-wrap: wrap;
gap: var(--spacing-1);
margin-top: var(--spacing-2);
display:flex;
flex-wrap:wrap;
gap:var(--spacing-1);
margin-top:var(--spacing-2);
}
/* ============ 内容区块 ============ */
.profile-body {
padding-top: var(--spacing-2);
padding-top:var(--spacing-2);
}
.profile-section {
background: var(--color-bg-card);
margin: var(--spacing-2) var(--spacing-page-x);
border-radius: var(--radius-lg);
padding: var(--spacing-card-inner);
background:var(--color-bg-card);
margin:var(--spacing-2) var(--spacing-page-x);
border-radius:var(--radius-lg);
padding:var(--spacing-card-inner);
}
.profile-info-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: var(--spacing-3);
display:grid;
grid-template-columns:1fr 1fr;
gap:var(--spacing-3);
}
.profile-info-item {
display: flex;
flex-direction: column;
gap: var(--spacing-1);
min-width: 0;
display:flex;
flex-direction:column;
gap:var(--spacing-1);
min-width:0;
}
.profile-info-item--full {
grid-column: span 2;
grid-column:span 2;
}
.profile-info-item__label {
font-size: var(--font-size-xs);
color: var(--color-text-placeholder);
font-size:var(--font-size-xs);
color:var(--color-text-placeholder);
}
.profile-info-item__value {
font-size: var(--font-size-md);
color: var(--color-text-secondary);
word-break: break-all;
font-size:var(--font-size-md);
color:var(--color-text-secondary);
word-break:break-all;
}
.profile-intro-text {
font-size: var(--font-size-md);
color: var(--color-text-secondary);
line-height: var(--line-height-relaxed);
font-size:var(--font-size-md);
color:var(--color-text-secondary);
line-height:var(--line-height-relaxed);
}
/* ============ 底部操作栏 ============ */
.profile-actions {
position: fixed;
bottom: 0;
left: 0;
right: 0;
display: flex;
gap: var(--spacing-2);
align-items: center;
padding: var(--spacing-2) var(--spacing-page-x);
padding-bottom: calc(var(--spacing-2) + env(safe-area-inset-bottom));
background: var(--color-bg-card);
border-top: var(--border-width) solid var(--color-divider);
z-index: var(--z-sticky);
position:fixed;
bottom:0;
left:0;
right:0;
display:flex;
gap:var(--spacing-2);
align-items:center;
padding:var(--spacing-2) var(--spacing-page-x);
padding-bottom:calc(var(--spacing-2) + env(safe-area-inset-bottom));
background:var(--color-bg-card);
border-top:var(--border-width) solid var(--color-divider);
z-index:var(--z-sticky);
}
.profile-actions__btn {
flex: 1;
flex:1;
}
.profile-actions__btn--block,
.profile-actions__btn--report {
flex: 0 0 auto;
min-width: 140rpx;
flex:0 0 auto;
min-width:140rpx;
}
.profile-actions__btn--report {
color: var(--color-warning);
color:var(--color-warning-strong);
}
@@ -3,80 +3,80 @@
*/
.pt-page {
min-height: 100vh;
background: var(--color-bg-page);
padding-bottom: calc(160rpx + env(safe-area-inset-bottom));
min-height:100vh;
background:var(--color-bg-page);
padding-bottom:calc(160rpx + env(safe-area-inset-bottom));
}
.pt-body {
padding: var(--spacing-2) var(--spacing-page-x);
padding:var(--spacing-2) var(--spacing-page-x);
}
.pt-section {
margin-bottom: var(--spacing-3);
margin-bottom:var(--spacing-3);
}
.pt-form {
margin-top: var(--spacing-2);
margin-top:var(--spacing-2);
}
.pt-field {
display: flex;
align-items: center;
justify-content: space-between;
padding: var(--spacing-3) 0;
border-bottom: var(--border-width) solid var(--color-divider);
min-height: 88rpx;
display:flex;
align-items:center;
justify-content:space-between;
padding:var(--spacing-3) 0;
border-bottom:var(--border-width) solid var(--color-divider);
min-height:88rpx;
}
.pt-field:last-child {
border-bottom: none;
border-bottom:none;
}
.pt-field--column {
flex-direction: column;
align-items: flex-start;
flex-direction:column;
align-items:flex-start;
}
.pt-field__label {
font-size: var(--font-size-md);
color: var(--color-text-primary);
flex-shrink: 0;
width: 280rpx;
font-size:var(--font-size-md);
color:var(--color-text-primary);
flex-shrink:0;
width:280rpx;
}
.pt-field--column .pt-field__label {
width: auto;
margin-bottom: var(--spacing-2);
width:auto;
margin-bottom:var(--spacing-2);
}
.pt-field__value {
flex: 1;
text-align: right;
font-size: var(--font-size-md);
color: var(--color-text-primary);
flex:1;
text-align:right;
font-size:var(--font-size-md);
color:var(--color-text-primary);
}
.pt-field__value--placeholder {
color: var(--color-text-placeholder);
color:var(--color-text-placeholder);
}
.pt-field__textarea {
width: 100%;
min-height: 120rpx;
font-size: var(--font-size-md);
color: var(--color-text-secondary);
line-height: var(--line-height-relaxed);
width:100%;
min-height:120rpx;
font-size:var(--font-size-md);
color:var(--color-text-secondary);
line-height:var(--line-height-relaxed);
}
.pt-actions {
position: fixed;
bottom: 0;
left: 0;
right: 0;
padding: var(--spacing-2) var(--spacing-page-x);
padding-bottom: calc(var(--spacing-2) + env(safe-area-inset-bottom));
background: var(--color-bg-card);
border-top: var(--border-width) solid var(--color-divider);
z-index: var(--z-sticky);
position:fixed;
bottom:0;
left:0;
right:0;
padding:var(--spacing-2) var(--spacing-page-x);
padding-bottom:calc(var(--spacing-2) + env(safe-area-inset-bottom));
background:var(--color-bg-card);
border-top:var(--border-width) solid var(--color-divider);
z-index:var(--z-sticky);
}
@@ -3,51 +3,51 @@
*/
.pi-page {
min-height: 100vh;
background: var(--color-bg-page);
padding-bottom: calc(160rpx + env(safe-area-inset-bottom));
min-height:100vh;
background:var(--color-bg-page);
padding-bottom:calc(160rpx + env(safe-area-inset-bottom));
}
.pi-body {
padding: var(--spacing-2) var(--spacing-page-x);
padding:var(--spacing-2) var(--spacing-page-x);
}
.pi-section {
margin-bottom: var(--spacing-3);
margin-bottom:var(--spacing-3);
}
/* ============ 标签 ============ */
.pi-tags {
display: flex;
flex-wrap: wrap;
gap: var(--spacing-2);
margin-top: var(--spacing-3);
display:flex;
flex-wrap:wrap;
gap:var(--spacing-2);
margin-top:var(--spacing-3);
}
.pi-tag {
padding: var(--spacing-2) var(--spacing-4);
border-radius: var(--radius-lg);
background: var(--color-bg-disabled);
color: var(--color-text-secondary);
font-size: var(--font-size-sm);
transition: all var(--button-press-feedback) ease;
padding:var(--spacing-2) var(--spacing-4);
border-radius:var(--radius-lg);
background:var(--color-bg-disabled);
color:var(--color-text-secondary);
font-size:var(--font-size-sm);
transition:all var(--motion-normal) var(--ease-standard);
}
.pi-tag--selected {
background: var(--color-primary);
color: var(--color-text-inverse);
font-weight: var(--font-weight-medium);
background:var(--color-primary-solid);
color:var(--color-text-inverse);
font-weight:var(--font-weight-medium);
}
/* ============ 底部 ============ */
.pi-actions {
position: fixed;
bottom: 0;
left: 0;
right: 0;
padding: var(--spacing-2) var(--spacing-page-x);
padding-bottom: calc(var(--spacing-2) + env(safe-area-inset-bottom));
background: var(--color-bg-card);
border-top: var(--border-width) solid var(--color-divider);
z-index: var(--z-sticky);
position:fixed;
bottom:0;
left:0;
right:0;
padding:var(--spacing-2) var(--spacing-page-x);
padding-bottom:calc(var(--spacing-2) + env(safe-area-inset-bottom));
background:var(--color-bg-card);
border-top:var(--border-width) solid var(--color-divider);
z-index:var(--z-sticky);
}
+48 -48
View File
@@ -3,91 +3,91 @@
*/
.pri-page {
min-height: 100vh;
background: var(--color-bg-page);
padding-bottom: calc(160rpx + env(safe-area-inset-bottom));
min-height:100vh;
background:var(--color-bg-page);
padding-bottom:calc(160rpx + env(safe-area-inset-bottom));
}
.pri-body {
padding: var(--spacing-2) var(--spacing-page-x);
padding:var(--spacing-2) var(--spacing-page-x);
}
.pri-section {
margin-bottom: var(--spacing-3);
margin-bottom:var(--spacing-3);
}
/* ============ 文本框 ============ */
.pri-textarea-wrap {
margin-top: var(--spacing-2);
position: relative;
margin-top:var(--spacing-2);
position:relative;
}
.pri-textarea {
width: 100%;
min-height: 320rpx;
padding: var(--spacing-3);
font-size: var(--font-size-md);
color: var(--color-text-primary);
line-height: var(--line-height-relaxed);
background: var(--color-bg-input);
border-radius: var(--radius-md);
box-sizing: border-box;
width:100%;
min-height:320rpx;
padding:var(--spacing-3);
font-size:var(--font-size-md);
color:var(--color-text-primary);
line-height:var(--line-height-relaxed);
background:var(--color-bg-input);
border-radius:var(--radius-md);
box-sizing:border-box;
}
.pri-textarea__placeholder {
color: var(--color-text-placeholder);
font-size: var(--font-size-sm);
color:var(--color-text-placeholder);
font-size:var(--font-size-sm);
}
.pri-counter {
position: absolute;
right: var(--spacing-2);
bottom: var(--spacing-2);
font-size: var(--font-size-xs);
color: var(--color-text-placeholder);
position:absolute;
right:var(--spacing-2);
bottom:var(--spacing-2);
font-size:var(--font-size-xs);
color:var(--color-text-placeholder);
}
.pri-counter--over {
color: var(--color-danger);
color:var(--color-danger-strong);
}
/* ============ 须知 ============ */
.pri-guidelines {
margin-top: var(--spacing-2);
margin-top:var(--spacing-2);
}
.pri-guideline {
display: flex;
align-items: flex-start;
gap: var(--spacing-2);
padding: var(--spacing-1) 0;
display:flex;
align-items:flex-start;
gap:var(--spacing-2);
padding:var(--spacing-1) 0;
}
.pri-guideline__dot {
width: 10rpx;
height: 10rpx;
margin-top: 14rpx;
border-radius: 50%;
background: var(--color-text-placeholder);
flex-shrink: 0;
width:10rpx;
height:10rpx;
margin-top:14rpx;
border-radius:50%;
background:var(--color-text-placeholder);
flex-shrink:0;
}
.pri-guideline__text {
flex: 1;
font-size: var(--font-size-sm);
color: var(--color-text-tertiary);
line-height: var(--line-height-relaxed);
flex:1;
font-size:var(--font-size-sm);
color:var(--color-text-tertiary);
line-height:var(--line-height-relaxed);
}
/* ============ 底部 ============ */
.pri-actions {
position: fixed;
bottom: 0;
left: 0;
right: 0;
padding: var(--spacing-2) var(--spacing-page-x);
padding-bottom: calc(var(--spacing-2) + env(safe-area-inset-bottom));
background: var(--color-bg-card);
border-top: var(--border-width) solid var(--color-divider);
z-index: var(--z-sticky);
position:fixed;
bottom:0;
left:0;
right:0;
padding:var(--spacing-2) var(--spacing-page-x);
padding-bottom:calc(var(--spacing-2) + env(safe-area-inset-bottom));
background:var(--color-bg-card);
border-top:var(--border-width) solid var(--color-divider);
z-index:var(--z-sticky);
}
@@ -3,62 +3,62 @@
*/
.pl-page {
min-height: 100vh;
background: var(--color-bg-page);
padding-bottom: calc(160rpx + env(safe-area-inset-bottom));
min-height:100vh;
background:var(--color-bg-page);
padding-bottom:calc(160rpx + env(safe-area-inset-bottom));
}
.pl-body {
padding: var(--spacing-2) var(--spacing-page-x);
padding:var(--spacing-2) var(--spacing-page-x);
}
.pl-section {
margin-bottom: var(--spacing-3);
margin-bottom:var(--spacing-3);
}
.pl-form {
margin-top: var(--spacing-2);
margin-top:var(--spacing-2);
}
.pl-field {
display: flex;
align-items: center;
justify-content: space-between;
padding: var(--spacing-3) 0;
border-bottom: var(--border-width) solid var(--color-divider);
min-height: 88rpx;
display:flex;
align-items:center;
justify-content:space-between;
padding:var(--spacing-3) 0;
border-bottom:var(--border-width) solid var(--color-divider);
min-height:88rpx;
}
.pl-field:last-child {
border-bottom: none;
border-bottom:none;
}
.pl-field__label {
font-size: var(--font-size-md);
color: var(--color-text-primary);
flex-shrink: 0;
width: 280rpx;
font-size:var(--font-size-md);
color:var(--color-text-primary);
flex-shrink:0;
width:280rpx;
}
.pl-field__value {
flex: 1;
text-align: right;
font-size: var(--font-size-md);
color: var(--color-text-primary);
flex:1;
text-align:right;
font-size:var(--font-size-md);
color:var(--color-text-primary);
}
.pl-field__value--placeholder {
color: var(--color-text-placeholder);
color:var(--color-text-placeholder);
}
.pl-actions {
position: fixed;
bottom: 0;
left: 0;
right: 0;
padding: var(--spacing-2) var(--spacing-page-x);
padding-bottom: calc(var(--spacing-2) + env(safe-area-inset-bottom));
background: var(--color-bg-card);
border-top: var(--border-width) solid var(--color-divider);
z-index: var(--z-sticky);
position:fixed;
bottom:0;
left:0;
right:0;
padding:var(--spacing-2) var(--spacing-page-x);
padding-bottom:calc(var(--spacing-2) + env(safe-area-inset-bottom));
background:var(--color-bg-card);
border-top:var(--border-width) solid var(--color-divider);
z-index:var(--z-sticky);
}
@@ -3,66 +3,66 @@
*/
.pp-page {
min-height: 100vh;
background: var(--color-bg-page);
padding-bottom: calc(160rpx + env(safe-area-inset-bottom));
min-height:100vh;
background:var(--color-bg-page);
padding-bottom:calc(160rpx + env(safe-area-inset-bottom));
}
.pp-loading {
padding-top: 200rpx;
display: flex;
justify-content: center;
padding-top:200rpx;
display:flex;
justify-content:center;
}
.pp-body {
padding: var(--spacing-2) var(--spacing-page-x);
padding:var(--spacing-2) var(--spacing-page-x);
}
.pp-section {
margin-bottom: var(--spacing-3);
margin-bottom:var(--spacing-3);
}
.pp-uploader {
margin-top: var(--spacing-2);
margin-top:var(--spacing-2);
}
/* ============ 上传须知 ============ */
.pp-guidelines {
margin-top: var(--spacing-2);
margin-top:var(--spacing-2);
}
.pp-guideline {
display: flex;
align-items: flex-start;
gap: var(--spacing-2);
padding: var(--spacing-1) 0;
display:flex;
align-items:flex-start;
gap:var(--spacing-2);
padding:var(--spacing-1) 0;
}
.pp-guideline__dot {
width: 10rpx;
height: 10rpx;
margin-top: 14rpx;
border-radius: 50%;
background: var(--color-text-placeholder);
flex-shrink: 0;
width:10rpx;
height:10rpx;
margin-top:14rpx;
border-radius:50%;
background:var(--color-text-placeholder);
flex-shrink:0;
}
.pp-guideline__text {
flex: 1;
font-size: var(--font-size-sm);
color: var(--color-text-tertiary);
line-height: var(--line-height-relaxed);
flex:1;
font-size:var(--font-size-sm);
color:var(--color-text-tertiary);
line-height:var(--line-height-relaxed);
}
/* ============ 底部 ============ */
.pp-actions {
position: fixed;
bottom: 0;
left: 0;
right: 0;
padding: var(--spacing-2) var(--spacing-page-x);
padding-bottom: calc(var(--spacing-2) + env(safe-area-inset-bottom));
background: var(--color-bg-card);
border-top: var(--border-width) solid var(--color-divider);
z-index: var(--z-sticky);
position:fixed;
bottom:0;
left:0;
right:0;
padding:var(--spacing-2) var(--spacing-page-x);
padding-bottom:calc(var(--spacing-2) + env(safe-area-inset-bottom));
background:var(--color-bg-card);
border-top:var(--border-width) solid var(--color-divider);
z-index:var(--z-sticky);
}
@@ -3,89 +3,89 @@
*/
.ppref-page {
min-height: 100vh;
background: var(--color-bg-page);
padding-bottom: calc(160rpx + env(safe-area-inset-bottom));
min-height:100vh;
background:var(--color-bg-page);
padding-bottom:calc(160rpx + env(safe-area-inset-bottom));
}
.ppref-body {
padding: var(--spacing-2) var(--spacing-page-x);
padding:var(--spacing-2) var(--spacing-page-x);
}
.ppref-section {
margin-bottom: var(--spacing-3);
margin-bottom:var(--spacing-3);
}
/* ============ 标签 ============ */
.ppref-tags {
display: flex;
flex-wrap: wrap;
gap: var(--spacing-2);
margin-top: var(--spacing-3);
display:flex;
flex-wrap:wrap;
gap:var(--spacing-2);
margin-top:var(--spacing-3);
}
.ppref-tag {
padding: var(--spacing-2) var(--spacing-4);
border-radius: var(--radius-lg);
background: var(--color-bg-disabled);
color: var(--color-text-secondary);
font-size: var(--font-size-sm);
padding:var(--spacing-2) var(--spacing-4);
border-radius:var(--radius-lg);
background:var(--color-bg-disabled);
color:var(--color-text-secondary);
font-size:var(--font-size-sm);
}
.ppref-tag--selected {
background: var(--color-primary);
color: var(--color-text-inverse);
font-weight: var(--font-weight-medium);
background:var(--color-primary-solid);
color:var(--color-text-inverse);
font-weight:var(--font-weight-medium);
}
/* ============ picker ============ */
.ppref-picker {
padding: var(--spacing-3) 0;
margin-top: var(--spacing-2);
padding:var(--spacing-3) 0;
margin-top:var(--spacing-2);
}
.ppref-picker__value {
font-size: var(--font-size-md);
color: var(--color-text-primary);
font-size:var(--font-size-md);
color:var(--color-text-primary);
}
/* ============ 表单 ============ */
.ppref-form {
margin-top: var(--spacing-2);
margin-top:var(--spacing-2);
}
.ppref-field {
display: flex;
align-items: center;
justify-content: space-between;
padding: var(--spacing-3) 0;
border-bottom: var(--border-width) solid var(--color-divider);
min-height: 88rpx;
display:flex;
align-items:center;
justify-content:space-between;
padding:var(--spacing-3) 0;
border-bottom:var(--border-width) solid var(--color-divider);
min-height:88rpx;
}
.ppref-field:last-child {
border-bottom: none;
border-bottom:none;
}
.ppref-field__label {
font-size: var(--font-size-md);
color: var(--color-text-primary);
font-size:var(--font-size-md);
color:var(--color-text-primary);
}
.ppref-field__value {
font-size: var(--font-size-md);
color: var(--color-text-tertiary);
font-size:var(--font-size-md);
color:var(--color-text-tertiary);
}
/* ============ 底部 ============ */
.ppref-actions {
position: fixed;
bottom: 0;
left: 0;
right: 0;
padding: var(--spacing-2) var(--spacing-page-x);
padding-bottom: calc(var(--spacing-2) + env(safe-area-inset-bottom));
background: var(--color-bg-card);
border-top: var(--border-width) solid var(--color-divider);
z-index: var(--z-sticky);
position:fixed;
bottom:0;
left:0;
right:0;
padding:var(--spacing-2) var(--spacing-page-x);
padding-bottom:calc(var(--spacing-2) + env(safe-area-inset-bottom));
background:var(--color-bg-card);
border-top:var(--border-width) solid var(--color-divider);
z-index:var(--z-sticky);
}
@@ -1,152 +1,152 @@
/* 婚恋状态页 U25 — Design Tokens */
.page {
min-height: 100vh;
background: #FFF8F7;
min-height:100vh;
background:var(--color-primary-lighter);
}
.body {
padding: 24rpx;
box-sizing: border-box;
padding:24rpx;
box-sizing:border-box;
}
/* 状态卡片 */
.status-card {
background: #fff;
border-radius: 20rpx;
padding: 32rpx;
box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.04);
border-left: 8rpx solid #E96B6B;
margin-bottom: 24rpx;
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 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;
align-items: center;
justify-content: space-between;
margin-bottom: 16rpx;
display:flex;
align-items:center;
justify-content:space-between;
margin-bottom:16rpx;
}
.status-card__label {
font-size: 26rpx;
color: #999;
font-size:26rpx;
color:var(--color-text-tertiary);
}
.status-card__desc {
display: block;
font-size: 28rpx;
color: #333;
line-height: 1.6;
display:block;
font-size:28rpx;
color:var(--color-text-primary);
line-height:1.6;
}
/* 正在了解对象卡片 */
.partner-card {
background: #fff;
border-radius: 20rpx;
padding: 24rpx 32rpx;
margin-bottom: 24rpx;
box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.04);
background:var(--color-bg-card);
border-radius:20rpx;
padding:24rpx 32rpx;
margin-bottom:24rpx;
box-shadow:0 2rpx 12rpx rgba(0, 0, 0, 0.04);
}
.partner-row {
display: flex;
align-items: center;
justify-content: space-between;
margin-top: 16rpx;
gap: 16rpx;
display:flex;
align-items:center;
justify-content:space-between;
margin-top:16rpx;
gap:16rpx;
}
.partner-info {
flex: 1;
min-width: 0;
flex:1;
min-width:0;
}
.partner-name {
display: block;
font-size: 30rpx;
font-weight: bold;
color: #1A1A1A;
margin-bottom: 6rpx;
display:block;
font-size:30rpx;
font-weight:bold;
color:var(--color-text-strong);
margin-bottom:6rpx;
}
.partner-hint {
display: block;
font-size: 24rpx;
color: #999;
display:block;
font-size:24rpx;
color:var(--color-text-tertiary);
}
/* 操作区 */
.actions {
background: #fff;
border-radius: 20rpx;
padding: 24rpx 32rpx 32rpx;
margin-bottom: 24rpx;
box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.04);
background:var(--color-bg-card);
border-radius:20rpx;
padding:24rpx 32rpx 32rpx;
margin-bottom:24rpx;
box-shadow:0 2rpx 12rpx rgba(0, 0, 0, 0.04);
}
.actions button {
margin-top: 20rpx;
width: 100%;
height: 88rpx;
line-height: 88rpx;
border-radius: 44rpx;
font-size: 30rpx;
border: none;
margin-top:20rpx;
width:100%;
height:88rpx;
line-height:88rpx;
border-radius:44rpx;
font-size:30rpx;
border:none;
}
.actions button::after {
border: none;
border:none;
}
.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;
padding: 0 28rpx;
border-radius: 32rpx;
font-size: 24rpx;
background: #fff;
color: #E04C4C;
border: 2rpx solid #E04C4C;
}
flex-shrink:0;
min-height:var(--tap-min);
line-height:var(--tap-min);
padding:0 28rpx;
border-radius:32rpx;
font-size:24rpx;
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;
border:none;
}
.actions-tip {
text-align: center;
padding: 40rpx 0;
color: #B0B0B0;
font-size: 26rpx;
text-align:center;
padding:40rpx 0;
color:var(--color-text-disabled);
font-size:26rpx;
}
/* 公益免费标识 */
.free-badge {
text-align: center;
padding: 24rpx;
margin-top: 16rpx;
text-align:center;
padding:24rpx;
margin-top:16rpx;
}
.free-badge text {
display: inline-block;
font-size: 22rpx;
color: #1A6B3E;
background: #E8F5E9;
padding: 8rpx 24rpx;
border-radius: 24rpx;
display:inline-block;
font-size:22rpx;
color:var(--color-success-strong);
background:var(--color-success-light);
padding:8rpx 24rpx;
border-radius:24rpx;
}
+128 -128
View File
@@ -1,212 +1,212 @@
/* 举报页 U26 — Design Tokens */
.page {
min-height: 100vh;
background: #FFF8F7;
min-height:100vh;
background:var(--color-primary-lighter);
}
.body {
padding: 24rpx;
box-sizing: border-box;
padding:24rpx;
box-sizing:border-box;
}
/* 被举报人提示条 */
.target-bar {
background: #FFF3F2;
border-radius: 12rpx;
padding: 20rpx 24rpx;
margin-bottom: 24rpx;
font-size: 26rpx;
color: #E96B6B;
background:var(--color-primary-light);
border-radius:12rpx;
padding:20rpx 24rpx;
margin-bottom:24rpx;
font-size:26rpx;
color:var(--color-primary-strong);
}
/* 卡片 */
.card {
background: #fff;
border-radius: 20rpx;
padding: 24rpx 32rpx;
margin-bottom: 24rpx;
box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.04);
background:var(--color-bg-card);
border-radius:20rpx;
padding:24rpx 32rpx;
margin-bottom:24rpx;
box-shadow:0 2rpx 12rpx rgba(0, 0, 0, 0.04);
}
/* 举报原因网格 */
.reason-grid {
display: flex;
flex-wrap: wrap;
gap: 16rpx;
margin-top: 16rpx;
display:flex;
flex-wrap:wrap;
gap:16rpx;
margin-top:16rpx;
}
.reason-item {
flex: 0 0 calc(33.333% - 12rpx);
box-sizing: border-box;
text-align: center;
padding: 20rpx 0;
border-radius: 12rpx;
background: #F7F8FA;
font-size: 26rpx;
color: #666;
border: 2rpx solid transparent;
transition: all 0.2s;
flex:0 0 calc(33.333% - 12rpx);
box-sizing:border-box;
text-align:center;
padding:20rpx 0;
border-radius:12rpx;
background:var(--color-bg-subtle);
font-size:26rpx;
color:var(--color-text-secondary);
border:2rpx solid transparent;
transition:all 0.2s;
}
.reason-item.active {
background: #FFF3F2;
color: #E96B6B;
border-color: #E96B6B;
font-weight: bold;
background:var(--color-primary-light);
color:var(--color-primary-strong);
border-color:var(--color-primary);
font-weight:bold;
}
/* 证据截图 */
.evidence-list {
display: flex;
flex-wrap: wrap;
gap: 16rpx;
margin-top: 16rpx;
display:flex;
flex-wrap:wrap;
gap:16rpx;
margin-top:16rpx;
}
.evidence-item {
position: relative;
width: 160rpx;
height: 160rpx;
border-radius: 12rpx;
overflow: hidden;
position:relative;
width:160rpx;
height:160rpx;
border-radius:12rpx;
overflow:hidden;
}
.evidence-item image {
width: 100%;
height: 100%;
width:100%;
height:100%;
}
.remove-btn {
position: absolute;
top: 4rpx;
right: 4rpx;
width: 36rpx;
height: 36rpx;
line-height: 32rpx;
text-align: center;
background: rgba(0, 0, 0, 0.5);
color: #fff;
border-radius: 50%;
font-size: 22rpx;
}
position:absolute;
top:4rpx;
right:4rpx;
width:36rpx;
min-height:var(--tap-min);
line-height:var(--tap-min);
text-align:center;
background:rgba(0, 0, 0, 0.5);
color:var(--color-text-inverse);
border-radius:50%;
font-size:24rpx;
min-width:var(--tap-min);}
.evidence-add {
width: 160rpx;
height: 160rpx;
border-radius: 12rpx;
background: #F7F8FA;
border: 2rpx dashed #D0D0D0;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
color: #999;
width:160rpx;
height:160rpx;
border-radius:12rpx;
background:var(--color-bg-subtle);
border:2rpx dashed var(--color-border-strong);
display:flex;
flex-direction:column;
align-items:center;
justify-content:center;
color:var(--color-text-tertiary);
}
.add-icon {
font-size: 48rpx;
color: #B0B0B0;
line-height: 1;
font-size:48rpx;
color:var(--color-text-disabled);
line-height:1;
}
.add-text {
font-size: 22rpx;
margin-top: 8rpx;
font-size:24rpx;
margin-top:8rpx;
}
/* 提交按钮 */
.btn-submit {
width: 100%;
height: 88rpx;
line-height: 88rpx;
border-radius: 44rpx;
background: #E96B6B;
color: #fff;
font-size: 32rpx;
border: none;
margin-top: 8rpx;
width:100%;
height:88rpx;
line-height:88rpx;
border-radius:44rpx;
background:var(--color-primary-solid);
color:var(--color-text-inverse);
font-size:32rpx;
border:none;
margin-top:8rpx;
}
.btn-submit::after {
border: none;
border:none;
}
.btn-submit[disabled] {
opacity: 0.5;
opacity:0.5;
}
.btn-primary {
width: 80%;
height: 88rpx;
line-height: 88rpx;
border-radius: 44rpx;
background: #E96B6B;
color: #fff;
font-size: 32rpx;
border: none;
margin-top: 48rpx;
width:80%;
height:88rpx;
line-height:88rpx;
border-radius:44rpx;
background:var(--color-primary-solid);
color:var(--color-text-inverse);
font-size:32rpx;
border:none;
margin-top:48rpx;
}
.btn-primary::after {
border: none;
border:none;
}
.hint {
display: block;
text-align: center;
font-size: 22rpx;
color: #B0B0B0;
margin-top: 20rpx;
padding: 0 24rpx;
display:block;
text-align:center;
font-size:24rpx;
color:var(--color-text-disabled);
margin-top:20rpx;
padding:0 24rpx;
}
/* 成功态 */
.success-wrap {
display: flex;
flex-direction: column;
align-items: center;
padding: 120rpx 48rpx;
display:flex;
flex-direction:column;
align-items:center;
padding:120rpx 48rpx;
}
.success-icon {
width: 120rpx;
height: 120rpx;
line-height: 120rpx;
text-align: center;
border-radius: 50%;
background: #E8F5E9;
color: #1A6B3E;
font-size: 64rpx;
margin-bottom: 32rpx;
width:120rpx;
height:120rpx;
line-height:120rpx;
text-align:center;
border-radius:50%;
background:var(--color-success-light);
color:var(--color-success-strong);
font-size:64rpx;
margin-bottom:32rpx;
}
.success-title {
font-size: 36rpx;
font-weight: bold;
color: #1A1A1A;
margin-bottom: 16rpx;
font-size:36rpx;
font-weight:bold;
color:var(--color-text-strong);
margin-bottom:16rpx;
}
.success-hint {
font-size: 26rpx;
color: #999;
text-align: center;
line-height: 1.6;
font-size:26rpx;
color:var(--color-text-tertiary);
text-align:center;
line-height:1.6;
}
/* 公益免费标识 */
.free-badge {
text-align: center;
padding: 24rpx;
margin-top: 16rpx;
text-align:center;
padding:24rpx;
margin-top:16rpx;
}
.free-badge text {
display: inline-block;
font-size: 22rpx;
color: #1A6B3E;
background: #E8F5E9;
padding: 8rpx 24rpx;
border-radius: 24rpx;
display:inline-block;
font-size:22rpx;
color:var(--color-success-strong);
background:var(--color-success-light);
padding:8rpx 24rpx;
border-radius:24rpx;
}
@@ -3,184 +3,184 @@
*/
.rp-page {
min-height: 100vh;
background: var(--color-bg-page);
padding-bottom: calc(var(--spacing-page-x) + env(safe-area-inset-bottom));
min-height:100vh;
background:var(--color-bg-page);
padding-bottom:calc(var(--spacing-page-x) + env(safe-area-inset-bottom));
}
.rp-loading {
display: flex;
align-items: center;
justify-content: center;
min-height: 60vh;
display:flex;
align-items:center;
justify-content:center;
min-height:60vh;
}
.rp-body {
padding: var(--spacing-2) var(--spacing-page-x);
padding:var(--spacing-2) var(--spacing-page-x);
}
/* ============ 顶部状态卡 ============ */
.rp-hero {
margin-bottom: var(--spacing-3);
padding: var(--spacing-5) var(--spacing-4);
text-align: center;
margin-bottom:var(--spacing-3);
padding:var(--spacing-5) var(--spacing-4);
text-align:center;
}
.rp-hero__icon {
width: 96rpx;
height: 96rpx;
margin: 0 auto var(--spacing-3);
border-radius: var(--radius-full);
background: var(--color-primary-light);
color: var(--color-primary);
font-size: 56rpx;
line-height: 96rpx;
font-weight: var(--font-weight-bold);
width:96rpx;
height:96rpx;
margin:0 auto var(--spacing-3);
border-radius:var(--radius-full);
background:var(--color-primary-light);
color:var(--color-primary-strong);
font-size:56rpx;
line-height:96rpx;
font-weight:var(--font-weight-bold);
}
.rp-hero__title {
display: block;
font-size: var(--font-size-xl);
color: var(--color-text-primary);
font-weight: var(--font-weight-semibold);
margin-bottom: var(--spacing-2);
display:block;
font-size:var(--font-size-xl);
color:var(--color-text-primary);
font-weight:var(--font-weight-semibold);
margin-bottom:var(--spacing-2);
}
.rp-hero__desc {
display: block;
font-size: var(--font-size-md);
color: var(--color-text-secondary);
line-height: 1.7;
margin-bottom: var(--spacing-2);
display:block;
font-size:var(--font-size-md);
color:var(--color-text-secondary);
line-height:1.7;
margin-bottom:var(--spacing-2);
}
.rp-hero__hint {
display: block;
font-size: var(--font-size-sm);
color: var(--color-text-tertiary);
line-height: 1.6;
display:block;
font-size:var(--font-size-sm);
color:var(--color-text-tertiary);
line-height:1.6;
}
/* ============ 通用 section ============ */
.rp-section {
margin-bottom: var(--spacing-3);
padding: var(--spacing-3) var(--spacing-4);
margin-bottom:var(--spacing-3);
padding:var(--spacing-3) var(--spacing-4);
}
/* ============ 双状态展示 ============ */
.rp-status-row {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--spacing-3);
padding: var(--spacing-3) 0;
border-bottom: var(--border-width) solid var(--color-divider);
display:flex;
align-items:center;
justify-content:space-between;
gap:var(--spacing-3);
padding:var(--spacing-3) 0;
border-bottom:var(--border-width) solid var(--color-divider);
}
.rp-status-row:last-child {
border-bottom: none;
border-bottom:none;
}
.rp-status-row__label {
font-size: var(--font-size-md);
color: var(--color-text-primary);
font-weight: var(--font-weight-medium);
font-size:var(--font-size-md);
color:var(--color-text-primary);
font-weight:var(--font-weight-medium);
}
.rp-status-meta {
padding-top: var(--spacing-2);
border-top: var(--border-width) solid var(--color-divider);
margin-top: var(--spacing-2);
padding-top:var(--spacing-2);
border-top:var(--border-width) solid var(--color-divider);
margin-top:var(--spacing-2);
}
.rp-status-meta__text {
font-size: var(--font-size-sm);
color: var(--color-text-tertiary);
font-size:var(--font-size-sm);
color:var(--color-text-tertiary);
}
/* ============ 审核步骤 ============ */
.rp-steps {
display: flex;
align-items: center;
justify-content: space-between;
padding: var(--spacing-2) 0;
display:flex;
align-items:center;
justify-content:space-between;
padding:var(--spacing-2) 0;
}
.rp-step {
flex: 1;
display: flex;
flex-direction: column;
align-items: center;
gap: var(--spacing-2);
position: relative;
flex:1;
display:flex;
flex-direction:column;
align-items:center;
gap:var(--spacing-2);
position:relative;
}
.rp-step:not(:last-child)::after {
content: '';
position: absolute;
top: 28rpx;
right: -50%;
width: 100%;
height: 2rpx;
background: var(--color-divider);
content:'';
position:absolute;
top:28rpx;
right:-50%;
width:100%;
height:2rpx;
background:var(--color-divider);
}
.rp-step--active:not(:last-child)::after {
background: var(--color-primary);
background:var(--color-primary);
}
.rp-step__icon {
width: 56rpx;
height: 56rpx;
border-radius: var(--radius-full);
background: var(--color-bg-disabled);
color: var(--color-text-tertiary);
font-size: 32rpx;
line-height: 56rpx;
text-align: center;
font-weight: var(--font-weight-medium);
width:56rpx;
height:56rpx;
border-radius:var(--radius-full);
background:var(--color-bg-disabled);
color:var(--color-text-tertiary);
font-size:32rpx;
line-height:56rpx;
text-align:center;
font-weight:var(--font-weight-medium);
}
.rp-step--active .rp-step__icon {
background: var(--color-primary);
color: var(--color-text-inverse);
background:var(--color-primary-solid);
color:var(--color-text-inverse);
}
.rp-step__label {
font-size: var(--font-size-sm);
color: var(--color-text-tertiary);
font-size:var(--font-size-sm);
color:var(--color-text-tertiary);
}
.rp-step--active .rp-step__label {
color: var(--color-text-primary);
font-weight: var(--font-weight-medium);
color:var(--color-text-primary);
font-weight:var(--font-weight-medium);
}
/* ============ 操作按钮 ============ */
.rp-actions {
margin: var(--spacing-4) 0;
margin:var(--spacing-4) 0;
}
.rp-actions__gap {
height: var(--spacing-2);
height:var(--spacing-2);
}
/* ============ 帮助提示 ============ */
.rp-help {
text-align: center;
padding: var(--spacing-3) 0;
text-align:center;
padding:var(--spacing-3) 0;
}
.rp-help__text {
display: block;
font-size: var(--font-size-sm);
color: var(--color-text-tertiary);
margin-bottom: var(--spacing-1);
display:block;
font-size:var(--font-size-sm);
color:var(--color-text-tertiary);
margin-bottom:var(--spacing-1);
}
.rp-help__link {
display: inline-block;
font-size: var(--font-size-sm);
color: var(--color-primary);
text-decoration: underline;
display:inline-block;
font-size:var(--font-size-sm);
color:var(--color-primary-strong);
text-decoration:underline;
}
@@ -3,174 +3,174 @@
*/
.rr-page {
min-height: 100vh;
background: var(--color-bg-page);
padding-bottom: calc(160rpx + env(safe-area-inset-bottom));
min-height:100vh;
background:var(--color-bg-page);
padding-bottom:calc(160rpx + env(safe-area-inset-bottom));
}
.rr-loading,
.rr-empty {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
min-height: 60vh;
gap: var(--spacing-4);
display:flex;
flex-direction:column;
align-items:center;
justify-content:center;
min-height:60vh;
gap:var(--spacing-4);
}
.rr-body {
padding: var(--spacing-2) var(--spacing-page-x);
padding:var(--spacing-2) var(--spacing-page-x);
}
/* ============ 顶部提示卡 ============ */
.rr-hero {
margin-bottom: var(--spacing-3);
padding: var(--spacing-5) var(--spacing-4);
text-align: center;
margin-bottom:var(--spacing-3);
padding:var(--spacing-5) var(--spacing-4);
text-align:center;
}
.rr-hero__icon {
width: 96rpx;
height: 96rpx;
margin: 0 auto var(--spacing-3);
border-radius: var(--radius-full);
background: var(--color-warning-light);
color: var(--color-warning);
font-size: 56rpx;
line-height: 96rpx;
font-weight: var(--font-weight-bold);
width:96rpx;
height:96rpx;
margin:0 auto var(--spacing-3);
border-radius:var(--radius-full);
background:var(--color-warning-light);
color:var(--color-warning-strong);
font-size:56rpx;
line-height:96rpx;
font-weight:var(--font-weight-bold);
}
.rr-hero__title {
display: block;
font-size: var(--font-size-xl);
color: var(--color-text-primary);
font-weight: var(--font-weight-semibold);
margin-bottom: var(--spacing-2);
display:block;
font-size:var(--font-size-xl);
color:var(--color-text-primary);
font-weight:var(--font-weight-semibold);
margin-bottom:var(--spacing-2);
}
.rr-hero__desc {
display: block;
font-size: var(--font-size-md);
color: var(--color-text-secondary);
line-height: 1.7;
display:block;
font-size:var(--font-size-md);
color:var(--color-text-secondary);
line-height:1.7;
}
/* ============ 通用 section ============ */
.rr-section {
margin-bottom: var(--spacing-3);
padding: var(--spacing-3) var(--spacing-4);
margin-bottom:var(--spacing-3);
padding:var(--spacing-3) var(--spacing-4);
}
/* ============ 需修改项列表 ============ */
.rr-issue {
padding: var(--spacing-3) 0;
border-bottom: var(--border-width) solid var(--color-divider);
padding:var(--spacing-3) 0;
border-bottom:var(--border-width) solid var(--color-divider);
}
.rr-issue:last-child {
border-bottom: none;
border-bottom:none;
}
.rr-issue__head {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--spacing-3);
margin-bottom: var(--spacing-2);
display:flex;
align-items:center;
justify-content:space-between;
gap:var(--spacing-3);
margin-bottom:var(--spacing-2);
}
.rr-issue__title {
font-size: var(--font-size-md);
color: var(--color-text-primary);
font-weight: var(--font-weight-medium);
font-size:var(--font-size-md);
color:var(--color-text-primary);
font-weight:var(--font-weight-medium);
}
.rr-issue__reason {
padding: var(--spacing-2) var(--spacing-3);
background: var(--color-warning-light);
border-radius: var(--radius-md);
margin-bottom: var(--spacing-2);
padding:var(--spacing-2) var(--spacing-3);
background:var(--color-warning-light);
border-radius:var(--radius-md);
margin-bottom:var(--spacing-2);
}
.rr-issue__reason-label {
display: block;
font-size: var(--font-size-sm);
color: var(--color-warning);
font-weight: var(--font-weight-medium);
margin-bottom: var(--spacing-1);
display:block;
font-size:var(--font-size-sm);
color:var(--color-warning-strong);
font-weight:var(--font-weight-medium);
margin-bottom:var(--spacing-1);
}
.rr-issue__reason-text {
display: block;
font-size: var(--font-size-sm);
color: var(--color-text-primary);
line-height: 1.7;
display:block;
font-size:var(--font-size-sm);
color:var(--color-text-primary);
line-height:1.7;
}
.rr-issue__action {
display: flex;
justify-content: flex-end;
display:flex;
justify-content:flex-end;
}
.rr-issue__edit-link {
font-size: var(--font-size-md);
color: var(--color-primary);
font-weight: var(--font-weight-medium);
padding: var(--spacing-1) var(--spacing-2);
font-size:var(--font-size-md);
color:var(--color-primary-strong);
font-weight:var(--font-weight-medium);
padding:var(--spacing-1) var(--spacing-2);
}
/* ============ 其他审核结果 ============ */
.rr-toggle {
display: flex;
align-items: center;
justify-content: space-between;
padding: var(--spacing-2) 0;
display:flex;
align-items:center;
justify-content:space-between;
padding:var(--spacing-2) 0;
}
.rr-toggle__text {
font-size: var(--font-size-md);
color: var(--color-text-secondary);
font-size:var(--font-size-md);
color:var(--color-text-secondary);
}
.rr-toggle__arrow {
font-size: var(--font-size-sm);
color: var(--color-primary);
font-size:var(--font-size-sm);
color:var(--color-primary-strong);
}
.rr-other-list {
margin-top: var(--spacing-2);
padding-top: var(--spacing-2);
border-top: var(--border-width) solid var(--color-divider);
margin-top:var(--spacing-2);
padding-top:var(--spacing-2);
border-top:var(--border-width) solid var(--color-divider);
}
.rr-other-row {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--spacing-3);
padding: var(--spacing-2) 0;
display:flex;
align-items:center;
justify-content:space-between;
gap:var(--spacing-3);
padding:var(--spacing-2) 0;
}
.rr-other-row__label {
font-size: var(--font-size-md);
color: var(--color-text-primary);
font-size:var(--font-size-md);
color:var(--color-text-primary);
}
/* ============ 操作按钮 ============ */
.rr-actions {
margin: var(--spacing-4) 0;
margin:var(--spacing-4) 0;
}
/* ============ 帮助提示 ============ */
.rr-help {
text-align: center;
padding: var(--spacing-3) 0;
text-align:center;
padding:var(--spacing-3) 0;
}
.rr-help__text {
display: block;
font-size: var(--font-size-sm);
color: var(--color-text-tertiary);
line-height: 1.6;
display:block;
font-size:var(--font-size-sm);
color:var(--color-text-tertiary);
line-height:1.6;
}
@@ -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}
+32 -32
View File
@@ -1,65 +1,65 @@
/* 设置页样式 */
.page {
min-height: 100vh;
background: #f5f5f5;
padding-bottom: 48rpx;
min-height:100vh;
background:var(--color-bg-subtle);
padding-bottom:48rpx;
}
.section {
margin-top: 24rpx;
background: #fff;
margin-top:24rpx;
background:var(--color-bg-card);
}
.section-title {
padding: 24rpx 32rpx 16rpx;
font-size: 24rpx;
color: #999;
padding:24rpx 32rpx 16rpx;
font-size:24rpx;
color:var(--color-text-tertiary);
}
.list-group {
padding: 0 32rpx;
padding:0 32rpx;
}
.list-row {
display: flex;
align-items: center;
padding: 28rpx 0;
border-bottom: 1rpx solid #f5f5f5;
display:flex;
align-items:center;
padding:28rpx 0;
border-bottom:1rpx solid var(--color-divider);
}
.list-row:last-child {
border-bottom: none;
border-bottom:none;
}
.list-icon {
font-size: 40rpx;
margin-right: 24rpx;
width: 48rpx;
text-align: center;
font-size:40rpx;
margin-right:24rpx;
width:48rpx;
text-align:center;
}
.list-info {
flex: 1;
min-width: 0;
flex:1;
min-width:0;
}
.list-label {
display: block;
font-size: 32rpx;
color: #2d2d2d;
line-height: 1.4;
display:block;
font-size:32rpx;
color:var(--color-text-strong);
line-height:1.4;
}
.list-desc {
display: block;
font-size: 24rpx;
color: #999;
line-height: 1.4;
margin-top: 4rpx;
display:block;
font-size:24rpx;
color:var(--color-text-tertiary);
line-height:1.4;
margin-top:4rpx;
}
.list-arrow {
font-size: 32rpx;
color: #ccc;
margin-left: 16rpx;
font-size:32rpx;
color:var(--color-text-disabled);
margin-left:16rpx;
}
+64 -64
View File
@@ -1,114 +1,114 @@
.page {
padding: 40rpx;
min-height: 100vh;
background: #FFF8F7;
padding:40rpx;
min-height:100vh;
background:var(--color-primary-lighter);
}
.header {
margin-bottom: 48rpx;
margin-bottom:48rpx;
}
.title {
display: block;
font-size: 44rpx;
font-weight: bold;
color: #1A1A1A;
margin-bottom: 16rpx;
display:block;
font-size:44rpx;
font-weight:bold;
color:var(--color-text-strong);
margin-bottom:16rpx;
}
.subtitle {
display: block;
font-size: 28rpx;
color: #999;
line-height: 1.6;
display:block;
font-size:28rpx;
color:var(--color-text-tertiary);
line-height:1.6;
}
.form {
background: #fff;
border-radius: 24rpx;
padding: 40rpx;
margin-bottom: 40rpx;
background:var(--color-bg-card);
border-radius:24rpx;
padding:40rpx;
margin-bottom:40rpx;
}
.field {
margin-bottom: 32rpx;
margin-bottom:32rpx;
}
.label {
display: block;
font-size: 28rpx;
color: #333;
margin-bottom: 16rpx;
font-weight: 500;
display:block;
font-size:28rpx;
color:var(--color-text-primary);
margin-bottom:16rpx;
font-weight:500;
}
.input {
width: 100%;
height: 88rpx;
border: 2rpx solid #EEE;
border-radius: 16rpx;
padding: 0 24rpx;
font-size: 32rpx;
box-sizing: border-box;
width:100%;
height:88rpx;
border:2rpx solid var(--color-border);
border-radius:16rpx;
padding:0 24rpx;
font-size:32rpx;
box-sizing:border-box;
}
.agreement {
display: flex;
align-items: flex-start;
margin-bottom: 32rpx;
font-size: 24rpx;
color: #666;
display:flex;
align-items:flex-start;
margin-bottom:32rpx;
font-size:24rpx;
color:var(--color-text-secondary);
}
.agreement-text {
margin-left: 12rpx;
line-height: 1.6;
margin-left:12rpx;
line-height:1.6;
}
.link {
color: #E96B6B;
color:var(--color-primary-strong);
}
.error {
background: #FFF3F2;
color: #DC3545;
padding: 20rpx 24rpx;
border-radius: 12rpx;
font-size: 26rpx;
margin-bottom: 24rpx;
background:var(--color-primary-light);
color:var(--color-danger-strong);
padding:20rpx 24rpx;
border-radius:12rpx;
font-size:26rpx;
margin-bottom:24rpx;
}
.submit-btn {
background: #E96B6B;
color: #fff;
border-radius: 44rpx;
height: 88rpx;
line-height: 88rpx;
font-size: 32rpx;
font-weight: 500;
background:var(--color-primary-solid);
color:var(--color-text-inverse);
border-radius:44rpx;
height:88rpx;
line-height:88rpx;
font-size:32rpx;
font-weight:500;
}
.submit-btn[disabled] {
background: #CCC;
background:var(--color-bg-muted);
}
.tips {
background: #fff;
border-radius: 24rpx;
padding: 32rpx;
background:var(--color-bg-card);
border-radius:24rpx;
padding:32rpx;
}
.tip-title {
display: block;
font-size: 28rpx;
font-weight: bold;
color: #333;
margin-bottom: 16rpx;
display:block;
font-size:28rpx;
font-weight:bold;
color:var(--color-text-primary);
margin-bottom:16rpx;
}
.tip-item {
display: block;
font-size: 24rpx;
color: #999;
line-height: 2;
display:block;
font-size:24rpx;
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}