小程序端:设计系统收敛与排版层级修复
问题: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:
@@ -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">不可读字号(<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> > 区块标题 <b>20px/600</b> > 卡片标题 <b>14px/600</b> > 元信息 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
@@ -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);
|
||||
}
|
||||
|
||||
@@ -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}
|
||||
|
||||
@@ -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; }
|
||||
|
||||
@@ -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); }
|
||||
}
|
||||
|
||||
@@ -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;
|
||||
}
|
||||
|
||||
@@ -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);
|
||||
}
|
||||
|
||||
@@ -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;
|
||||
}
|
||||
|
||||
@@ -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);
|
||||
}
|
||||
|
||||
@@ -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;
|
||||
}
|
||||
|
||||
@@ -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%); }
|
||||
}
|
||||
|
||||
@@ -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);
|
||||
}
|
||||
|
||||
@@ -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; }
|
||||
}
|
||||
|
||||
@@ -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;
|
||||
}
|
||||
|
||||
@@ -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);
|
||||
}
|
||||
|
||||
@@ -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 @@
|
||||
.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}
|
||||
|
||||
@@ -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;
|
||||
}
|
||||
|
||||
@@ -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);
|
||||
}
|
||||
|
||||
@@ -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;
|
||||
}
|
||||
|
||||
@@ -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);
|
||||
}
|
||||
|
||||
@@ -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);
|
||||
}
|
||||
|
||||
@@ -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}
|
||||
|
||||
@@ -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 @@
|
||||
.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,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
@@ -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 @@
|
||||
.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);}
|
||||
|
||||
@@ -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;
|
||||
}
|
||||
|
||||
@@ -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);
|
||||
}
|
||||
|
||||
@@ -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,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; }
|
||||
|
||||
@@ -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}
|
||||
|
||||
@@ -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;
|
||||
}
|
||||
|
||||
@@ -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
@@ -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;
|
||||
}
|
||||
|
||||
@@ -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 @@
|
||||
.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)}
|
||||
|
||||
@@ -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 @@
|
||||
.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;}
|
||||
|
||||
@@ -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); }
|
||||
|
||||
@@ -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);}
|
||||
|
||||
@@ -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;
|
||||
}
|
||||
|
||||
@@ -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);
|
||||
}
|
||||
|
||||
@@ -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
@@ -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}
|
||||
|
||||
@@ -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;
|
||||
}
|
||||
|
||||
@@ -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;
|
||||
}
|
||||
|
||||
@@ -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}
|
||||
|
||||
Reference in New Issue
Block a user