1182 lines
143 KiB
HTML
1182 lines
143 KiB
HTML
<!DOCTYPE html><html lang="zh-CN"><head><meta charset="UTF-8">
|
||
<title>甄房业务系统 · UI 规范与标准(定稿 v1.2)</title>
|
||
<style>
|
||
*{box-sizing:border-box;margin:0;padding:0}
|
||
:root{
|
||
/* ── 品牌层 ── */
|
||
--zf-brand-ink: #0C2340;
|
||
--zf-brand-ink-deep: #071527;
|
||
--zf-brand-gold: #C6A15B;
|
||
--zf-brand-gold-soft: #E3CB99;
|
||
|
||
/* ── 交互层 ── */
|
||
--zf-primary: #0070F2;
|
||
--zf-primary-hover: #0064D9;
|
||
--zf-primary-active-bg: #FFFFFF;
|
||
--zf-primary-active-ink: #0064D9;
|
||
--zf-link: #0064D9;
|
||
|
||
/* ── 表面层 ── */
|
||
--zf-bg-base: #FFFFFF;
|
||
--zf-bg-sub: #F5F6F7;
|
||
--zf-bg-hover: #EAECEE;
|
||
--zf-bg-active: #DEE2E5;
|
||
--zf-bg-selected: #EBF8FF;
|
||
|
||
/* ── 边框 ── */
|
||
--zf-border: #E5E5E5;
|
||
--zf-border-field: #556B81;
|
||
--zf-border-strong: #758CA4;
|
||
|
||
/* ── 文字 ── */
|
||
--zf-text-1: #131E29;
|
||
--zf-text-2: #556B82;
|
||
--zf-text-3: #5F7590;
|
||
--zf-text-placeholder: #5F7590;
|
||
--zf-text-inverse: #FFFFFF;
|
||
--zf-text-inverse-2: #BBC1CA;
|
||
|
||
/* ── 语义色 ── */
|
||
--zf-success: #256F3A;
|
||
--zf-error: #AA0808;
|
||
--zf-warning: #E76500;
|
||
--zf-info: #0070F2;
|
||
--zf-neutral: #788FA6;
|
||
|
||
/* ── 形状与层级 ── */
|
||
--zf-radius-s: 4px;
|
||
--zf-radius: 8px;
|
||
--zf-radius-l: 12px;
|
||
--zf-radius-tile: 16px;
|
||
--zf-radius-pill: 999px;
|
||
--zf-shadow-1: 0 1px 2px rgba(34,53,72,.08);
|
||
--zf-shadow-2: 0 2px 8px rgba(34,53,72,.12);
|
||
|
||
--zf-fs-caption: 11px;
|
||
--zf-fs-body-s: 12px;
|
||
--zf-fs-body: 14px;
|
||
--zf-fs-title-s: 16px;
|
||
--zf-fs-title: 20px;
|
||
--zf-fs-display: 24px;
|
||
--zf-sp-1: 4px; --zf-sp-2: 8px; --zf-sp-3: 12px; --zf-sp-4: 16px; --zf-sp-5: 20px; --zf-sp-6: 24px; --zf-sp-7: 32px; --zf-sp-8: 40px;
|
||
--zf-font:"72","PingFang SC","Microsoft YaHei","Helvetica Neue",Arial,sans-serif;
|
||
}
|
||
body{background:#0a0d13;color:#e9edf5;font-family:var(--zf-font);padding:40px 24px 90px;line-height:1.6}
|
||
.wrap{max-width:1420px;margin:0 auto}
|
||
h1{font-size:26px;letter-spacing:.2px}h1 b{color:#E3CB99}
|
||
.hdr{border-bottom:1px solid rgba(255,255,255,.12);padding-bottom:18px;margin-bottom:6px}
|
||
.meta{display:flex;gap:22px;flex-wrap:wrap;font-size:12px;color:#8b94a7;margin-top:12px}
|
||
.meta b{color:#cfd6e4;font-weight:500}
|
||
h2{font-size:19px;margin:48px 0 8px;padding-left:11px;border-left:4px solid #C6A15B}
|
||
h2 em{font-size:11px;font-weight:400;color:#8b94a7;font-style:normal;margin-left:10px}
|
||
h3{font-size:15px;margin:26px 0 10px;color:#E3CB99}
|
||
p.note{font-size:12.5px;color:#8b94a7;margin:8px 0 16px;line-height:1.9}
|
||
p.note b{color:#cfd6e4}
|
||
code{font-family:Menlo,Consolas,monospace;font-size:11.5px}
|
||
|
||
table.doc{width:100%;border-collapse:collapse;font-size:12.5px;margin-top:12px}
|
||
table.doc th,table.doc td{border:1px solid rgba(255,255,255,.09);padding:8px 11px;text-align:left;vertical-align:top}
|
||
table.doc th{background:rgba(255,255,255,.045);font-weight:600;color:#cfd6e4;font-size:11.5px;white-space:nowrap}
|
||
table.doc td.k{color:#E3CB99;font-family:Menlo,Consolas,monospace;font-size:11.5px}
|
||
table.doc td.v{font-family:Menlo,Consolas,monospace;font-size:11.5px;white-space:nowrap}
|
||
table.doc td.s{font-family:Menlo,Consolas,monospace;font-size:10.5px;color:#8b94a7}
|
||
table.doc td.u{color:#98a1b3}
|
||
table.doc tr.hi td{background:rgba(94,224,138,.10)}
|
||
table.doc tr.hi td:first-child{box-shadow:inset 3px 0 0 #5ee08a}
|
||
.chip{display:inline-block;width:13px;height:13px;border-radius:4px;vertical-align:-2px;margin-right:7px;
|
||
border:1px solid rgba(255,255,255,.22)}
|
||
.pass,.fail{font-size:10px;padding:1px 7px;border-radius:20px;border:1px solid;white-space:nowrap}
|
||
.pass{color:#5ee08a;border-color:rgba(94,224,138,.42)}
|
||
.fail{color:#f0a55c;border-color:rgba(240,165,92,.45)}
|
||
.tag2{display:inline-block;font-size:10px;padding:1px 7px;border-radius:20px;border:1px solid;white-space:nowrap}
|
||
.tag2.m{color:#f0a55c;border-color:rgba(240,165,92,.5)}
|
||
.tag2.d{color:#8ab4f8;border-color:rgba(138,180,248,.5)}
|
||
.tag2.a{color:#8b94a7;border-color:rgba(139,148,167,.4)}
|
||
|
||
.stage{background:var(--zf-bg-base);color:var(--zf-text-1);border-radius:var(--zf-radius-l);
|
||
border:1px solid rgba(255,255,255,.13);padding:22px;margin-top:14px;font-family:var(--zf-font)}
|
||
.stage.dark{background:var(--zf-brand-ink);color:#fff}
|
||
.stage.plain{background:var(--zf-bg-sub)}
|
||
.row{display:flex;gap:12px;flex-wrap:wrap;align-items:center}
|
||
|
||
.btn{font-family:inherit;font-size:var(--zf-fs-body);border-radius:var(--zf-radius);padding:7px 16px;
|
||
border:1px solid var(--zf-border);background:var(--zf-bg-base);color:var(--zf-text-1);cursor:default;white-space:nowrap}
|
||
.btn.pri{background:var(--zf-primary);border-color:var(--zf-primary);color:#fff}
|
||
.btn.pri.h{background:var(--zf-primary-hover);border-color:var(--zf-primary-hover)}
|
||
.btn.pri.a{background:var(--zf-primary-active-bg);border-color:var(--zf-primary-active-ink);color:var(--zf-primary-active-ink)}
|
||
.btn.gho{border-color:var(--zf-primary);color:var(--zf-primary);background:transparent}
|
||
.btn.tx{border-color:transparent;background:transparent;color:var(--zf-link);padding:7px 6px}
|
||
.btn.dan{background:var(--zf-error);border-color:var(--zf-error);color:#fff}
|
||
.btn.dis{background:var(--zf-bg-sub);border-color:var(--zf-border);color:var(--zf-text-placeholder)}
|
||
.btn.sm{font-size:var(--zf-fs-body-s);padding:4px 11px}
|
||
|
||
.fld{display:flex;flex-direction:column;gap:5px}
|
||
.fld label{font-size:var(--zf-fs-body-s);color:var(--zf-text-2)}
|
||
.fld label .req{color:var(--zf-error);margin-left:3px}
|
||
.fld input,.fld select{font-family:inherit;font-size:var(--zf-fs-body);color:var(--zf-text-1);
|
||
background:var(--zf-bg-base);border:1px solid var(--zf-border-field);border-radius:var(--zf-radius-s);
|
||
padding:8px 11px;min-width:190px}
|
||
.fld input::placeholder{color:var(--zf-text-placeholder)}
|
||
.fld input:focus,.fld select:focus{outline:none;border-color:var(--zf-primary);box-shadow:0 0 0 3px var(--zf-bg-selected)}
|
||
.fld .hint{font-size:var(--zf-fs-caption);color:var(--zf-text-3)}
|
||
.fld.err input{border-color:var(--zf-error)}
|
||
.fld.err .hint{color:var(--zf-error)}
|
||
.fld.dis input{background:var(--zf-bg-sub);color:var(--zf-text-placeholder);border-color:var(--zf-border)}
|
||
|
||
.tbl{width:100%;border-collapse:collapse;font-size:var(--zf-fs-body);font-variant-numeric:tabular-nums;color:var(--zf-text-1)}
|
||
.tbl th{text-align:left;font-weight:600;font-size:var(--zf-fs-body-s);color:var(--zf-text-3);
|
||
background:var(--zf-bg-sub);padding:9px 12px;border-bottom:1px solid var(--zf-border);white-space:nowrap}
|
||
.tbl td{padding:9px 12px;border-bottom:1px solid var(--zf-border)}
|
||
.tbl tbody tr:nth-child(even){background:var(--zf-bg-sub)}
|
||
.tbl tbody tr.hov{background:var(--zf-bg-hover)}
|
||
.tbl tbody tr.sel{background:var(--zf-bg-selected)}
|
||
.tbl tbody tr.sel td:first-child{box-shadow:inset 3px 0 0 var(--zf-primary)}
|
||
.tbl .lk{color:var(--zf-link)}
|
||
.tbl .sub{display:block;font-size:var(--zf-fs-caption);color:var(--zf-text-3);margin-top:2px}
|
||
.tbl .num{text-align:right}
|
||
.tbl .act a{color:var(--zf-link);text-decoration:none;margin-right:10px;font-size:var(--zf-fs-body-s)}
|
||
.tbl .act a.dan{color:var(--zf-error)}
|
||
|
||
.tg{display:inline-block;font-size:var(--zf-fs-caption);padding:2px 9px;border-radius:var(--zf-radius-pill);
|
||
border:1px solid;white-space:nowrap;background:var(--zf-bg-base)}
|
||
.tg.ok{color:var(--zf-success);border-color:var(--zf-success);background:#F1F7F3}
|
||
.tg.wn{color:#B44F00;border-color:var(--zf-warning);background:#FDF1E8}
|
||
.tg.er{color:var(--zf-error);border-color:var(--zf-error);background:#FBF0F0}
|
||
.tg.pr{color:var(--zf-primary);border-color:var(--zf-primary);background:var(--zf-bg-selected)}
|
||
.tg.nu{color:var(--zf-text-2);border-color:var(--zf-border-strong);background:var(--zf-bg-base)}
|
||
.tg.gd{color:#8a6a2f;border-color:var(--zf-brand-gold);background:#FAF6EE}
|
||
|
||
.tabs{display:flex;gap:2px;border-bottom:1px solid var(--zf-border)}
|
||
.tabs a{font-size:var(--zf-fs-body);padding:9px 14px;color:var(--zf-text-2);text-decoration:none;border-bottom:2px solid transparent}
|
||
.tabs a.on{color:var(--zf-primary);border-bottom-color:var(--zf-primary);font-weight:600}
|
||
|
||
.pg{min-width:28px;height:28px;display:inline-flex;align-items:center;justify-content:center;
|
||
border:1px solid var(--zf-border);border-radius:var(--zf-radius-s);background:var(--zf-bg-base);
|
||
color:var(--zf-text-1);font-size:var(--zf-fs-body-s);margin-right:6px}
|
||
.pg.on{background:var(--zf-primary);border-color:var(--zf-primary);color:#fff;font-weight:600}
|
||
|
||
.al{display:flex;gap:9px;align-items:flex-start;font-size:var(--zf-fs-body);padding:11px 14px;
|
||
border-radius:var(--zf-radius);border:1px solid;border-left-width:3px;color:var(--zf-text-1);margin-bottom:9px}
|
||
.al b{font-weight:600}
|
||
.al.i{border-color:var(--zf-primary);background:var(--zf-bg-selected)}
|
||
.al.s{border-color:var(--zf-success);background:#F1F7F3}
|
||
.al.w{border-color:var(--zf-warning);background:#FDF1E8}
|
||
.al.e{border-color:var(--zf-error);background:#FBF0F0}
|
||
|
||
.card{background:var(--zf-bg-base);border:1px solid var(--zf-border);border-radius:var(--zf-radius);
|
||
box-shadow:var(--zf-shadow-1);padding:16px}
|
||
.kpi{background:var(--zf-bg-base);border:1px solid var(--zf-border);border-radius:var(--zf-radius);
|
||
padding:13px 15px;box-shadow:var(--zf-shadow-1)}
|
||
.kpi .t{font-size:var(--zf-fs-body-s);color:var(--zf-text-3)}
|
||
.kpi .v{font-size:var(--zf-fs-display);font-weight:600;margin-top:4px;font-variant-numeric:tabular-nums}
|
||
.kpi .v em{font-size:var(--zf-fs-body-s);font-style:normal;font-weight:400;color:var(--zf-text-3);margin-left:4px}
|
||
.kpi .d{font-size:var(--zf-fs-caption);margin-top:3px;color:var(--zf-success)}
|
||
.kpi .d.dn{color:var(--zf-error)}
|
||
.kpi.gold .v{color:#8a6a2f}
|
||
|
||
.app{display:grid;grid-template-columns:200px 1fr;border:1px solid var(--zf-border);
|
||
border-radius:var(--zf-radius-l);overflow:hidden;background:var(--zf-bg-base)}
|
||
.app .side{background:var(--zf-brand-ink);padding:14px 0}
|
||
.app .side .brand{display:flex;align-items:center;gap:10px;padding:2px 15px 16px;color:#fff}
|
||
.app .side .brand b{font-size:var(--zf-fs-title-s);letter-spacing:1px}
|
||
.app .side .brand em{display:block;font-size:8px;letter-spacing:1.4px;opacity:.6;font-style:normal}
|
||
.app .side a{display:flex;align-items:center;gap:9px;color:var(--zf-text-inverse-2);text-decoration:none;
|
||
font-size:var(--zf-fs-body);padding:9px 15px;border-left:3px solid transparent}
|
||
.app .side a.on{background:rgba(255,255,255,.10);color:#fff;border-left-color:var(--zf-brand-gold);font-weight:600}
|
||
.app .side a .dot{width:6px;height:6px;border-radius:2px;background:currentColor;opacity:.55}
|
||
.app .main{min-width:0}
|
||
.app .head{display:flex;align-items:center;gap:14px;padding:11px 18px;border-bottom:1px solid var(--zf-border)}
|
||
.app .head .cb{font-size:var(--zf-fs-body);color:var(--zf-text-2)}
|
||
.app .head .cb b{color:var(--zf-text-1)}
|
||
.app .head .usr{margin-left:auto;display:flex;align-items:center;gap:9px;font-size:var(--zf-fs-body-s);color:var(--zf-text-2)}
|
||
.app .head .av{width:26px;height:26px;border-radius:50%;background:var(--zf-bg-selected);
|
||
color:var(--zf-primary);display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:600}
|
||
.app .bd{padding:16px 18px;background:var(--zf-bg-sub)}
|
||
|
||
.st{border:1px dashed var(--zf-border-strong);border-radius:var(--zf-radius);padding:26px;
|
||
text-align:center;color:var(--zf-text-3);font-size:var(--zf-fs-body)}
|
||
.st .ic{font-size:26px;display:block;margin-bottom:9px;opacity:.55}
|
||
.st b{display:block;color:var(--zf-text-2);font-size:var(--zf-fs-body);margin-bottom:5px;font-weight:600}
|
||
.sk{background:var(--zf-bg-sub);border-radius:var(--zf-radius-s);height:13px;margin:7px 0}
|
||
|
||
.dont{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:12px;margin-top:12px}
|
||
.dont div{background:rgba(240,92,92,.06);border:1px solid rgba(240,92,92,.3);border-radius:10px;
|
||
padding:12px;text-align:center;font-size:11px;color:#f0a5a5}
|
||
.dont div .pv{height:78px;display:flex;align-items:center;justify-content:center;background:#fff;
|
||
border-radius:7px;margin-bottom:9px;overflow:hidden}
|
||
.risk{background:rgba(240,165,92,.08);border:1px solid rgba(240,165,92,.32);border-radius:12px;
|
||
padding:14px 16px;font-size:12.5px;line-height:1.95;color:#f2c48a;margin-top:10px}
|
||
.risk b{color:#ffd9a8}
|
||
.risk code{background:rgba(255,255,255,.07);padding:1px 5px;border-radius:4px}
|
||
pre{background:#0d1220;border:1px solid rgba(255,255,255,.09);border-radius:11px;padding:14px 16px;
|
||
font-size:11.5px;line-height:1.85;color:#cfd6e4;overflow-x:auto;margin-top:12px;font-family:Menlo,Consolas,monospace}
|
||
a.dl{color:#8ab4f8}
|
||
</style></head><body><div class="wrap">
|
||
|
||
<div class="hdr">
|
||
<h1>甄房业务系统 · <b>UI 规范与标准</b></h1>
|
||
<div class="meta">
|
||
<span>版本 <b>v1.2(定稿)</b></span>
|
||
<span>色彩体系 <b>SAP Fiori Morning Horizon</b></span>
|
||
<span>LOGO <b>Forte Z + 甄房墨蓝 · Z 占比 80%</b></span>
|
||
<span>UI 库 <b>element-ui 2.15.14(Vue 2.6)</b></span>
|
||
<span>日期 <b>2026-09-19</b></span>
|
||
</div>
|
||
</div>
|
||
|
||
<p class="note" style="margin-top:18px">
|
||
<b>本页是该项目的唯一权威 UI 标准。</b>任何界面实现以本页的令牌名与取值为准;不要直接写十六进制色值,不要引入第二套色彩。<br>
|
||
<b>色值来源纪律</b>:全部 Fiori 色值取自官方主题包
|
||
<code>@sap-theming/theming-base-content → sap_horizon/css_variables.css</code> 实测,ElementUI 变量名与默认值取自
|
||
<code>element-ui@2.15.14 → theme-chalk/src/common/var.scss</code> 实测,逐条标注官方来源变量名,<b>无记忆引用</b>。
|
||
对比度由页面运行时真实计算(WCAG 2.1)。
|
||
</p>
|
||
|
||
<h2>一、品牌资产 · LOGO<em>已定稿</em></h2>
|
||
<p class="note">主 logo 采用 <b>Z 在房框内 80% 档</b>;房框与描边粗细恒定,四档只缩放框内 Z。全部资产为矢量转曲路径。</p>
|
||
<div class="stage">
|
||
<div class="row" style="gap:26px">
|
||
<div style="text-align:center"><svg viewBox="0 0 64 64" width="88" height="88"><g transform="translate(5.3304 5.3294) scale(2.22222)"><path d="M3 11.99v2.51c0 3.3 0 4.95 1.025 5.975S6.7 21.5 10 21.5h4c3.3 0 4.95 0 5.975-1.025S21 17.8 21 14.5v-2.51c0-1.682 0-2.522-.356-3.25s-1.02-1.244-2.346-2.276l-2-1.555C14.233 3.303 13.2 2.5 12 2.5s-2.233.803-4.298 2.409l-2 1.555C4.375 7.496 3.712 8.012 3.356 8.74S3 10.308 3 11.99" fill="none" stroke="#0C2340" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></g><g transform="translate(32.25 39) scale(0.9508) translate(-32.25 -39)"><path d="M27.97 39.99 C27.85 40.09 27.73 40.19 27.25 40.59 C26.78 40.99 25.73 41.87 25.12 42.39 C24.52 42.91 23.97 43.38 23.61 43.70 C23.25 44.02 23.15 44.11 22.96 44.29 C22.77 44.47 22.59 44.63 22.45 44.78 C22.30 44.93 22.18 45.05 22.07 45.17 C21.96 45.29 21.86 45.40 21.77 45.51 C21.68 45.63 21.59 45.75 21.52 45.85 C21.46 45.96 21.40 46.05 21.36 46.15 C21.31 46.24 21.28 46.35 21.26 46.41 C21.25 46.47 21.25 46.48 21.25 46.52 C21.25 46.55 21.25 46.59 21.25 46.63 C21.25 46.66 21.26 46.71 21.27 46.75 C21.28 46.78 21.29 46.82 21.31 46.86 C21.33 46.90 21.35 46.94 21.37 46.98 C21.39 47.01 21.39 47.02 21.44 47.07 C21.49 47.13 21.58 47.22 21.66 47.29 C21.74 47.36 21.84 47.43 21.93 47.48 C22.03 47.54 22.10 47.58 22.21 47.63 C22.32 47.69 22.45 47.75 22.58 47.79 C22.70 47.84 22.81 47.89 22.94 47.93 C23.07 47.97 23.20 48.01 23.35 48.06 C23.51 48.10 23.69 48.15 23.86 48.19 C24.03 48.22 24.18 48.26 24.35 48.29 C24.53 48.32 24.70 48.36 24.89 48.39 C25.07 48.42 25.25 48.44 25.46 48.47 C25.67 48.50 25.92 48.53 26.14 48.55 C26.37 48.58 26.45 48.59 26.78 48.62 C27.12 48.64 27.66 48.68 28.16 48.70 C28.65 48.72 29.24 48.74 29.74 48.74 C30.25 48.75 30.75 48.74 31.21 48.73 C31.68 48.72 32.10 48.69 32.54 48.66 C32.97 48.63 33.41 48.59 33.84 48.54 C34.26 48.49 34.70 48.43 35.09 48.37 C35.48 48.31 35.91 48.22 36.17 48.17 C36.44 48.11 36.51 48.09 36.68 48.05 C36.86 48.01 37.05 47.95 37.22 47.91 C37.38 47.86 37.53 47.82 37.67 47.77 C37.82 47.72 37.96 47.67 38.10 47.62 C38.23 47.57 38.36 47.52 38.49 47.47 C38.61 47.42 38.73 47.36 38.84 47.31 C38.96 47.25 39.06 47.20 39.16 47.14 C39.27 47.08 39.38 47.01 39.48 46.95 C39.59 46.88 39.68 46.81 39.77 46.74 C39.86 46.67 39.94 46.60 40.03 46.53 C40.11 46.46 40.19 46.38 40.28 46.30 C40.36 46.21 40.44 46.13 40.52 46.04 C40.60 45.94 40.68 45.85 40.76 45.75 C40.84 45.65 40.92 45.55 41.00 45.44 C41.08 45.32 41.18 45.18 41.25 45.07 C41.32 44.95 41.38 44.85 41.44 44.75 C41.50 44.64 41.55 44.55 41.59 44.45 C41.64 44.35 41.69 44.24 41.72 44.15 C41.75 44.06 41.77 43.99 41.79 43.91 C41.81 43.83 41.82 43.74 41.83 43.67 C41.84 43.60 41.84 43.54 41.83 43.49 C41.82 43.44 41.81 43.39 41.79 43.35 C41.77 43.31 41.74 43.28 41.71 43.25 C41.67 43.23 41.63 43.20 41.58 43.18 C41.53 43.16 41.48 43.15 41.42 43.14 C41.36 43.13 41.31 43.12 41.24 43.12 C41.17 43.11 41.10 43.11 41.02 43.11 C40.94 43.12 40.88 43.12 40.76 43.13 C40.64 43.15 40.66 43.14 40.32 43.19 C39.97 43.25 39.23 43.38 38.70 43.46 C38.18 43.54 37.72 43.60 37.16 43.67 C36.60 43.73 35.90 43.81 35.34 43.86 C34.79 43.91 34.47 43.93 33.83 43.97 C33.19 44.00 31.89 44.06 31.48 44.07 C31.07 44.09 31.40 44.06 31.37 44.04 C31.34 44.03 31.31 44.00 31.29 43.97 C31.27 43.94 31.25 43.91 31.24 43.87 C31.24 43.84 31.24 43.80 31.24 43.77 C31.25 43.73 31.21 43.79 31.28 43.68 C31.34 43.57 31.50 43.30 31.64 43.10 C31.78 42.90 31.88 42.78 32.11 42.49 C32.34 42.20 32.68 41.78 33.02 41.37 C33.36 40.96 33.71 40.55 34.18 40.01 C34.65 39.47 35.17 38.88 35.85 38.12 C36.52 37.36 37.42 36.36 38.25 35.46 C39.08 34.57 40.29 33.32 40.84 32.75 C41.39 32.17 41.32 32.26 41.56 32.02 C41.81 31.78 42.11 31.50 42.31 31.30 C42.52 31.10 42.65 30.96 42.77 30.82 C42.90 30.69 42.99 30.57 43.06 30.47 C43.14 30.37 43.19 30.28 43.22 30.23 C43.25 30.17 43.25 30.15 43.25 30.12 C43.26 30.09 43.25 30.08 43.24 30.05 C43.23 30.03 43.23 30.02 43.19 29.98 C43.16 29.93 43.08 29.84 43.03 29.79 C42.99 29.75 42.97 29.73 42.94 29.71 C42.91 29.68 42.90 29.67 42.84 29.64 C42.78 29.61 42.67 29.56 42.57 29.53 C42.46 29.49 42.34 29.46 42.21 29.44 C42.09 29.41 41.97 29.39 41.80 29.37 C41.64 29.35 41.45 29.34 41.23 29.32 C41.01 29.31 40.74 29.29 40.48 29.29 C40.21 29.28 40.30 29.27 39.62 29.26 C38.94 29.26 37.39 29.25 36.39 29.26 C35.40 29.27 34.54 29.32 33.64 29.34 C32.74 29.37 31.68 29.39 31.01 29.40 C30.33 29.41 30.06 29.40 29.59 29.41 C29.12 29.41 28.50 29.43 28.19 29.44 C27.89 29.45 27.88 29.45 27.76 29.46 C27.63 29.48 27.54 29.49 27.45 29.51 C27.36 29.53 27.31 29.55 27.23 29.58 C27.16 29.62 27.10 29.65 27.00 29.71 C26.90 29.78 26.77 29.88 26.66 29.97 C26.54 30.07 26.43 30.16 26.32 30.26 C26.21 30.36 26.10 30.46 26.00 30.56 C25.90 30.66 25.80 30.77 25.70 30.88 C25.60 30.98 25.51 31.09 25.42 31.20 C25.33 31.32 25.22 31.45 25.14 31.57 C25.05 31.68 24.97 31.80 24.91 31.91 C24.84 32.01 24.79 32.11 24.74 32.20 C24.70 32.29 24.67 32.36 24.65 32.43 C24.62 32.50 24.61 32.55 24.60 32.61 C24.59 32.67 24.60 32.74 24.60 32.80 C24.61 32.85 24.62 32.90 24.64 32.94 C24.66 32.99 24.68 33.04 24.72 33.09 C24.75 33.13 24.80 33.18 24.84 33.22 C24.89 33.26 24.94 33.29 25.00 33.32 C25.07 33.35 25.14 33.38 25.21 33.41 C25.28 33.43 25.36 33.45 25.43 33.47 C25.50 33.48 25.50 33.49 25.62 33.50 C25.74 33.52 26.04 33.55 26.15 33.56 C26.26 33.57 26.08 33.57 26.30 33.56 C26.53 33.56 27.15 33.54 27.49 33.51 C27.84 33.49 28.05 33.46 28.37 33.42 C28.69 33.39 29.03 33.34 29.40 33.29 C29.76 33.23 29.98 33.20 30.57 33.10 C31.16 33.00 32.40 32.78 32.95 32.69 C33.51 32.60 33.59 32.59 33.90 32.55 C34.20 32.51 34.54 32.47 34.79 32.44 C35.04 32.42 35.28 32.39 35.39 32.38 C35.50 32.38 35.44 32.38 35.46 32.39 C35.49 32.40 35.51 32.40 35.54 32.42 C35.56 32.43 35.58 32.45 35.60 32.47 C35.62 32.49 35.63 32.51 35.64 32.54 C35.65 32.56 35.66 32.59 35.66 32.61 C35.67 32.64 35.67 32.67 35.66 32.69 C35.65 32.72 35.68 32.69 35.62 32.78 C35.57 32.86 35.41 33.07 35.32 33.20 C35.22 33.32 35.21 33.36 35.04 33.55 C34.86 33.73 34.53 34.06 34.27 34.32 C34.01 34.58 33.79 34.79 33.46 35.10 C33.13 35.42 32.68 35.84 32.29 36.21 C31.89 36.58 31.45 36.98 31.07 37.31 C30.70 37.65 30.21 38.07 30.04 38.22 Z" fill="#0C2340"/></g></svg><div style="font-size:11px;color:#8b94a7;margin-top:8px">主 logo · 浅底</div></div>
|
||
<div style="text-align:center;background:#0C2340;padding:14px;border-radius:10px"><svg viewBox="0 0 64 64" width="88" height="88"><g transform="translate(5.3304 5.3294) scale(2.22222)"><path d="M3 11.99v2.51c0 3.3 0 4.95 1.025 5.975S6.7 21.5 10 21.5h4c3.3 0 4.95 0 5.975-1.025S21 17.8 21 14.5v-2.51c0-1.682 0-2.522-.356-3.25s-1.02-1.244-2.346-2.276l-2-1.555C14.233 3.303 13.2 2.5 12 2.5s-2.233.803-4.298 2.409l-2 1.555C4.375 7.496 3.712 8.012 3.356 8.74S3 10.308 3 11.99" fill="none" stroke="#FFFFFF" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></g><g transform="translate(32.25 39) scale(0.9508) translate(-32.25 -39)"><path d="M27.97 39.99 C27.85 40.09 27.73 40.19 27.25 40.59 C26.78 40.99 25.73 41.87 25.12 42.39 C24.52 42.91 23.97 43.38 23.61 43.70 C23.25 44.02 23.15 44.11 22.96 44.29 C22.77 44.47 22.59 44.63 22.45 44.78 C22.30 44.93 22.18 45.05 22.07 45.17 C21.96 45.29 21.86 45.40 21.77 45.51 C21.68 45.63 21.59 45.75 21.52 45.85 C21.46 45.96 21.40 46.05 21.36 46.15 C21.31 46.24 21.28 46.35 21.26 46.41 C21.25 46.47 21.25 46.48 21.25 46.52 C21.25 46.55 21.25 46.59 21.25 46.63 C21.25 46.66 21.26 46.71 21.27 46.75 C21.28 46.78 21.29 46.82 21.31 46.86 C21.33 46.90 21.35 46.94 21.37 46.98 C21.39 47.01 21.39 47.02 21.44 47.07 C21.49 47.13 21.58 47.22 21.66 47.29 C21.74 47.36 21.84 47.43 21.93 47.48 C22.03 47.54 22.10 47.58 22.21 47.63 C22.32 47.69 22.45 47.75 22.58 47.79 C22.70 47.84 22.81 47.89 22.94 47.93 C23.07 47.97 23.20 48.01 23.35 48.06 C23.51 48.10 23.69 48.15 23.86 48.19 C24.03 48.22 24.18 48.26 24.35 48.29 C24.53 48.32 24.70 48.36 24.89 48.39 C25.07 48.42 25.25 48.44 25.46 48.47 C25.67 48.50 25.92 48.53 26.14 48.55 C26.37 48.58 26.45 48.59 26.78 48.62 C27.12 48.64 27.66 48.68 28.16 48.70 C28.65 48.72 29.24 48.74 29.74 48.74 C30.25 48.75 30.75 48.74 31.21 48.73 C31.68 48.72 32.10 48.69 32.54 48.66 C32.97 48.63 33.41 48.59 33.84 48.54 C34.26 48.49 34.70 48.43 35.09 48.37 C35.48 48.31 35.91 48.22 36.17 48.17 C36.44 48.11 36.51 48.09 36.68 48.05 C36.86 48.01 37.05 47.95 37.22 47.91 C37.38 47.86 37.53 47.82 37.67 47.77 C37.82 47.72 37.96 47.67 38.10 47.62 C38.23 47.57 38.36 47.52 38.49 47.47 C38.61 47.42 38.73 47.36 38.84 47.31 C38.96 47.25 39.06 47.20 39.16 47.14 C39.27 47.08 39.38 47.01 39.48 46.95 C39.59 46.88 39.68 46.81 39.77 46.74 C39.86 46.67 39.94 46.60 40.03 46.53 C40.11 46.46 40.19 46.38 40.28 46.30 C40.36 46.21 40.44 46.13 40.52 46.04 C40.60 45.94 40.68 45.85 40.76 45.75 C40.84 45.65 40.92 45.55 41.00 45.44 C41.08 45.32 41.18 45.18 41.25 45.07 C41.32 44.95 41.38 44.85 41.44 44.75 C41.50 44.64 41.55 44.55 41.59 44.45 C41.64 44.35 41.69 44.24 41.72 44.15 C41.75 44.06 41.77 43.99 41.79 43.91 C41.81 43.83 41.82 43.74 41.83 43.67 C41.84 43.60 41.84 43.54 41.83 43.49 C41.82 43.44 41.81 43.39 41.79 43.35 C41.77 43.31 41.74 43.28 41.71 43.25 C41.67 43.23 41.63 43.20 41.58 43.18 C41.53 43.16 41.48 43.15 41.42 43.14 C41.36 43.13 41.31 43.12 41.24 43.12 C41.17 43.11 41.10 43.11 41.02 43.11 C40.94 43.12 40.88 43.12 40.76 43.13 C40.64 43.15 40.66 43.14 40.32 43.19 C39.97 43.25 39.23 43.38 38.70 43.46 C38.18 43.54 37.72 43.60 37.16 43.67 C36.60 43.73 35.90 43.81 35.34 43.86 C34.79 43.91 34.47 43.93 33.83 43.97 C33.19 44.00 31.89 44.06 31.48 44.07 C31.07 44.09 31.40 44.06 31.37 44.04 C31.34 44.03 31.31 44.00 31.29 43.97 C31.27 43.94 31.25 43.91 31.24 43.87 C31.24 43.84 31.24 43.80 31.24 43.77 C31.25 43.73 31.21 43.79 31.28 43.68 C31.34 43.57 31.50 43.30 31.64 43.10 C31.78 42.90 31.88 42.78 32.11 42.49 C32.34 42.20 32.68 41.78 33.02 41.37 C33.36 40.96 33.71 40.55 34.18 40.01 C34.65 39.47 35.17 38.88 35.85 38.12 C36.52 37.36 37.42 36.36 38.25 35.46 C39.08 34.57 40.29 33.32 40.84 32.75 C41.39 32.17 41.32 32.26 41.56 32.02 C41.81 31.78 42.11 31.50 42.31 31.30 C42.52 31.10 42.65 30.96 42.77 30.82 C42.90 30.69 42.99 30.57 43.06 30.47 C43.14 30.37 43.19 30.28 43.22 30.23 C43.25 30.17 43.25 30.15 43.25 30.12 C43.26 30.09 43.25 30.08 43.24 30.05 C43.23 30.03 43.23 30.02 43.19 29.98 C43.16 29.93 43.08 29.84 43.03 29.79 C42.99 29.75 42.97 29.73 42.94 29.71 C42.91 29.68 42.90 29.67 42.84 29.64 C42.78 29.61 42.67 29.56 42.57 29.53 C42.46 29.49 42.34 29.46 42.21 29.44 C42.09 29.41 41.97 29.39 41.80 29.37 C41.64 29.35 41.45 29.34 41.23 29.32 C41.01 29.31 40.74 29.29 40.48 29.29 C40.21 29.28 40.30 29.27 39.62 29.26 C38.94 29.26 37.39 29.25 36.39 29.26 C35.40 29.27 34.54 29.32 33.64 29.34 C32.74 29.37 31.68 29.39 31.01 29.40 C30.33 29.41 30.06 29.40 29.59 29.41 C29.12 29.41 28.50 29.43 28.19 29.44 C27.89 29.45 27.88 29.45 27.76 29.46 C27.63 29.48 27.54 29.49 27.45 29.51 C27.36 29.53 27.31 29.55 27.23 29.58 C27.16 29.62 27.10 29.65 27.00 29.71 C26.90 29.78 26.77 29.88 26.66 29.97 C26.54 30.07 26.43 30.16 26.32 30.26 C26.21 30.36 26.10 30.46 26.00 30.56 C25.90 30.66 25.80 30.77 25.70 30.88 C25.60 30.98 25.51 31.09 25.42 31.20 C25.33 31.32 25.22 31.45 25.14 31.57 C25.05 31.68 24.97 31.80 24.91 31.91 C24.84 32.01 24.79 32.11 24.74 32.20 C24.70 32.29 24.67 32.36 24.65 32.43 C24.62 32.50 24.61 32.55 24.60 32.61 C24.59 32.67 24.60 32.74 24.60 32.80 C24.61 32.85 24.62 32.90 24.64 32.94 C24.66 32.99 24.68 33.04 24.72 33.09 C24.75 33.13 24.80 33.18 24.84 33.22 C24.89 33.26 24.94 33.29 25.00 33.32 C25.07 33.35 25.14 33.38 25.21 33.41 C25.28 33.43 25.36 33.45 25.43 33.47 C25.50 33.48 25.50 33.49 25.62 33.50 C25.74 33.52 26.04 33.55 26.15 33.56 C26.26 33.57 26.08 33.57 26.30 33.56 C26.53 33.56 27.15 33.54 27.49 33.51 C27.84 33.49 28.05 33.46 28.37 33.42 C28.69 33.39 29.03 33.34 29.40 33.29 C29.76 33.23 29.98 33.20 30.57 33.10 C31.16 33.00 32.40 32.78 32.95 32.69 C33.51 32.60 33.59 32.59 33.90 32.55 C34.20 32.51 34.54 32.47 34.79 32.44 C35.04 32.42 35.28 32.39 35.39 32.38 C35.50 32.38 35.44 32.38 35.46 32.39 C35.49 32.40 35.51 32.40 35.54 32.42 C35.56 32.43 35.58 32.45 35.60 32.47 C35.62 32.49 35.63 32.51 35.64 32.54 C35.65 32.56 35.66 32.59 35.66 32.61 C35.67 32.64 35.67 32.67 35.66 32.69 C35.65 32.72 35.68 32.69 35.62 32.78 C35.57 32.86 35.41 33.07 35.32 33.20 C35.22 33.32 35.21 33.36 35.04 33.55 C34.86 33.73 34.53 34.06 34.27 34.32 C34.01 34.58 33.79 34.79 33.46 35.10 C33.13 35.42 32.68 35.84 32.29 36.21 C31.89 36.58 31.45 36.98 31.07 37.31 C30.70 37.65 30.21 38.07 30.04 38.22 Z" fill="#FFFFFF"/></g></svg><div style="font-size:11px;color:rgba(255,255,255,.6);margin-top:8px">主 logo · 深底反白</div></div>
|
||
<div style="text-align:center"><svg viewBox="0 0 64 64" width="88" height="88"><g transform="translate(5.3304 5.3294) scale(2.22222)"><path d="M3 11.99v2.51c0 3.3 0 4.95 1.025 5.975S6.7 21.5 10 21.5h4c3.3 0 4.95 0 5.975-1.025S21 17.8 21 14.5v-2.51c0-1.682 0-2.522-.356-3.25s-1.02-1.244-2.346-2.276l-2-1.555C14.233 3.303 13.2 2.5 12 2.5s-2.233.803-4.298 2.409l-2 1.555C4.375 7.496 3.712 8.012 3.356 8.74S3 10.308 3 11.99" fill="none" stroke="#C6A15B" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></g><g transform="translate(32.25 39) scale(0.9508) translate(-32.25 -39)"><path d="M27.97 39.99 C27.85 40.09 27.73 40.19 27.25 40.59 C26.78 40.99 25.73 41.87 25.12 42.39 C24.52 42.91 23.97 43.38 23.61 43.70 C23.25 44.02 23.15 44.11 22.96 44.29 C22.77 44.47 22.59 44.63 22.45 44.78 C22.30 44.93 22.18 45.05 22.07 45.17 C21.96 45.29 21.86 45.40 21.77 45.51 C21.68 45.63 21.59 45.75 21.52 45.85 C21.46 45.96 21.40 46.05 21.36 46.15 C21.31 46.24 21.28 46.35 21.26 46.41 C21.25 46.47 21.25 46.48 21.25 46.52 C21.25 46.55 21.25 46.59 21.25 46.63 C21.25 46.66 21.26 46.71 21.27 46.75 C21.28 46.78 21.29 46.82 21.31 46.86 C21.33 46.90 21.35 46.94 21.37 46.98 C21.39 47.01 21.39 47.02 21.44 47.07 C21.49 47.13 21.58 47.22 21.66 47.29 C21.74 47.36 21.84 47.43 21.93 47.48 C22.03 47.54 22.10 47.58 22.21 47.63 C22.32 47.69 22.45 47.75 22.58 47.79 C22.70 47.84 22.81 47.89 22.94 47.93 C23.07 47.97 23.20 48.01 23.35 48.06 C23.51 48.10 23.69 48.15 23.86 48.19 C24.03 48.22 24.18 48.26 24.35 48.29 C24.53 48.32 24.70 48.36 24.89 48.39 C25.07 48.42 25.25 48.44 25.46 48.47 C25.67 48.50 25.92 48.53 26.14 48.55 C26.37 48.58 26.45 48.59 26.78 48.62 C27.12 48.64 27.66 48.68 28.16 48.70 C28.65 48.72 29.24 48.74 29.74 48.74 C30.25 48.75 30.75 48.74 31.21 48.73 C31.68 48.72 32.10 48.69 32.54 48.66 C32.97 48.63 33.41 48.59 33.84 48.54 C34.26 48.49 34.70 48.43 35.09 48.37 C35.48 48.31 35.91 48.22 36.17 48.17 C36.44 48.11 36.51 48.09 36.68 48.05 C36.86 48.01 37.05 47.95 37.22 47.91 C37.38 47.86 37.53 47.82 37.67 47.77 C37.82 47.72 37.96 47.67 38.10 47.62 C38.23 47.57 38.36 47.52 38.49 47.47 C38.61 47.42 38.73 47.36 38.84 47.31 C38.96 47.25 39.06 47.20 39.16 47.14 C39.27 47.08 39.38 47.01 39.48 46.95 C39.59 46.88 39.68 46.81 39.77 46.74 C39.86 46.67 39.94 46.60 40.03 46.53 C40.11 46.46 40.19 46.38 40.28 46.30 C40.36 46.21 40.44 46.13 40.52 46.04 C40.60 45.94 40.68 45.85 40.76 45.75 C40.84 45.65 40.92 45.55 41.00 45.44 C41.08 45.32 41.18 45.18 41.25 45.07 C41.32 44.95 41.38 44.85 41.44 44.75 C41.50 44.64 41.55 44.55 41.59 44.45 C41.64 44.35 41.69 44.24 41.72 44.15 C41.75 44.06 41.77 43.99 41.79 43.91 C41.81 43.83 41.82 43.74 41.83 43.67 C41.84 43.60 41.84 43.54 41.83 43.49 C41.82 43.44 41.81 43.39 41.79 43.35 C41.77 43.31 41.74 43.28 41.71 43.25 C41.67 43.23 41.63 43.20 41.58 43.18 C41.53 43.16 41.48 43.15 41.42 43.14 C41.36 43.13 41.31 43.12 41.24 43.12 C41.17 43.11 41.10 43.11 41.02 43.11 C40.94 43.12 40.88 43.12 40.76 43.13 C40.64 43.15 40.66 43.14 40.32 43.19 C39.97 43.25 39.23 43.38 38.70 43.46 C38.18 43.54 37.72 43.60 37.16 43.67 C36.60 43.73 35.90 43.81 35.34 43.86 C34.79 43.91 34.47 43.93 33.83 43.97 C33.19 44.00 31.89 44.06 31.48 44.07 C31.07 44.09 31.40 44.06 31.37 44.04 C31.34 44.03 31.31 44.00 31.29 43.97 C31.27 43.94 31.25 43.91 31.24 43.87 C31.24 43.84 31.24 43.80 31.24 43.77 C31.25 43.73 31.21 43.79 31.28 43.68 C31.34 43.57 31.50 43.30 31.64 43.10 C31.78 42.90 31.88 42.78 32.11 42.49 C32.34 42.20 32.68 41.78 33.02 41.37 C33.36 40.96 33.71 40.55 34.18 40.01 C34.65 39.47 35.17 38.88 35.85 38.12 C36.52 37.36 37.42 36.36 38.25 35.46 C39.08 34.57 40.29 33.32 40.84 32.75 C41.39 32.17 41.32 32.26 41.56 32.02 C41.81 31.78 42.11 31.50 42.31 31.30 C42.52 31.10 42.65 30.96 42.77 30.82 C42.90 30.69 42.99 30.57 43.06 30.47 C43.14 30.37 43.19 30.28 43.22 30.23 C43.25 30.17 43.25 30.15 43.25 30.12 C43.26 30.09 43.25 30.08 43.24 30.05 C43.23 30.03 43.23 30.02 43.19 29.98 C43.16 29.93 43.08 29.84 43.03 29.79 C42.99 29.75 42.97 29.73 42.94 29.71 C42.91 29.68 42.90 29.67 42.84 29.64 C42.78 29.61 42.67 29.56 42.57 29.53 C42.46 29.49 42.34 29.46 42.21 29.44 C42.09 29.41 41.97 29.39 41.80 29.37 C41.64 29.35 41.45 29.34 41.23 29.32 C41.01 29.31 40.74 29.29 40.48 29.29 C40.21 29.28 40.30 29.27 39.62 29.26 C38.94 29.26 37.39 29.25 36.39 29.26 C35.40 29.27 34.54 29.32 33.64 29.34 C32.74 29.37 31.68 29.39 31.01 29.40 C30.33 29.41 30.06 29.40 29.59 29.41 C29.12 29.41 28.50 29.43 28.19 29.44 C27.89 29.45 27.88 29.45 27.76 29.46 C27.63 29.48 27.54 29.49 27.45 29.51 C27.36 29.53 27.31 29.55 27.23 29.58 C27.16 29.62 27.10 29.65 27.00 29.71 C26.90 29.78 26.77 29.88 26.66 29.97 C26.54 30.07 26.43 30.16 26.32 30.26 C26.21 30.36 26.10 30.46 26.00 30.56 C25.90 30.66 25.80 30.77 25.70 30.88 C25.60 30.98 25.51 31.09 25.42 31.20 C25.33 31.32 25.22 31.45 25.14 31.57 C25.05 31.68 24.97 31.80 24.91 31.91 C24.84 32.01 24.79 32.11 24.74 32.20 C24.70 32.29 24.67 32.36 24.65 32.43 C24.62 32.50 24.61 32.55 24.60 32.61 C24.59 32.67 24.60 32.74 24.60 32.80 C24.61 32.85 24.62 32.90 24.64 32.94 C24.66 32.99 24.68 33.04 24.72 33.09 C24.75 33.13 24.80 33.18 24.84 33.22 C24.89 33.26 24.94 33.29 25.00 33.32 C25.07 33.35 25.14 33.38 25.21 33.41 C25.28 33.43 25.36 33.45 25.43 33.47 C25.50 33.48 25.50 33.49 25.62 33.50 C25.74 33.52 26.04 33.55 26.15 33.56 C26.26 33.57 26.08 33.57 26.30 33.56 C26.53 33.56 27.15 33.54 27.49 33.51 C27.84 33.49 28.05 33.46 28.37 33.42 C28.69 33.39 29.03 33.34 29.40 33.29 C29.76 33.23 29.98 33.20 30.57 33.10 C31.16 33.00 32.40 32.78 32.95 32.69 C33.51 32.60 33.59 32.59 33.90 32.55 C34.20 32.51 34.54 32.47 34.79 32.44 C35.04 32.42 35.28 32.39 35.39 32.38 C35.50 32.38 35.44 32.38 35.46 32.39 C35.49 32.40 35.51 32.40 35.54 32.42 C35.56 32.43 35.58 32.45 35.60 32.47 C35.62 32.49 35.63 32.51 35.64 32.54 C35.65 32.56 35.66 32.59 35.66 32.61 C35.67 32.64 35.67 32.67 35.66 32.69 C35.65 32.72 35.68 32.69 35.62 32.78 C35.57 32.86 35.41 33.07 35.32 33.20 C35.22 33.32 35.21 33.36 35.04 33.55 C34.86 33.73 34.53 34.06 34.27 34.32 C34.01 34.58 33.79 34.79 33.46 35.10 C33.13 35.42 32.68 35.84 32.29 36.21 C31.89 36.58 31.45 36.98 31.07 37.31 C30.70 37.65 30.21 38.07 30.04 38.22 Z" fill="#C6A15B"/></g></svg><div style="font-size:11px;color:#8b94a7;margin-top:8px">金色点缀版(限定场景)</div></div>
|
||
</div>
|
||
</div>
|
||
|
||
<h3>四档占比</h3>
|
||
<table class="doc"><thead><tr><th>档位</th><th>Z 外接框(64 网格)</th><th>相对主 logo</th><th>用途</th></tr></thead><tbody>
|
||
<tr>
|
||
<td class="k">90%</td>
|
||
<td class="v">23.5 × 20.8</td>
|
||
<td class="v">×1.13</td><td class="u">需要更强视觉重量时:小图标位、深色底上的白标(不要用于 32px 以下)</td></tr><tr class="hi">
|
||
<td class="k">80% ★</td>
|
||
<td class="v">20.9 × 18.5</td>
|
||
<td class="v">×1.00</td><td class="u"><b>主 logo,一律默认用这一档</b></td></tr><tr>
|
||
<td class="k">70%</td>
|
||
<td class="v">18.3 × 16.2</td>
|
||
<td class="v">×0.88</td><td class="u">大幅面(≥1200px)与印刷物料</td></tr><tr>
|
||
<td class="k">60%</td>
|
||
<td class="v">15.7 × 13.9</td>
|
||
<td class="v">×0.75</td><td class="u">名片、信封、大留白版式</td></tr>
|
||
</tbody></table>
|
||
|
||
<h3>规则</h3>
|
||
<table class="doc"><thead><tr><th>项</th><th>标准</th></tr></thead><tbody>
|
||
<tr><td class="k">配色</td><td class="u">标识只用 <b>#0C2340</b>(浅底)或 <b>#FFFFFF</b>(深底)。<b style="color:#f0a55c">严禁使用交互蓝 #0070F2 作为标识色</b> —— 否则用户无法区分「品牌标记」与「可点元素」。<br>注意:v1.1 起链接色已改为 #0064D9,标识色也<b>不要</b>用它</td></tr>
|
||
<tr><td class="k">最小尺寸</td><td class="u">图标主形 ≥ 24px;横版锁定标 ≥ 120px 宽。16px 场景用 favicon 专用版,不要硬缩主形</td></tr>
|
||
<tr><td class="k">安全留白</td><td class="u">四周留白 ≥ 图标高度的 25%(64 网格里留 16)</td></tr>
|
||
<tr><td class="k">深色场景</td><td class="u">用反白版;不要在深底上用墨蓝正片</td></tr>
|
||
<tr><td class="k">禁止</td><td class="u">拉伸变形 · 改比例 · 加描边/阴影/发光 · 换非品牌色 · 改动框与 Z 的相对大小 · 在花哨照片上直接压标</td></tr>
|
||
</tbody></table>
|
||
|
||
<div class="dont">
|
||
<div><div class="pv"><div style="transform:scaleX(1.5)"><svg viewBox="0 0 64 64" width="62" height="62"><g transform="translate(5.3304 5.3294) scale(2.22222)"><path d="M3 11.99v2.51c0 3.3 0 4.95 1.025 5.975S6.7 21.5 10 21.5h4c3.3 0 4.95 0 5.975-1.025S21 17.8 21 14.5v-2.51c0-1.682 0-2.522-.356-3.25s-1.02-1.244-2.346-2.276l-2-1.555C14.233 3.303 13.2 2.5 12 2.5s-2.233.803-4.298 2.409l-2 1.555C4.375 7.496 3.712 8.012 3.356 8.74S3 10.308 3 11.99" fill="none" stroke="#0C2340" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></g><g transform="translate(32.25 39) scale(0.9508) translate(-32.25 -39)"><path d="M27.97 39.99 C27.85 40.09 27.73 40.19 27.25 40.59 C26.78 40.99 25.73 41.87 25.12 42.39 C24.52 42.91 23.97 43.38 23.61 43.70 C23.25 44.02 23.15 44.11 22.96 44.29 C22.77 44.47 22.59 44.63 22.45 44.78 C22.30 44.93 22.18 45.05 22.07 45.17 C21.96 45.29 21.86 45.40 21.77 45.51 C21.68 45.63 21.59 45.75 21.52 45.85 C21.46 45.96 21.40 46.05 21.36 46.15 C21.31 46.24 21.28 46.35 21.26 46.41 C21.25 46.47 21.25 46.48 21.25 46.52 C21.25 46.55 21.25 46.59 21.25 46.63 C21.25 46.66 21.26 46.71 21.27 46.75 C21.28 46.78 21.29 46.82 21.31 46.86 C21.33 46.90 21.35 46.94 21.37 46.98 C21.39 47.01 21.39 47.02 21.44 47.07 C21.49 47.13 21.58 47.22 21.66 47.29 C21.74 47.36 21.84 47.43 21.93 47.48 C22.03 47.54 22.10 47.58 22.21 47.63 C22.32 47.69 22.45 47.75 22.58 47.79 C22.70 47.84 22.81 47.89 22.94 47.93 C23.07 47.97 23.20 48.01 23.35 48.06 C23.51 48.10 23.69 48.15 23.86 48.19 C24.03 48.22 24.18 48.26 24.35 48.29 C24.53 48.32 24.70 48.36 24.89 48.39 C25.07 48.42 25.25 48.44 25.46 48.47 C25.67 48.50 25.92 48.53 26.14 48.55 C26.37 48.58 26.45 48.59 26.78 48.62 C27.12 48.64 27.66 48.68 28.16 48.70 C28.65 48.72 29.24 48.74 29.74 48.74 C30.25 48.75 30.75 48.74 31.21 48.73 C31.68 48.72 32.10 48.69 32.54 48.66 C32.97 48.63 33.41 48.59 33.84 48.54 C34.26 48.49 34.70 48.43 35.09 48.37 C35.48 48.31 35.91 48.22 36.17 48.17 C36.44 48.11 36.51 48.09 36.68 48.05 C36.86 48.01 37.05 47.95 37.22 47.91 C37.38 47.86 37.53 47.82 37.67 47.77 C37.82 47.72 37.96 47.67 38.10 47.62 C38.23 47.57 38.36 47.52 38.49 47.47 C38.61 47.42 38.73 47.36 38.84 47.31 C38.96 47.25 39.06 47.20 39.16 47.14 C39.27 47.08 39.38 47.01 39.48 46.95 C39.59 46.88 39.68 46.81 39.77 46.74 C39.86 46.67 39.94 46.60 40.03 46.53 C40.11 46.46 40.19 46.38 40.28 46.30 C40.36 46.21 40.44 46.13 40.52 46.04 C40.60 45.94 40.68 45.85 40.76 45.75 C40.84 45.65 40.92 45.55 41.00 45.44 C41.08 45.32 41.18 45.18 41.25 45.07 C41.32 44.95 41.38 44.85 41.44 44.75 C41.50 44.64 41.55 44.55 41.59 44.45 C41.64 44.35 41.69 44.24 41.72 44.15 C41.75 44.06 41.77 43.99 41.79 43.91 C41.81 43.83 41.82 43.74 41.83 43.67 C41.84 43.60 41.84 43.54 41.83 43.49 C41.82 43.44 41.81 43.39 41.79 43.35 C41.77 43.31 41.74 43.28 41.71 43.25 C41.67 43.23 41.63 43.20 41.58 43.18 C41.53 43.16 41.48 43.15 41.42 43.14 C41.36 43.13 41.31 43.12 41.24 43.12 C41.17 43.11 41.10 43.11 41.02 43.11 C40.94 43.12 40.88 43.12 40.76 43.13 C40.64 43.15 40.66 43.14 40.32 43.19 C39.97 43.25 39.23 43.38 38.70 43.46 C38.18 43.54 37.72 43.60 37.16 43.67 C36.60 43.73 35.90 43.81 35.34 43.86 C34.79 43.91 34.47 43.93 33.83 43.97 C33.19 44.00 31.89 44.06 31.48 44.07 C31.07 44.09 31.40 44.06 31.37 44.04 C31.34 44.03 31.31 44.00 31.29 43.97 C31.27 43.94 31.25 43.91 31.24 43.87 C31.24 43.84 31.24 43.80 31.24 43.77 C31.25 43.73 31.21 43.79 31.28 43.68 C31.34 43.57 31.50 43.30 31.64 43.10 C31.78 42.90 31.88 42.78 32.11 42.49 C32.34 42.20 32.68 41.78 33.02 41.37 C33.36 40.96 33.71 40.55 34.18 40.01 C34.65 39.47 35.17 38.88 35.85 38.12 C36.52 37.36 37.42 36.36 38.25 35.46 C39.08 34.57 40.29 33.32 40.84 32.75 C41.39 32.17 41.32 32.26 41.56 32.02 C41.81 31.78 42.11 31.50 42.31 31.30 C42.52 31.10 42.65 30.96 42.77 30.82 C42.90 30.69 42.99 30.57 43.06 30.47 C43.14 30.37 43.19 30.28 43.22 30.23 C43.25 30.17 43.25 30.15 43.25 30.12 C43.26 30.09 43.25 30.08 43.24 30.05 C43.23 30.03 43.23 30.02 43.19 29.98 C43.16 29.93 43.08 29.84 43.03 29.79 C42.99 29.75 42.97 29.73 42.94 29.71 C42.91 29.68 42.90 29.67 42.84 29.64 C42.78 29.61 42.67 29.56 42.57 29.53 C42.46 29.49 42.34 29.46 42.21 29.44 C42.09 29.41 41.97 29.39 41.80 29.37 C41.64 29.35 41.45 29.34 41.23 29.32 C41.01 29.31 40.74 29.29 40.48 29.29 C40.21 29.28 40.30 29.27 39.62 29.26 C38.94 29.26 37.39 29.25 36.39 29.26 C35.40 29.27 34.54 29.32 33.64 29.34 C32.74 29.37 31.68 29.39 31.01 29.40 C30.33 29.41 30.06 29.40 29.59 29.41 C29.12 29.41 28.50 29.43 28.19 29.44 C27.89 29.45 27.88 29.45 27.76 29.46 C27.63 29.48 27.54 29.49 27.45 29.51 C27.36 29.53 27.31 29.55 27.23 29.58 C27.16 29.62 27.10 29.65 27.00 29.71 C26.90 29.78 26.77 29.88 26.66 29.97 C26.54 30.07 26.43 30.16 26.32 30.26 C26.21 30.36 26.10 30.46 26.00 30.56 C25.90 30.66 25.80 30.77 25.70 30.88 C25.60 30.98 25.51 31.09 25.42 31.20 C25.33 31.32 25.22 31.45 25.14 31.57 C25.05 31.68 24.97 31.80 24.91 31.91 C24.84 32.01 24.79 32.11 24.74 32.20 C24.70 32.29 24.67 32.36 24.65 32.43 C24.62 32.50 24.61 32.55 24.60 32.61 C24.59 32.67 24.60 32.74 24.60 32.80 C24.61 32.85 24.62 32.90 24.64 32.94 C24.66 32.99 24.68 33.04 24.72 33.09 C24.75 33.13 24.80 33.18 24.84 33.22 C24.89 33.26 24.94 33.29 25.00 33.32 C25.07 33.35 25.14 33.38 25.21 33.41 C25.28 33.43 25.36 33.45 25.43 33.47 C25.50 33.48 25.50 33.49 25.62 33.50 C25.74 33.52 26.04 33.55 26.15 33.56 C26.26 33.57 26.08 33.57 26.30 33.56 C26.53 33.56 27.15 33.54 27.49 33.51 C27.84 33.49 28.05 33.46 28.37 33.42 C28.69 33.39 29.03 33.34 29.40 33.29 C29.76 33.23 29.98 33.20 30.57 33.10 C31.16 33.00 32.40 32.78 32.95 32.69 C33.51 32.60 33.59 32.59 33.90 32.55 C34.20 32.51 34.54 32.47 34.79 32.44 C35.04 32.42 35.28 32.39 35.39 32.38 C35.50 32.38 35.44 32.38 35.46 32.39 C35.49 32.40 35.51 32.40 35.54 32.42 C35.56 32.43 35.58 32.45 35.60 32.47 C35.62 32.49 35.63 32.51 35.64 32.54 C35.65 32.56 35.66 32.59 35.66 32.61 C35.67 32.64 35.67 32.67 35.66 32.69 C35.65 32.72 35.68 32.69 35.62 32.78 C35.57 32.86 35.41 33.07 35.32 33.20 C35.22 33.32 35.21 33.36 35.04 33.55 C34.86 33.73 34.53 34.06 34.27 34.32 C34.01 34.58 33.79 34.79 33.46 35.10 C33.13 35.42 32.68 35.84 32.29 36.21 C31.89 36.58 31.45 36.98 31.07 37.31 C30.70 37.65 30.21 38.07 30.04 38.22 Z" fill="#0C2340"/></g></svg></div></div>拉伸变形</div>
|
||
<div><div class="pv"><div style="transform:rotate(-12deg)"><svg viewBox="0 0 64 64" width="62" height="62"><g transform="translate(5.3304 5.3294) scale(2.22222)"><path d="M3 11.99v2.51c0 3.3 0 4.95 1.025 5.975S6.7 21.5 10 21.5h4c3.3 0 4.95 0 5.975-1.025S21 17.8 21 14.5v-2.51c0-1.682 0-2.522-.356-3.25s-1.02-1.244-2.346-2.276l-2-1.555C14.233 3.303 13.2 2.5 12 2.5s-2.233.803-4.298 2.409l-2 1.555C4.375 7.496 3.712 8.012 3.356 8.74S3 10.308 3 11.99" fill="none" stroke="#0C2340" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></g><g transform="translate(32.25 39) scale(0.9508) translate(-32.25 -39)"><path d="M27.97 39.99 C27.85 40.09 27.73 40.19 27.25 40.59 C26.78 40.99 25.73 41.87 25.12 42.39 C24.52 42.91 23.97 43.38 23.61 43.70 C23.25 44.02 23.15 44.11 22.96 44.29 C22.77 44.47 22.59 44.63 22.45 44.78 C22.30 44.93 22.18 45.05 22.07 45.17 C21.96 45.29 21.86 45.40 21.77 45.51 C21.68 45.63 21.59 45.75 21.52 45.85 C21.46 45.96 21.40 46.05 21.36 46.15 C21.31 46.24 21.28 46.35 21.26 46.41 C21.25 46.47 21.25 46.48 21.25 46.52 C21.25 46.55 21.25 46.59 21.25 46.63 C21.25 46.66 21.26 46.71 21.27 46.75 C21.28 46.78 21.29 46.82 21.31 46.86 C21.33 46.90 21.35 46.94 21.37 46.98 C21.39 47.01 21.39 47.02 21.44 47.07 C21.49 47.13 21.58 47.22 21.66 47.29 C21.74 47.36 21.84 47.43 21.93 47.48 C22.03 47.54 22.10 47.58 22.21 47.63 C22.32 47.69 22.45 47.75 22.58 47.79 C22.70 47.84 22.81 47.89 22.94 47.93 C23.07 47.97 23.20 48.01 23.35 48.06 C23.51 48.10 23.69 48.15 23.86 48.19 C24.03 48.22 24.18 48.26 24.35 48.29 C24.53 48.32 24.70 48.36 24.89 48.39 C25.07 48.42 25.25 48.44 25.46 48.47 C25.67 48.50 25.92 48.53 26.14 48.55 C26.37 48.58 26.45 48.59 26.78 48.62 C27.12 48.64 27.66 48.68 28.16 48.70 C28.65 48.72 29.24 48.74 29.74 48.74 C30.25 48.75 30.75 48.74 31.21 48.73 C31.68 48.72 32.10 48.69 32.54 48.66 C32.97 48.63 33.41 48.59 33.84 48.54 C34.26 48.49 34.70 48.43 35.09 48.37 C35.48 48.31 35.91 48.22 36.17 48.17 C36.44 48.11 36.51 48.09 36.68 48.05 C36.86 48.01 37.05 47.95 37.22 47.91 C37.38 47.86 37.53 47.82 37.67 47.77 C37.82 47.72 37.96 47.67 38.10 47.62 C38.23 47.57 38.36 47.52 38.49 47.47 C38.61 47.42 38.73 47.36 38.84 47.31 C38.96 47.25 39.06 47.20 39.16 47.14 C39.27 47.08 39.38 47.01 39.48 46.95 C39.59 46.88 39.68 46.81 39.77 46.74 C39.86 46.67 39.94 46.60 40.03 46.53 C40.11 46.46 40.19 46.38 40.28 46.30 C40.36 46.21 40.44 46.13 40.52 46.04 C40.60 45.94 40.68 45.85 40.76 45.75 C40.84 45.65 40.92 45.55 41.00 45.44 C41.08 45.32 41.18 45.18 41.25 45.07 C41.32 44.95 41.38 44.85 41.44 44.75 C41.50 44.64 41.55 44.55 41.59 44.45 C41.64 44.35 41.69 44.24 41.72 44.15 C41.75 44.06 41.77 43.99 41.79 43.91 C41.81 43.83 41.82 43.74 41.83 43.67 C41.84 43.60 41.84 43.54 41.83 43.49 C41.82 43.44 41.81 43.39 41.79 43.35 C41.77 43.31 41.74 43.28 41.71 43.25 C41.67 43.23 41.63 43.20 41.58 43.18 C41.53 43.16 41.48 43.15 41.42 43.14 C41.36 43.13 41.31 43.12 41.24 43.12 C41.17 43.11 41.10 43.11 41.02 43.11 C40.94 43.12 40.88 43.12 40.76 43.13 C40.64 43.15 40.66 43.14 40.32 43.19 C39.97 43.25 39.23 43.38 38.70 43.46 C38.18 43.54 37.72 43.60 37.16 43.67 C36.60 43.73 35.90 43.81 35.34 43.86 C34.79 43.91 34.47 43.93 33.83 43.97 C33.19 44.00 31.89 44.06 31.48 44.07 C31.07 44.09 31.40 44.06 31.37 44.04 C31.34 44.03 31.31 44.00 31.29 43.97 C31.27 43.94 31.25 43.91 31.24 43.87 C31.24 43.84 31.24 43.80 31.24 43.77 C31.25 43.73 31.21 43.79 31.28 43.68 C31.34 43.57 31.50 43.30 31.64 43.10 C31.78 42.90 31.88 42.78 32.11 42.49 C32.34 42.20 32.68 41.78 33.02 41.37 C33.36 40.96 33.71 40.55 34.18 40.01 C34.65 39.47 35.17 38.88 35.85 38.12 C36.52 37.36 37.42 36.36 38.25 35.46 C39.08 34.57 40.29 33.32 40.84 32.75 C41.39 32.17 41.32 32.26 41.56 32.02 C41.81 31.78 42.11 31.50 42.31 31.30 C42.52 31.10 42.65 30.96 42.77 30.82 C42.90 30.69 42.99 30.57 43.06 30.47 C43.14 30.37 43.19 30.28 43.22 30.23 C43.25 30.17 43.25 30.15 43.25 30.12 C43.26 30.09 43.25 30.08 43.24 30.05 C43.23 30.03 43.23 30.02 43.19 29.98 C43.16 29.93 43.08 29.84 43.03 29.79 C42.99 29.75 42.97 29.73 42.94 29.71 C42.91 29.68 42.90 29.67 42.84 29.64 C42.78 29.61 42.67 29.56 42.57 29.53 C42.46 29.49 42.34 29.46 42.21 29.44 C42.09 29.41 41.97 29.39 41.80 29.37 C41.64 29.35 41.45 29.34 41.23 29.32 C41.01 29.31 40.74 29.29 40.48 29.29 C40.21 29.28 40.30 29.27 39.62 29.26 C38.94 29.26 37.39 29.25 36.39 29.26 C35.40 29.27 34.54 29.32 33.64 29.34 C32.74 29.37 31.68 29.39 31.01 29.40 C30.33 29.41 30.06 29.40 29.59 29.41 C29.12 29.41 28.50 29.43 28.19 29.44 C27.89 29.45 27.88 29.45 27.76 29.46 C27.63 29.48 27.54 29.49 27.45 29.51 C27.36 29.53 27.31 29.55 27.23 29.58 C27.16 29.62 27.10 29.65 27.00 29.71 C26.90 29.78 26.77 29.88 26.66 29.97 C26.54 30.07 26.43 30.16 26.32 30.26 C26.21 30.36 26.10 30.46 26.00 30.56 C25.90 30.66 25.80 30.77 25.70 30.88 C25.60 30.98 25.51 31.09 25.42 31.20 C25.33 31.32 25.22 31.45 25.14 31.57 C25.05 31.68 24.97 31.80 24.91 31.91 C24.84 32.01 24.79 32.11 24.74 32.20 C24.70 32.29 24.67 32.36 24.65 32.43 C24.62 32.50 24.61 32.55 24.60 32.61 C24.59 32.67 24.60 32.74 24.60 32.80 C24.61 32.85 24.62 32.90 24.64 32.94 C24.66 32.99 24.68 33.04 24.72 33.09 C24.75 33.13 24.80 33.18 24.84 33.22 C24.89 33.26 24.94 33.29 25.00 33.32 C25.07 33.35 25.14 33.38 25.21 33.41 C25.28 33.43 25.36 33.45 25.43 33.47 C25.50 33.48 25.50 33.49 25.62 33.50 C25.74 33.52 26.04 33.55 26.15 33.56 C26.26 33.57 26.08 33.57 26.30 33.56 C26.53 33.56 27.15 33.54 27.49 33.51 C27.84 33.49 28.05 33.46 28.37 33.42 C28.69 33.39 29.03 33.34 29.40 33.29 C29.76 33.23 29.98 33.20 30.57 33.10 C31.16 33.00 32.40 32.78 32.95 32.69 C33.51 32.60 33.59 32.59 33.90 32.55 C34.20 32.51 34.54 32.47 34.79 32.44 C35.04 32.42 35.28 32.39 35.39 32.38 C35.50 32.38 35.44 32.38 35.46 32.39 C35.49 32.40 35.51 32.40 35.54 32.42 C35.56 32.43 35.58 32.45 35.60 32.47 C35.62 32.49 35.63 32.51 35.64 32.54 C35.65 32.56 35.66 32.59 35.66 32.61 C35.67 32.64 35.67 32.67 35.66 32.69 C35.65 32.72 35.68 32.69 35.62 32.78 C35.57 32.86 35.41 33.07 35.32 33.20 C35.22 33.32 35.21 33.36 35.04 33.55 C34.86 33.73 34.53 34.06 34.27 34.32 C34.01 34.58 33.79 34.79 33.46 35.10 C33.13 35.42 32.68 35.84 32.29 36.21 C31.89 36.58 31.45 36.98 31.07 37.31 C30.70 37.65 30.21 38.07 30.04 38.22 Z" fill="#0C2340"/></g></svg></div></div>旋转</div>
|
||
<div><div class="pv"><svg viewBox="0 0 64 64" width="62" height="62"><g transform="translate(5.3304 5.3294) scale(2.22222)"><path d="M3 11.99v2.51c0 3.3 0 4.95 1.025 5.975S6.7 21.5 10 21.5h4c3.3 0 4.95 0 5.975-1.025S21 17.8 21 14.5v-2.51c0-1.682 0-2.522-.356-3.25s-1.02-1.244-2.346-2.276l-2-1.555C14.233 3.303 13.2 2.5 12 2.5s-2.233.803-4.298 2.409l-2 1.555C4.375 7.496 3.712 8.012 3.356 8.74S3 10.308 3 11.99" fill="none" stroke="#0070F2" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></g><g transform="translate(32.25 39) scale(0.9508) translate(-32.25 -39)"><path d="M27.97 39.99 C27.85 40.09 27.73 40.19 27.25 40.59 C26.78 40.99 25.73 41.87 25.12 42.39 C24.52 42.91 23.97 43.38 23.61 43.70 C23.25 44.02 23.15 44.11 22.96 44.29 C22.77 44.47 22.59 44.63 22.45 44.78 C22.30 44.93 22.18 45.05 22.07 45.17 C21.96 45.29 21.86 45.40 21.77 45.51 C21.68 45.63 21.59 45.75 21.52 45.85 C21.46 45.96 21.40 46.05 21.36 46.15 C21.31 46.24 21.28 46.35 21.26 46.41 C21.25 46.47 21.25 46.48 21.25 46.52 C21.25 46.55 21.25 46.59 21.25 46.63 C21.25 46.66 21.26 46.71 21.27 46.75 C21.28 46.78 21.29 46.82 21.31 46.86 C21.33 46.90 21.35 46.94 21.37 46.98 C21.39 47.01 21.39 47.02 21.44 47.07 C21.49 47.13 21.58 47.22 21.66 47.29 C21.74 47.36 21.84 47.43 21.93 47.48 C22.03 47.54 22.10 47.58 22.21 47.63 C22.32 47.69 22.45 47.75 22.58 47.79 C22.70 47.84 22.81 47.89 22.94 47.93 C23.07 47.97 23.20 48.01 23.35 48.06 C23.51 48.10 23.69 48.15 23.86 48.19 C24.03 48.22 24.18 48.26 24.35 48.29 C24.53 48.32 24.70 48.36 24.89 48.39 C25.07 48.42 25.25 48.44 25.46 48.47 C25.67 48.50 25.92 48.53 26.14 48.55 C26.37 48.58 26.45 48.59 26.78 48.62 C27.12 48.64 27.66 48.68 28.16 48.70 C28.65 48.72 29.24 48.74 29.74 48.74 C30.25 48.75 30.75 48.74 31.21 48.73 C31.68 48.72 32.10 48.69 32.54 48.66 C32.97 48.63 33.41 48.59 33.84 48.54 C34.26 48.49 34.70 48.43 35.09 48.37 C35.48 48.31 35.91 48.22 36.17 48.17 C36.44 48.11 36.51 48.09 36.68 48.05 C36.86 48.01 37.05 47.95 37.22 47.91 C37.38 47.86 37.53 47.82 37.67 47.77 C37.82 47.72 37.96 47.67 38.10 47.62 C38.23 47.57 38.36 47.52 38.49 47.47 C38.61 47.42 38.73 47.36 38.84 47.31 C38.96 47.25 39.06 47.20 39.16 47.14 C39.27 47.08 39.38 47.01 39.48 46.95 C39.59 46.88 39.68 46.81 39.77 46.74 C39.86 46.67 39.94 46.60 40.03 46.53 C40.11 46.46 40.19 46.38 40.28 46.30 C40.36 46.21 40.44 46.13 40.52 46.04 C40.60 45.94 40.68 45.85 40.76 45.75 C40.84 45.65 40.92 45.55 41.00 45.44 C41.08 45.32 41.18 45.18 41.25 45.07 C41.32 44.95 41.38 44.85 41.44 44.75 C41.50 44.64 41.55 44.55 41.59 44.45 C41.64 44.35 41.69 44.24 41.72 44.15 C41.75 44.06 41.77 43.99 41.79 43.91 C41.81 43.83 41.82 43.74 41.83 43.67 C41.84 43.60 41.84 43.54 41.83 43.49 C41.82 43.44 41.81 43.39 41.79 43.35 C41.77 43.31 41.74 43.28 41.71 43.25 C41.67 43.23 41.63 43.20 41.58 43.18 C41.53 43.16 41.48 43.15 41.42 43.14 C41.36 43.13 41.31 43.12 41.24 43.12 C41.17 43.11 41.10 43.11 41.02 43.11 C40.94 43.12 40.88 43.12 40.76 43.13 C40.64 43.15 40.66 43.14 40.32 43.19 C39.97 43.25 39.23 43.38 38.70 43.46 C38.18 43.54 37.72 43.60 37.16 43.67 C36.60 43.73 35.90 43.81 35.34 43.86 C34.79 43.91 34.47 43.93 33.83 43.97 C33.19 44.00 31.89 44.06 31.48 44.07 C31.07 44.09 31.40 44.06 31.37 44.04 C31.34 44.03 31.31 44.00 31.29 43.97 C31.27 43.94 31.25 43.91 31.24 43.87 C31.24 43.84 31.24 43.80 31.24 43.77 C31.25 43.73 31.21 43.79 31.28 43.68 C31.34 43.57 31.50 43.30 31.64 43.10 C31.78 42.90 31.88 42.78 32.11 42.49 C32.34 42.20 32.68 41.78 33.02 41.37 C33.36 40.96 33.71 40.55 34.18 40.01 C34.65 39.47 35.17 38.88 35.85 38.12 C36.52 37.36 37.42 36.36 38.25 35.46 C39.08 34.57 40.29 33.32 40.84 32.75 C41.39 32.17 41.32 32.26 41.56 32.02 C41.81 31.78 42.11 31.50 42.31 31.30 C42.52 31.10 42.65 30.96 42.77 30.82 C42.90 30.69 42.99 30.57 43.06 30.47 C43.14 30.37 43.19 30.28 43.22 30.23 C43.25 30.17 43.25 30.15 43.25 30.12 C43.26 30.09 43.25 30.08 43.24 30.05 C43.23 30.03 43.23 30.02 43.19 29.98 C43.16 29.93 43.08 29.84 43.03 29.79 C42.99 29.75 42.97 29.73 42.94 29.71 C42.91 29.68 42.90 29.67 42.84 29.64 C42.78 29.61 42.67 29.56 42.57 29.53 C42.46 29.49 42.34 29.46 42.21 29.44 C42.09 29.41 41.97 29.39 41.80 29.37 C41.64 29.35 41.45 29.34 41.23 29.32 C41.01 29.31 40.74 29.29 40.48 29.29 C40.21 29.28 40.30 29.27 39.62 29.26 C38.94 29.26 37.39 29.25 36.39 29.26 C35.40 29.27 34.54 29.32 33.64 29.34 C32.74 29.37 31.68 29.39 31.01 29.40 C30.33 29.41 30.06 29.40 29.59 29.41 C29.12 29.41 28.50 29.43 28.19 29.44 C27.89 29.45 27.88 29.45 27.76 29.46 C27.63 29.48 27.54 29.49 27.45 29.51 C27.36 29.53 27.31 29.55 27.23 29.58 C27.16 29.62 27.10 29.65 27.00 29.71 C26.90 29.78 26.77 29.88 26.66 29.97 C26.54 30.07 26.43 30.16 26.32 30.26 C26.21 30.36 26.10 30.46 26.00 30.56 C25.90 30.66 25.80 30.77 25.70 30.88 C25.60 30.98 25.51 31.09 25.42 31.20 C25.33 31.32 25.22 31.45 25.14 31.57 C25.05 31.68 24.97 31.80 24.91 31.91 C24.84 32.01 24.79 32.11 24.74 32.20 C24.70 32.29 24.67 32.36 24.65 32.43 C24.62 32.50 24.61 32.55 24.60 32.61 C24.59 32.67 24.60 32.74 24.60 32.80 C24.61 32.85 24.62 32.90 24.64 32.94 C24.66 32.99 24.68 33.04 24.72 33.09 C24.75 33.13 24.80 33.18 24.84 33.22 C24.89 33.26 24.94 33.29 25.00 33.32 C25.07 33.35 25.14 33.38 25.21 33.41 C25.28 33.43 25.36 33.45 25.43 33.47 C25.50 33.48 25.50 33.49 25.62 33.50 C25.74 33.52 26.04 33.55 26.15 33.56 C26.26 33.57 26.08 33.57 26.30 33.56 C26.53 33.56 27.15 33.54 27.49 33.51 C27.84 33.49 28.05 33.46 28.37 33.42 C28.69 33.39 29.03 33.34 29.40 33.29 C29.76 33.23 29.98 33.20 30.57 33.10 C31.16 33.00 32.40 32.78 32.95 32.69 C33.51 32.60 33.59 32.59 33.90 32.55 C34.20 32.51 34.54 32.47 34.79 32.44 C35.04 32.42 35.28 32.39 35.39 32.38 C35.50 32.38 35.44 32.38 35.46 32.39 C35.49 32.40 35.51 32.40 35.54 32.42 C35.56 32.43 35.58 32.45 35.60 32.47 C35.62 32.49 35.63 32.51 35.64 32.54 C35.65 32.56 35.66 32.59 35.66 32.61 C35.67 32.64 35.67 32.67 35.66 32.69 C35.65 32.72 35.68 32.69 35.62 32.78 C35.57 32.86 35.41 33.07 35.32 33.20 C35.22 33.32 35.21 33.36 35.04 33.55 C34.86 33.73 34.53 34.06 34.27 34.32 C34.01 34.58 33.79 34.79 33.46 35.10 C33.13 35.42 32.68 35.84 32.29 36.21 C31.89 36.58 31.45 36.98 31.07 37.31 C30.70 37.65 30.21 38.07 30.04 38.22 Z" fill="#0070F2"/></g></svg></div>用交互蓝作标识色</div>
|
||
<div><div class="pv"><div style="filter:drop-shadow(2px 2px 3px rgba(0,0,0,.55))"><svg viewBox="0 0 64 64" width="62" height="62"><g transform="translate(5.3304 5.3294) scale(2.22222)"><path d="M3 11.99v2.51c0 3.3 0 4.95 1.025 5.975S6.7 21.5 10 21.5h4c3.3 0 4.95 0 5.975-1.025S21 17.8 21 14.5v-2.51c0-1.682 0-2.522-.356-3.25s-1.02-1.244-2.346-2.276l-2-1.555C14.233 3.303 13.2 2.5 12 2.5s-2.233.803-4.298 2.409l-2 1.555C4.375 7.496 3.712 8.012 3.356 8.74S3 10.308 3 11.99" fill="none" stroke="#0C2340" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></g><g transform="translate(32.25 39) scale(0.9508) translate(-32.25 -39)"><path d="M27.97 39.99 C27.85 40.09 27.73 40.19 27.25 40.59 C26.78 40.99 25.73 41.87 25.12 42.39 C24.52 42.91 23.97 43.38 23.61 43.70 C23.25 44.02 23.15 44.11 22.96 44.29 C22.77 44.47 22.59 44.63 22.45 44.78 C22.30 44.93 22.18 45.05 22.07 45.17 C21.96 45.29 21.86 45.40 21.77 45.51 C21.68 45.63 21.59 45.75 21.52 45.85 C21.46 45.96 21.40 46.05 21.36 46.15 C21.31 46.24 21.28 46.35 21.26 46.41 C21.25 46.47 21.25 46.48 21.25 46.52 C21.25 46.55 21.25 46.59 21.25 46.63 C21.25 46.66 21.26 46.71 21.27 46.75 C21.28 46.78 21.29 46.82 21.31 46.86 C21.33 46.90 21.35 46.94 21.37 46.98 C21.39 47.01 21.39 47.02 21.44 47.07 C21.49 47.13 21.58 47.22 21.66 47.29 C21.74 47.36 21.84 47.43 21.93 47.48 C22.03 47.54 22.10 47.58 22.21 47.63 C22.32 47.69 22.45 47.75 22.58 47.79 C22.70 47.84 22.81 47.89 22.94 47.93 C23.07 47.97 23.20 48.01 23.35 48.06 C23.51 48.10 23.69 48.15 23.86 48.19 C24.03 48.22 24.18 48.26 24.35 48.29 C24.53 48.32 24.70 48.36 24.89 48.39 C25.07 48.42 25.25 48.44 25.46 48.47 C25.67 48.50 25.92 48.53 26.14 48.55 C26.37 48.58 26.45 48.59 26.78 48.62 C27.12 48.64 27.66 48.68 28.16 48.70 C28.65 48.72 29.24 48.74 29.74 48.74 C30.25 48.75 30.75 48.74 31.21 48.73 C31.68 48.72 32.10 48.69 32.54 48.66 C32.97 48.63 33.41 48.59 33.84 48.54 C34.26 48.49 34.70 48.43 35.09 48.37 C35.48 48.31 35.91 48.22 36.17 48.17 C36.44 48.11 36.51 48.09 36.68 48.05 C36.86 48.01 37.05 47.95 37.22 47.91 C37.38 47.86 37.53 47.82 37.67 47.77 C37.82 47.72 37.96 47.67 38.10 47.62 C38.23 47.57 38.36 47.52 38.49 47.47 C38.61 47.42 38.73 47.36 38.84 47.31 C38.96 47.25 39.06 47.20 39.16 47.14 C39.27 47.08 39.38 47.01 39.48 46.95 C39.59 46.88 39.68 46.81 39.77 46.74 C39.86 46.67 39.94 46.60 40.03 46.53 C40.11 46.46 40.19 46.38 40.28 46.30 C40.36 46.21 40.44 46.13 40.52 46.04 C40.60 45.94 40.68 45.85 40.76 45.75 C40.84 45.65 40.92 45.55 41.00 45.44 C41.08 45.32 41.18 45.18 41.25 45.07 C41.32 44.95 41.38 44.85 41.44 44.75 C41.50 44.64 41.55 44.55 41.59 44.45 C41.64 44.35 41.69 44.24 41.72 44.15 C41.75 44.06 41.77 43.99 41.79 43.91 C41.81 43.83 41.82 43.74 41.83 43.67 C41.84 43.60 41.84 43.54 41.83 43.49 C41.82 43.44 41.81 43.39 41.79 43.35 C41.77 43.31 41.74 43.28 41.71 43.25 C41.67 43.23 41.63 43.20 41.58 43.18 C41.53 43.16 41.48 43.15 41.42 43.14 C41.36 43.13 41.31 43.12 41.24 43.12 C41.17 43.11 41.10 43.11 41.02 43.11 C40.94 43.12 40.88 43.12 40.76 43.13 C40.64 43.15 40.66 43.14 40.32 43.19 C39.97 43.25 39.23 43.38 38.70 43.46 C38.18 43.54 37.72 43.60 37.16 43.67 C36.60 43.73 35.90 43.81 35.34 43.86 C34.79 43.91 34.47 43.93 33.83 43.97 C33.19 44.00 31.89 44.06 31.48 44.07 C31.07 44.09 31.40 44.06 31.37 44.04 C31.34 44.03 31.31 44.00 31.29 43.97 C31.27 43.94 31.25 43.91 31.24 43.87 C31.24 43.84 31.24 43.80 31.24 43.77 C31.25 43.73 31.21 43.79 31.28 43.68 C31.34 43.57 31.50 43.30 31.64 43.10 C31.78 42.90 31.88 42.78 32.11 42.49 C32.34 42.20 32.68 41.78 33.02 41.37 C33.36 40.96 33.71 40.55 34.18 40.01 C34.65 39.47 35.17 38.88 35.85 38.12 C36.52 37.36 37.42 36.36 38.25 35.46 C39.08 34.57 40.29 33.32 40.84 32.75 C41.39 32.17 41.32 32.26 41.56 32.02 C41.81 31.78 42.11 31.50 42.31 31.30 C42.52 31.10 42.65 30.96 42.77 30.82 C42.90 30.69 42.99 30.57 43.06 30.47 C43.14 30.37 43.19 30.28 43.22 30.23 C43.25 30.17 43.25 30.15 43.25 30.12 C43.26 30.09 43.25 30.08 43.24 30.05 C43.23 30.03 43.23 30.02 43.19 29.98 C43.16 29.93 43.08 29.84 43.03 29.79 C42.99 29.75 42.97 29.73 42.94 29.71 C42.91 29.68 42.90 29.67 42.84 29.64 C42.78 29.61 42.67 29.56 42.57 29.53 C42.46 29.49 42.34 29.46 42.21 29.44 C42.09 29.41 41.97 29.39 41.80 29.37 C41.64 29.35 41.45 29.34 41.23 29.32 C41.01 29.31 40.74 29.29 40.48 29.29 C40.21 29.28 40.30 29.27 39.62 29.26 C38.94 29.26 37.39 29.25 36.39 29.26 C35.40 29.27 34.54 29.32 33.64 29.34 C32.74 29.37 31.68 29.39 31.01 29.40 C30.33 29.41 30.06 29.40 29.59 29.41 C29.12 29.41 28.50 29.43 28.19 29.44 C27.89 29.45 27.88 29.45 27.76 29.46 C27.63 29.48 27.54 29.49 27.45 29.51 C27.36 29.53 27.31 29.55 27.23 29.58 C27.16 29.62 27.10 29.65 27.00 29.71 C26.90 29.78 26.77 29.88 26.66 29.97 C26.54 30.07 26.43 30.16 26.32 30.26 C26.21 30.36 26.10 30.46 26.00 30.56 C25.90 30.66 25.80 30.77 25.70 30.88 C25.60 30.98 25.51 31.09 25.42 31.20 C25.33 31.32 25.22 31.45 25.14 31.57 C25.05 31.68 24.97 31.80 24.91 31.91 C24.84 32.01 24.79 32.11 24.74 32.20 C24.70 32.29 24.67 32.36 24.65 32.43 C24.62 32.50 24.61 32.55 24.60 32.61 C24.59 32.67 24.60 32.74 24.60 32.80 C24.61 32.85 24.62 32.90 24.64 32.94 C24.66 32.99 24.68 33.04 24.72 33.09 C24.75 33.13 24.80 33.18 24.84 33.22 C24.89 33.26 24.94 33.29 25.00 33.32 C25.07 33.35 25.14 33.38 25.21 33.41 C25.28 33.43 25.36 33.45 25.43 33.47 C25.50 33.48 25.50 33.49 25.62 33.50 C25.74 33.52 26.04 33.55 26.15 33.56 C26.26 33.57 26.08 33.57 26.30 33.56 C26.53 33.56 27.15 33.54 27.49 33.51 C27.84 33.49 28.05 33.46 28.37 33.42 C28.69 33.39 29.03 33.34 29.40 33.29 C29.76 33.23 29.98 33.20 30.57 33.10 C31.16 33.00 32.40 32.78 32.95 32.69 C33.51 32.60 33.59 32.59 33.90 32.55 C34.20 32.51 34.54 32.47 34.79 32.44 C35.04 32.42 35.28 32.39 35.39 32.38 C35.50 32.38 35.44 32.38 35.46 32.39 C35.49 32.40 35.51 32.40 35.54 32.42 C35.56 32.43 35.58 32.45 35.60 32.47 C35.62 32.49 35.63 32.51 35.64 32.54 C35.65 32.56 35.66 32.59 35.66 32.61 C35.67 32.64 35.67 32.67 35.66 32.69 C35.65 32.72 35.68 32.69 35.62 32.78 C35.57 32.86 35.41 33.07 35.32 33.20 C35.22 33.32 35.21 33.36 35.04 33.55 C34.86 33.73 34.53 34.06 34.27 34.32 C34.01 34.58 33.79 34.79 33.46 35.10 C33.13 35.42 32.68 35.84 32.29 36.21 C31.89 36.58 31.45 36.98 31.07 37.31 C30.70 37.65 30.21 38.07 30.04 38.22 Z" fill="#0C2340"/></g></svg></div></div>加阴影</div>
|
||
<div><div class="pv"><svg viewBox="0 0 64 64" width="62" height="62"><g transform="translate(5.3304 5.3294) scale(2.22222)"><path d="M3 11.99v2.51c0 3.3 0 4.95 1.025 5.975S6.7 21.5 10 21.5h4c3.3 0 4.95 0 5.975-1.025S21 17.8 21 14.5v-2.51c0-1.682 0-2.522-.356-3.25s-1.02-1.244-2.346-2.276l-2-1.555C14.233 3.303 13.2 2.5 12 2.5s-2.233.803-4.298 2.409l-2 1.555C4.375 7.496 3.712 8.012 3.356 8.74S3 10.308 3 11.99" fill="none" stroke="#0C2340" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></g><g transform="translate(32.25 39) scale(1.0696) translate(-32.25 -39)"><path d="M27.97 39.99 C27.85 40.09 27.73 40.19 27.25 40.59 C26.78 40.99 25.73 41.87 25.12 42.39 C24.52 42.91 23.97 43.38 23.61 43.70 C23.25 44.02 23.15 44.11 22.96 44.29 C22.77 44.47 22.59 44.63 22.45 44.78 C22.30 44.93 22.18 45.05 22.07 45.17 C21.96 45.29 21.86 45.40 21.77 45.51 C21.68 45.63 21.59 45.75 21.52 45.85 C21.46 45.96 21.40 46.05 21.36 46.15 C21.31 46.24 21.28 46.35 21.26 46.41 C21.25 46.47 21.25 46.48 21.25 46.52 C21.25 46.55 21.25 46.59 21.25 46.63 C21.25 46.66 21.26 46.71 21.27 46.75 C21.28 46.78 21.29 46.82 21.31 46.86 C21.33 46.90 21.35 46.94 21.37 46.98 C21.39 47.01 21.39 47.02 21.44 47.07 C21.49 47.13 21.58 47.22 21.66 47.29 C21.74 47.36 21.84 47.43 21.93 47.48 C22.03 47.54 22.10 47.58 22.21 47.63 C22.32 47.69 22.45 47.75 22.58 47.79 C22.70 47.84 22.81 47.89 22.94 47.93 C23.07 47.97 23.20 48.01 23.35 48.06 C23.51 48.10 23.69 48.15 23.86 48.19 C24.03 48.22 24.18 48.26 24.35 48.29 C24.53 48.32 24.70 48.36 24.89 48.39 C25.07 48.42 25.25 48.44 25.46 48.47 C25.67 48.50 25.92 48.53 26.14 48.55 C26.37 48.58 26.45 48.59 26.78 48.62 C27.12 48.64 27.66 48.68 28.16 48.70 C28.65 48.72 29.24 48.74 29.74 48.74 C30.25 48.75 30.75 48.74 31.21 48.73 C31.68 48.72 32.10 48.69 32.54 48.66 C32.97 48.63 33.41 48.59 33.84 48.54 C34.26 48.49 34.70 48.43 35.09 48.37 C35.48 48.31 35.91 48.22 36.17 48.17 C36.44 48.11 36.51 48.09 36.68 48.05 C36.86 48.01 37.05 47.95 37.22 47.91 C37.38 47.86 37.53 47.82 37.67 47.77 C37.82 47.72 37.96 47.67 38.10 47.62 C38.23 47.57 38.36 47.52 38.49 47.47 C38.61 47.42 38.73 47.36 38.84 47.31 C38.96 47.25 39.06 47.20 39.16 47.14 C39.27 47.08 39.38 47.01 39.48 46.95 C39.59 46.88 39.68 46.81 39.77 46.74 C39.86 46.67 39.94 46.60 40.03 46.53 C40.11 46.46 40.19 46.38 40.28 46.30 C40.36 46.21 40.44 46.13 40.52 46.04 C40.60 45.94 40.68 45.85 40.76 45.75 C40.84 45.65 40.92 45.55 41.00 45.44 C41.08 45.32 41.18 45.18 41.25 45.07 C41.32 44.95 41.38 44.85 41.44 44.75 C41.50 44.64 41.55 44.55 41.59 44.45 C41.64 44.35 41.69 44.24 41.72 44.15 C41.75 44.06 41.77 43.99 41.79 43.91 C41.81 43.83 41.82 43.74 41.83 43.67 C41.84 43.60 41.84 43.54 41.83 43.49 C41.82 43.44 41.81 43.39 41.79 43.35 C41.77 43.31 41.74 43.28 41.71 43.25 C41.67 43.23 41.63 43.20 41.58 43.18 C41.53 43.16 41.48 43.15 41.42 43.14 C41.36 43.13 41.31 43.12 41.24 43.12 C41.17 43.11 41.10 43.11 41.02 43.11 C40.94 43.12 40.88 43.12 40.76 43.13 C40.64 43.15 40.66 43.14 40.32 43.19 C39.97 43.25 39.23 43.38 38.70 43.46 C38.18 43.54 37.72 43.60 37.16 43.67 C36.60 43.73 35.90 43.81 35.34 43.86 C34.79 43.91 34.47 43.93 33.83 43.97 C33.19 44.00 31.89 44.06 31.48 44.07 C31.07 44.09 31.40 44.06 31.37 44.04 C31.34 44.03 31.31 44.00 31.29 43.97 C31.27 43.94 31.25 43.91 31.24 43.87 C31.24 43.84 31.24 43.80 31.24 43.77 C31.25 43.73 31.21 43.79 31.28 43.68 C31.34 43.57 31.50 43.30 31.64 43.10 C31.78 42.90 31.88 42.78 32.11 42.49 C32.34 42.20 32.68 41.78 33.02 41.37 C33.36 40.96 33.71 40.55 34.18 40.01 C34.65 39.47 35.17 38.88 35.85 38.12 C36.52 37.36 37.42 36.36 38.25 35.46 C39.08 34.57 40.29 33.32 40.84 32.75 C41.39 32.17 41.32 32.26 41.56 32.02 C41.81 31.78 42.11 31.50 42.31 31.30 C42.52 31.10 42.65 30.96 42.77 30.82 C42.90 30.69 42.99 30.57 43.06 30.47 C43.14 30.37 43.19 30.28 43.22 30.23 C43.25 30.17 43.25 30.15 43.25 30.12 C43.26 30.09 43.25 30.08 43.24 30.05 C43.23 30.03 43.23 30.02 43.19 29.98 C43.16 29.93 43.08 29.84 43.03 29.79 C42.99 29.75 42.97 29.73 42.94 29.71 C42.91 29.68 42.90 29.67 42.84 29.64 C42.78 29.61 42.67 29.56 42.57 29.53 C42.46 29.49 42.34 29.46 42.21 29.44 C42.09 29.41 41.97 29.39 41.80 29.37 C41.64 29.35 41.45 29.34 41.23 29.32 C41.01 29.31 40.74 29.29 40.48 29.29 C40.21 29.28 40.30 29.27 39.62 29.26 C38.94 29.26 37.39 29.25 36.39 29.26 C35.40 29.27 34.54 29.32 33.64 29.34 C32.74 29.37 31.68 29.39 31.01 29.40 C30.33 29.41 30.06 29.40 29.59 29.41 C29.12 29.41 28.50 29.43 28.19 29.44 C27.89 29.45 27.88 29.45 27.76 29.46 C27.63 29.48 27.54 29.49 27.45 29.51 C27.36 29.53 27.31 29.55 27.23 29.58 C27.16 29.62 27.10 29.65 27.00 29.71 C26.90 29.78 26.77 29.88 26.66 29.97 C26.54 30.07 26.43 30.16 26.32 30.26 C26.21 30.36 26.10 30.46 26.00 30.56 C25.90 30.66 25.80 30.77 25.70 30.88 C25.60 30.98 25.51 31.09 25.42 31.20 C25.33 31.32 25.22 31.45 25.14 31.57 C25.05 31.68 24.97 31.80 24.91 31.91 C24.84 32.01 24.79 32.11 24.74 32.20 C24.70 32.29 24.67 32.36 24.65 32.43 C24.62 32.50 24.61 32.55 24.60 32.61 C24.59 32.67 24.60 32.74 24.60 32.80 C24.61 32.85 24.62 32.90 24.64 32.94 C24.66 32.99 24.68 33.04 24.72 33.09 C24.75 33.13 24.80 33.18 24.84 33.22 C24.89 33.26 24.94 33.29 25.00 33.32 C25.07 33.35 25.14 33.38 25.21 33.41 C25.28 33.43 25.36 33.45 25.43 33.47 C25.50 33.48 25.50 33.49 25.62 33.50 C25.74 33.52 26.04 33.55 26.15 33.56 C26.26 33.57 26.08 33.57 26.30 33.56 C26.53 33.56 27.15 33.54 27.49 33.51 C27.84 33.49 28.05 33.46 28.37 33.42 C28.69 33.39 29.03 33.34 29.40 33.29 C29.76 33.23 29.98 33.20 30.57 33.10 C31.16 33.00 32.40 32.78 32.95 32.69 C33.51 32.60 33.59 32.59 33.90 32.55 C34.20 32.51 34.54 32.47 34.79 32.44 C35.04 32.42 35.28 32.39 35.39 32.38 C35.50 32.38 35.44 32.38 35.46 32.39 C35.49 32.40 35.51 32.40 35.54 32.42 C35.56 32.43 35.58 32.45 35.60 32.47 C35.62 32.49 35.63 32.51 35.64 32.54 C35.65 32.56 35.66 32.59 35.66 32.61 C35.67 32.64 35.67 32.67 35.66 32.69 C35.65 32.72 35.68 32.69 35.62 32.78 C35.57 32.86 35.41 33.07 35.32 33.20 C35.22 33.32 35.21 33.36 35.04 33.55 C34.86 33.73 34.53 34.06 34.27 34.32 C34.01 34.58 33.79 34.79 33.46 35.10 C33.13 35.42 32.68 35.84 32.29 36.21 C31.89 36.58 31.45 36.98 31.07 37.31 C30.70 37.65 30.21 38.07 30.04 38.22 Z" fill="#0C2340"/></g></svg></div>在 24px 以下用 90% 档(易糊线)</div>
|
||
<div><div class="pv" style="background:#9aa4b8"><svg viewBox="0 0 64 64" width="62" height="62"><g transform="translate(5.3304 5.3294) scale(2.22222)"><path d="M3 11.99v2.51c0 3.3 0 4.95 1.025 5.975S6.7 21.5 10 21.5h4c3.3 0 4.95 0 5.975-1.025S21 17.8 21 14.5v-2.51c0-1.682 0-2.522-.356-3.25s-1.02-1.244-2.346-2.276l-2-1.555C14.233 3.303 13.2 2.5 12 2.5s-2.233.803-4.298 2.409l-2 1.555C4.375 7.496 3.712 8.012 3.356 8.74S3 10.308 3 11.99" fill="none" stroke="#0C2340" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></g><g transform="translate(32.25 39) scale(0.9508) translate(-32.25 -39)"><path d="M27.97 39.99 C27.85 40.09 27.73 40.19 27.25 40.59 C26.78 40.99 25.73 41.87 25.12 42.39 C24.52 42.91 23.97 43.38 23.61 43.70 C23.25 44.02 23.15 44.11 22.96 44.29 C22.77 44.47 22.59 44.63 22.45 44.78 C22.30 44.93 22.18 45.05 22.07 45.17 C21.96 45.29 21.86 45.40 21.77 45.51 C21.68 45.63 21.59 45.75 21.52 45.85 C21.46 45.96 21.40 46.05 21.36 46.15 C21.31 46.24 21.28 46.35 21.26 46.41 C21.25 46.47 21.25 46.48 21.25 46.52 C21.25 46.55 21.25 46.59 21.25 46.63 C21.25 46.66 21.26 46.71 21.27 46.75 C21.28 46.78 21.29 46.82 21.31 46.86 C21.33 46.90 21.35 46.94 21.37 46.98 C21.39 47.01 21.39 47.02 21.44 47.07 C21.49 47.13 21.58 47.22 21.66 47.29 C21.74 47.36 21.84 47.43 21.93 47.48 C22.03 47.54 22.10 47.58 22.21 47.63 C22.32 47.69 22.45 47.75 22.58 47.79 C22.70 47.84 22.81 47.89 22.94 47.93 C23.07 47.97 23.20 48.01 23.35 48.06 C23.51 48.10 23.69 48.15 23.86 48.19 C24.03 48.22 24.18 48.26 24.35 48.29 C24.53 48.32 24.70 48.36 24.89 48.39 C25.07 48.42 25.25 48.44 25.46 48.47 C25.67 48.50 25.92 48.53 26.14 48.55 C26.37 48.58 26.45 48.59 26.78 48.62 C27.12 48.64 27.66 48.68 28.16 48.70 C28.65 48.72 29.24 48.74 29.74 48.74 C30.25 48.75 30.75 48.74 31.21 48.73 C31.68 48.72 32.10 48.69 32.54 48.66 C32.97 48.63 33.41 48.59 33.84 48.54 C34.26 48.49 34.70 48.43 35.09 48.37 C35.48 48.31 35.91 48.22 36.17 48.17 C36.44 48.11 36.51 48.09 36.68 48.05 C36.86 48.01 37.05 47.95 37.22 47.91 C37.38 47.86 37.53 47.82 37.67 47.77 C37.82 47.72 37.96 47.67 38.10 47.62 C38.23 47.57 38.36 47.52 38.49 47.47 C38.61 47.42 38.73 47.36 38.84 47.31 C38.96 47.25 39.06 47.20 39.16 47.14 C39.27 47.08 39.38 47.01 39.48 46.95 C39.59 46.88 39.68 46.81 39.77 46.74 C39.86 46.67 39.94 46.60 40.03 46.53 C40.11 46.46 40.19 46.38 40.28 46.30 C40.36 46.21 40.44 46.13 40.52 46.04 C40.60 45.94 40.68 45.85 40.76 45.75 C40.84 45.65 40.92 45.55 41.00 45.44 C41.08 45.32 41.18 45.18 41.25 45.07 C41.32 44.95 41.38 44.85 41.44 44.75 C41.50 44.64 41.55 44.55 41.59 44.45 C41.64 44.35 41.69 44.24 41.72 44.15 C41.75 44.06 41.77 43.99 41.79 43.91 C41.81 43.83 41.82 43.74 41.83 43.67 C41.84 43.60 41.84 43.54 41.83 43.49 C41.82 43.44 41.81 43.39 41.79 43.35 C41.77 43.31 41.74 43.28 41.71 43.25 C41.67 43.23 41.63 43.20 41.58 43.18 C41.53 43.16 41.48 43.15 41.42 43.14 C41.36 43.13 41.31 43.12 41.24 43.12 C41.17 43.11 41.10 43.11 41.02 43.11 C40.94 43.12 40.88 43.12 40.76 43.13 C40.64 43.15 40.66 43.14 40.32 43.19 C39.97 43.25 39.23 43.38 38.70 43.46 C38.18 43.54 37.72 43.60 37.16 43.67 C36.60 43.73 35.90 43.81 35.34 43.86 C34.79 43.91 34.47 43.93 33.83 43.97 C33.19 44.00 31.89 44.06 31.48 44.07 C31.07 44.09 31.40 44.06 31.37 44.04 C31.34 44.03 31.31 44.00 31.29 43.97 C31.27 43.94 31.25 43.91 31.24 43.87 C31.24 43.84 31.24 43.80 31.24 43.77 C31.25 43.73 31.21 43.79 31.28 43.68 C31.34 43.57 31.50 43.30 31.64 43.10 C31.78 42.90 31.88 42.78 32.11 42.49 C32.34 42.20 32.68 41.78 33.02 41.37 C33.36 40.96 33.71 40.55 34.18 40.01 C34.65 39.47 35.17 38.88 35.85 38.12 C36.52 37.36 37.42 36.36 38.25 35.46 C39.08 34.57 40.29 33.32 40.84 32.75 C41.39 32.17 41.32 32.26 41.56 32.02 C41.81 31.78 42.11 31.50 42.31 31.30 C42.52 31.10 42.65 30.96 42.77 30.82 C42.90 30.69 42.99 30.57 43.06 30.47 C43.14 30.37 43.19 30.28 43.22 30.23 C43.25 30.17 43.25 30.15 43.25 30.12 C43.26 30.09 43.25 30.08 43.24 30.05 C43.23 30.03 43.23 30.02 43.19 29.98 C43.16 29.93 43.08 29.84 43.03 29.79 C42.99 29.75 42.97 29.73 42.94 29.71 C42.91 29.68 42.90 29.67 42.84 29.64 C42.78 29.61 42.67 29.56 42.57 29.53 C42.46 29.49 42.34 29.46 42.21 29.44 C42.09 29.41 41.97 29.39 41.80 29.37 C41.64 29.35 41.45 29.34 41.23 29.32 C41.01 29.31 40.74 29.29 40.48 29.29 C40.21 29.28 40.30 29.27 39.62 29.26 C38.94 29.26 37.39 29.25 36.39 29.26 C35.40 29.27 34.54 29.32 33.64 29.34 C32.74 29.37 31.68 29.39 31.01 29.40 C30.33 29.41 30.06 29.40 29.59 29.41 C29.12 29.41 28.50 29.43 28.19 29.44 C27.89 29.45 27.88 29.45 27.76 29.46 C27.63 29.48 27.54 29.49 27.45 29.51 C27.36 29.53 27.31 29.55 27.23 29.58 C27.16 29.62 27.10 29.65 27.00 29.71 C26.90 29.78 26.77 29.88 26.66 29.97 C26.54 30.07 26.43 30.16 26.32 30.26 C26.21 30.36 26.10 30.46 26.00 30.56 C25.90 30.66 25.80 30.77 25.70 30.88 C25.60 30.98 25.51 31.09 25.42 31.20 C25.33 31.32 25.22 31.45 25.14 31.57 C25.05 31.68 24.97 31.80 24.91 31.91 C24.84 32.01 24.79 32.11 24.74 32.20 C24.70 32.29 24.67 32.36 24.65 32.43 C24.62 32.50 24.61 32.55 24.60 32.61 C24.59 32.67 24.60 32.74 24.60 32.80 C24.61 32.85 24.62 32.90 24.64 32.94 C24.66 32.99 24.68 33.04 24.72 33.09 C24.75 33.13 24.80 33.18 24.84 33.22 C24.89 33.26 24.94 33.29 25.00 33.32 C25.07 33.35 25.14 33.38 25.21 33.41 C25.28 33.43 25.36 33.45 25.43 33.47 C25.50 33.48 25.50 33.49 25.62 33.50 C25.74 33.52 26.04 33.55 26.15 33.56 C26.26 33.57 26.08 33.57 26.30 33.56 C26.53 33.56 27.15 33.54 27.49 33.51 C27.84 33.49 28.05 33.46 28.37 33.42 C28.69 33.39 29.03 33.34 29.40 33.29 C29.76 33.23 29.98 33.20 30.57 33.10 C31.16 33.00 32.40 32.78 32.95 32.69 C33.51 32.60 33.59 32.59 33.90 32.55 C34.20 32.51 34.54 32.47 34.79 32.44 C35.04 32.42 35.28 32.39 35.39 32.38 C35.50 32.38 35.44 32.38 35.46 32.39 C35.49 32.40 35.51 32.40 35.54 32.42 C35.56 32.43 35.58 32.45 35.60 32.47 C35.62 32.49 35.63 32.51 35.64 32.54 C35.65 32.56 35.66 32.59 35.66 32.61 C35.67 32.64 35.67 32.67 35.66 32.69 C35.65 32.72 35.68 32.69 35.62 32.78 C35.57 32.86 35.41 33.07 35.32 33.20 C35.22 33.32 35.21 33.36 35.04 33.55 C34.86 33.73 34.53 34.06 34.27 34.32 C34.01 34.58 33.79 34.79 33.46 35.10 C33.13 35.42 32.68 35.84 32.29 36.21 C31.89 36.58 31.45 36.98 31.07 37.31 C30.70 37.65 30.21 38.07 30.04 38.22 Z" fill="#0C2340"/></g></svg></div>在中间调灰底上用墨蓝</div>
|
||
</div>
|
||
|
||
<h2>二、色彩系统<em>SAP Fiori Morning Horizon · 官方实测值</em></h2>
|
||
<p class="note">
|
||
核心策略:<b>品牌色与交互色分离</b>。甄房墨蓝 <b>#0C2340</b> 承担品牌与导航,Fiori 的 <b>#0070F2</b> 承担交互反馈。
|
||
两者的明度差足够大 —— 墨蓝在界面里读作「近黑的中性色」,不会与亮蓝争夺注意力,也不会被误读为可点击元素。
|
||
</p>
|
||
|
||
<h3>品牌层</h3>
|
||
<p class="note" style="margin:0 0 4px">甄房自有色彩,用于标识与导航。绝不进入交互色 —— 界面交互一律用主色,标识一律用墨蓝</p>
|
||
<table class="doc"><thead><tr><th>令牌</th><th>取值</th><th>官方来源</th><th>用途</th><th>对比度</th></tr></thead><tbody>
|
||
<tr>
|
||
<td class="k">--zf-brand-ink</td>
|
||
<td class="v"><span class="chip" style="background:#0C2340"></span>#0C2340</td>
|
||
<td class="s">甄房自有</td>
|
||
<td class="u">品牌主色 · LOGO / 侧栏底 / 登录页底</td>
|
||
<td><span class="cc" data-fg="#0C2340" data-bg="#FFFFFF" data-req="4.5"></span></td>
|
||
</tr><tr>
|
||
<td class="k">--zf-brand-ink-deep</td>
|
||
<td class="v"><span class="chip" style="background:#071527"></span>#071527</td>
|
||
<td class="s">甄房自有</td>
|
||
<td class="u">最深底 · 应用图标、启动图</td>
|
||
<td>—</td>
|
||
</tr><tr>
|
||
<td class="k">--zf-brand-gold</td>
|
||
<td class="v"><span class="chip" style="background:#C6A15B"></span>#C6A15B</td>
|
||
<td class="s">甄房自有</td>
|
||
<td class="u">品牌点缀 · 选中指示条、关键数字,占比 ≤1%</td>
|
||
<td>—</td>
|
||
</tr><tr>
|
||
<td class="k">--zf-brand-gold-soft</td>
|
||
<td class="v"><span class="chip" style="background:#E3CB99"></span>#E3CB99</td>
|
||
<td class="s">甄房自有</td>
|
||
<td class="u">金色浅阶 · 深底上的次级强调</td>
|
||
<td>—</td>
|
||
</tr>
|
||
</tbody></table>
|
||
<h3>交互层</h3>
|
||
<p class="note" style="margin:0 0 4px">主色取官方强调按钮底色;悬停加深一档;<b>按下态官方是「白底蓝字蓝框」</b>,不是更深的蓝</p>
|
||
<table class="doc"><thead><tr><th>令牌</th><th>取值</th><th>官方来源</th><th>用途</th><th>对比度</th></tr></thead><tbody>
|
||
<tr>
|
||
<td class="k">--zf-primary</td>
|
||
<td class="v"><span class="chip" style="background:#0070F2"></span>#0070F2</td>
|
||
<td class="s">sapButton_Emphasized_Background</td>
|
||
<td class="u">主按钮底 · 关键图标</td>
|
||
<td><span class="cc" data-fg="#0070F2" data-bg="#FFFFFF" data-req="4.5"></span></td>
|
||
</tr><tr>
|
||
<td class="k">--zf-primary-hover</td>
|
||
<td class="v"><span class="chip" style="background:#0064D9"></span>#0064D9</td>
|
||
<td class="s">sapButton_Emphasized_Hover_Background</td>
|
||
<td class="u">主按钮悬停底</td>
|
||
<td><span class="cc" data-fg="#0064D9" data-bg="#FFFFFF" data-req="4.5"></span></td>
|
||
</tr><tr>
|
||
<td class="k">--zf-primary-active-bg</td>
|
||
<td class="v"><span class="chip" style="background:#FFFFFF"></span>#FFFFFF</td>
|
||
<td class="s">sapButton_Emphasized_Active_Background</td>
|
||
<td class="u">主按钮按下底(官方为白)</td>
|
||
<td>—</td>
|
||
</tr><tr>
|
||
<td class="k">--zf-primary-active-ink</td>
|
||
<td class="v"><span class="chip" style="background:#0064D9"></span>#0064D9</td>
|
||
<td class="s">sapButton_Emphasized_Active_TextColor</td>
|
||
<td class="u">主按钮按下时的字与框色</td>
|
||
<td><span class="cc" data-fg="#0064D9" data-bg="#FFFFFF" data-req="4.5"></span></td>
|
||
</tr><tr>
|
||
<td class="k">--zf-link</td>
|
||
<td class="v"><span class="chip" style="background:#0064D9"></span>#0064D9</td>
|
||
<td class="s">sapLinkColor</td>
|
||
<td class="u">链接色(官方链接比主色深一档,两者不同色)</td>
|
||
<td><span class="cc" data-fg="#0064D9" data-bg="#FFFFFF" data-req="4.5"></span></td>
|
||
</tr>
|
||
</tbody></table>
|
||
<h3>表面层</h3>
|
||
<p class="note" style="margin:0 0 4px">列表/表格悬停是<b>中性灰</b>,选中才是浅蓝 —— 与「悬停也用蓝」的常见做法不同</p>
|
||
<table class="doc"><thead><tr><th>令牌</th><th>取值</th><th>官方来源</th><th>用途</th><th>对比度</th></tr></thead><tbody>
|
||
<tr>
|
||
<td class="k">--zf-bg-base</td>
|
||
<td class="v"><span class="chip" style="background:#FFFFFF"></span>#FFFFFF</td>
|
||
<td class="s">sapList_Background</td>
|
||
<td class="u">卡片、表格、内容容器底</td>
|
||
<td>—</td>
|
||
</tr><tr>
|
||
<td class="k">--zf-bg-sub</td>
|
||
<td class="v"><span class="chip" style="background:#F5F6F7"></span>#F5F6F7</td>
|
||
<td class="s">sapBackgroundColor</td>
|
||
<td class="u">页面底 · 表头 · 斑马纹(sapList_AlternatingBackground 同值)</td>
|
||
<td>—</td>
|
||
</tr><tr>
|
||
<td class="k">--zf-bg-hover</td>
|
||
<td class="v"><span class="chip" style="background:#EAECEE"></span>#EAECEE</td>
|
||
<td class="s">sapList_Hover_Background</td>
|
||
<td class="u">行/项悬停底(中性灰)</td>
|
||
<td>—</td>
|
||
</tr><tr>
|
||
<td class="k">--zf-bg-active</td>
|
||
<td class="v"><span class="chip" style="background:#DEE2E5"></span>#DEE2E5</td>
|
||
<td class="s">sapList_Active_Background</td>
|
||
<td class="u">行/项按下底</td>
|
||
<td>—</td>
|
||
</tr><tr>
|
||
<td class="k">--zf-bg-selected</td>
|
||
<td class="v"><span class="chip" style="background:#EBF8FF"></span>#EBF8FF</td>
|
||
<td class="s">sapList_SelectionBackgroundColor</td>
|
||
<td class="u">行/项选中底(极浅蓝)</td>
|
||
<td>—</td>
|
||
</tr>
|
||
</tbody></table>
|
||
<h3>边框</h3>
|
||
<p class="note" style="margin:0 0 4px">分两类:<b>功能性描边</b>(输入框,深色保证可辨识)与<b>分隔线</b>(表格卡片,浅色)</p>
|
||
<table class="doc"><thead><tr><th>令牌</th><th>取值</th><th>官方来源</th><th>用途</th><th>对比度</th></tr></thead><tbody>
|
||
<tr>
|
||
<td class="k">--zf-border</td>
|
||
<td class="v"><span class="chip" style="background:#E5E5E5"></span>#E5E5E5</td>
|
||
<td class="s">sapList_BorderColor</td>
|
||
<td class="u">分隔线 · 表格线 · 卡片边框</td>
|
||
<td>—</td>
|
||
</tr><tr>
|
||
<td class="k">--zf-border-field</td>
|
||
<td class="v"><span class="chip" style="background:#556B81"></span>#556B81</td>
|
||
<td class="s">sapField_BorderColor</td>
|
||
<td class="u">输入框/下拉/日期等控件描边(功能性,需 ≥3:1)</td>
|
||
<td><span class="cc" data-fg="#556B81" data-bg="#FFFFFF" data-req="3"></span></td>
|
||
</tr><tr>
|
||
<td class="k">--zf-border-strong</td>
|
||
<td class="v"><span class="chip" style="background:#758CA4"></span>#758CA4</td>
|
||
<td class="s">sapContent_ForegroundBorderColor</td>
|
||
<td class="u">强分隔 · 未选中控件 · 分组边界</td>
|
||
<td><span class="cc" data-fg="#758CA4" data-bg="#FFFFFF" data-req="3"></span></td>
|
||
</tr>
|
||
</tbody></table>
|
||
<h3>文字</h3>
|
||
<p class="note" style="margin:0 0 4px">白底上能过 AA 4.5:1 的灰最深只到 #5F7590,所以二级与三级灰必然接近 —— 拉开层级要靠字号字重,不是继续变浅</p>
|
||
<table class="doc"><thead><tr><th>令牌</th><th>取值</th><th>官方来源</th><th>用途</th><th>对比度</th></tr></thead><tbody>
|
||
<tr>
|
||
<td class="k">--zf-text-1</td>
|
||
<td class="v"><span class="chip" style="background:#131E29"></span>#131E29</td>
|
||
<td class="s">sapTextColor</td>
|
||
<td class="u">一级文字 · 标题、正文、数字(同时也是 sapField_TextColor)</td>
|
||
<td><span class="cc" data-fg="#131E29" data-bg="#FFFFFF" data-req="4.5"></span></td>
|
||
</tr><tr>
|
||
<td class="k">--zf-text-2</td>
|
||
<td class="v"><span class="chip" style="background:#556B82"></span>#556B82</td>
|
||
<td class="s">sapContent_LabelColor</td>
|
||
<td class="u">二级文字 · 表单标签、表头、说明</td>
|
||
<td><span class="cc" data-fg="#556B82" data-bg="#FFFFFF" data-req="4.5"></span></td>
|
||
</tr><tr>
|
||
<td class="k">--zf-text-3</td>
|
||
<td class="v"><span class="chip" style="background:#5F7590"></span>#5F7590</td>
|
||
<td class="s">派生</td>
|
||
<td class="u">三级文字 · 单位、时间戳、辅助信息<br><span style="color:#f0a55c">⚠ 偏离官方:官方 Neutral #788FA6 白底仅 3.34:1,不能用于正文级小字;此值按 4.5:1 上限反推</span></td>
|
||
<td><span class="cc" data-fg="#5F7590" data-bg="#FFFFFF" data-req="4.5"></span></td>
|
||
</tr><tr>
|
||
<td class="k">--zf-text-placeholder</td>
|
||
<td class="v"><span class="chip" style="background:#5F7590"></span>#5F7590</td>
|
||
<td class="s">派生(官方为 #556B82)</td>
|
||
<td class="u">占位符 · 禁用态文字<br><span style="color:#f0a55c">⚠ 偏离官方:官方占位符与二级文字同色,会让人误以为已填内容;这里刻意浅一档以示区别</span></td>
|
||
<td><span class="cc" data-fg="#5F7590" data-bg="#FFFFFF" data-req="4.5"></span></td>
|
||
</tr><tr>
|
||
<td class="k">--zf-text-inverse</td>
|
||
<td class="v"><span class="chip" style="background:#FFFFFF"></span>#FFFFFF</td>
|
||
<td class="s">sapContent_ContrastTextColor</td>
|
||
<td class="u">深底上的文字</td>
|
||
<td><span class="cc" data-fg="#FFFFFF" data-bg="#0C2340" data-req="4.5"></span></td>
|
||
</tr><tr>
|
||
<td class="k">--zf-text-inverse-2</td>
|
||
<td class="v"><span class="chip" style="background:#BBC1CA"></span>#BBC1CA</td>
|
||
<td class="s">派生(rgba(255,255,255,.72) 在 #0C2340 上的合成值)</td>
|
||
<td class="u">深底上的二级文字 · 侧栏未选中项</td>
|
||
<td><span class="cc" data-fg="#BBC1CA" data-bg="#0C2340" data-req="4.5"></span></td>
|
||
</tr>
|
||
</tbody></table>
|
||
<h3>语义色</h3>
|
||
<p class="note" style="margin:0 0 4px">一律「描边 + 浅底」,不用实心高饱和色块。<b>只有成功/错误能直接当正文色</b>,警告与中性只能作图形</p>
|
||
<table class="doc"><thead><tr><th>令牌</th><th>取值</th><th>官方来源</th><th>用途</th><th>对比度</th></tr></thead><tbody>
|
||
<tr>
|
||
<td class="k">--zf-success</td>
|
||
<td class="v"><span class="chip" style="background:#256F3A"></span>#256F3A</td>
|
||
<td class="s">sapPositiveColor</td>
|
||
<td class="u">成功 · 有效 · 已完成(正文可用)</td>
|
||
<td><span class="cc" data-fg="#256F3A" data-bg="#FFFFFF" data-req="4.5"></span></td>
|
||
</tr><tr>
|
||
<td class="k">--zf-error</td>
|
||
<td class="v"><span class="chip" style="background:#AA0808"></span>#AA0808</td>
|
||
<td class="s">sapNegativeColor</td>
|
||
<td class="u">错误 · 已下架 · 危险操作(正文可用)</td>
|
||
<td><span class="cc" data-fg="#AA0808" data-bg="#FFFFFF" data-req="4.5"></span></td>
|
||
</tr><tr>
|
||
<td class="k">--zf-warning</td>
|
||
<td class="v"><span class="chip" style="background:#E76500"></span>#E76500</td>
|
||
<td class="s">sapCriticalColor</td>
|
||
<td class="u">警告 · 维护中 · 待处理(仅描边/底色,正文需配深色字)</td>
|
||
<td><span class="cc" data-fg="#E76500" data-bg="#FFFFFF" data-req="3"></span></td>
|
||
</tr><tr>
|
||
<td class="k">--zf-info</td>
|
||
<td class="v"><span class="chip" style="background:#0070F2"></span>#0070F2</td>
|
||
<td class="s">sapInformativeColor</td>
|
||
<td class="u">信息提示(同主色)</td>
|
||
<td><span class="cc" data-fg="#0070F2" data-bg="#FFFFFF" data-req="4.5"></span></td>
|
||
</tr><tr>
|
||
<td class="k">--zf-neutral</td>
|
||
<td class="v"><span class="chip" style="background:#788FA6"></span>#788FA6</td>
|
||
<td class="s">sapNeutralColor</td>
|
||
<td class="u">中性 · 仅图形与 ≥18px 大字,禁用于正文</td>
|
||
<td><span class="cc" data-fg="#788FA6" data-bg="#FFFFFF" data-req="3"></span></td>
|
||
</tr>
|
||
</tbody></table>
|
||
<h3>形状与层级</h3>
|
||
<p class="note" style="margin:0 0 4px">圆角全部来自官方 rem 值(根字号 16px);阴影官方未提供 UI 级令牌,为派生值</p>
|
||
<table class="doc"><thead><tr><th>令牌</th><th>取值</th><th>官方来源</th><th>用途</th><th>对比度</th></tr></thead><tbody>
|
||
<tr>
|
||
<td class="k">--zf-radius-s</td>
|
||
<td class="v"><span class="chip" style="background:4px"></span>4px</td>
|
||
<td class="s">sapField_BorderCornerRadius(.25rem)</td>
|
||
<td class="u">输入类控件 · 标签 · 复选框</td>
|
||
<td>—</td>
|
||
</tr><tr>
|
||
<td class="k">--zf-radius</td>
|
||
<td class="v"><span class="chip" style="background:8px"></span>8px</td>
|
||
<td class="s">sapButton_BorderCornerRadius(.5rem)</td>
|
||
<td class="u">按钮 · 卡片(基准)</td>
|
||
<td>—</td>
|
||
</tr><tr>
|
||
<td class="k">--zf-radius-l</td>
|
||
<td class="v"><span class="chip" style="background:12px"></span>12px</td>
|
||
<td class="s">sapElement_BorderCornerRadius(.75rem)</td>
|
||
<td class="u">弹窗 · 抽屉 · 大面积容器</td>
|
||
<td>—</td>
|
||
</tr><tr>
|
||
<td class="k">--zf-radius-tile</td>
|
||
<td class="v"><span class="chip" style="background:16px"></span>16px</td>
|
||
<td class="s">sapTile_BorderCornerRadius(1rem)</td>
|
||
<td class="u">大卡片 · 磁贴</td>
|
||
<td>—</td>
|
||
</tr><tr>
|
||
<td class="k">--zf-radius-pill</td>
|
||
<td class="v"><span class="chip" style="background:999px"></span>999px</td>
|
||
<td class="s">派生</td>
|
||
<td class="u">状态标签 · 头像</td>
|
||
<td>—</td>
|
||
</tr><tr>
|
||
<td class="k">--zf-shadow-1</td>
|
||
<td class="v"><span class="chip" style="background:0 1px 2px rgba(34,53,72,.08)"></span>0 1px 2px rgba(34,53,72,.08)</td>
|
||
<td class="s">派生</td>
|
||
<td class="u">卡片默认(官方无 UI 阴影令牌)</td>
|
||
<td>—</td>
|
||
</tr><tr>
|
||
<td class="k">--zf-shadow-2</td>
|
||
<td class="v"><span class="chip" style="background:0 2px 8px rgba(34,53,72,.12)"></span>0 2px 8px rgba(34,53,72,.12)</td>
|
||
<td class="s">派生</td>
|
||
<td class="u">下拉 · 弹窗 · 浮层</td>
|
||
<td>—</td>
|
||
</tr>
|
||
</tbody></table>
|
||
|
||
<h3>用色配比</h3>
|
||
<table class="doc"><thead><tr><th>层</th><th>占比</th><th>说明</th></tr></thead><tbody>
|
||
<tr><td class="k">中性(白 / 灰)</td><td class="v">≈ 75%</td><td class="u">页面基底与分隔靠灰阶承担,这是数据密集型界面不累的前提</td></tr>
|
||
<tr><td class="k">品牌墨蓝</td><td class="v">≈ 15%</td><td class="u">侧栏与页头;形成稳定视觉锚点,让导航边界一眼可辨</td></tr>
|
||
<tr><td class="k">交互蓝</td><td class="v">≈ 7%</td><td class="u">主操作、链接、选中态。一屏内主操作建议 ≤ 1 个</td></tr>
|
||
<tr><td class="k">语义色</td><td class="v">≈ 2%</td><td class="u">状态标签、提示条。一律描边+浅底,不用实心块</td></tr>
|
||
<tr><td class="k">品牌金</td><td class="v">≤ 1%</td><td class="u">只放在「点」上:选中指示条、关键数字。铺面即俗</td></tr>
|
||
</tbody></table>
|
||
|
||
<h2>三、字体与文字层级<em>官方 rem 值,根字号 16px</em></h2>
|
||
<p class="note">
|
||
字族:<code>--zf-font</code> = "72", "PingFang SC", "Microsoft YaHei", …("72" 为 Fiori 官方字族,未安装时回落系统中文黑体)。
|
||
数字一律加 <code>font-variant-numeric: tabular-nums</code>。
|
||
</p>
|
||
<div class="stage">
|
||
|
||
<div style="display:flex;align-items:baseline;gap:14px;padding:9px 0;border-bottom:1px solid #E5E5E5">
|
||
<code style="width:104px;color:#5F7590;font-size:11px;flex:none">--zf-fs-display</code>
|
||
<span style="font-size:24px;font-weight:600;line-height:1.35;flex:1;color:#131E29">甄房 · 二手房房源 1,284 套</span>
|
||
<span style="font-size:11px;color:#5F7590;width:250px;text-align:right;flex:none">24px / 600 / 行高 1.35 · 页面主标题</span>
|
||
</div>
|
||
<div style="font-size:10.5px;color:#8b94a7;padding:0 0 7px 104px;font-family:Menlo,Consolas,monospace">sapFontHeader3Size(1.5rem)</div>
|
||
<div style="display:flex;align-items:baseline;gap:14px;padding:9px 0;border-bottom:1px solid #E5E5E5">
|
||
<code style="width:104px;color:#5F7590;font-size:11px;flex:none">--zf-fs-title</code>
|
||
<span style="font-size:20px;font-weight:600;line-height:1.4;flex:1;color:#131E29">甄房 · 二手房房源 1,284 套</span>
|
||
<span style="font-size:11px;color:#5F7590;width:250px;text-align:right;flex:none">20px / 600 / 行高 1.4 · 模块标题 · 抽屉标题</span>
|
||
</div>
|
||
<div style="font-size:10.5px;color:#8b94a7;padding:0 0 7px 104px;font-family:Menlo,Consolas,monospace">sapFontHeader4Size(1.25rem)</div>
|
||
<div style="display:flex;align-items:baseline;gap:14px;padding:9px 0;border-bottom:1px solid #E5E5E5">
|
||
<code style="width:104px;color:#5F7590;font-size:11px;flex:none">--zf-fs-title-s</code>
|
||
<span style="font-size:16px;font-weight:600;line-height:1.45;flex:1;color:#131E29">甄房 · 二手房房源 1,284 套</span>
|
||
<span style="font-size:11px;color:#5F7590;width:250px;text-align:right;flex:none">16px / 600 / 行高 1.45 · 卡片标题 · 分区小标题</span>
|
||
</div>
|
||
<div style="font-size:10.5px;color:#8b94a7;padding:0 0 7px 104px;font-family:Menlo,Consolas,monospace">sapFontHeader5Size / sapFontLargeSize(1rem)</div>
|
||
<div style="display:flex;align-items:baseline;gap:14px;padding:9px 0;border-bottom:1px solid #E5E5E5">
|
||
<code style="width:104px;color:#5F7590;font-size:11px;flex:none">--zf-fs-body</code>
|
||
<span style="font-size:14px;font-weight:400;line-height:1.6;flex:1;color:#131E29">甄房 · 二手房房源 1,284 套</span>
|
||
<span style="font-size:11px;color:#5F7590;width:250px;text-align:right;flex:none">14px / 400 / 行高 1.6 · 正文基准 · 表格内容 · 表单输入值</span>
|
||
</div>
|
||
<div style="font-size:10.5px;color:#8b94a7;padding:0 0 7px 104px;font-family:Menlo,Consolas,monospace">sapFontSize(.875rem)</div>
|
||
<div style="display:flex;align-items:baseline;gap:14px;padding:9px 0;border-bottom:1px solid #E5E5E5">
|
||
<code style="width:104px;color:#5F7590;font-size:11px;flex:none">--zf-fs-body-s</code>
|
||
<span style="font-size:12px;font-weight:400;line-height:1.6;flex:1;color:#131E29">甄房 · 二手房房源 1,284 套</span>
|
||
<span style="font-size:11px;color:#5F7590;width:250px;text-align:right;flex:none">12px / 400 / 行高 1.6 · 次级说明 · 表格辅助行</span>
|
||
</div>
|
||
<div style="font-size:10.5px;color:#8b94a7;padding:0 0 7px 104px;font-family:Menlo,Consolas,monospace">sapFontSmallSize(.75rem)</div>
|
||
<div style="display:flex;align-items:baseline;gap:14px;padding:9px 0;border-bottom:1px solid #E5E5E5">
|
||
<code style="width:104px;color:#5F7590;font-size:11px;flex:none">--zf-fs-caption</code>
|
||
<span style="font-size:11px;font-weight:400;line-height:1.5;flex:1;color:#131E29">甄房 · 二手房房源 1,284 套</span>
|
||
<span style="font-size:11px;color:#5F7590;width:250px;text-align:right;flex:none">11px / 400 / 行高 1.5 · 标签 · 单位 · 时间戳(不要再小)</span>
|
||
</div>
|
||
<div style="font-size:10.5px;color:#8b94a7;padding:0 0 7px 104px;font-family:Menlo,Consolas,monospace">派生</div>
|
||
</div>
|
||
<p class="note">
|
||
<b>只有 6 档,不要再加。</b>中文最小 11px(caption)—— 再小在 Windows 上会糊。
|
||
</p>
|
||
|
||
<h2>四、间距 · 圆角 · 阴影</h2>
|
||
<h3>间距(4pt 基数)</h3>
|
||
<div class="stage plain">
|
||
<div class="row" style="align-items:flex-end;gap:14px">
|
||
<div style="text-align:center">
|
||
<div style="width:4px;height:4px;background:#0070F2;border-radius:2px;margin:0 auto 6px"></div>
|
||
<code style="font-size:10.5px;color:#5F7590">4</code></div><div style="text-align:center">
|
||
<div style="width:8px;height:8px;background:#0070F2;border-radius:2px;margin:0 auto 6px"></div>
|
||
<code style="font-size:10.5px;color:#5F7590">8</code></div><div style="text-align:center">
|
||
<div style="width:12px;height:12px;background:#0070F2;border-radius:2px;margin:0 auto 6px"></div>
|
||
<code style="font-size:10.5px;color:#5F7590">12</code></div><div style="text-align:center">
|
||
<div style="width:16px;height:16px;background:#0070F2;border-radius:2px;margin:0 auto 6px"></div>
|
||
<code style="font-size:10.5px;color:#5F7590">16</code></div><div style="text-align:center">
|
||
<div style="width:20px;height:20px;background:#0070F2;border-radius:2px;margin:0 auto 6px"></div>
|
||
<code style="font-size:10.5px;color:#5F7590">20</code></div><div style="text-align:center">
|
||
<div style="width:24px;height:24px;background:#0070F2;border-radius:2px;margin:0 auto 6px"></div>
|
||
<code style="font-size:10.5px;color:#5F7590">24</code></div><div style="text-align:center">
|
||
<div style="width:32px;height:32px;background:#0070F2;border-radius:2px;margin:0 auto 6px"></div>
|
||
<code style="font-size:10.5px;color:#5F7590">32</code></div><div style="text-align:center">
|
||
<div style="width:40px;height:40px;background:#0070F2;border-radius:2px;margin:0 auto 6px"></div>
|
||
<code style="font-size:10.5px;color:#5F7590">40</code></div>
|
||
</div>
|
||
<p class="note" style="margin:14px 0 0">
|
||
常用:控件内边距 <b>8 / 11 / 16</b>;表单行间距 <b>12</b>;卡片内边距 <b>16</b>;区块间距 <b>20 / 24</b>;页面左右边距 <b>18 / 24</b>。
|
||
不要出现 5、7、9、13 这类非 4 倍数。
|
||
</p>
|
||
</div>
|
||
|
||
<h3>圆角与阴影</h3>
|
||
<div class="stage">
|
||
<div class="row" style="align-items:stretch">
|
||
<div class="card" style="flex:1;border-radius:4px"><code style="font-size:11px;color:#5F7590">4px · 输入类</code><div style="font-size:12px;color:#556B82;margin-top:6px">输入框、下拉、标签、复选框</div></div>
|
||
<div class="card" style="flex:1"><code style="font-size:11px;color:#5F7590">8px · 基准</code><div style="font-size:12px;color:#556B82;margin-top:6px">按钮、卡片</div></div>
|
||
<div class="card" style="flex:1;border-radius:12px"><code style="font-size:11px;color:#5F7590">12px</code><div style="font-size:12px;color:#556B82;margin-top:6px">弹窗、抽屉、大容器</div></div>
|
||
<div class="card" style="flex:1;border-radius:16px"><code style="font-size:11px;color:#5F7590">16px · 磁贴</code><div style="font-size:12px;color:#556B82;margin-top:6px">大卡片、看板磁贴</div></div>
|
||
<div class="card" style="flex:1;border-radius:999px"><code style="font-size:11px;color:#5F7590">pill</code><div style="font-size:12px;color:#556B82;margin-top:6px">状态标签、头像</div></div>
|
||
</div>
|
||
<p class="note" style="margin:14px 0 0">
|
||
阴影只用两级:<code>--zf-shadow-1</code> 卡片默认、<code>--zf-shadow-2</code> 浮层。
|
||
<b>分隔优先用边框而不是阴影</b> —— 一屏几十张卡片都带阴影会整体发糊。
|
||
</p>
|
||
</div>
|
||
|
||
<h2>五、组件规范</h2>
|
||
|
||
<h3>按钮</h3>
|
||
<div class="stage">
|
||
<div class="row">
|
||
<button class="btn pri">主操作</button>
|
||
<button class="btn pri h">悬停</button>
|
||
<button class="btn pri a">按下</button>
|
||
<button class="btn gho">次要操作</button>
|
||
<button class="btn">普通按钮</button>
|
||
<button class="btn tx">文字按钮</button>
|
||
<button class="btn dan">危险操作</button>
|
||
<button class="btn dis">禁用</button>
|
||
<button class="btn pri sm">小号主操作</button>
|
||
</div>
|
||
<p class="note" style="margin:16px 0 0">
|
||
<b>「按下」是白底蓝字蓝框</b> —— 这是 Fiori 官方定义(<code>sapButton_Emphasized_Active_Background: #fff</code> + 蓝字蓝框),不是做错了。
|
||
其余状态:悬停 <code>#0064D9</code> 加深一档、禁用灰底。
|
||
</p>
|
||
<table class="doc" style="margin-top:14px"><thead><tr><th>类型</th><th>用途</th><th>一屏数量</th></tr></thead><tbody>
|
||
<tr><td class="k">主操作 pri</td><td class="u">推动流程前进的唯一动作:查询、提交、保存、确认</td><td class="v">≤ 1</td></tr>
|
||
<tr><td class="k">次要 gho</td><td class="u">辅助动作:高级筛选、批量导入</td><td class="v">≤ 2</td></tr>
|
||
<tr><td class="k">普通 / 文字</td><td class="u">重置、取消、查看详情</td><td class="v">不限</td></tr>
|
||
<tr><td class="k">危险 dan</td><td class="u">删除、作废、强制回收;必须二次确认</td><td class="v">≤ 1</td></tr>
|
||
</tbody></table>
|
||
</div>
|
||
|
||
<h3>表单</h3>
|
||
<div class="stage">
|
||
<div class="row" style="align-items:flex-start;gap:18px">
|
||
<div class="fld" style="width:200px"><label>房源编码</label><input placeholder="SH-ES-202609-…"><span class="hint">支持模糊匹配</span></div>
|
||
<div class="fld" style="width:200px"><label>所属楼盘<span class="req">*</span></label><select><option>滨江壹号</option></select><span class="hint">必填</span></div>
|
||
<div class="fld err" style="width:200px"><label>维护人<span class="req">*</span></label><input value="张"><span class="hint">请输入完整姓名(至少 2 个字)</span></div>
|
||
<div class="fld dis" style="width:200px"><label>房源编号(系统生成)</label><input value="SH-ES-202609-00037" disabled><span class="hint">不可编辑</span></div>
|
||
</div>
|
||
<p class="note" style="margin:16px 0 0">
|
||
标签在上、控件在下的纵向排布。标签 12px 不加重。错误态只改边框与提示文字色,<b>不要给整个字段加红底</b>。<br>
|
||
控件描边用 <code>--zf-border-field #556B81</code>(深色)—— 这是 Horizon 的特色,输入框「有框」才看得清;分隔线才用浅色 <code>#E5E5E5</code>。两者不可混用。
|
||
</p>
|
||
</div>
|
||
|
||
<h3>数据表格</h3>
|
||
<div class="stage" style="padding:0;overflow:hidden">
|
||
<table class="tbl">
|
||
<thead><tr><th>房源编码</th><th>楼盘 / 房号</th><th class="num">面积</th><th class="num">售价</th><th>状态</th><th>维护人</th><th>操作</th></tr></thead>
|
||
<tbody>
|
||
<tr><td class="lk">SH-ES-202609-00037</td><td>滨江壹号 3幢 1802<span class="sub">滨江区 · 钱塘江畔</span></td><td class="num">128.5 ㎡</td><td class="num">1,285 万</td><td><span class="tg ok">有效</span></td><td>张伟</td><td class="act"><a>查看</a><a>编辑</a></td></tr>
|
||
<tr class="hov"><td class="lk">SH-ES-202609-00041</td><td>钱江新城 7幢 2201<span class="sub">上城区 · 万象城</span></td><td class="num">156.0 ㎡</td><td class="num">1,860 万</td><td><span class="tg pr">待检核</span></td><td>李敏</td><td class="act"><a>查看</a><a>编辑</a></td></tr>
|
||
<tr class="sel"><td class="lk">SH-ES-202609-00052</td><td>滨江壹号 5幢 901<span class="sub">滨江区 · 钱塘江畔</span></td><td class="num">98.2 ㎡</td><td class="num">920 万</td><td><span class="tg gd">独家</span></td><td>王强</td><td class="act"><a>查看</a><a>编辑</a></td></tr>
|
||
<tr><td class="lk">SH-ES-202609-00058</td><td>绿城桂语 2幢 1503<span class="sub">西湖区 · 文三路</span></td><td class="num">142.6 ㎡</td><td class="num">1,420 万</td><td><span class="tg wn">维护中</span></td><td>张伟</td><td class="act"><a>查看</a><a>编辑</a></td></tr>
|
||
<tr><td class="lk">SH-ES-202609-00063</td><td>万科未来 1幢 608<span class="sub">余杭区 · 未来科技城</span></td><td class="num">89.0 ㎡</td><td class="num">610 万</td><td><span class="tg er">已下架</span></td><td>赵磊</td><td class="act"><a>查看</a><a class="dan">删除</a></td></tr>
|
||
</tbody></table>
|
||
<div style="padding:13px 16px;font-size:12px;color:#556B82;display:flex;align-items:center">
|
||
共 1,284 条<span class="pg on" style="margin-left:16px">1</span><span class="pg">2</span><span class="pg">3</span><span class="pg">…</span><span class="pg">65</span>
|
||
<span style="margin-left:auto;font-size:11.5px">每页 20 条</span></div>
|
||
</div>
|
||
<table class="doc" style="margin-top:14px"><thead><tr><th>项</th><th>标准</th></tr></thead><tbody>
|
||
<tr><td class="k">斑马纹</td><td class="u">偶数行 <code>--zf-bg-sub #F5F6F7</code>,与白底差值仅 2–3%。<b>这是数据表最高频的疲劳源</b>,不要加大对比</td></tr>
|
||
<tr><td class="k">悬停 / 选中</td><td class="u">悬停是<b>中性灰</b> <code>#EAECEE</code>,选中才是<b>浅蓝</b> <code>#EBF8FF</code> —— 官方如此,两者不要都做成蓝。选中行左侧加 3px 主色竖条,长表格滚动后仍可辨认</td></tr>
|
||
<tr><td class="k">数字列</td><td class="u">右对齐 + tabular-nums;金额带千分位,单位写表头(「售价(万)」)不逐行重复</td></tr>
|
||
<tr><td class="k">操作列</td><td class="u">固定最后一列,文字链 ≤ 3 个;破坏性动作放最后并标红</td></tr>
|
||
<tr><td class="k">边框</td><td class="u">全表只有一种线色 <code>#E5E5E5</code>(ElementUI 也只暴露一个变量)。想要「外框深、内线浅」必须写自定义样式</td></tr>
|
||
</tbody></table>
|
||
|
||
<h3>状态标签</h3>
|
||
<div class="stage">
|
||
<div class="row">
|
||
<span class="tg ok">有效</span><span class="tg wn">维护中</span><span class="tg er">已下架</span>
|
||
<span class="tg pr">待检核</span><span class="tg nu">草稿</span><span class="tg gd">独家</span>
|
||
</div>
|
||
<p class="note" style="margin:14px 0 0">
|
||
一律 <b>描边 + 浅底</b>,圆角 pill,字号 11。<br>
|
||
<b>注意警告标签的文字色是 #B44F00 而不是 #E76500</b> —— 官方 Critical 色在白底只有 3.36:1,直接当文字色不达标;
|
||
底色仍用 <code>#E76500</code> 描边,文字压深一档。<b>不要</b>用白字压在 #E76500 上(3.36:1,同样不达标)。
|
||
</p>
|
||
</div>
|
||
|
||
<h3>页签 · 分页</h3>
|
||
<div class="stage">
|
||
<div class="tabs"><a class="on">全部 1284</a><a>有效 892</a><a>维护中 236</a><a>已成交 121</a><a>暂缓 35</a></div>
|
||
<div style="margin-top:14px">
|
||
<span class="pg on">1</span><span class="pg">2</span><span class="pg">3</span><span class="pg">…</span><span class="pg">65</span>
|
||
</div>
|
||
</div>
|
||
|
||
<h3>提示条</h3>
|
||
<div class="stage">
|
||
<div class="al i"><span>ℹ</span><span><b>提示:</b>该房源委托期将于 7 天后到期,请及时续签。</span></div>
|
||
<div class="al s"><span>✓</span><span><b>成功:</b>房源 SH-ES-202609-00037 已提交检核。</span></div>
|
||
<div class="al w"><span>⚠</span><span><b>警告:</b>钥匙编号与系统记录不一致,请核对后重试。</span></div>
|
||
<div class="al e"><span>✕</span><span><b>错误:</b>售价不能低于政府指导价,请修改后重试。</span></div>
|
||
</div>
|
||
|
||
<h3>卡片 · KPI · 页头导航</h3>
|
||
<div class="stage plain">
|
||
<div class="row" style="align-items:stretch;margin-bottom:16px">
|
||
<div class="kpi" style="flex:1"><div class="t">在售房源</div><div class="v">1,284<em>套</em></div><div class="d">↑ 3.2% 较上周</div></div>
|
||
<div class="kpi" style="flex:1"><div class="t">本周新增客源</div><div class="v">96<em>位</em></div><div class="d">↑ 12 位</div></div>
|
||
<div class="kpi" style="flex:1"><div class="t">待跟进</div><div class="v">23<em>条</em></div><div class="d dn">↓ 5 条</div></div>
|
||
<div class="kpi gold" style="flex:1"><div class="t">本月预估佣金</div><div class="v">86.4<em>万</em></div><div class="d">↑ 8.6%</div></div>
|
||
</div>
|
||
<div class="app">
|
||
<aside class="side">
|
||
<div class="brand"><svg viewBox="0 0 64 64" width="30" height="30"><g transform="translate(5.3304 5.3294) scale(2.22222)"><path d="M3 11.99v2.51c0 3.3 0 4.95 1.025 5.975S6.7 21.5 10 21.5h4c3.3 0 4.95 0 5.975-1.025S21 17.8 21 14.5v-2.51c0-1.682 0-2.522-.356-3.25s-1.02-1.244-2.346-2.276l-2-1.555C14.233 3.303 13.2 2.5 12 2.5s-2.233.803-4.298 2.409l-2 1.555C4.375 7.496 3.712 8.012 3.356 8.74S3 10.308 3 11.99" fill="none" stroke="#FFFFFF" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></g><g transform="translate(32.25 39) scale(0.9508) translate(-32.25 -39)"><path d="M27.97 39.99 C27.85 40.09 27.73 40.19 27.25 40.59 C26.78 40.99 25.73 41.87 25.12 42.39 C24.52 42.91 23.97 43.38 23.61 43.70 C23.25 44.02 23.15 44.11 22.96 44.29 C22.77 44.47 22.59 44.63 22.45 44.78 C22.30 44.93 22.18 45.05 22.07 45.17 C21.96 45.29 21.86 45.40 21.77 45.51 C21.68 45.63 21.59 45.75 21.52 45.85 C21.46 45.96 21.40 46.05 21.36 46.15 C21.31 46.24 21.28 46.35 21.26 46.41 C21.25 46.47 21.25 46.48 21.25 46.52 C21.25 46.55 21.25 46.59 21.25 46.63 C21.25 46.66 21.26 46.71 21.27 46.75 C21.28 46.78 21.29 46.82 21.31 46.86 C21.33 46.90 21.35 46.94 21.37 46.98 C21.39 47.01 21.39 47.02 21.44 47.07 C21.49 47.13 21.58 47.22 21.66 47.29 C21.74 47.36 21.84 47.43 21.93 47.48 C22.03 47.54 22.10 47.58 22.21 47.63 C22.32 47.69 22.45 47.75 22.58 47.79 C22.70 47.84 22.81 47.89 22.94 47.93 C23.07 47.97 23.20 48.01 23.35 48.06 C23.51 48.10 23.69 48.15 23.86 48.19 C24.03 48.22 24.18 48.26 24.35 48.29 C24.53 48.32 24.70 48.36 24.89 48.39 C25.07 48.42 25.25 48.44 25.46 48.47 C25.67 48.50 25.92 48.53 26.14 48.55 C26.37 48.58 26.45 48.59 26.78 48.62 C27.12 48.64 27.66 48.68 28.16 48.70 C28.65 48.72 29.24 48.74 29.74 48.74 C30.25 48.75 30.75 48.74 31.21 48.73 C31.68 48.72 32.10 48.69 32.54 48.66 C32.97 48.63 33.41 48.59 33.84 48.54 C34.26 48.49 34.70 48.43 35.09 48.37 C35.48 48.31 35.91 48.22 36.17 48.17 C36.44 48.11 36.51 48.09 36.68 48.05 C36.86 48.01 37.05 47.95 37.22 47.91 C37.38 47.86 37.53 47.82 37.67 47.77 C37.82 47.72 37.96 47.67 38.10 47.62 C38.23 47.57 38.36 47.52 38.49 47.47 C38.61 47.42 38.73 47.36 38.84 47.31 C38.96 47.25 39.06 47.20 39.16 47.14 C39.27 47.08 39.38 47.01 39.48 46.95 C39.59 46.88 39.68 46.81 39.77 46.74 C39.86 46.67 39.94 46.60 40.03 46.53 C40.11 46.46 40.19 46.38 40.28 46.30 C40.36 46.21 40.44 46.13 40.52 46.04 C40.60 45.94 40.68 45.85 40.76 45.75 C40.84 45.65 40.92 45.55 41.00 45.44 C41.08 45.32 41.18 45.18 41.25 45.07 C41.32 44.95 41.38 44.85 41.44 44.75 C41.50 44.64 41.55 44.55 41.59 44.45 C41.64 44.35 41.69 44.24 41.72 44.15 C41.75 44.06 41.77 43.99 41.79 43.91 C41.81 43.83 41.82 43.74 41.83 43.67 C41.84 43.60 41.84 43.54 41.83 43.49 C41.82 43.44 41.81 43.39 41.79 43.35 C41.77 43.31 41.74 43.28 41.71 43.25 C41.67 43.23 41.63 43.20 41.58 43.18 C41.53 43.16 41.48 43.15 41.42 43.14 C41.36 43.13 41.31 43.12 41.24 43.12 C41.17 43.11 41.10 43.11 41.02 43.11 C40.94 43.12 40.88 43.12 40.76 43.13 C40.64 43.15 40.66 43.14 40.32 43.19 C39.97 43.25 39.23 43.38 38.70 43.46 C38.18 43.54 37.72 43.60 37.16 43.67 C36.60 43.73 35.90 43.81 35.34 43.86 C34.79 43.91 34.47 43.93 33.83 43.97 C33.19 44.00 31.89 44.06 31.48 44.07 C31.07 44.09 31.40 44.06 31.37 44.04 C31.34 44.03 31.31 44.00 31.29 43.97 C31.27 43.94 31.25 43.91 31.24 43.87 C31.24 43.84 31.24 43.80 31.24 43.77 C31.25 43.73 31.21 43.79 31.28 43.68 C31.34 43.57 31.50 43.30 31.64 43.10 C31.78 42.90 31.88 42.78 32.11 42.49 C32.34 42.20 32.68 41.78 33.02 41.37 C33.36 40.96 33.71 40.55 34.18 40.01 C34.65 39.47 35.17 38.88 35.85 38.12 C36.52 37.36 37.42 36.36 38.25 35.46 C39.08 34.57 40.29 33.32 40.84 32.75 C41.39 32.17 41.32 32.26 41.56 32.02 C41.81 31.78 42.11 31.50 42.31 31.30 C42.52 31.10 42.65 30.96 42.77 30.82 C42.90 30.69 42.99 30.57 43.06 30.47 C43.14 30.37 43.19 30.28 43.22 30.23 C43.25 30.17 43.25 30.15 43.25 30.12 C43.26 30.09 43.25 30.08 43.24 30.05 C43.23 30.03 43.23 30.02 43.19 29.98 C43.16 29.93 43.08 29.84 43.03 29.79 C42.99 29.75 42.97 29.73 42.94 29.71 C42.91 29.68 42.90 29.67 42.84 29.64 C42.78 29.61 42.67 29.56 42.57 29.53 C42.46 29.49 42.34 29.46 42.21 29.44 C42.09 29.41 41.97 29.39 41.80 29.37 C41.64 29.35 41.45 29.34 41.23 29.32 C41.01 29.31 40.74 29.29 40.48 29.29 C40.21 29.28 40.30 29.27 39.62 29.26 C38.94 29.26 37.39 29.25 36.39 29.26 C35.40 29.27 34.54 29.32 33.64 29.34 C32.74 29.37 31.68 29.39 31.01 29.40 C30.33 29.41 30.06 29.40 29.59 29.41 C29.12 29.41 28.50 29.43 28.19 29.44 C27.89 29.45 27.88 29.45 27.76 29.46 C27.63 29.48 27.54 29.49 27.45 29.51 C27.36 29.53 27.31 29.55 27.23 29.58 C27.16 29.62 27.10 29.65 27.00 29.71 C26.90 29.78 26.77 29.88 26.66 29.97 C26.54 30.07 26.43 30.16 26.32 30.26 C26.21 30.36 26.10 30.46 26.00 30.56 C25.90 30.66 25.80 30.77 25.70 30.88 C25.60 30.98 25.51 31.09 25.42 31.20 C25.33 31.32 25.22 31.45 25.14 31.57 C25.05 31.68 24.97 31.80 24.91 31.91 C24.84 32.01 24.79 32.11 24.74 32.20 C24.70 32.29 24.67 32.36 24.65 32.43 C24.62 32.50 24.61 32.55 24.60 32.61 C24.59 32.67 24.60 32.74 24.60 32.80 C24.61 32.85 24.62 32.90 24.64 32.94 C24.66 32.99 24.68 33.04 24.72 33.09 C24.75 33.13 24.80 33.18 24.84 33.22 C24.89 33.26 24.94 33.29 25.00 33.32 C25.07 33.35 25.14 33.38 25.21 33.41 C25.28 33.43 25.36 33.45 25.43 33.47 C25.50 33.48 25.50 33.49 25.62 33.50 C25.74 33.52 26.04 33.55 26.15 33.56 C26.26 33.57 26.08 33.57 26.30 33.56 C26.53 33.56 27.15 33.54 27.49 33.51 C27.84 33.49 28.05 33.46 28.37 33.42 C28.69 33.39 29.03 33.34 29.40 33.29 C29.76 33.23 29.98 33.20 30.57 33.10 C31.16 33.00 32.40 32.78 32.95 32.69 C33.51 32.60 33.59 32.59 33.90 32.55 C34.20 32.51 34.54 32.47 34.79 32.44 C35.04 32.42 35.28 32.39 35.39 32.38 C35.50 32.38 35.44 32.38 35.46 32.39 C35.49 32.40 35.51 32.40 35.54 32.42 C35.56 32.43 35.58 32.45 35.60 32.47 C35.62 32.49 35.63 32.51 35.64 32.54 C35.65 32.56 35.66 32.59 35.66 32.61 C35.67 32.64 35.67 32.67 35.66 32.69 C35.65 32.72 35.68 32.69 35.62 32.78 C35.57 32.86 35.41 33.07 35.32 33.20 C35.22 33.32 35.21 33.36 35.04 33.55 C34.86 33.73 34.53 34.06 34.27 34.32 C34.01 34.58 33.79 34.79 33.46 35.10 C33.13 35.42 32.68 35.84 32.29 36.21 C31.89 36.58 31.45 36.98 31.07 37.31 C30.70 37.65 30.21 38.07 30.04 38.22 Z" fill="#FFFFFF"/></g></svg><span><b>甄房</b><em>ZHENFANG</em></span></div>
|
||
<a class="on"><span class="dot"></span>工作台</a>
|
||
<a><span class="dot"></span>房源管理</a>
|
||
<a><span class="dot"></span>客源管理</a>
|
||
<a><span class="dot"></span>交易管理</a>
|
||
<a><span class="dot"></span>钥匙管理</a>
|
||
<a><span class="dot"></span>我的佣金</a>
|
||
</aside>
|
||
<div class="main">
|
||
<div class="head">
|
||
<div class="cb">房源管理 / <b>二手房房源</b></div>
|
||
<div class="usr"><span class="av">张</span>张伟 · 滨江门店</div>
|
||
</div>
|
||
<div class="bd" style="font-size:12px;color:#5F7590">内容区底色 <code>--zf-bg-sub</code>,卡片用白底与 1px 边框区分层级</div>
|
||
</div>
|
||
</div>
|
||
<p class="note" style="margin:14px 0 0">
|
||
侧栏固定用 <b>墨蓝 #0C2340</b>。这是本项目<b>刻意偏离 Fiori 官方 Shell</b> 的地方(官方 <code>sapShell_Background</code> 是浅色 <code>#EFF1F2</code>)——
|
||
为了减少整屏亮度、形成稳定视觉锚点。浅灰侧栏在长时间使用中会与内容区「糊在一起」。
|
||
选中项用金色 3px 左指示条 + 10% 白底。<b>代价是 ElementUI 的菜单变量不够用,需补自定义样式(见第九章)。</b>
|
||
</p>
|
||
</div>
|
||
|
||
<h2>六、页面状态</h2>
|
||
<div class="stage plain">
|
||
<div class="row" style="align-items:stretch;gap:14px">
|
||
<div class="st" style="flex:1;background:#fff"><span class="ic">⏳</span><b>加载中</b>用骨架屏(灰条),不要整页转圈</div>
|
||
<div class="st" style="flex:1;background:#fff"><span class="ic">📭</span><b>没有数据</b>「还没有房源,点右上角新增」+ 主操作按钮</div>
|
||
<div class="st" style="flex:1;background:#fff"><span class="ic">🔍</span><b>筛选无结果</b>「没有符合条件的房源,试试放宽条件」+ 重置按钮</div>
|
||
<div class="st" style="flex:1;background:#fff"><span class="ic">⚠</span><b>加载失败</b>「数据加载失败」+ 重试按钮 + 错误码</div>
|
||
<div class="st" style="flex:1;background:#fff"><span class="ic">🔒</span><b>无权限</b>「你没有查看该门店房源的权限」+ 申请入口</div>
|
||
</div>
|
||
<div class="card" style="margin-top:14px">
|
||
<div style="font-size:12px;color:#5F7590;margin-bottom:9px">骨架屏示例</div>
|
||
<div class="sk" style="width:38%"></div>
|
||
<div class="sk" style="width:72%"></div>
|
||
<div class="sk" style="width:56%"></div>
|
||
</div>
|
||
<p class="note" style="margin:14px 0 0">
|
||
五种状态都必须单独设计。「没有数据」与「筛选无结果」文案必须不同 —— 否则用户会以为自己的数据丢了。
|
||
</p>
|
||
</div>
|
||
|
||
<h2>七、长时使用约束<em>针对经纪人每天连续使用 6–8 小时</em></h2>
|
||
<table class="doc"><thead><tr><th>约束</th><th>做法</th><th>解决什么</th></tr></thead><tbody>
|
||
<tr><td class="k">深色品牌侧栏</td><td class="u">侧栏统一 <code>#0C2340</code>,不用浅灰(偏离官方 Shell 浅色)</td><td class="u">形成稳定视觉锚点;浅灰侧栏会与内容区糊在一起</td></tr>
|
||
<tr><td class="k">斑马纹极低对比</td><td class="u">条纹 <code>#F5F6F7</code>,与白底差值 2–3%</td><td class="u">帮助横向追行不串行,又不产生条纹眩光</td></tr>
|
||
<tr><td class="k">语义色降饱和</td><td class="u">描边+浅底,不用实心块;警告文字用深一档的 #B44F00</td><td class="u">一屏几十个状态标签时的最大刺眼源</td></tr>
|
||
<tr><td class="k">悬停与选中分工</td><td class="u">悬停中性灰 <code>#EAECEE</code>、选中浅蓝 <code>#EBF8FF</code></td><td class="u">长时间划动列表时,中性灰比蓝底更不累眼;蓝色只留给「已选定」这一个强语义</td></tr>
|
||
<tr><td class="k">金色只做点</td><td class="u">占比 ≤1%,只用于指示条与关键数字</td><td class="u">保住品牌质感,避免大面积金色显廉价</td></tr>
|
||
<tr><td class="k">正文不用纯黑</td><td class="u">正文 <code>#131E29</code> 而非 <code>#000</code></td><td class="u">降低硬反差带来的持续眼疲劳</td></tr>
|
||
</tbody></table>
|
||
|
||
<h2>八、无障碍标准</h2>
|
||
<p class="note">门槛:正文文字 ≥ 4.5:1,大字与图形/控件边界 ≥ 3:1。下表全部由运行时真实计算。</p>
|
||
<table class="doc"><thead><tr><th>检查项</th><th>前景 / 背景</th><th>实测</th><th>门槛</th><th>结论</th></tr></thead><tbody>
|
||
<tr><td class="u">一级文字 / 白底</td><td class="v"><span class="chip" style="background:#131E29"></span>#131E29 / <span class="chip" style="background:#FFFFFF"></span>#FFFFFF</td>
|
||
<td class="cc" data-fg="#131E29" data-bg="#FFFFFF" data-req="4.5"></td><td class="v">≥4.5:1</td>
|
||
<td><span class="vc" data-fg="#131E29" data-bg="#FFFFFF" data-req="4.5"></span></td></tr><tr><td class="u">二级文字 / 白底</td><td class="v"><span class="chip" style="background:#556B82"></span>#556B82 / <span class="chip" style="background:#FFFFFF"></span>#FFFFFF</td>
|
||
<td class="cc" data-fg="#556B82" data-bg="#FFFFFF" data-req="4.5"></td><td class="v">≥4.5:1</td>
|
||
<td><span class="vc" data-fg="#556B82" data-bg="#FFFFFF" data-req="4.5"></span></td></tr><tr><td class="u">三级文字 / 白底</td><td class="v"><span class="chip" style="background:#5F7590"></span>#5F7590 / <span class="chip" style="background:#FFFFFF"></span>#FFFFFF</td>
|
||
<td class="cc" data-fg="#5F7590" data-bg="#FFFFFF" data-req="4.5"></td><td class="v">≥4.5:1</td>
|
||
<td><span class="vc" data-fg="#5F7590" data-bg="#FFFFFF" data-req="4.5"></span></td></tr><tr><td class="u">一级文字 / 次级底</td><td class="v"><span class="chip" style="background:#131E29"></span>#131E29 / <span class="chip" style="background:#F5F6F7"></span>#F5F6F7</td>
|
||
<td class="cc" data-fg="#131E29" data-bg="#F5F6F7" data-req="4.5"></td><td class="v">≥4.5:1</td>
|
||
<td><span class="vc" data-fg="#131E29" data-bg="#F5F6F7" data-req="4.5"></span></td></tr><tr><td class="u">二级文字 / 次级底</td><td class="v"><span class="chip" style="background:#556B82"></span>#556B82 / <span class="chip" style="background:#F5F6F7"></span>#F5F6F7</td>
|
||
<td class="cc" data-fg="#556B82" data-bg="#F5F6F7" data-req="4.5"></td><td class="v">≥4.5:1</td>
|
||
<td><span class="vc" data-fg="#556B82" data-bg="#F5F6F7" data-req="4.5"></span></td></tr><tr><td class="u">一级文字 / 选中底</td><td class="v"><span class="chip" style="background:#131E29"></span>#131E29 / <span class="chip" style="background:#EBF8FF"></span>#EBF8FF</td>
|
||
<td class="cc" data-fg="#131E29" data-bg="#EBF8FF" data-req="4.5"></td><td class="v">≥4.5:1</td>
|
||
<td><span class="vc" data-fg="#131E29" data-bg="#EBF8FF" data-req="4.5"></span></td></tr><tr><td class="u">白字 / 交互主色(按钮)</td><td class="v"><span class="chip" style="background:#FFFFFF"></span>#FFFFFF / <span class="chip" style="background:#0070F2"></span>#0070F2</td>
|
||
<td class="cc" data-fg="#FFFFFF" data-bg="#0070F2" data-req="4.5"></td><td class="v">≥4.5:1</td>
|
||
<td><span class="vc" data-fg="#FFFFFF" data-bg="#0070F2" data-req="4.5"></span></td></tr><tr><td class="u">白字 / 主色悬停</td><td class="v"><span class="chip" style="background:#FFFFFF"></span>#FFFFFF / <span class="chip" style="background:#0064D9"></span>#0064D9</td>
|
||
<td class="cc" data-fg="#FFFFFF" data-bg="#0064D9" data-req="4.5"></td><td class="v">≥4.5:1</td>
|
||
<td><span class="vc" data-fg="#FFFFFF" data-bg="#0064D9" data-req="4.5"></span></td></tr><tr><td class="u">链接色 / 白底</td><td class="v"><span class="chip" style="background:#0064D9"></span>#0064D9 / <span class="chip" style="background:#FFFFFF"></span>#FFFFFF</td>
|
||
<td class="cc" data-fg="#0064D9" data-bg="#FFFFFF" data-req="4.5"></td><td class="v">≥4.5:1</td>
|
||
<td><span class="vc" data-fg="#0064D9" data-bg="#FFFFFF" data-req="4.5"></span></td></tr><tr><td class="u">成功 / 白底(正文)</td><td class="v"><span class="chip" style="background:#256F3A"></span>#256F3A / <span class="chip" style="background:#FFFFFF"></span>#FFFFFF</td>
|
||
<td class="cc" data-fg="#256F3A" data-bg="#FFFFFF" data-req="4.5"></td><td class="v">≥4.5:1</td>
|
||
<td><span class="vc" data-fg="#256F3A" data-bg="#FFFFFF" data-req="4.5"></span></td></tr><tr><td class="u">错误 / 白底(正文)</td><td class="v"><span class="chip" style="background:#AA0808"></span>#AA0808 / <span class="chip" style="background:#FFFFFF"></span>#FFFFFF</td>
|
||
<td class="cc" data-fg="#AA0808" data-bg="#FFFFFF" data-req="4.5"></td><td class="v">≥4.5:1</td>
|
||
<td><span class="vc" data-fg="#AA0808" data-bg="#FFFFFF" data-req="4.5"></span></td></tr><tr><td class="u">警告 / 白底(仅图形)</td><td class="v"><span class="chip" style="background:#E76500"></span>#E76500 / <span class="chip" style="background:#FFFFFF"></span>#FFFFFF</td>
|
||
<td class="cc" data-fg="#E76500" data-bg="#FFFFFF" data-req="3"></td><td class="v">≥3:1</td>
|
||
<td><span class="vc" data-fg="#E76500" data-bg="#FFFFFF" data-req="3"></span></td></tr><tr><td class="u">中性 / 白底(仅图形)</td><td class="v"><span class="chip" style="background:#788FA6"></span>#788FA6 / <span class="chip" style="background:#FFFFFF"></span>#FFFFFF</td>
|
||
<td class="cc" data-fg="#788FA6" data-bg="#FFFFFF" data-req="3"></td><td class="v">≥3:1</td>
|
||
<td><span class="vc" data-fg="#788FA6" data-bg="#FFFFFF" data-req="3"></span></td></tr><tr><td class="u">控件描边 / 白底</td><td class="v"><span class="chip" style="background:#556B81"></span>#556B81 / <span class="chip" style="background:#FFFFFF"></span>#FFFFFF</td>
|
||
<td class="cc" data-fg="#556B81" data-bg="#FFFFFF" data-req="3"></td><td class="v">≥3:1</td>
|
||
<td><span class="vc" data-fg="#556B81" data-bg="#FFFFFF" data-req="3"></span></td></tr><tr><td class="u">白字 / 品牌墨蓝(侧栏)</td><td class="v"><span class="chip" style="background:#FFFFFF"></span>#FFFFFF / <span class="chip" style="background:#0C2340"></span>#0C2340</td>
|
||
<td class="cc" data-fg="#FFFFFF" data-bg="#0C2340" data-req="4.5"></td><td class="v">≥4.5:1</td>
|
||
<td><span class="vc" data-fg="#FFFFFF" data-bg="#0C2340" data-req="4.5"></span></td></tr><tr><td class="u">侧栏二级字 / 品牌墨蓝</td><td class="v"><span class="chip" style="background:#BBC1CA"></span>#BBC1CA / <span class="chip" style="background:#0C2340"></span>#0C2340</td>
|
||
<td class="cc" data-fg="#BBC1CA" data-bg="#0C2340" data-req="4.5"></td><td class="v">≥4.5:1</td>
|
||
<td><span class="vc" data-fg="#BBC1CA" data-bg="#0C2340" data-req="4.5"></span></td></tr>
|
||
</tbody></table>
|
||
|
||
<h3>其他无障碍要求</h3>
|
||
<table class="doc"><thead><tr><th>项</th><th>标准</th></tr></thead><tbody>
|
||
<tr><td class="k">焦点态</td><td class="u">所有可交互元素必须有可见焦点环:<code>border-color: --zf-primary</code> + <code>box-shadow: 0 0 0 3px --zf-bg-selected</code>。禁止 <code>outline:none</code> 而不给替代</td></tr>
|
||
<tr><td class="k">触达尺寸</td><td class="u">可点区域 ≥ 32×32px(H5 ≥ 44×44px)</td></tr>
|
||
<tr><td class="k">不靠颜色单独表意</td><td class="u">状态标签必须带文字,不能只有色点;图表必须带数据标签或图例</td></tr>
|
||
<tr><td class="k">键盘可达</td><td class="u">Tab 顺序符合视觉顺序;弹窗打开后焦点移入并锁定,Esc 关闭后归还触发元素</td></tr>
|
||
<tr><td class="k">动效</td><td class="u">过渡 ≤ 200ms;尊重 <code>prefers-reduced-motion</code></td></tr>
|
||
</tbody></table>
|
||
|
||
<h2>九、落地清单<em>element-ui 2.15.14 变量映射 · 已逐条核对官方源码</em></h2>
|
||
<p class="note">
|
||
项目前端为 <b>RuoYi-Vue + element-ui 2.15.14 + Vue 2.6 + sass</b>,变量覆盖写在
|
||
<code>ruoyi-ui/src/assets/styles/element-variables.scss</code>(须在 <code>@import "~element-ui/packages/theme-chalk/src/index"</code> <b>之前</b>定义)。<br>
|
||
下表 <span class="tag2 m">必改</span> = 不改主题就是半成品 ·
|
||
<span class="tag2 d">刻意偏离</span> = 与官方取值不同,已在行内写明原因 ·
|
||
<span class="tag2 a">自动派生</span> = ElementUI 会基于主色自动算出,只要定义顺序正确就无需覆盖。
|
||
</p>
|
||
<table class="doc"><thead><tr><th>ElementUI 变量</th><th>本项目令牌</th><th>取值</th><th>类别</th><th>说明</th></tr></thead><tbody>
|
||
<tr>
|
||
<td class="k">$--color-primary</td><td class="k">--zf-primary</td>
|
||
<td class="v"><span class="chip" style="background:#0070F2"></span>#0070F2</td>
|
||
<td><span class="tag2 m">必改</span></td>
|
||
<td class="u">主色,ElementUI 全组件取此值</td></tr><tr>
|
||
<td class="k">$--color-success</td><td class="k">--zf-success</td>
|
||
<td class="v"><span class="chip" style="background:#256F3A"></span>#256F3A</td>
|
||
<td><span class="tag2 m">必改</span></td>
|
||
<td class="u">—</td></tr><tr>
|
||
<td class="k">$--color-warning</td><td class="k">--zf-warning</td>
|
||
<td class="v"><span class="chip" style="background:#E76500"></span>#E76500</td>
|
||
<td><span class="tag2 m">必改</span></td>
|
||
<td class="u">同时须改白字,见下方风险项</td></tr><tr>
|
||
<td class="k">$--color-danger</td><td class="k">--zf-error</td>
|
||
<td class="v"><span class="chip" style="background:#AA0808"></span>#AA0808</td>
|
||
<td><span class="tag2 m">必改</span></td>
|
||
<td class="u">官方 Negative 色</td></tr><tr>
|
||
<td class="k">$--color-info</td><td class="k">--zf-text-3</td>
|
||
<td class="v"><span class="chip" style="background:#5F7590"></span>#5F7590</td>
|
||
<td><span class="tag2 d">刻意偏离</span></td>
|
||
<td class="u">官方 Informative 与主色同值,若照搬会让「信息按钮」与「主按钮」无法区分,故退为中性灰</td></tr><tr>
|
||
<td class="k">$--color-text-primary</td><td class="k">--zf-text-1</td>
|
||
<td class="v"><span class="chip" style="background:#131E29"></span>#131E29</td>
|
||
<td><span class="tag2 m">必改</span></td>
|
||
<td class="u">—</td></tr><tr>
|
||
<td class="k">$--color-text-regular</td><td class="k">--zf-text-1</td>
|
||
<td class="v"><span class="chip" style="background:#131E29"></span>#131E29</td>
|
||
<td><span class="tag2 d">刻意偏离</span></td>
|
||
<td class="u">官方正文只有一档 sapTextColor;ElementUI 分 primary/regular 两级,这里刻意拉平</td></tr><tr>
|
||
<td class="k">$--color-text-secondary</td><td class="k">--zf-text-3</td>
|
||
<td class="v"><span class="chip" style="background:#5F7590"></span>#5F7590</td>
|
||
<td><span class="tag2 m">必改</span></td>
|
||
<td class="u">同时决定表头文字色</td></tr><tr>
|
||
<td class="k">$--color-text-placeholder</td><td class="k">--zf-text-placeholder</td>
|
||
<td class="v"><span class="chip" style="background:#5F7590"></span>#5F7590</td>
|
||
<td><span class="tag2 d">刻意偏离</span></td>
|
||
<td class="u">官方与二级文字同色,会与已填内容混淆</td></tr><tr>
|
||
<td class="k">$--border-color-base</td><td class="k">--zf-border-field</td>
|
||
<td class="v"><span class="chip" style="background:#556B81"></span>#556B81</td>
|
||
<td><span class="tag2 m">必改</span></td>
|
||
<td class="u">功能性描边。官方输入框描边本就深,这是 Horizon 的高辨识度来源</td></tr><tr>
|
||
<td class="k">$--border-color-light</td><td class="k">--zf-border</td>
|
||
<td class="v"><span class="chip" style="background:#E5E5E5"></span>#E5E5E5</td>
|
||
<td><span class="tag2 m">必改</span></td>
|
||
<td class="u">—</td></tr><tr>
|
||
<td class="k">$--border-color-lighter</td><td class="k">--zf-border</td>
|
||
<td class="v"><span class="chip" style="background:#E5E5E5"></span>#E5E5E5</td>
|
||
<td><span class="tag2 m">必改</span></td>
|
||
<td class="u">同时决定表格线</td></tr><tr>
|
||
<td class="k">$--border-color-extra-light</td><td class="k">--zf-bg-active</td>
|
||
<td class="v"><span class="chip" style="background:#DEE2E5"></span>#DEE2E5</td>
|
||
<td><span class="tag2 m">必改</span></td>
|
||
<td class="u">—</td></tr><tr>
|
||
<td class="k">$--border-color-hover</td><td class="k">--zf-border-strong</td>
|
||
<td class="v"><span class="chip" style="background:#758CA4"></span>#758CA4</td>
|
||
<td><span class="tag2 m">必改</span></td>
|
||
<td class="u">—</td></tr><tr>
|
||
<td class="k">$--background-color-base</td><td class="k">--zf-bg-sub</td>
|
||
<td class="v"><span class="chip" style="background:#F5F6F7"></span>#F5F6F7</td>
|
||
<td><span class="tag2 m">必改</span></td>
|
||
<td class="u">同时是表格悬停的默认值,必须连带覆盖下一行</td></tr><tr>
|
||
<td class="k">$--border-radius-base</td><td class="k">--zf-radius</td>
|
||
<td class="v"><span class="chip" style="background:transparent"></span>8px</td>
|
||
<td><span class="tag2 m">必改</span></td>
|
||
<td class="u">官方按钮圆角 .5rem</td></tr><tr>
|
||
<td class="k">$--border-radius-small</td><td class="k">--zf-radius-s</td>
|
||
<td class="v"><span class="chip" style="background:transparent"></span>4px</td>
|
||
<td><span class="tag2 m">必改</span></td>
|
||
<td class="u">官方输入类圆角 .25rem</td></tr><tr>
|
||
<td class="k">$--button-border-radius</td><td class="k">--zf-radius</td>
|
||
<td class="v"><span class="chip" style="background:transparent"></span>8px</td>
|
||
<td><span class="tag2 m">必改</span></td>
|
||
<td class="u">自动继承 base,写出只为明确</td></tr><tr>
|
||
<td class="k">$--font-size-base</td><td class="k">--zf-fs-body</td>
|
||
<td class="v"><span class="chip" style="background:transparent"></span>14px</td>
|
||
<td><span class="tag2 m">必改</span></td>
|
||
<td class="u">官方 sapFontSize = .875rem,与 ElementUI 默认一致,<b>无需改动</b></td></tr><tr>
|
||
<td class="k">$--font-size-small</td><td class="k">--zf-fs-body-s</td>
|
||
<td class="v"><span class="chip" style="background:transparent"></span>12px</td>
|
||
<td><span class="tag2 d">刻意偏离</span></td>
|
||
<td class="u">官方小号 = .75rem。由 ElementUI 默认的 13px 降到 12px,会影响部分组件,需目测回归</td></tr><tr>
|
||
<td class="k">$--font-size-extra-small</td><td class="k">--zf-fs-body-s</td>
|
||
<td class="v"><span class="chip" style="background:transparent"></span>12px</td>
|
||
<td><span class="tag2 m">必改</span></td>
|
||
<td class="u">—</td></tr><tr>
|
||
<td class="k">$--font-size-medium</td><td class="k">--zf-fs-title-s</td>
|
||
<td class="v"><span class="chip" style="background:transparent"></span>16px</td>
|
||
<td><span class="tag2 m">必改</span></td>
|
||
<td class="u">—</td></tr><tr>
|
||
<td class="k">$--font-size-large</td><td class="k">--zf-fs-title</td>
|
||
<td class="v"><span class="chip" style="background:transparent"></span>20px</td>
|
||
<td><span class="tag2 d">刻意偏离</span></td>
|
||
<td class="u">官方 Header4 = 1.25rem。由 ElementUI 默认 18px 提到 20px,会改变标题观感</td></tr><tr>
|
||
<td class="k">$--font-size-extra-large</td><td class="k">--zf-fs-display</td>
|
||
<td class="v"><span class="chip" style="background:transparent"></span>24px</td>
|
||
<td><span class="tag2 m">必改</span></td>
|
||
<td class="u">官方 Header3 = 1.5rem</td></tr><tr>
|
||
<td class="k">$--table-border-color</td><td class="k">--zf-border</td>
|
||
<td class="v"><span class="chip" style="background:#E5E5E5"></span>#E5E5E5</td>
|
||
<td><span class="tag2 m">必改</span></td>
|
||
<td class="u">—</td></tr><tr>
|
||
<td class="k">$--table-font-color</td><td class="k">--zf-text-1</td>
|
||
<td class="v"><span class="chip" style="background:#131E29"></span>#131E29</td>
|
||
<td><span class="tag2 m">必改</span></td>
|
||
<td class="u">默认继承 text-regular,已同上</td></tr><tr>
|
||
<td class="k">$--table-header-font-color</td><td class="k">--zf-text-3</td>
|
||
<td class="v"><span class="chip" style="background:#5F7590"></span>#5F7590</td>
|
||
<td><span class="tag2 m">必改</span></td>
|
||
<td class="u">默认继承 text-secondary,已同上</td></tr><tr>
|
||
<td class="k">$--table-header-background-color</td><td class="k">--zf-bg-sub</td>
|
||
<td class="v"><span class="chip" style="background:#F5F6F7"></span>#F5F6F7</td>
|
||
<td><span class="tag2 m">必改</span></td>
|
||
<td class="u"><b>必改</b>:默认是纯白,不改则表头与内容无法区分</td></tr><tr>
|
||
<td class="k">$--table-row-hover-background-color</td><td class="k">--zf-bg-hover</td>
|
||
<td class="v"><span class="chip" style="background:#EAECEE"></span>#EAECEE</td>
|
||
<td><span class="tag2 m">必改</span></td>
|
||
<td class="u"><b>必改</b>:默认继承 background-color-base,不改则悬停变灰底而非中性灰阶</td></tr><tr>
|
||
<td class="k">$--table-current-row-background-color</td><td class="k">--zf-bg-selected</td>
|
||
<td class="v"><span class="chip" style="background:#EBF8FF"></span>#EBF8FF</td>
|
||
<td><span class="tag2 m">必改</span></td>
|
||
<td class="u">默认由 color-primary-light-9 派生,显式写死更可控</td></tr><tr>
|
||
<td class="k">$--box-shadow-base</td><td class="k">--zf-shadow-2</td>
|
||
<td class="v"><span class="chip" style="background:transparent"></span>0 2px 8px rgba(34,53,72,.12)</td>
|
||
<td><span class="tag2 m">必改</span></td>
|
||
<td class="u">—</td></tr><tr>
|
||
<td class="k">$--menu-background-color</td><td class="k">--zf-brand-ink</td>
|
||
<td class="v"><span class="chip" style="background:#0C2340"></span>#0C2340</td>
|
||
<td><span class="tag2 m">必改</span></td>
|
||
<td class="u">深色侧栏底色</td></tr><tr>
|
||
<td class="k">$--color-primary-light-1 … -9</td><td class="k">—</td>
|
||
<td class="v"><span class="chip" style="background:transparent"></span>自动派生</td>
|
||
<td><span class="tag2 a">自动派生</span></td>
|
||
<td class="u">由 <code>mix($--color-white, $--color-primary, N*10%)</code> 基于覆盖后的主色计算,<b>顺序正确即无需覆盖</b>:必须在 @import theme-chalk 之前定义 $--color-primary</td></tr><tr>
|
||
<td class="k">$--color-success-light / -lighter 等 8 个</td><td class="k">—</td>
|
||
<td class="v"><span class="chip" style="background:transparent"></span>自动派生</td>
|
||
<td><span class="tag2 a">自动派生</span></td>
|
||
<td class="u">同上,按语义色 mix 得到</td></tr><tr>
|
||
<td class="k">$--table-border</td><td class="k">—</td>
|
||
<td class="v"><span class="chip" style="background:transparent"></span>自动派生</td>
|
||
<td><span class="tag2 a">自动派生</span></td>
|
||
<td class="u">= 1px solid $--table-border-color</td></tr><tr>
|
||
<td class="k">$--button-small-border-radius / -mini-border-radius</td><td class="k">—</td>
|
||
<td class="v"><span class="chip" style="background:transparent"></span>自动派生</td>
|
||
<td><span class="tag2 a">自动派生</span></td>
|
||
<td class="u">= $--border-radius-base - 1 = 7px,官方无对应值,如需一致请显式设为 6px</td></tr>
|
||
</tbody></table>
|
||
|
||
<h3>光改变量解决不了的风险项</h3>
|
||
<div class="risk"><b>警告按钮白字不达标</b><br>#E76500 底 + 白字实测只有 3.36:1,连正文 4.5:1 都不到(官方 Fiori 也没有橙底白字的实心按钮)。两条出路:① 橙色只用于描边/文字按钮;② 保留实心橙底但把 <code>$--button-warning-font-color</code> 改成深色 <code>#131E29</code>(对 #E76500 为 4.6:1)</div><div class="risk"><b>按钮悬停方向与官方相反</b><br>ElementUI 的主按钮悬停 = <code>mix(白, 主色, 20%)</code> 即<b>变浅</b>,按下 = <code>mix(黑, 主色, 10%)</code> 变深;而 Fiori 是悬停 <b>#0064D9 变深</b>、按下变白底蓝框。二者不可兼得:<br>· 若照 ElementUI 走,只需改色,但规范里「悬停 #0064D9」不成立,按钮观感偏「淡」;<br>· 若照 Fiori 走,必须给 <code>.el-button--primary</code> 写自定义 hover/active 样式(变量层面做不到)。<br><b>建议按 Fiori 走并写自定义样式</b>,否则主按钮的悬停反馈会与全站其余悬停(深一档)不一致</div><div class="risk"><b>深色侧栏变量不够用</b><br>ElementUI 只暴露 4 个菜单变量(<code>$--menu-background-color</code>、<code>$--menu-item-font-color</code>、<code>$--menu-item-hover-fill</code>、<code>$--menu-item-font-size</code>)。改成墨蓝底后至少还要把 <code>$--menu-item-font-color</code> 设为白色(否则默认 #131E29 在墨蓝上几乎看不见),且子菜单底色、选中态仍无变量可用,必须补自定义 CSS</div><div class="risk"><b>表格只有一种边框色</b><br>ElementUI 全表共用 <code>$--table-border-color</code>,做不出「外框深、内线浅」的两级分隔。这不是配置问题,要两级就必须写自定义样式</div>
|
||
|
||
<h3>项目现有主题文件中的失效变量</h3>
|
||
<p class="note">
|
||
现有 <a class="dl" href="../../ruoyi-ui/src/assets/styles/element-variables.scss">element-variables.scss</a> 里下面这些变量在 element-ui 2.15.14 中<b>并不存在</b>,
|
||
Sass 不会报错、但也不会生效 —— 属于「以为改了其实没改」。同样问题也存在于另一个主题体系(橙色那套)里。
|
||
</p>
|
||
<table class="doc"><thead><tr><th>写法</th><th>实际情况</th></tr></thead><tbody>
|
||
<tr><td class="k" style="color:#f0a55c">$--color-primary-dark-2</td><td class="u">Element Plus 才有此变量;ElementUI 的按下态由 <code>mix(黑, 主色, 10%)</code> 算出</td></tr><tr><td class="k" style="color:#f0a55c">$--border-radius-round</td><td class="u">不存在;ElementUI 只有 <code>$--border-radius-circle: 100%</code></td></tr><tr><td class="k" style="color:#f0a55c">$--table-header-bg</td><td class="u">不存在;正确名为 <code>$--table-header-background-color</code></td></tr><tr><td class="k" style="color:#f0a55c">$--table-row-hover-bg</td><td class="u">不存在;正确名为 <code>$--table-row-hover-background-color</code></td></tr><tr><td class="k" style="color:#f0a55c">$--table-current-row-bg</td><td class="u">不存在;正确名为 <code>$--table-current-row-background-color</code></td></tr>
|
||
</tbody></table>
|
||
|
||
<h3>图表分类色板(ECharts)<span class="pill">v1.2 新增 · 最多 10 序列</span></h3>
|
||
<p class="note">
|
||
多序列图表<b>禁止把单色映射逐色套用</b> —— 旧色板里 <code>#ff7a1a</code> 映射成主色蓝后会与原有的 <code>#3b82f6</code> 撞色,
|
||
<code>#ffb31a</code>/<code>#d9481c</code> 也会与 <code>#ef4444</code> 挤在橙红区,10 条序列将失去区分度。<br>
|
||
下表是重配后的分类色板:色相均匀拉开、相邻序差异最大,全部取自 Fiori 官方 Category / Accent 色(最后一色为品牌金)。
|
||
</p>
|
||
<div class="stage" style="padding:16px 18px">
|
||
<div style="display:flex;gap:6px">
|
||
<div style="flex:1;text-align:center" title="sapShell_Category_1(主色系,与品牌呼应)">
|
||
<div style="height:46px;border-radius:6px;background:#0057D2"></div>
|
||
<div style="font-size:10.5px;color:var(--zf-text-3);margin-top:6px">1 · 蓝</div>
|
||
<div style="font-size:9.5px;color:var(--zf-text-3);opacity:.75">#0057D2</div>
|
||
</div><div style="flex:1;text-align:center" title="sapCriticalColor">
|
||
<div style="height:46px;border-radius:6px;background:#E76500"></div>
|
||
<div style="font-size:10.5px;color:var(--zf-text-3);margin-top:6px">2 · 橙</div>
|
||
<div style="font-size:9.5px;color:var(--zf-text-3);opacity:.75">#E76500</div>
|
||
</div><div style="flex:1;text-align:center" title="sapShell_Category_8">
|
||
<div style="height:46px;border-radius:6px;background:#188918"></div>
|
||
<div style="font-size:10.5px;color:var(--zf-text-3);margin-top:6px">3 · 绿</div>
|
||
<div style="font-size:9.5px;color:var(--zf-text-3);opacity:.75">#188918</div>
|
||
</div><div style="flex:1;text-align:center" title="sapShell_Category_2">
|
||
<div style="height:46px;border-radius:6px;background:#DF1278"></div>
|
||
<div style="font-size:10.5px;color:var(--zf-text-3);margin-top:6px">4 · 洋红</div>
|
||
<div style="font-size:9.5px;color:var(--zf-text-3);opacity:.75">#DF1278</div>
|
||
</div><div style="flex:1;text-align:center" title="sapShell_Category_6">
|
||
<div style="height:46px;border-radius:6px;background:#07838F"></div>
|
||
<div style="font-size:10.5px;color:var(--zf-text-3);margin-top:6px">5 · 青</div>
|
||
<div style="font-size:9.5px;color:var(--zf-text-3);opacity:.75">#07838F</div>
|
||
</div><div style="flex:1;text-align:center" title="sapAccentColor1">
|
||
<div style="height:46px;border-radius:6px;background:#D27700"></div>
|
||
<div style="font-size:10.5px;color:var(--zf-text-3);margin-top:6px">6 · 琥珀</div>
|
||
<div style="font-size:9.5px;color:var(--zf-text-3);opacity:.75">#D27700</div>
|
||
</div><div style="flex:1;text-align:center" title="sapShell_Category_12">
|
||
<div style="height:46px;border-radius:6px;background:#7858FF"></div>
|
||
<div style="font-size:10.5px;color:var(--zf-text-3);margin-top:6px">7 · 紫</div>
|
||
<div style="font-size:9.5px;color:var(--zf-text-3);opacity:.75">#7858FF</div>
|
||
</div><div style="flex:1;text-align:center" title="sapShell_Category_11">
|
||
<div style="height:46px;border-radius:6px;background:#D20A0A"></div>
|
||
<div style="font-size:10.5px;color:var(--zf-text-3);margin-top:6px">8 · 红</div>
|
||
<div style="font-size:9.5px;color:var(--zf-text-3);opacity:.75">#D20A0A</div>
|
||
</div><div style="flex:1;text-align:center" title="sapShell_Category_10(中性序列)">
|
||
<div style="height:46px;border-radius:6px;background:#5B738B"></div>
|
||
<div style="font-size:10.5px;color:var(--zf-text-3);margin-top:6px">9 · 蓝灰</div>
|
||
<div style="font-size:9.5px;color:var(--zf-text-3);opacity:.75">#5B738B</div>
|
||
</div><div style="flex:1;text-align:center" title="甄房品牌色">
|
||
<div style="height:46px;border-radius:6px;background:#C6A15B"></div>
|
||
<div style="font-size:10.5px;color:var(--zf-text-3);margin-top:6px">10 · 品牌金</div>
|
||
<div style="font-size:9.5px;color:var(--zf-text-3);opacity:.75">#C6A15B</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<pre>const COLORS = ['#0057D2', '#E76500', '#188918', '#DF1278', '#07838F', '#D27700', '#7858FF', '#D20A0A', '#5B738B', '#C6A15B']</pre>
|
||
<p class="note">序列少于 10 条时<b>按顺序取前 N 个</b>,不要跳着取 —— 相邻色的差异是按顺序优化过的。分类色只用于「无固有顺序」的维度;有顺序的量(如时间)用单色深浅渐变。</p>
|
||
|
||
<h3>业务语义色<span class="pill">v1.2 定稿</span></h3>
|
||
<p class="note">「等级」是质量语义、「热度」是温度语义,两者刻意分到不同色相族,避免同屏混淆。A 级用品牌金而非红色 —— 金色表达「优质/尊贵」,与甄房墨蓝+金的调性一致。</p>
|
||
<table class="doc"><thead><tr><th>用途</th><th>色值</th><th>来源与理由</th></tr></thead><tbody>
|
||
<tr><td class="u">房源等级 A(优质)</td><td class="v"><span class="chip" style="background:#C6A15B"></span>#C6A15B</td><td class="u">品牌金 —— 金色表达「优质/尊贵」,比红色更贴合甄房调性</td></tr><tr><td class="u">房源等级 B(一般)</td><td class="v"><span class="chip" style="background:#E76500"></span>#E76500</td><td class="u">sapCriticalColor</td></tr><tr><td class="u">房源等级 C(低质)</td><td class="v"><span class="chip" style="background:#788FA6"></span>#788FA6</td><td class="u">sapNeutralColor</td></tr><tr><td class="u">客源热度 H(热)</td><td class="v"><span class="chip" style="background:#AA0808"></span>#AA0808</td><td class="u">sapNegativeColor —— 温度用红,与等级的质量语义区分开</td></tr><tr><td class="u">客源热度 M(温)</td><td class="v"><span class="chip" style="background:#E76500"></span>#E76500</td><td class="u">sapCriticalColor</td></tr><tr><td class="u">客源热度 L(冷)</td><td class="v"><span class="chip" style="background:#788FA6"></span>#788FA6</td><td class="u">sapNeutralColor</td></tr><tr><td class="u">跟进 · 3 天内</td><td class="v"><span class="chip" style="background:#256F3A"></span>#256F3A</td><td class="u">sapPositiveColor</td></tr><tr><td class="u">跟进 · 7 天内</td><td class="v"><span class="chip" style="background:#0070F2"></span>#0070F2</td><td class="u">品牌交互蓝</td></tr><tr><td class="u">跟进 · 15 天内</td><td class="v"><span class="chip" style="background:#E76500"></span>#E76500</td><td class="u">sapCriticalColor</td></tr><tr><td class="u">跟进 · 超 15 天</td><td class="v"><span class="chip" style="background:#AA0808"></span>#AA0808</td><td class="u">sapNegativeColor</td></tr>
|
||
</tbody></table>
|
||
|
||
<h3>令牌文件</h3>
|
||
<p class="note">可直接下载 <a class="dl" href="zhenfang-tokens.css" download>zhenfang-tokens.css</a>(下列全部令牌的 CSS 变量定义),引入到项目根样式之前。</p>
|
||
<pre>:root {
|
||
/* ── 品牌层 ── */
|
||
--zf-brand-ink: #0C2340;
|
||
--zf-brand-ink-deep: #071527;
|
||
--zf-brand-gold: #C6A15B;
|
||
--zf-brand-gold-soft: #E3CB99;
|
||
|
||
/* ── 交互层 ── */
|
||
--zf-primary: #0070F2;
|
||
--zf-primary-hover: #0064D9;
|
||
--zf-primary-active-bg: #FFFFFF;
|
||
--zf-primary-active-ink: #0064D9;
|
||
--zf-link: #0064D9;
|
||
|
||
/* ── 表面层 ── */
|
||
--zf-bg-base: #FFFFFF;
|
||
--zf-bg-sub: #F5F6F7;
|
||
--zf-bg-hover: #EAECEE;
|
||
--zf-bg-active: #DEE2E5;
|
||
--zf-bg-selected: #EBF8FF;
|
||
|
||
/* ── 边框 ── */
|
||
--zf-border: #E5E5E5;
|
||
--zf-border-field: #556B81;
|
||
--zf-border-strong: #758CA4;
|
||
|
||
/* ── 文字 ── */
|
||
--zf-text-1: #131E29;
|
||
--zf-text-2: #556B82;
|
||
--zf-text-3: #5F7590;
|
||
--zf-text-placeholder: #5F7590;
|
||
--zf-text-inverse: #FFFFFF;
|
||
--zf-text-inverse-2: #BBC1CA;
|
||
|
||
/* ── 语义色 ── */
|
||
--zf-success: #256F3A;
|
||
--zf-error: #AA0808;
|
||
--zf-warning: #E76500;
|
||
--zf-info: #0070F2;
|
||
--zf-neutral: #788FA6;
|
||
|
||
/* ── 形状与层级 ── */
|
||
--zf-radius-s: 4px;
|
||
--zf-radius: 8px;
|
||
--zf-radius-l: 12px;
|
||
--zf-radius-tile: 16px;
|
||
--zf-radius-pill: 999px;
|
||
--zf-shadow-1: 0 1px 2px rgba(34,53,72,.08);
|
||
--zf-shadow-2: 0 2px 8px rgba(34,53,72,.12);
|
||
|
||
--zf-fs-caption: 11px;
|
||
--zf-fs-body-s: 12px;
|
||
--zf-fs-body: 14px;
|
||
--zf-fs-title-s: 16px;
|
||
--zf-fs-title: 20px;
|
||
--zf-fs-display: 24px;
|
||
--zf-sp-1: 4px; --zf-sp-2: 8px; --zf-sp-3: 12px; --zf-sp-4: 16px; --zf-sp-5: 20px; --zf-sp-6: 24px; --zf-sp-7: 32px; --zf-sp-8: 40px;
|
||
--zf-font: "72", "PingFang SC", "Microsoft YaHei", "Helvetica Neue", Arial, sans-serif;
|
||
}</pre>
|
||
|
||
<h2>十、变更记录</h2>
|
||
<table class="doc"><thead><tr><th>版本</th><th>日期</th><th>变更</th></tr></thead><tbody>
|
||
<tr class="hi"><td class="k">v1.2</td><td class="v">2026-09-19</td><td class="u">
|
||
<b>新增图表分类色板与业务语义色,并在 ZhenOS-ZF 落地。</b><br>
|
||
· 图表:旧 ECharts 色板逐色映射会与 <code>#3b82f6</code>/<code>#ef4444</code> 撞色,改为重配的 10 色分类色板(全部 Fiori 官方 Category/Accent 色 + 品牌金);<br>
|
||
· 业务色:<b>房源等级 A 由红色改为品牌金</b>(金色表达优质,贴合甄房调性);热度 H 保留红色,与等级的质量语义区分;<br>
|
||
· 落地范围:ZhenOS-ZF 的 WEB(ruoyi-ui)+ H5(zhenfang-uni)双端全量换肤,含主题层 9 个 SCSS、业务页面 100+ 文件、H5 tabbar 图标重着色、logo/应用图标资源替换。
|
||
</td></tr>
|
||
<tr><td class="k">v1.1</td><td class="v">2026-09-19</td><td class="u">
|
||
<b>修正 v1.0 的色值错误。</b>v1.0 的 Fiori 色值来自二手记忆,逐条核对官方主题包后发现 16 个色值里有 10 个不准(例如把
|
||
<code>#0064D9</code> 写成 <code>#0057D2</code>、把插图/分类色 <code>#223548</code> / <code>#d5dadd</code> / <code>#a9b4be</code> 当成 UI 文字与边框令牌、链接色漏了官方单独定义的 <code>#0064D9</code>)。<br>
|
||
本次全部改为官方实测值并逐条标注来源变量名;文字只用两级(官方 Neutral 白底 3.34:1 不能用于正文,三级灰改为按 4.5:1 上限反推的 <code>#5F7590</code>);<br>
|
||
字号阶梯改为官方 rem 值(正文 14px 而非 13px、标题 20/24px);<br>
|
||
ElementUI 映射从 22 条补到 37 条,区分「必改 / 刻意偏离 / 自动派生」,并新增 4 条光改变量解决不了的风险项(警告按钮白字不达标、按钮悬停方向与官方相反、深色侧栏变量不够用、表格只有一种边框色);<br>
|
||
新增「项目现有主题文件中的失效变量」一节,列出 5 个在当前 ElementUI 版本中不存在的变量写法;<br>
|
||
CSS 变量、令牌文件、规范表格改由同一份数据生成,杜绝三处不一致。
|
||
</td></tr>
|
||
<tr><td class="k">v1.0</td><td class="v">2026-09-19</td><td class="u">
|
||
色彩体系定稿为 SAP Fiori Morning Horizon;LOGO 定稿 Z 在房框内 80% 档为主 logo,派生 90/70/60 三档;
|
||
确立「品牌色与交互色分离」;首次发布组件规范、页面状态规范、长时使用约束与 ElementUI 变量映射。
|
||
</td></tr>
|
||
</tbody></table>
|
||
|
||
<p class="note" style="margin-top:34px;color:#6d768a">
|
||
本页由 <code>_design-test/spec/build-spec.js</code> 生成。LOGO 数据源自 <code>mark-scales.json</code> 与 <code>final-z.json</code>;
|
||
Fiori 色值源自 <code>@sap-theming/theming-base-content</code> 的 <code>sap_horizon/css_variables.css</code>;
|
||
ElementUI 变量名与默认值源自 <code>element-ui@2.15.14</code> 的 <code>theme-chalk/src/common/var.scss</code>。
|
||
</p>
|
||
|
||
</div>
|
||
<script>
|
||
function toRgb(c){
|
||
if (c.indexOf('rgba') === 0) return c.slice(5, c.length - 1).split(',').slice(0, 3).map(Number);
|
||
var h = c.replace('#', '');
|
||
if (h.length === 3) h = h.split('').map(function(x){ return x + x; }).join('');
|
||
return [parseInt(h.slice(0,2),16), parseInt(h.slice(2,4),16), parseInt(h.slice(4,6),16)];
|
||
}
|
||
function lum(c){
|
||
var v = toRgb(c).map(function(x){ x /= 255; return x <= .03928 ? x/12.92 : Math.pow((x+.055)/1.055, 2.4); });
|
||
return .2126*v[0] + .7152*v[1] + .0722*v[2];
|
||
}
|
||
function ratio(a, b){
|
||
var l1 = lum(a), l2 = lum(b);
|
||
return (Math.max(l1,l2) + .05) / (Math.min(l1,l2) + .05);
|
||
}
|
||
var ok = 0, bad = 0;
|
||
Array.prototype.forEach.call(document.querySelectorAll('.cc'), function(el){
|
||
var r = ratio(el.dataset.fg, el.dataset.bg), req = parseFloat(el.dataset.req);
|
||
if (r >= req) { ok++; } else { bad++; }
|
||
el.innerHTML = '<span class="' + (r >= req ? 'pass' : 'fail') + '">' + r.toFixed(2) + ':1</span>';
|
||
});
|
||
Array.prototype.forEach.call(document.querySelectorAll('.vc'), function(el){
|
||
var r = ratio(el.dataset.fg, el.dataset.bg), req = parseFloat(el.dataset.req);
|
||
el.innerHTML = '<span class="' + (r >= req ? 'pass' : 'fail') + '">' + (r >= req ? '通过' : '未达标') + '</span>';
|
||
});
|
||
document.title = document.title + '(对比度 ' + ok + '/' + (ok + bad) + ' 通过)';
|
||
</script>
|
||
</body></html> |