650 lines
37 KiB
HTML
650 lines
37 KiB
HTML
<!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>
|