| 1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889909192939495969798991001011021031041051061071081091101111121131141151161171181191201211221231241251261271281291301311321331341351361371381391401411421431441451461471481491501511521531541551561571581591601611621631641651661671681691701711721731741751761771781791801811821831841851861871881891901911921931941951961971981992002012022032042052062072082092102112122132142152162172182192202212222232242252262272282292302312322332342352362372382392402412422432442452462472482492502512522532542552562572582592602612622632642652662672682692702712722732742752762772782792802812822832842852862872882892902912922932942952962972982993003013023033043053063073083093103113123133143153163173183193203213223233243253263273283293303313323333343353363373383393403413423433443453463473483493503513523533543553563573583593603613623633643653663673683693703713723733743753763773783793803813823833843853863873883893903913923933943953963973983994004014024034044054064074084094104114124134144154164174184194204214224234244254264274284294304314324334344354364374384394404414424434444454464474484494504514524534544554564574584594604614624634644654664674684694704714724734744754764774784794804814824834844854864874884894904914924934944954964974984995005015025035045055065075085095105115125135145155165175185195205215225235245255265275285295305315325335345355365375385395405415425435445455465475485495505515525535545555565575585595605615625635645655665675685695705715725735745755765775785795805815825835845855865875885895905915925935945955965975985996006016026036046056066076086096106116126136146156166176186196206216226236246256266276286296306316326336346356366376386396406416426436446456466476486496506516526536546556566576586596606616626636646656666676686696706716726736746756766776786796806816826836846856866876886896906916926936946956966976986997007017027037047057067077087097107117127137147157167177187197207217227237247257267277287297307317327337347357367377387397407417427437447457467477487497507517527537547557567577587597607617627637647657667677687697707717727737747757767777787797807817827837847857867877887897907917927937947957967977987998008018028038048058068078088098108118128138148158168178188198208218228238248258268278288298308318328338348358368378388398408418428438448458468478488498508518528538548558568578588598608618628638648658668678688698708718728738748758768778788798808818828838848858868878888898908918928938948958968978988999009019029039049059069079089099109119129139149159169179189199209219229239249259269279289299309319329339349359369379389399409419429439449459469479489499509519529539549559569579589599609619629639649659669679689699709719729739749759769779789799809819829839849859869879889899909919929939949959969979989991000100110021003100410051006100710081009101010111012101310141015101610171018101910201021102210231024102510261027102810291030103110321033103410351036103710381039104010411042104310441045104610471048104910501051105210531054105510561057105810591060106110621063106410651066106710681069107010711072107310741075107610771078107910801081108210831084108510861087108810891090109110921093109410951096109710981099110011011102110311041105110611071108110911101111111211131114 |
- <!DOCTYPE html>
- <html lang="zh-CN" data-theme="light">
- <head>
- <meta charset="utf-8">
- <meta name="viewport" content="width=device-width,initial-scale=1">
- <title>票据投资者 APP · 移动端 UI</title>
- <style>
- /* ============================================================
- 共赢票据投资者 APP — 深空蓝设计系统 (Deep-Space Blue)
- 双主题:data-theme="light" | "dark",可作用于 :root 或任意容器
- ============================================================ */
- /* ---------- 浅色(默认) ---------- */
- :root,
- [data-theme="light"]{
- --canvas:#E7ECF4; /* 图纸底 */
- --canvas-2:#F4F7FB; /* 图纸卡片 */
- --canvas-line:#D3DCE8;
- --canvas-ink:#0F1B33;
- --canvas-mute:#647591;
- --app-bg:#F6F8FB; /* App 页面底 */
- --surface:#FFFFFF; /* 卡片/导航 */
- --surface-2:#F1F4F9; /* 次级面/表头 */
- --surface-3:#E8EDF5; /* 三级面 */
- --line:#E3E9F1;
- --line-2:#CFD9E7;
- --ink-1:#0F1B33;
- --ink-2:#4C5C78;
- --ink-3:#8A99B2;
- --ink-4:#AEBACD;
- --brand:#1B4FD8;
- --brand-2:#123CAE;
- --brand-weak:#E7EEFF;
- --brand-line:#B9CDFF;
- --on-brand:#FFFFFF;
- --accent:#B4700E; /* 琥珀 强调 */
- --accent-weak:#FDF2DE;
- --accent-line:#EBCD97;
- --rise:#E5484D; /* 涨 / 盈利 */
- --fall:#12A594; /* 跌 / 亏损 */
- --rise-weak:#FDECEC;
- --fall-weak:#E3F7F3;
- --warn:#C2410C;
- --warn-weak:#FEF0E6;
- --danger:#DC2626;
- --danger-weak:#FDEBEB;
- --ok:#0F7B4F;
- --ok-weak:#E4F5EC;
- --shadow-card:0 1px 2px rgba(15,27,51,.05),0 8px 24px rgba(15,27,51,.06);
- --shadow-phone:0 18px 44px rgba(15,27,51,.16),0 2px 6px rgba(15,27,51,.08);
- --shadow-pop:0 12px 40px rgba(15,27,51,.20);
- --scrim:rgba(11,18,34,.42);
- --bezel:#C7D2E2;
- --glow:none;
- }
- /* ---------- 深色 ---------- */
- [data-theme="dark"]{
- --canvas:#060A14;
- --canvas-2:#0E1526;
- --canvas-line:#1E2A44;
- --canvas-ink:#E9EFFA;
- --canvas-mute:#8797B4;
- --app-bg:#0B1020;
- --surface:#131B2E;
- --surface-2:#18223A;
- --surface-3:#1E2A45;
- --line:#232F4B;
- --line-2:#32436A;
- --ink-1:#EAF0FA;
- --ink-2:#A5B4D0;
- --ink-3:#7486A5;
- --ink-4:#54658A;
- --brand:#5B8CFF;
- --brand-2:#7FA6FF;
- --brand-weak:rgba(91,140,255,.16);
- --brand-line:rgba(91,140,255,.42);
- --on-brand:#05122E;
- --accent:#F0A93B;
- --accent-weak:rgba(240,169,59,.15);
- --accent-line:rgba(240,169,59,.42);
- --rise:#FF6B6E;
- --fall:#2FD4B9;
- --rise-weak:rgba(255,107,110,.14);
- --fall-weak:rgba(47,212,185,.14);
- --warn:#F59E42;
- --warn-weak:rgba(245,158,66,.14);
- --danger:#FF6B6E;
- --danger-weak:rgba(255,107,110,.14);
- --ok:#2FD4B9;
- --ok-weak:rgba(47,212,185,.14);
- --shadow-card:0 1px 2px rgba(0,0,0,.4),0 8px 24px rgba(0,0,0,.34);
- --shadow-phone:0 20px 50px rgba(0,0,0,.6),0 0 0 1px rgba(91,140,255,.10);
- --shadow-pop:0 14px 44px rgba(0,0,0,.62);
- --scrim:rgba(2,6,16,.62);
- --bezel:#26324C;
- --glow:0 0 0 1px rgba(91,140,255,.14);
- }
- /* ---------- 基础 ---------- */
- *{box-sizing:border-box;margin:0;padding:0}
- html{-webkit-text-size-adjust:100%}
- body{
- background:var(--canvas);color:var(--canvas-ink);
- font-family:"PingFang SC","Hiragino Sans GB","Microsoft YaHei",system-ui,-apple-system,"Segoe UI",sans-serif;
- -webkit-font-smoothing:antialiased;
- padding:44px 46px 110px;
- transition:background .28s ease,color .28s ease;
- }
- .mono{font-family:"SF Mono",ui-monospace,"JetBrains Mono",Menlo,Consolas,monospace}
- .num{font-variant-numeric:tabular-nums;letter-spacing:.01em}
- /* ---------- 图纸头 ---------- */
- .sheet-head{
- display:flex;flex-wrap:wrap;gap:32px;align-items:flex-end;justify-content:space-between;
- padding-bottom:24px;margin-bottom:44px;border-bottom:1px solid var(--canvas-line);
- }
- .brandmark{display:flex;align-items:center;gap:14px}
- .brandmark .glyph{
- width:44px;height:44px;border-radius:12px;flex:none;position:relative;
- background:linear-gradient(145deg,var(--brand),var(--brand-2));
- box-shadow:0 6px 18px rgba(27,79,216,.28);
- }
- .brandmark .glyph::before{
- content:"";position:absolute;inset:12px 11px;border:1.6px solid rgba(255,255,255,.9);
- border-radius:2px;border-bottom-width:4px;
- }
- .brandmark .glyph::after{
- content:"";position:absolute;right:8px;top:8px;width:7px;height:7px;border-radius:50%;background:var(--accent);
- }
- .sheet-title{font-size:26px;font-weight:650;letter-spacing:.02em;line-height:1.2}
- .sheet-sub{margin-top:6px;font-size:12.5px;color:var(--canvas-mute);letter-spacing:.02em}
- .head-right{display:flex;align-items:center;gap:26px;flex-wrap:wrap}
- .meta{display:flex;gap:26px}
- .meta div{font-size:10.5px;color:var(--canvas-mute);letter-spacing:.1em;text-transform:uppercase}
- .meta b{display:block;margin-top:5px;font-size:12.5px;color:var(--canvas-ink);font-weight:550;letter-spacing:0;text-transform:none}
- /* 换肤开关 */
- .skin{
- display:flex;align-items:center;gap:0;padding:3px;border-radius:9px;
- background:var(--canvas-2);border:1px solid var(--canvas-line);
- }
- .skin button{
- border:0;background:transparent;cursor:pointer;font:inherit;
- padding:7px 13px;border-radius:6px;font-size:12px;color:var(--canvas-mute);
- display:flex;align-items:center;gap:6px;letter-spacing:.04em;transition:.2s;
- }
- .skin button.on{background:var(--brand);color:#fff;box-shadow:0 2px 8px rgba(27,79,216,.3)}
- [data-theme="dark"] .skin button.on{color:#04122F}
- .skin svg{width:13px;height:13px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
- /* ---------- 章节 ---------- */
- .sec{margin-bottom:60px}
- .sec-head{display:flex;align-items:baseline;gap:14px;margin-bottom:24px}
- .sec-num{
- font-family:"SF Mono",ui-monospace,Menlo,monospace;font-size:11px;color:var(--brand);
- letter-spacing:.12em;padding:3px 8px;border:1px solid var(--brand-line);border-radius:5px;background:var(--brand-weak);
- }
- .sec-name{font-size:17px;font-weight:600;letter-spacing:.04em}
- .sec-rule{flex:1;height:1px;background:var(--canvas-line)}
- .sec-note{font-size:12px;color:var(--canvas-mute)}
- /* ---------- 说明卡 ---------- */
- .cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:14px}
- .card-x{background:var(--canvas-2);border:1px solid var(--canvas-line);border-radius:12px;padding:18px 20px}
- .card-x h4{font-size:11px;font-weight:600;letter-spacing:.14em;color:var(--canvas-mute);margin-bottom:14px;text-transform:uppercase}
- .kv{display:flex;flex-direction:column;gap:10px}
- .kv .r{display:flex;justify-content:space-between;gap:14px;font-size:12.5px;line-height:1.5}
- .kv .r span{color:var(--canvas-mute)}
- .kv .r b{font-weight:520;text-align:right;font-variant-numeric:tabular-nums}
- .bullets{display:flex;flex-direction:column;gap:9px}
- .bullets li{list-style:none;font-size:12.5px;line-height:1.65;color:var(--canvas-mute);padding-left:14px;position:relative}
- .bullets li::before{content:"";position:absolute;left:0;top:8px;width:6px;height:1.5px;background:var(--brand);border-radius:1px}
- .bullets b{color:var(--canvas-ink);font-weight:560}
- code{font-family:"SF Mono",ui-monospace,Menlo,monospace;font-size:11.5px;background:var(--surface-3);color:var(--canvas-ink);padding:1px 5px;border-radius:4px}
- /* ---------- 色板 ---------- */
- .pal{display:grid;grid-template-columns:repeat(auto-fill,minmax(168px,1fr));gap:10px}
- .sw{border:1px solid var(--canvas-line);border-radius:10px;overflow:hidden;background:var(--canvas-2)}
- .sw .chip{height:56px;display:flex;align-items:flex-end;justify-content:flex-end;padding:7px 9px}
- .sw .chip i{font-style:normal;font-size:9.5px;color:rgba(255,255,255,.85);font-family:"SF Mono",monospace}
- .sw .lb{padding:9px 11px}
- .sw .lb b{display:block;font-size:12px;font-weight:560}
- .sw .lb em{font-style:normal;display:block;font-size:10.5px;color:var(--canvas-mute);margin-top:3px;font-family:"SF Mono",monospace}
- /* ---------- 表 ---------- */
- table.spec{width:100%;border-collapse:collapse;font-size:12.5px;background:var(--canvas-2);border:1px solid var(--canvas-line);border-radius:12px;overflow:hidden}
- table.spec th{
- background:var(--surface-2);text-align:left;padding:11px 14px;font-size:10.5px;font-weight:600;
- letter-spacing:.1em;color:var(--canvas-mute);text-transform:uppercase;border-bottom:1px solid var(--canvas-line);
- }
- table.spec td{padding:11px 14px;border-bottom:1px solid var(--canvas-line);color:var(--canvas-mute);line-height:1.6;vertical-align:top}
- table.spec tr:last-child td{border-bottom:0}
- table.spec td b{color:var(--canvas-ink);font-weight:550}
- table.spec td.m{font-family:"SF Mono",ui-monospace,Menlo,monospace;color:var(--canvas-ink);font-size:11.5px}
- /* ---------- 画板 ---------- */
- .frames{display:grid;grid-template-columns:repeat(auto-fit,minmax(390px,390px));gap:52px 36px;justify-content:start}
- .frame{width:390px}
- .frame.w2{grid-column:span 2}
- .phone{
- width:390px;height:844px;border-radius:42px;overflow:hidden;position:relative;
- background:var(--app-bg);border:1px solid var(--bezel);box-shadow:var(--shadow-phone);
- font-size:15px;color:var(--ink-1);transition:background .28s ease,border-color .28s ease;
- isolation:isolate;
- }
- .cap{margin-top:18px;padding-left:13px;border-left:2px solid var(--brand)}
- .cap-num{font-family:"SF Mono",ui-monospace,Menlo,monospace;font-size:10.5px;color:var(--brand);letter-spacing:.12em}
- .cap-title{font-size:14.5px;font-weight:600;margin:5px 0 8px;letter-spacing:.02em}
- .cap ul{list-style:none;display:flex;flex-direction:column;gap:6px}
- .cap li{font-size:12px;line-height:1.62;color:var(--canvas-mute);padding-left:12px;position:relative}
- .cap li::before{content:"";position:absolute;left:0;top:8px;width:5px;height:1px;background:var(--canvas-line)}
- .cap li b{color:var(--canvas-ink);font-weight:550}
- .cap code{font-size:11px;background:var(--surface-3)}
- /* ============================================================
- App 内部组件
- ============================================================ */
- .screen{position:absolute;inset:0;display:flex;flex-direction:column;overflow:hidden;background:var(--app-bg)}
- .statusbar{height:52px;flex:none;display:flex;align-items:flex-end;justify-content:space-between;padding:0 24px 6px;font-size:14.5px;font-weight:600;color:var(--ink-1)}
- .statusbar .ic{display:flex;gap:6px;align-items:center;opacity:.9}
- .statusbar svg{height:12px;fill:currentColor}
- .homebar{position:absolute;left:50%;bottom:8px;transform:translateX(-50%);width:132px;height:5px;border-radius:3px;background:var(--ink-1);opacity:.26;z-index:60}
- /* 顶栏 */
- .navbar{height:46px;flex:none;display:flex;align-items:center;padding:0 16px;position:relative;background:var(--app-bg)}
- .navbar h2{position:absolute;left:0;right:0;text-align:center;font-size:16.5px;font-weight:600;letter-spacing:.03em}
- .navbar .bk,.navbar .rt{position:relative;z-index:2;color:var(--ink-2);display:flex;align-items:center;gap:5px;font-size:13px}
- .navbar .rt{margin-left:auto;color:var(--brand)}
- .icn{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;flex:none}
- .icn.sm{width:14px;height:14px}
- .icn.lg{width:22px;height:22px}
- .appbar{padding:4px 20px 0;flex:none}
- .appbar h1{font-size:22px;font-weight:650;letter-spacing:.02em;display:flex;align-items:center;gap:9px}
- .appbar h1 .tiny{font-size:11px;font-weight:500;color:var(--ink-3);letter-spacing:.1em;padding:3px 7px;border:1px solid var(--line-2);border-radius:5px}
- /* 顶栏铃铛 · 未读红点 */
- .bellwrap{position:relative;display:inline-flex;flex:none}
- .bellwrap .rd{position:absolute;top:-1px;right:0;width:8px;height:8px;border-radius:50%;background:var(--danger);box-shadow:0 0 0 2px var(--app-bg);font-style:normal}
- /* 两行顶栏(标题 + 分段控件)的标题行:标题左、铃铛右 */
- .apphd{display:flex;align-items:center;justify-content:space-between}
- /* 分段控件 */
- .seg{display:flex;padding:3px;background:var(--surface-2);border-radius:9px;gap:2px}
- .seg span{flex:1;text-align:center;padding:7px 0;font-size:13.5px;color:var(--ink-3);border-radius:7px;transition:.2s}
- .seg span.on{background:var(--surface);color:var(--ink-1);font-weight:600;box-shadow:var(--shadow-card)}
- [data-theme="dark"] .seg span.on{background:var(--surface-3);color:var(--brand)}
- /* 下划线 tab */
- .tabs{display:flex;gap:24px;padding:0 20px;border-bottom:1px solid var(--line);flex:none;background:var(--app-bg)}
- .tabs span{padding:12px 1px 11px;font-size:14.5px;color:var(--ink-3);position:relative;white-space:nowrap}
- .tabs span.on{color:var(--ink-1);font-weight:600}
- .tabs span.on::after{content:"";position:absolute;left:50%;transform:translateX(-50%);bottom:-1px;width:22px;height:2.5px;border-radius:2px;background:var(--brand)}
- .tabs span .dot{position:absolute;top:9px;right:-7px;width:6px;height:6px;padding:0;font-size:0;border-radius:50%;background:var(--danger)}
- .tabs span em{font-style:normal;color:var(--danger)}
- /* 底部 tabbar */
- .tabbar{height:72px;flex:none;display:flex;background:var(--surface);border-top:1px solid var(--line);padding-bottom:10px}
- .tb{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;font-size:10.5px;color:var(--ink-3)}
- .tb.on{color:var(--brand)}
- .tb .icn{width:21px;height:21px;stroke-width:1.6}
- /* 滚动体 */
- .body{flex:1;overflow:hidden;position:relative}
- .pad{padding:0 16px}
- /* 卡片 */
- .card{background:var(--surface);border-radius:14px;box-shadow:var(--shadow-card);overflow:hidden}
- [data-theme="dark"] .card{border:1px solid var(--line)}
- .card + .card:not(.pos):not(.qc){margin-top:11px}
- .card-hd{display:flex;align-items:center;justify-content:space-between;padding:13px 15px 0}
- .card-hd h3{font-size:14.5px;font-weight:600}
- .card-hd .more{font-size:12px;color:var(--ink-3);display:flex;align-items:center;gap:2px}
- /* 资金看板 */
- .hero{
- margin:10px 16px 0;border-radius:16px;padding:18px 18px 16px;position:relative;overflow:hidden;
- background:linear-gradient(150deg,#1B4FD8 0%,#123CAE 58%,#0C2C86 100%);color:#fff;
- box-shadow:0 12px 30px rgba(18,60,174,.30);
- }
- [data-theme="dark"] .hero{background:linear-gradient(150deg,#1A2C5C 0%,#132347 55%,#101B39 100%);box-shadow:0 12px 30px rgba(0,0,0,.5);border:1px solid rgba(91,140,255,.24)}
- .hero::after{content:"";position:absolute;right:-40px;top:-52px;width:180px;height:180px;border-radius:50%;background:rgba(255,255,255,.07)}
- [data-theme="dark"] .hero::after{background:rgba(91,140,255,.10)}
- .hero .lb{display:flex;align-items:center;gap:6px;font-size:12.5px;color:rgba(255,255,255,.76)}
- .hero .lb .cur{display:flex;align-items:center;gap:3px;padding:2px 6px;border-radius:5px;background:rgba(255,255,255,.14);font-size:11.5px}
- .hero .amt{margin-top:7px;font-size:33px;font-weight:600;letter-spacing:.01em;font-variant-numeric:tabular-nums;display:flex;align-items:baseline;gap:8px}
- .hero .amt .eye{opacity:.6}
- .hero .arrow{position:absolute;right:18px;top:20px;opacity:.75}
- .hero .grid3{display:flex;margin-top:16px;padding-top:14px;border-top:1px solid rgba(255,255,255,.16)}
- .hero .grid3 div{flex:1}
- .hero .grid3 span{display:block;font-size:11px;color:rgba(255,255,255,.7)}
- .hero .grid3 b{display:block;margin-top:5px;font-size:14.5px;font-weight:600;font-variant-numeric:tabular-nums}
- /* 币种表 */
- .fxtab{width:100%;border-collapse:collapse;font-size:12.5px}
- .fxtab th{padding:9px 15px;font-size:10.5px;font-weight:500;color:var(--ink-3);letter-spacing:.06em;text-align:right;background:var(--surface-2)}
- .fxtab th:first-child{text-align:left}
- .fxtab td{padding:10px 15px;text-align:right;font-variant-numeric:tabular-nums;color:var(--ink-1);border-top:1px solid var(--line)}
- .fxtab td:first-child{text-align:left;font-family:"SF Mono",monospace;font-size:12px;color:var(--ink-2)}
- /* 快捷入口 */
- .quick{display:flex;gap:11px;margin:11px 16px 0}
- .qk{flex:1;background:var(--surface);border-radius:13px;padding:13px 12px;display:flex;align-items:center;gap:10px;box-shadow:var(--shadow-card);position:relative}
- [data-theme="dark"] .qk{border:1px solid var(--line)}
- .qk .ib{width:32px;height:32px;border-radius:9px;background:var(--brand-weak);color:var(--brand);display:flex;align-items:center;justify-content:center;flex:none}
- .qk b{font-size:13.5px;font-weight:550}
- .qk .rd{position:absolute;top:9px;right:9px;width:7px;height:7px;border-radius:50%;background:var(--danger);box-shadow:0 0 0 2px var(--surface)}
- /* 列表行 */
- .row{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px 15px;border-bottom:1px solid var(--line);font-size:14.5px}
- .row:last-child{border-bottom:0}
- .row .k{color:var(--ink-2);display:flex;align-items:center;gap:7px;flex:none}
- .row .k .icn{color:var(--ink-3)}
- .row .v{color:var(--ink-1);font-variant-numeric:tabular-nums;display:flex;align-items:center;gap:6px;text-align:right}
- .row .v.ph{color:var(--ink-4)}
- .row .v.m{font-family:"SF Mono",monospace;font-size:13.5px}
- .hint{width:13px;height:13px;border-radius:50%;border:1px solid var(--ink-4);color:var(--ink-3);font-size:8.5px;display:inline-flex;align-items:center;justify-content:center;font-style:normal;flex:none}
- /* 标签 / 徽标 */
- .tag{font-size:10.5px;padding:2px 6px;border-radius:4px;letter-spacing:.02em;font-weight:520;display:inline-flex;align-items:center;gap:3px;flex:none}
- .t-brand{background:var(--brand-weak);color:var(--brand)}
- .t-accent{background:var(--accent-weak);color:var(--accent)}
- .t-rise{background:var(--rise-weak);color:var(--rise)}
- .t-fall{background:var(--fall-weak);color:var(--fall)}
- .t-ok{background:var(--ok-weak);color:var(--ok)}
- .t-warn{background:var(--warn-weak);color:var(--warn)}
- .t-mute{background:var(--surface-3);color:var(--ink-3)}
- .t-solid{background:var(--brand);color:var(--on-brand)}
- .t-danger{background:var(--danger);color:#fff}
- .cmark{width:14px;height:14px;border-radius:50%;background:var(--brand);color:var(--on-brand);font-size:9px;display:inline-flex;align-items:center;justify-content:center;font-weight:600;flex:none;font-style:normal}
- .corner{position:absolute;left:0;top:0;padding:2px 9px 2px 7px;font-size:9.5px;color:#fff;background:var(--danger);border-radius:12px 0 12px 0;letter-spacing:.04em;z-index:3}
- .corner.due{background:var(--accent)}
- .corner.pend{background:var(--ink-3)}
- /* 状态点 */
- .st{display:inline-flex;align-items:center;gap:5px;font-size:12.5px}
- .st i{width:6px;height:6px;border-radius:50%;flex:none;background:currentColor}
- .st.wait{color:var(--ink-3)}
- .st.live{color:var(--accent)}
- .st.live i{background:transparent;border:1.6px solid currentColor}
- .st.done{color:var(--ok)}
- .st.rej{color:var(--danger)}
- .st.exp{color:var(--ink-4)}
- /* 按钮 */
- .btn{
- height:46px;border-radius:12px;display:flex;align-items:center;justify-content:center;gap:6px;
- background:var(--brand);color:var(--on-brand);font-size:15.5px;font-weight:600;letter-spacing:.06em;
- box-shadow:0 6px 16px rgba(27,79,216,.24);
- }
- [data-theme="dark"] .btn{box-shadow:0 6px 18px rgba(91,140,255,.20)}
- .btn.sm{height:38px;font-size:14px;border-radius:10px;box-shadow:none}
- .btn.off{background:var(--surface-3);color:var(--ink-4);box-shadow:none}
- .btn.ghost{background:transparent;border:1px solid var(--line-2);color:var(--ink-2);box-shadow:none;font-weight:500}
- .btn.danger{background:var(--danger);box-shadow:none;color:#fff}
- .btn.wide{width:100%}
- .iconbtn{width:46px;height:46px;border-radius:12px;border:1px solid var(--line-2);display:flex;align-items:center;justify-content:center;color:var(--ink-2);flex:none;background:var(--surface)}
- /* 输入 */
- .field{background:var(--surface);border:1px solid var(--line-2);border-radius:11px;height:44px;display:flex;align-items:center;gap:9px;padding:0 13px;font-size:14.5px;color:var(--ink-1)}
- .field.focus{border-color:var(--brand);box-shadow:0 0 0 3px var(--brand-weak)}
- .field.err{border-color:var(--danger);box-shadow:0 0 0 3px var(--danger-weak)}
- .field .ph{color:var(--ink-4)}
- .field .icn{color:var(--ink-3)}
- .field .unit{margin-left:auto;color:var(--ink-2);font-size:13.5px}
- .lbl{font-size:11.5px;color:var(--ink-3);letter-spacing:.06em;margin-bottom:7px;display:block}
- .errtip{font-size:11.5px;color:var(--danger);margin-top:6px;display:flex;align-items:center;gap:4px}
- /* chips */
- .chips{display:flex;gap:7px;flex-wrap:wrap}
- .chip{height:32px;padding:0 12px;border-radius:9px;border:1px solid var(--line-2);background:var(--surface);color:var(--ink-2);font-size:13px;display:flex;align-items:center;font-variant-numeric:tabular-nums}
- .chip.on{background:var(--brand-weak);border-color:var(--brand-line);color:var(--brand);font-weight:560}
- .chip.dash{border-style:dashed}
- /* 单选 / 复选 */
- .rad{display:inline-flex;align-items:center;gap:6px;font-size:13.5px;color:var(--ink-2)}
- .rad i{width:15px;height:15px;border-radius:50%;border:1.4px solid var(--line-2);position:relative;flex:none}
- .rad.on{color:var(--ink-1)}
- .rad.on i{border-color:var(--brand)}
- .rad.on i::after{content:"";position:absolute;inset:3px;border-radius:50%;background:var(--brand)}
- .cb{width:16px;height:16px;border-radius:4.5px;border:1.4px solid var(--line-2);flex:none;display:flex;align-items:center;justify-content:center;color:transparent}
- .cb.on{background:var(--brand);border-color:var(--brand);color:var(--on-brand)}
- .cb .icn{width:11px;height:11px;stroke-width:2.6}
- /* 步进器 */
- .stepper{height:38px;border:1px solid var(--line-2);border-radius:10px;display:flex;align-items:center;overflow:hidden;background:var(--surface)}
- .stepper b{width:34px;text-align:center;font-weight:400;font-size:17px;color:var(--ink-3)}
- .stepper i{flex:1;text-align:center;font-style:normal;font-variant-numeric:tabular-nums;font-size:15px;border-left:1px solid var(--line);border-right:1px solid var(--line);line-height:36px}
- .stepper.err{border-color:var(--danger)}
- .stepper.err i{color:var(--danger)}
- /* 搜索 */
- .search{height:38px;border-radius:10px;background:var(--surface-2);display:flex;align-items:center;gap:8px;padding:0 12px;font-size:14px;color:var(--ink-4)}
- .search .icn{color:var(--ink-3)}
- .search b{color:var(--ink-1);font-weight:500}
- .sug{background:var(--surface);border-radius:12px;box-shadow:var(--shadow-pop);overflow:hidden;margin-top:6px}
- .sug div{padding:11px 13px;font-size:14px;border-bottom:1px solid var(--line);display:flex;gap:8px}
- .sug div:last-child{border-bottom:0}
- .sug em{font-style:normal;color:var(--brand)}
- .sug span{font-family:"SF Mono",monospace;font-size:12.5px;color:var(--ink-3)}
- /* 弹窗 */
- .scrim{position:absolute;inset:0;background:var(--scrim);z-index:40;display:flex;align-items:center;justify-content:center;padding:0 30px}
- .scrim.bottom{align-items:flex-end;padding:0}
- .dlg{width:100%;background:var(--surface);border-radius:16px;overflow:hidden;box-shadow:var(--shadow-pop)}
- .dlg.sheet{border-radius:18px 18px 0 0;padding-bottom:22px}
- .dlg-hd{padding:18px 18px 0;text-align:center}
- .dlg-hd h3{font-size:16.5px;font-weight:600}
- .dlg-bd{padding:14px 18px 4px;font-size:14px;color:var(--ink-2);line-height:1.65}
- .dlg-ft{display:flex;border-top:1px solid var(--line);margin-top:16px}
- .dlg-ft span{flex:1;text-align:center;padding:14px 0;font-size:15.5px;color:var(--brand);font-weight:550}
- .dlg-ft span:first-child{color:var(--ink-2);border-right:1px solid var(--line)}
- .dlg-ft.single span{color:var(--brand)}
- .dlg-btns{display:flex;gap:11px;padding:16px 18px 0}
- .dlg-btns .btn{flex:1}
- /* toast */
- .toast{
- position:absolute;left:50%;top:47%;transform:translate(-50%,-50%);z-index:50;
- background:rgba(15,25,45,.90);color:#fff;padding:12px 20px;border-radius:11px;font-size:14px;max-width:290px;text-align:center;line-height:1.55;
- }
- [data-theme="dark"] .toast{background:rgba(230,238,250,.94);color:#0B1020}
- /* 提示条 */
- .notice{display:flex;gap:8px;padding:10px 12px;border-radius:10px;font-size:12.5px;line-height:1.6}
- .notice.warn{background:var(--warn-weak);color:var(--warn)}
- .notice.info{background:var(--brand-weak);color:var(--brand)}
- .notice.danger{background:var(--danger-weak);color:var(--danger)}
- .notice .icn{flex:none;margin-top:1px}
- /* 空态 */
- .empty{padding:44px 0;text-align:center;color:var(--ink-4);font-size:13.5px}
- .empty .icn{width:34px;height:34px;stroke-width:1.2;margin-bottom:10px;color:var(--ink-4)}
- /* 分组标题 */
- .gtitle{padding:16px 16px 8px;font-size:12px;color:var(--ink-3);letter-spacing:.06em}
- /* 骨架/遮罩说明用 */
- .dim{opacity:.45}
- /* ============================================================
- 业务组件
- ============================================================ */
- /* 筛选栏 */
- .filterbar{display:flex;gap:8px;padding:10px 16px;background:var(--app-bg);flex:none;align-items:center}
- .fb{height:34px;padding:0 11px;border-radius:9px;background:var(--surface-2);color:var(--ink-2);font-size:13px;display:flex;align-items:center;gap:5px;white-space:nowrap}
- .fb.on{background:var(--brand-weak);color:var(--brand);font-weight:550}
- .fb .icn{width:13px;height:13px}
- .fb.flex{flex:1;min-width:0}
- /* 筛选栏 v2 —— 搜索行 + 条件行(时间在左,筛选入口在右) */
- .fsearch{margin:10px 16px 0;height:40px;border-radius:12px;background:var(--surface-2);display:flex;align-items:center;gap:9px;padding:0 13px;font-size:14px;color:var(--ink-4);flex:none}
- .fsearch .icn{width:16px;height:16px;color:var(--ink-3);flex:none}
- .fsearch b{color:var(--ink-1);font-weight:500}
- .fsearch .clr{margin-left:auto;color:var(--ink-4)}
- .fcond{display:flex;align-items:center;justify-content:space-between;padding:11px 16px;flex:none;background:var(--app-bg)}
- .fpill{height:34px;padding:0 14px;border-radius:17px;border:1px solid var(--line-2);background:var(--surface);color:var(--ink-2);font-size:13.5px;display:inline-flex;align-items:center;gap:6px;white-space:nowrap}
- .fpill .icn{width:13px;height:13px;color:var(--ink-3)}
- .fpill.on{background:var(--brand-weak);border-color:var(--brand-line);color:var(--brand);font-weight:560}
- .fpill.on .icn{color:var(--brand)}
- .fmore{display:inline-flex;align-items:center;gap:6px;font-size:13.5px;color:var(--ink-2);position:relative;padding-right:2px}
- .fmore .icn{width:15px;height:15px;color:var(--ink-3)}
- .fmore.on{color:var(--brand);font-weight:560}
- .fmore.on .icn{color:var(--brand)}
- .fmore.on::after{content:"";position:absolute;right:-5px;top:-3px;width:6px;height:6px;border-radius:50%;background:var(--danger)}
- /* 筛选面板 —— 底部弹层 */
- .fsheet{padding-bottom:20px}
- .fsheet-hd{display:flex;align-items:center;justify-content:space-between;padding:20px 20px 2px}
- .fsheet-hd b{font-size:17px;font-weight:600;letter-spacing:.02em}
- .fsheet-hd .icn{width:19px;height:19px;color:var(--ink-3)}
- .fsec{padding:16px 20px 0}
- .fsec .lbl{margin-bottom:10px}
- .optgrid{display:grid;grid-template-columns:1fr 1fr;gap:11px}
- .opt{height:42px;border-radius:21px;border:1px solid var(--line-2);background:var(--surface);color:var(--ink-2);font-size:14px;display:flex;align-items:center;justify-content:center;white-space:nowrap;padding:0 10px}
- .opt.on{background:var(--brand-weak);border-color:var(--brand);color:var(--brand);font-weight:600}
- .opt.dis{background:var(--surface-2);border-color:var(--line);color:var(--ink-4)}
- .fline{height:1px;background:var(--line);margin:18px 20px 0}
- /* 自定义区间 · 日期段 + 滚轮 */
- .dtrow{display:flex;gap:11px}
- .dt{flex:1;min-width:0;background:var(--surface);border:1px solid var(--line-2);border-radius:12px;padding:8px 12px 10px}
- .dt em{display:block;font-style:normal;font-size:11px;color:var(--ink-3);letter-spacing:.04em}
- .dt b{display:block;margin-top:3px;font-size:16px;font-weight:600;color:var(--ink-1);font-variant-numeric:tabular-nums;font-family:"SF Mono",ui-monospace,Menlo,monospace}
- .dt.act{border-color:var(--brand);box-shadow:0 0 0 3px var(--brand-weak)}
- .dt.act em{color:var(--brand)}
- .dt.err{border-color:var(--danger);box-shadow:0 0 0 3px var(--danger-weak)}
- .wheel{position:relative;margin:14px 20px 0;padding:4px 8px;display:grid;grid-template-columns:repeat(3,1fr);text-align:center}
- .wheel .band{position:absolute;left:6px;right:6px;top:50%;height:40px;transform:translateY(-50%);background:var(--surface-2);border-radius:10px}
- .wcol{position:relative;z-index:1;display:flex;flex-direction:column}
- .wcol span{height:40px;line-height:40px;font-size:14px;color:var(--ink-2);font-variant-numeric:tabular-nums}
- .wcol span.far{color:var(--ink-4);opacity:.5}
- .wcol span.now{color:var(--ink-1);font-size:16px;font-weight:600}
- .fsheet-ft{display:flex;gap:12px;padding:20px 20px 0}
- .fsheet-ft .btn{flex:1.18}
- .fsheet-ft .btn.ghost{flex:.82;background:var(--surface-2);border:0;color:var(--ink-2);font-weight:600}
- /* 持仓卡片 */
- .pos{position:relative;margin:0 16px 11px;padding:13px 0 0}
- .pos-hd{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;padding:0 14px}
- .pos-name{font-size:15.5px;font-weight:600;display:flex;align-items:center;gap:6px}
- .pos-code{font-size:11px;color:var(--ink-3);margin-top:4px;letter-spacing:.02em;font-family:"SF Mono",monospace}
- .pos-val{text-align:right;flex:none}
- .pos-val b{display:block;font-size:18px;font-weight:600;font-variant-numeric:tabular-nums}
- .pos-val span{display:block;font-size:10.5px;color:var(--ink-3);margin-top:3px}
- .pos-pl{display:flex;justify-content:flex-end;gap:9px;padding:6px 14px 0;font-size:12.5px;font-variant-numeric:tabular-nums}
- .up{color:var(--rise)} .down{color:var(--fall)} .flat{color:var(--ink-3)}
- .pos-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:10px 6px;padding:12px 14px 13px;margin-top:10px;border-top:1px solid var(--line)}
- .pos-grid div span{display:block;font-size:10px;color:var(--ink-3);letter-spacing:.02em}
- .pos-grid div b{display:block;margin-top:4px;font-size:12.5px;font-weight:550;font-variant-numeric:tabular-nums;white-space:nowrap}
- .pos-grid div b em{font-style:normal;color:var(--ink-3);font-weight:400;font-size:11px}
- .pos-ops{display:flex;border-top:1px solid var(--line);background:var(--surface-2)}
- .pos-ops span{flex:1;text-align:center;padding:11px 0;font-size:13.5px;color:var(--ink-2);border-right:1px solid var(--line)}
- .pos-ops span:last-child{border-right:0}
- .pos-ops span.pri{color:var(--brand);font-weight:550}
- .pos-ops span.hot{color:var(--danger);font-weight:550}
- .pos-ops span.off{color:var(--ink-4)}
- /* 冻结列表格(数据模式) */
- .gridtab{display:flex;font-size:12px;overflow:hidden}
- .gt-fix{flex:none;width:118px;border-right:1px solid var(--line-2);background:var(--surface);position:relative;z-index:2;box-shadow:4px 0 10px rgba(15,27,51,.06)}
- [data-theme="dark"] .gt-fix{box-shadow:4px 0 10px rgba(0,0,0,.35)}
- .gt-scroll{flex:1;overflow:hidden;background:var(--surface)}
- .gt-h{height:36px;display:flex;align-items:center;background:var(--surface-2);color:var(--ink-3);font-size:10.5px;letter-spacing:.02em;padding:0 10px;border-bottom:1px solid var(--line);white-space:nowrap;gap:14px}
- .gt-r{height:52px;display:flex;align-items:center;padding:0 10px;border-bottom:1px solid var(--line);white-space:nowrap;gap:14px;font-variant-numeric:tabular-nums}
- .gt-fix .gt-r{flex-direction:column;align-items:flex-start;justify-content:center;gap:3px;position:relative;padding-left:14px}
- .gt-fix .gt-h{padding-left:14px}
- /* 表格形式的「新报价」角标:斜切丝带,带 NEW 文案;冻结列左内边距统一 14px 给丝带让位,行内文字不被压 */
- .gt-new{position:absolute;left:0;top:0;width:34px;height:34px;overflow:hidden;z-index:3;pointer-events:none}
- .gt-new::before{content:"NEW";position:absolute;left:-17px;top:1px;width:48px;padding:1px 0;transform:rotate(-45deg);background:var(--danger);color:#fff;font-size:7.5px;font-weight:600;font-style:normal;letter-spacing:.04em;text-align:center;line-height:1.35}
- .gt-r i{font-style:normal;display:inline-block;text-align:right}
- .gt-h i{display:inline-block;text-align:right}
- /* 询价 / 订单卡片 */
- .qc{margin:0 16px 10px;padding:13px 14px;position:relative}
- .qc-top{display:flex;justify-content:space-between;gap:12px;align-items:flex-start}
- .qc-name{font-size:15px;font-weight:600;display:flex;align-items:center;gap:6px}
- .qc-sub{font-size:11px;color:var(--ink-3);margin-top:4px;font-family:"SF Mono",monospace}
- .qc-r{text-align:right;flex:none}
- .qc-time{font-size:10.5px;color:var(--ink-3);margin-top:5px;font-family:"SF Mono",monospace}
- .qc-meta{display:flex;gap:16px;margin-top:10px;font-size:12.5px;color:var(--ink-2);font-variant-numeric:tabular-nums}
- .qc-meta em{font-style:normal;color:var(--ink-3);font-size:11px;margin-right:4px}
- .qc-open{margin-top:12px;border-top:1px dashed var(--line-2);padding-top:10px}
- .qt{display:grid;grid-template-columns:1.1fr .8fr .8fr .9fr;font-size:12px;font-variant-numeric:tabular-nums;align-items:center}
- .qt.h{color:var(--ink-3);font-size:10.5px;padding-bottom:7px}
- .qt.r{padding:9px 8px;margin:0 -8px;border-radius:8px}
- .qt.r:hover,.qt.r.hl{background:var(--brand-weak)}
- .qt .p{color:var(--brand);font-weight:600}
- .qt .t{color:var(--ink-3);font-size:10.5px;text-align:right}
- /* 「新」标记分工:卡片/行角标表明本单有新报价,行内红点指出具体是哪一条 */
- .qt span:first-child{position:relative;padding-left:12px}
- .qt .newdot{position:absolute;left:0;top:50%;margin:0;transform:translateY(-50%);vertical-align:0}
- .newdot{width:6px;height:6px;border-radius:50%;background:var(--danger);display:inline-block;margin-right:5px;vertical-align:1px}
- /* 时间线(流水) */
- .tl{padding:0 16px}
- .tl-i{display:flex;gap:12px;padding:14px 0;border-bottom:1px solid var(--line)}
- .tl-i .dot{width:9px;height:9px;border-radius:50%;background:var(--brand);flex:none;margin-top:5px;box-shadow:0 0 0 3px var(--brand-weak)}
- .tl-i .dot.out{background:var(--accent);box-shadow:0 0 0 3px var(--accent-weak)}
- .tl-i .c{flex:1}
- .tl-i .c b{font-size:14.5px;font-weight:550}
- .tl-i .c span{display:block;font-size:11px;color:var(--ink-3);margin-top:4px;font-family:"SF Mono",monospace}
- .tl-i .amt{font-size:15px;font-weight:600;font-variant-numeric:tabular-nums;white-space:nowrap}
- /* 设置项列表 */
- .menu{background:var(--surface);border-radius:14px;overflow:hidden;margin:0 16px 12px;box-shadow:var(--shadow-card)}
- [data-theme="dark"] .menu{border:1px solid var(--line)}
- .mi{display:flex;align-items:center;gap:12px;padding:15px 15px;border-bottom:1px solid var(--line);font-size:15px}
- .mi:last-child{border-bottom:0}
- .mi .ib{width:30px;height:30px;border-radius:9px;background:var(--brand-weak);color:var(--brand);display:flex;align-items:center;justify-content:center;flex:none}
- .mi .ib.am{background:var(--accent-weak);color:var(--accent)}
- .mi .tx{flex:1}
- .mi .tx em{font-style:normal;display:block;font-size:11.5px;color:var(--ink-3);margin-top:3px}
- .mi .rv{color:var(--ink-3);font-size:13.5px;display:flex;align-items:center;gap:4px}
- /* 开关 */
- .sw2{width:44px;height:26px;border-radius:14px;background:var(--line-2);position:relative;flex:none;transition:.2s}
- .sw2::after{content:"";position:absolute;top:3px;left:3px;width:20px;height:20px;border-radius:50%;background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.25);transition:.2s}
- .sw2.on{background:var(--brand)}
- .sw2.on::after{left:21px}
- /* 数据表(App 内) */
- .dt{width:100%;border-collapse:collapse;font-size:12.5px}
- .dt th{background:var(--surface-2);color:var(--ink-3);font-size:10.5px;font-weight:500;padding:9px 10px;text-align:right;letter-spacing:.02em}
- .dt th:first-child{text-align:left}
- .dt td{padding:10px;text-align:right;border-top:1px solid var(--line);font-variant-numeric:tabular-nums}
- .dt td:first-child{text-align:left;color:var(--ink-2)}
- /* 键盘 */
- .kbd{background:var(--surface-2);padding:8px 6px 26px;display:grid;grid-template-columns:repeat(3,1fr);gap:7px}
- .kbd span{height:44px;border-radius:8px;background:var(--surface);display:flex;align-items:center;justify-content:center;font-size:21px;font-weight:500;box-shadow:0 1px 2px rgba(15,27,51,.10)}
- [data-theme="dark"] .kbd span{box-shadow:none;border:1px solid var(--line)}
- .kbd span.fn{background:transparent;box-shadow:none;font-size:15px;color:var(--ink-2)}
- .kbd span.ok{background:var(--brand);color:var(--on-brand);font-size:16px}
- /* 对照页专用 */
- .pair{display:grid;grid-template-columns:390px 390px;gap:36px;justify-content:start}
- .pair-lb{display:flex;align-items:center;gap:7px;font-size:11.5px;color:var(--canvas-mute);margin-bottom:12px;letter-spacing:.08em}
- .pair-lb i{width:12px;height:12px;border-radius:3px;border:1px solid var(--canvas-line);flex:none}
- /* 角标占位:有角标的卡片顶部让出空间,避免压住标的名 */
- .pos:has(.corner) .pos-hd{padding-top:15px}
- .qc:has(.corner){padding-top:26px}
- /* ==== v1.3 公共覆盖 BEGIN · 2026-10-14 按代码现状对齐(同一段注入全部图纸,改动从清单目录的 common-v13.css 同步) ==== */
- /* 字体:数值走 Inter(代码 NumText),代码 / 编号走 iOS 的 Menlo(代码 MonoText),正文仍是系统字 */
- @font-face{font-family:"Inter";src:url("assets/fonts/Inter-Regular.subset.otf") format("opentype");font-weight:400}
- @font-face{font-family:"Inter";src:url("assets/fonts/Inter-Medium.subset.otf") format("opentype");font-weight:500}
- @font-face{font-family:"Inter";src:url("assets/fonts/Inter-SemiBold.subset.otf") format("opentype");font-weight:600}
- @font-face{font-family:"Inter";src:url("assets/fonts/Inter-Bold.subset.otf") format("opentype");font-weight:700}
- :root{--font-num:"Inter","PingFang SC","Hiragino Sans GB",system-ui,sans-serif;--font-mono:Menlo,"SF Mono",ui-monospace,monospace}
- .phone .num,.hero .amt,.hero .grid3 b,.fxtab td,.pos-val b,.pos-pl,.pos-grid div b,.qt,.gt-r,.stepper i,.kbd span,.tl-i .amt{font-family:var(--font-num)}
- .statusbar .num{font-family:inherit}
- .phone .mono,.pos-code,.qc-sub,.qc-time,.fxtab td:first-child,.sug span,.tl-i .c span,.row .v.m{font-family:var(--font-mono)}
- /* 底栏:四个 Tab(票据 / 账户 / 消息 / 我的);消息 Tab 只有红点,后端不给条数 */
- .tb .tbi{position:relative;display:inline-flex;flex:none}
- .tb .tbi .rdot{position:absolute;top:-2px;left:14px;width:8px;height:8px;border-radius:50%;background:var(--danger);box-shadow:0 0 0 2px var(--surface)}
- /* 二级页导航栏:iOS 系统导航栏,表面色底、居中 17 / 600 标题、品牌色返回箭头、无分隔线(H5 标题靠左,见 00 规范) */
- .navbar{height:44px;background:var(--surface)}
- .statusbar:has(+ .navbar){background:var(--surface)}
- .navbar h2{font-size:17px;font-weight:600;letter-spacing:0}
- .navbar .bk{color:var(--brand)}
- .navbar .bk .icn{width:22px;height:22px;stroke-width:2.1}
- /* 图注里的身份标记:本期未上线 / v1.3 新增 / 平台限定 */
- .cap-flags{display:inline-flex;gap:6px;margin-left:8px;vertical-align:1px}
- .cap-flag{font-family:"PingFang SC",system-ui,sans-serif;font-size:10px;letter-spacing:.04em;padding:1px 6px;border-radius:4px;border:1px solid var(--canvas-line);color:var(--canvas-mute);background:var(--canvas-2)}
- .cap-flag.off{color:var(--accent);border-color:var(--accent-line);background:var(--accent-weak)}
- .cap-flag.new{color:var(--brand);border-color:var(--brand-line);background:var(--brand-weak)}
- .cap-flag.plat{color:var(--ok);border-color:rgba(15,123,79,.35);background:var(--ok-weak)}
- /* 实心底上的文字(角标 / 实心标签 / 危险按钮):浅色白字,深色下底色被提亮、改配近黑字(代码 $onFill / $onDanger) */
- [data-theme="dark"] .corner,[data-theme="dark"] .t-danger,[data-theme="dark"] .btn.danger,[data-theme="dark"] .mb,[data-theme="dark"] .gt-new::before{color:#05122E}
- /* 表格首列的迷你角标(代码 CornerBadge variant="mini"):9 / 600、左右 4 */
- .mb{display:inline-flex;align-items:center;font-size:9px;font-weight:600;line-height:12px;padding:1px 4px;border-radius:4px;color:#fff;background:var(--ink-3);white-space:nowrap}
- .mb.d{background:var(--danger)} .mb.a{background:var(--accent)} .mb.m{background:var(--ink-3)} .mb.b{background:var(--brand)}
- /* Toast:按内容定宽、最宽 290(代码 maxW 290),单行放得下就不折行;位置 top 76% */
- .toast{width:max-content;max-width:290px}
- /* ---- 通用组件(代码 components/ 的对应件) ---- */
- /* 资金看板右上「>」用 lg 档 */
- .hero .arrow{width:22px;height:22px}
- /* 只读行:InfoRow(无分隔线)/ FieldRow(带分隔线,.frow),左 ink2 右 Inter */
- .irow{display:flex;justify-content:space-between;align-items:center;padding:14px 15px;font-size:14.5px}
- .irow span{color:var(--ink-2)}
- .irow b{font-weight:400;font-family:var(--font-num);font-variant-numeric:tabular-nums}
- .irow b.dg{color:var(--danger)}
- .frow{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:14px 15px;border-bottom:1px solid var(--line);font-size:14.5px}
- .frow>span{color:var(--ink-2);display:flex;align-items:center;gap:6px}
- .frow>b{font-weight:400;font-family:var(--font-num);font-variant-numeric:tabular-nums;text-align:right}
- .frow.hl{background:var(--brand-weak)}
- .frow.hl>span,.frow.hl>b{color:var(--brand)}
- .frow.hl>b{font-weight:600}
- .frow.last,.frow:last-child{border-bottom:0}
- /* 字段说明 ⓘ(代码 IconButton name="info",ink4 14) */
- .xi{width:14px;height:14px;color:var(--ink-4);flex:none}
- /* 弹窗里的证券行(代码在前)与行情行 */
- .secl{display:flex;align-items:center;gap:7px}
- .secl .mono{font-size:12px;color:var(--ink-3)}
- .secl b{font-size:14.5px;font-weight:600}
- .phint{display:flex;gap:14px;margin-top:9px;font-size:12px;color:var(--ink-3)}
- .phint b{font-weight:400;font-family:var(--font-num);font-variant-numeric:tabular-nums}
- .field .num{font-family:var(--font-num)}
- .errtip .icn{width:13px;height:13px}
- .errtip.r{justify-content:flex-end}
- /* 时间片块(代码 TradingWindowDialog) */
- .twin{border-radius:10px;background:var(--surface-2);padding:13px 0;display:flex;flex-direction:column;align-items:center;gap:5px}
- .twin span{font-size:13px;color:var(--ink-3)}
- .twin b{font-size:17px;font-weight:600;font-family:var(--font-num)}
- /* 弹窗标题区(代码 DialogHeading):图标圆 44 + 标题 16.5 / 600 + 说明 14 / ink2 / 行高 23 */
- .dicon{width:44px;height:44px;border-radius:22px;display:flex;align-items:center;justify-content:center;margin:0 auto 6px}
- .dicon.warn{background:var(--warn-weak);color:var(--warn)}
- .dicon.danger{background:var(--danger-weak);color:var(--danger)}
- .dicon.ok{background:var(--ok-weak);color:var(--ok)}
- .dicon.brand{background:var(--brand-weak);color:var(--brand)}
- .dlg-hd .dsc{margin-top:6px;font-size:14px;color:var(--ink-2);line-height:23px}
- .dlg-ft span{font-weight:500}
- .dlg-ft span.off{color:var(--brand);opacity:.4}
- .dlg-ft span.dg{color:var(--danger)}
- /* 底部面板标题行(代码 SheetFrame 的四套头):select 左标题 + 右 × / centered 居中无关闭 / centered-close 居中 + 右 × / filter 左大标题 + 右 × */
- .shd{display:flex;align-items:center;justify-content:space-between;padding:16px 18px 6px}
- .shd b{font-size:15.5px;font-weight:600}
- .shd .icn{color:var(--ink-3)}
- .shd-c{padding:16px 18px 4px;text-align:center;position:relative}
- .shd-c b{font-size:16.5px;font-weight:600}
- .shd-c .icn{position:absolute;right:18px;top:17px;color:var(--ink-3)}
- /* 单选面板的选项行(代码 SelectSheet) */
- .opt-row{display:flex;align-items:center;justify-content:space-between;padding:14px 18px;border-bottom:1px solid var(--line);font-size:14.5px;color:var(--ink-2)}
- .opt-row .icn{width:14px;height:14px;color:var(--brand)}
- .opt-row b{font-weight:400;color:var(--ink-1)}
- .opt-row.sel b{font-weight:600}
- .opt-row:last-child{border-bottom:0}
- /* 叠在另一层弹窗之上的第二层遮罩 */
- .scrim.top2{z-index:45}
- /* 列表尾的文字入口(历史票据 > 等) */
- .listfoot{display:flex;justify-content:center;align-items:center;gap:3px;padding:12px 0;font-size:13px;color:var(--brand)}
- .listfoot .icn{width:13px;height:13px}
- /* 分组标题(代码 Section 的标题:12 / ink3,上 16 下 8) */
- .gtitle{padding:16px 16px 8px}
- /* 转圈(代码 ProgressRing,下拉刷新 / 上拉加载 / 检索在搜共用) */
- @keyframes hh-spin{from{transform:rotate(-90deg)}to{transform:rotate(270deg)}}
- .ring{width:16px;height:16px;position:relative;flex:none;display:inline-block}
- .ring>svg{width:100%;height:100%;transform:rotate(-90deg);display:block}
- .ring .trk{fill:none;stroke:var(--line-2);stroke-width:2.8}
- .ring .bar{fill:none;stroke:var(--brand);stroke-width:2.8;stroke-linecap:round}
- .spin{animation:hh-spin .9s linear infinite}
- .ring.lg{width:24px;height:24px}
- .ring.lg .trk,.ring.lg .bar{stroke-width:2.2}
- /* 空态(代码 EmptyState):整页 120×104 / sm 72×62 / row 30×26 三档,插画取色走 --il-* */
- .emptyslot{flex:1;display:flex;align-items:center;justify-content:center;padding:0 0 204px}
- .emptybox{--il-a:#E7EDF6;--il-b:#D8E0EC;--il-c:#F8FAFE;display:flex;flex-direction:column;align-items:center;text-align:center;padding:0 32px}
- [data-theme="dark"] .emptybox{--il-a:#1F2A45;--il-b:#161F38;--il-c:#28355A}
- .emptybox .illu{width:120px;height:104px;display:block}
- .emptybox .etxt{margin-top:16px;font-size:14px;color:var(--ink-3);letter-spacing:.1em}
- .emptybox .esub{margin-top:8px;font-size:12px;line-height:1.65;color:var(--ink-4);max-width:236px}
- .emptybox .eact{margin-top:20px}
- .emptybox.sm{padding:26px 20px}
- .emptybox.sm .illu{width:72px;height:62px}
- .emptybox.sm .etxt{margin-top:11px;font-size:12.5px;letter-spacing:.08em}
- .emptybox.row{flex-direction:row;align-items:center;justify-content:center;gap:10px;padding:9px 0}
- .emptybox.row .illu{width:30px;height:26px}
- .emptybox.row .etxt{margin-top:0;font-size:12.5px;letter-spacing:.06em}
- /* 状态点「已提交」档(代码 StatusSemantic submitted:未报 / 待报 / 待审批):品牌色空心 */
- .st.sub{color:var(--brand)}
- .st.sub i{background:transparent;border:1.6px solid currentColor}
- /* ---- 持仓卡片(代码 PositionCard)与通用表格(代码 DataTable) ---- */
- /* 持仓卡片:多枚角标并排;有角标时顶部只让到 15;估值后的币种小一号 */
- .pos .corners{position:absolute;left:0;top:0;display:flex;z-index:3}
- .pos .corners .corner{position:static}
- .pos:has(.corners) .pos-hd{padding-top:2px}
- .pos-val b small{font-size:13.5px;font-weight:400;color:var(--ink-2)}
- .pos-code b{font-weight:400;color:var(--accent)}
- /* 信息格五项一行:整行按宽度降档 12.5 / 11.5 / 10.5,最小档仍放不下时成对的值拆成两行(i) */
- .pos-grid.f5{display:flex;flex-wrap:wrap;column-gap:6px;row-gap:10px}
- .pos-grid.f5>div{flex:1 0 auto}
- .pos-grid.f5 div span{font-size:10px;letter-spacing:.02em}
- .pos-grid.f5 div b{font-size:12.5px;font-weight:500}
- .pos-grid.f5 div b em{font-size:11px;font-weight:400}
- .pos-grid.f5 div i{display:block;font-style:normal;font-size:11px;color:var(--ink-3);font-family:var(--font-num);font-variant-numeric:tabular-nums;white-space:nowrap}
- .pos-grid.f5.s115 div b{font-size:11.5px}.pos-grid.f5.s115 div b em{font-size:10px}
- .pos-grid.f5.s105 div b{font-size:10.5px}.pos-grid.f5.s105 div b em{font-size:9px}
- .pos-ops span.pri,.pos-ops span.hot{font-weight:500}
- /* 表格模式(DataTable):表头 36 / 行 52、单元格 12、列距 14,前两列冻结带右投影 */
- .ptab{background:var(--surface);overflow:hidden}
- .ptab .r{display:flex;align-items:stretch;height:52px;border-bottom:1px solid var(--line);font-size:12px;white-space:nowrap}
- .ptab .r.h{height:36px;background:var(--surface-2);font-size:10.5px;letter-spacing:.02em;color:var(--ink-3)}
- .ptab .fz,.ptab .sc{display:flex;align-items:center;gap:14px;flex:none}
- .ptab .fz{padding:0 14px 0 10px;background:var(--surface);position:relative;z-index:2;box-shadow:4px 0 10px rgba(15,27,51,.06)}
- [data-theme="dark"] .ptab .fz{box-shadow:4px 0 10px rgba(0,0,0,.35)}
- .ptab .r.h .fz{background:var(--surface-2)}
- .ptab .c{flex:none}
- .ptab .c.n{text-align:right;font-family:var(--font-num);font-variant-numeric:tabular-nums}
- .ptab .r.h .c.n{font-family:inherit}
- .ptab .c.n .sub{display:block;font-size:11px;color:var(--ink-3);margin-top:2px}
- .ptab .cat b{display:block;font-size:12px;font-weight:600}
- .ptab .cat b.db{color:var(--accent)}
- .ptab .cat .mbs{display:flex;gap:3px;margin-top:3px}
- .ptab .scd b{display:block;font-size:12px;font-weight:400}
- .ptab .scd span{display:flex;align-items:center;gap:4px;font-family:var(--font-mono);font-size:11px;color:var(--ink-3);margin-top:3px}
- .ptab .scd .cmark{width:13px;height:13px;font-size:8.5px}
- .ptab .opsrow{border-bottom:1px solid var(--line)}
- .ptab .opsrow .pos-ops{border-top:0}
- .ptab .r.sel,.ptab .r.sel .fz{background:var(--brand-weak)}
- .ptab .xrow{background:var(--surface-2);border-bottom:1px solid var(--line)}
- /* ---- 卡片 / 表格切换(代码 ViewModeToggle) ---- */
- .viewtog{display:inline-flex;padding:2px;background:var(--surface-2);border-radius:8px;gap:2px;flex:none;position:relative}
- .viewtog.sep{margin-left:4px}
- .viewtog.sep::before{content:"";position:absolute;left:-7px;top:2px;bottom:2px;width:1px;background:var(--line-2)}
- .viewtog span{width:28px;height:24px;display:flex;align-items:center;justify-content:center;border-radius:6px;color:var(--ink-3)}
- .viewtog span.on{background:var(--surface);color:var(--brand);box-shadow:var(--shadow-card)}
- [data-theme="dark"] .viewtog span.on{background:var(--surface-3)}
- .viewtog .icn{width:15px;height:15px;stroke-width:1.8}
- /* ==== v1.3 公共覆盖 END ==== */
- </style>
- </head>
- <body>
- <svg width="0" height="0" style="position:absolute" aria-hidden="true"><defs>
- <g id="i-back"><polyline points="15 4 7 12 15 20"/></g>
- <g id="i-right"><polyline points="9 4 17 12 9 20"/></g>
- <g id="i-down"><polyline points="5 9 12 16 19 9"/></g>
- <g id="i-up"><polyline points="5 15 12 8 19 15"/></g>
- <g id="i-search"><circle cx="11" cy="11" r="6.5"/><line x1="16" y1="16" x2="21" y2="21"/></g>
- <g id="i-x"><line x1="6" y1="6" x2="18" y2="18"/><line x1="18" y1="6" x2="6" y2="18"/></g>
- <g id="i-check"><polyline points="4 12.5 9.5 18 20 6"/></g>
- <g id="i-plus"><line x1="12" y1="5" x2="12" y2="19"/><line x1="5" y1="12" x2="19" y2="12"/></g>
- <g id="i-minus"><line x1="5" y1="12" x2="19" y2="12"/></g>
- <g id="i-eye"><path d="M2 12s3.6-6.5 10-6.5S22 12 22 12s-3.6 6.5-10 6.5S2 12 2 12z"/><circle cx="12" cy="12" r="2.6"/></g>
- <g id="i-eyeoff"><path d="M4 5l16 14"/><path d="M9.5 6.2A9.7 9.7 0 0 1 12 5.5c6.4 0 10 6.5 10 6.5a17 17 0 0 1-3.3 4"/><path d="M6.2 8.3A16.6 16.6 0 0 0 2 12s3.6 6.5 10 6.5a10 10 0 0 0 3.3-.55"/></g>
- <g id="i-clock"><circle cx="12" cy="12" r="8.5"/><polyline points="12 7 12 12 15.5 14"/></g>
- <g id="i-history"><path d="M3.5 12a8.5 8.5 0 1 0 2.6-6.1"/><polyline points="3 4 3 9 8 9"/><polyline points="12 7.5 12 12 15.5 14"/></g>
- <g id="i-filter"><path d="M4 6h16l-6.2 7.4V19l-3.6-2v-3.6z"/></g>
- <g id="i-calendar"><rect x="3.5" y="5" width="17" height="15.5" rx="2.5"/><line x1="3.5" y1="9.5" x2="20.5" y2="9.5"/><line x1="8" y1="3" x2="8" y2="6.5"/><line x1="16" y1="3" x2="16" y2="6.5"/></g>
- <g id="i-note"><path d="M6 3h8l4.5 4.5V21H6z"/><polyline points="14 3 14 8 18.5 8"/><line x1="9" y1="13" x2="15" y2="13"/><line x1="9" y1="17" x2="13" y2="17"/></g>
- <g id="i-wallet"><rect x="3" y="6" width="18" height="14" rx="3"/><path d="M3 10h18"/><circle cx="16.5" cy="15" r="1.3" fill="currentColor" stroke="none"/></g>
- <g id="i-user"><circle cx="12" cy="8.5" r="3.8"/><path d="M4.5 20.5a7.5 7.5 0 0 1 15 0"/></g>
- <g id="i-transfer"><polyline points="7 7 4 10 7 13"/><path d="M4 10h12a4 4 0 0 1 0 8h-3"/><polyline points="17 17 20 14 17 11" opacity="0"/></g>
- <g id="i-swap"><polyline points="8 5 4.5 8.5 8 12"/><line x1="4.5" y1="8.5" x2="19" y2="8.5"/><polyline points="16 19 19.5 15.5 16 12"/><line x1="19.5" y1="15.5" x2="5" y2="15.5"/></g>
- <g id="i-refresh"><path d="M20 12a8 8 0 1 1-2.4-5.7"/><polyline points="20 4 20 9 15 9"/></g>
- <g id="i-help"><circle cx="12" cy="12" r="8.6"/><path d="M9.6 9.6a2.5 2.5 0 1 1 3.2 2.4c-.6.2-.9.7-.9 1.4v.5"/><circle cx="11.9" cy="16.6" r=".9" fill="currentColor" stroke="none"/></g>
- <g id="i-info"><circle cx="12" cy="12" r="8.6"/><line x1="12" y1="11" x2="12" y2="16.5"/><circle cx="12" cy="7.8" r=".9" fill="currentColor" stroke="none"/></g>
- <g id="i-alert"><path d="M12 4.5 21 19.5H3z"/><line x1="12" y1="10" x2="12" y2="14.5"/><circle cx="12" cy="17" r=".9" fill="currentColor" stroke="none"/></g>
- <g id="i-lock"><rect x="5" y="10.5" width="14" height="10" rx="2.5"/><path d="M8.2 10.5V8a3.8 3.8 0 0 1 7.6 0v2.5"/></g>
- <g id="i-key"><circle cx="8" cy="14" r="4"/><path d="M11 11.5 20 3"/><line x1="17" y1="6" x2="19" y2="8"/></g>
- <g id="i-shield"><path d="M12 3.5 19 6v6c0 4.2-2.9 7.2-7 8.5-4.1-1.3-7-4.3-7-8.5V6z"/><polyline points="9 12 11.3 14.3 15.3 10.3"/></g>
- <g id="i-font"><path d="M4 19 10 5l6 14"/><line x1="6.2" y1="14.5" x2="13.8" y2="14.5"/><path d="M17 19l3-8 3 8" transform="scale(.72) translate(6.5 5)"/></g>
- <g id="i-doc"><rect x="4.5" y="3.5" width="15" height="17" rx="2.5"/><line x1="8" y1="9" x2="16" y2="9"/><line x1="8" y1="13" x2="16" y2="13"/><line x1="8" y1="17" x2="12.5" y2="17"/></g>
- <g id="i-logout"><path d="M14 5H6.5A2.5 2.5 0 0 0 4 7.5v9A2.5 2.5 0 0 0 6.5 19H14"/><polyline points="16.5 8 20.5 12 16.5 16"/><line x1="20.5" y1="12" x2="10" y2="12"/></g>
- <g id="i-fee"><circle cx="12" cy="12" r="8.5"/><path d="M9.5 9h5M9.5 12h5M12 9v8"/></g>
- <g id="i-theme"><circle cx="12" cy="12" r="7.5"/><path d="M12 4.5v15a7.5 7.5 0 0 0 0-15z" fill="currentColor" stroke="none"/></g>
- <g id="i-sun"><circle cx="12" cy="12" r="4.2"/><line x1="12" y1="2.5" x2="12" y2="5"/><line x1="12" y1="19" x2="12" y2="21.5"/><line x1="2.5" y1="12" x2="5" y2="12"/><line x1="19" y1="12" x2="21.5" y2="12"/><line x1="5.4" y1="5.4" x2="7.1" y2="7.1"/><line x1="16.9" y1="16.9" x2="18.6" y2="18.6"/><line x1="5.4" y1="18.6" x2="7.1" y2="16.9"/><line x1="16.9" y1="7.1" x2="18.6" y2="5.4"/></g>
- <g id="i-moon"><path d="M20 14.2A8.4 8.4 0 0 1 9.8 4 8.6 8.6 0 1 0 20 14.2z"/></g>
- <g id="i-bell"><path d="M18 16V11a6 6 0 1 0-12 0v5l-1.6 2.5h15.2z"/><path d="M9.8 21a2.4 2.4 0 0 0 4.4 0"/></g>
- <g id="i-list"><line x1="4" y1="7" x2="20" y2="7"/><line x1="4" y1="12" x2="20" y2="12"/><line x1="4" y1="17" x2="20" y2="17"/></g>
- <g id="i-sort"><polyline points="7 9 10 6 13 9"/><polyline points="7 15 10 18 13 15"/></g>
- <g id="i-trend"><polyline points="3 16 9 10 13 14 21 6"/><polyline points="15.5 6 21 6 21 11.5"/></g>
- <g id="i-img"><rect x="3.5" y="5" width="17" height="14" rx="2.5"/><circle cx="9" cy="10" r="1.6"/><polyline points="5 17 10 12 13.5 15.5 16.5 13 19.5 16"/></g>
- <g id="i-upload"><path d="M12 16V5"/><polyline points="7.5 9.5 12 5 16.5 9.5"/><path d="M4 15v3.5A2.5 2.5 0 0 0 6.5 21h11a2.5 2.5 0 0 0 2.5-2.5V15"/></g>
- <g id="i-face"><rect x="4" y="4" width="16" height="16" rx="4"/><circle cx="9.3" cy="10.5" r=".9" fill="currentColor" stroke="none"/><circle cx="14.7" cy="10.5" r=".9" fill="currentColor" stroke="none"/><path d="M9 15c1.8 1.5 4.2 1.5 6 0"/></g>
- </defs></svg>
- <div class="sheet-head">
- <div class="brandmark">
- <div class="glyph"></div>
- <div>
- <div class="sheet-title">票据投资者 APP · 移动端 UI</div>
- <div class="sheet-sub">深空蓝设计系统 / 十三张图纸 · 深浅双主题 · 中繁英三语 · 列表双视图 · 290 帧界面 · 01–09 以代码现状为准,10–12 为 v2.0 新增设计</div>
- </div>
- </div>
- <div class="head-right">
- <div class="meta">
- <div>模块<b>索引 INDEX</b></div>
- <div>规格<b>iOS 390 × 844 @3x</b></div>
- <div>主题<b>深空蓝 Light / Dark</b></div>
- <div>版本<b>v1.3.1 + v2.0 草案 · 2026-11-09</b></div>
- </div>
- <div class="skin" role="group" aria-label="主题切换">
- <button data-set="light" class="on"><svg viewBox="0 0 24 24"><use href="#i-sun"/></svg>浅色</button>
- <button data-set="dark"><svg viewBox="0 0 24 24"><use href="#i-moon"/></svg>深色</button>
- </div>
- </div>
- </div>
- <style>
- .nav{display:grid;grid-template-columns:repeat(auto-fill,minmax(330px,1fr));gap:16px}
- .navcard{display:block;text-decoration:none;color:inherit;background:var(--canvas-2);border:1px solid var(--canvas-line);border-radius:14px;overflow:hidden;transition:.2s}
- .navcard:hover{border-color:var(--brand);transform:translateY(-2px)}
- .navcard .thumb{height:112px;display:flex;align-items:center;justify-content:center;gap:14px;background:linear-gradient(90deg,#EEF2F8 0 50%,#0B1020 50% 100%);position:relative;overflow:hidden}
- .navcard .mini{width:52px;height:76px;border-radius:9px;flex:none;padding:6px 5px;display:flex;flex-direction:column;gap:4px}
- .navcard .mini.l{background:#fff;box-shadow:0 3px 10px rgba(15,27,51,.14)}
- .navcard .mini.d{background:#131B2E;border:1px solid #232F4B}
- .navcard .mini b{height:14px;border-radius:4px;display:block}
- .navcard .mini span{height:4px;border-radius:2px;display:block}
- .navcard .no{position:absolute;right:16px;top:10px;font-family:"SF Mono",monospace;font-size:24px;font-weight:600;color:rgba(255,255,255,.20);letter-spacing:.04em}
- .navcard .body2{padding:16px 20px 18px}
- .navcard h3{font-size:15.5px;font-weight:600;letter-spacing:.02em;color:var(--canvas-ink)}
- .navcard p{font-size:12px;color:var(--canvas-mute);margin-top:7px;line-height:1.6}
- .navcard .foot{margin-top:13px;display:flex;gap:7px;flex-wrap:wrap}
- .navcard .foot span{font-size:10.5px;padding:3px 8px;border-radius:5px;background:var(--surface-3);color:var(--canvas-mute)}
- </style>
- <div class="sec">
- <div class="sec-head"><span class="sec-num">00</span><span class="sec-name">交付说明</span><span class="sec-rule"></span><span class="sec-note">HTML 可直接双击打开,右上角切换深浅主题</span></div>
- <div class="cards">
- <div class="card-x">
- <h4>本次交付 DELIVERABLE</h4>
- <div class="bullets">
- <li><b>13 张设计图纸</b>(HTML):1 张规范 + 12 张模块,共 <b>290 帧</b>界面(01–09 共 137 帧,10–12 共 153 帧)</li>
- <li><b>26 张高清预览图</b>(PNG @2x):深浅各一套,见 <code>预览图-浅色 / 预览图-深色</code></li>
- <li>每张 HTML 右上角有<b>换肤开关</b>;<code>07 多语言</code>另有<b>「简 / 繁 / EN」语言开关</b></li>
- <li>手机尺寸统一 <b>390 × 844 @3x</b>(iPhone 14 / 15 基准)</li>
- <li><b>v1.3(2026-10-14)按代码现状重画</b>:布局、文案、数据取 hehui 项目的 mock 实拍与源码;上一版整包归档在 <code>深空蓝_v1.2_归档_2026-10-14.zip</code></li>
- <li><b>v1.3.1(2026-11-03)02 下单页可改项改描边</b>:本次下单规模改成描边输入框、剩余名义本金规模挂在框下做提示(数字可点回到默认填入)、结算币种改成描边选择器(方案稿《下单页可填项突出》方案一);下单页与 03 的 B 类批量购买力确认(O6)两份协议合成一句一个勾;其余图纸不变</li>
- <li><b>v2.0 草案(2026-11-06)新增 10 / 11</b>:按 <code>原型/v2.0.0</code> 销售 APP 原型与《客户端.md》设计总收益票据(TRN)客户端全部新页面;<b>先于代码</b>,帧号前缀 R / H / K / E,图注标「v2.0 新增」,需求冲突处的取舍写在 10 的 01 节「待产品确认」</li>
- <li><b>v2.0 草案 · 补帧(2026-11-06)</b>:对照原型逐页补齐漏画——10 补账户页两个品类 Tab、资产详情、红点、空态、合适性评估、指令已完成 / 撤单 / 全部历史 / 未成交;11 补调仓初始态 / 联想 / 美股 POV / 跟价中 / 校验、列表就地筛选、撤销申请;新增 <b>12 开户与加开交易品类</b>(H5 线上开户,帧号前缀 U)</li>
- <li><b>v2.0 草案 · 状态查漏(2026-11-09)</b>:按原型全部页面 / 弹框 / 抽屉、产品「全量页面平铺图」55 屏与需求逐项对照,补齐「同一页的另一种状态」——空态、置灰、行内报错、单品类、强平、在途卖出、订单与三类申请各状态的卡片和详情、调仓各指令类型与选择面板、开户各步按钮态与拦截页;10 / 11 / 12 分别增至 58 / 61 / 34 帧,11 新增 05 节「调仓校验与报错文案」</li>
- </div>
- </div>
- <div class="card-x">
- <h4>设计基调 TONE</h4>
- <div class="bullets">
- <li>色彩方向:<b>深空蓝 Deep-Space Blue</b>;主题缺省跟随系统,可在「我的 → 外观」切换</li>
- <li>品牌色 <code>#1B4FD8 / #5B8CFF</code>,强调色琥珀 <code>#B4700E / #F0A93B</code>;数字 Inter、等宽 Menlo</li>
- <li>涨跌色缺省红涨绿跌,<b>可在「我的 → 外观」切换</b>为绿涨红跌</li>
- <li>换机构 = 换<b>机构档案</b>(应用名、Logo、持牌信息、品牌配色覆盖),当前机构<b>泓衍票据</b></li>
- <li><b>平台口径</b>:iOS 为主,底栏与导航栏按设计系统扁平样式画(不画液态玻璃);差异用「仅 APP」「仅 H5」「仅 iOS」标签</li>
- <li><b>本期未上线</b>:B 类票据、开户、资金划转——照 mock 画并标「本期未上线 · 仅 mock」</li>
- </div>
- </div>
- <div class="card-x">
- <h4>与需求的差异 DELTA</h4>
- <div class="bullets">
- <li><b>新增</b>「消息」<b>底部 Tab</b>(三端都有,H5 自绘):底栏由 3 个 Tab 增到 4 个,铃铛与「我的」里的消息中心入口撤除;未读只显示红点;推送前置引导与落点映射(原需求未覆盖)。<b>09</b> 取代 06 的 N1–N5</li>
- <li><b>新增</b>「我的 → 外观」(深浅主题 + 涨跌色)、「我的 → 语言」与登录页语言入口(原需求未覆盖)</li>
- <li><b>新增</b>列表<b>卡片 / 表格双视图</b>:全站 10 个数据型列表(原需求仅持仓)</li>
- <li><b>新增</b>「我的 → 关于」、帮助中心分类与问题详情、升级检查的建议更新;账户信息需求写仅 H5,产品裁决<b>三端都开</b></li>
- <li>其余以<b>代码现状</b>为准:文案取代码(简体 + mock 数据),代码偏离需求处写在各帧图注</li>
- </div>
- </div>
- </div>
- </div>
- <div class="sec" style="margin-bottom:20px">
- <div class="sec-head"><span class="sec-num">01</span><span class="sec-name">图纸索引</span><span class="sec-rule"></span><span class="sec-note">点击卡片打开对应图纸</span></div>
- <div class="nav">
- <a class="navcard" href="00_深浅主题_设计规范与对照.html">
- <div class="thumb">
- <span class="no">00</span>
- <div class="mini l"><b style="background:#1B4FD8"></b><span style="background:#CFD9E7;width:80%"></span><span style="background:#E3E9F1;width:55%"></span></div>
- <div class="mini d"><b style="background:#5B8CFF"></b><span style="background:#32436A;width:80%"></span><span style="background:#232F4B;width:55%"></span></div>
- </div>
- <div class="body2">
- <h3>深空蓝 · 深浅主题规范</h3>
- <p>设计基调、语义 Token(含代码键)、字号圆角间距与控件高度、整页与组件级深浅对照、三端换肤落地。</p>
- <div class="foot"><span>Token 对照</span><span>整页对照</span><span>换肤落地</span></div>
- </div>
- </a>
- <a class="navcard" href="01_登录模块_启动与认证.html">
- <div class="thumb">
- <span class="no">01</span>
- <div class="mini l"><b style="background:#1B4FD8"></b><span style="background:#CFD9E7;width:70%"></span><span style="background:#CFD9E7;width:70%"></span></div>
- <div class="mini d"><b style="background:#5B8CFF"></b><span style="background:#32436A;width:70%"></span><span style="background:#32436A;width:70%"></span></div>
- </div>
- <div class="body2">
- <h3>登录 · 启动与双重认证</h3>
- <p>启动页与隐私遮罩、账密登录、历史账号、新设备短信验证、锁定页与生物识别解锁、开户防重(本期未上线)、多机构档案。</p>
- <div class="foot"><span>13 帧</span><span>登录流程</span></div>
- </div>
- </a>
- <a class="navcard" href="02_询价与下单.html">
- <div class="thumb">
- <span class="no">02</span>
- <div class="mini l"><b style="background:#1B4FD8"></b><span style="background:#E3E9F1;width:90%"></span><span style="background:#CFD9E7;width:60%"></span></div>
- <div class="mini d"><b style="background:#5B8CFF"></b><span style="background:#232F4B;width:90%"></span><span style="background:#32436A;width:60%"></span></div>
- </div>
- <div class="body2">
- <h3>票据 · 询价与下单</h3>
- <p>A 类询价主页、标的检索与联想、周期与名义本金、报价展开与已拒绝 / 无报价、下单页(限价越界、合适性申报与不通过)、说明面板。</p>
- <div class="foot"><span>23 帧</span><span>检索状态</span><span>金额链路</span></div>
- </div>
- </a>
- <a class="navcard" href="03_订单与历史.html">
- <div class="thumb">
- <span class="no">03</span>
- <div class="mini l"><b style="background:#1B4FD8"></b><span style="background:#CFD9E7;width:75%"></span><span style="background:#E3E9F1;width:75%"></span></div>
- <div class="mini d"><b style="background:#5B8CFF"></b><span style="background:#32436A;width:75%"></span><span style="background:#232F4B;width:75%"></span></div>
- </div>
- <div class="body2">
- <h3>订单 · 撤单改价与历史</h3>
- <p>A 类订单撤单改价与订单详情、B 类批量确认买入(本期未上线)、历史订单与历史询价筛选。</p>
- <div class="foot"><span>17 帧</span><span>批量三阶段</span></div>
- </div>
- </a>
- <a class="navcard" href="04_账户模块_资金与持仓.html">
- <div class="thumb">
- <span class="no">04</span>
- <div class="mini l"><b style="background:#1B4FD8"></b><span style="background:#E3E9F1;width:85%"></span><span style="background:#E3E9F1;width:85%"></span></div>
- <div class="mini d"><b style="background:#5B8CFF"></b><span style="background:#232F4B;width:85%"></span><span style="background:#232F4B;width:85%"></span></div>
- </div>
- <div class="body2">
- <h3>账户 · 资金看板与持仓</h3>
- <p>资金看板、多币种钱包、持仓卡片与表格双视图、排序面板、卖出 / 增额 / 展期弹窗与 Toast 拦截。</p>
- <div class="foot"><span>15 帧</span><span>字段口径</span><span>校验链路</span></div>
- </div>
- </a>
- <a class="navcard" href="05_账户二级页.html">
- <div class="thumb">
- <span class="no">05</span>
- <div class="mini l"><b style="background:#B4700E"></b><span style="background:#CFD9E7;width:65%"></span><span style="background:#E3E9F1;width:80%"></span></div>
- <div class="mini d"><b style="background:#F0A93B"></b><span style="background:#32436A;width:65%"></span><span style="background:#232F4B;width:80%"></span></div>
- </div>
- <div class="body2">
- <h3>账户 · 二级页</h3>
- <p>资产详情、资金流水、资金划转(本期未上线)、展期记录与详情、历史票据、A/B 类票据详情、筛选与时间面板、下拉上拉。</p>
- <div class="foot"><span>25 帧</span><span>筛选默认值</span></div>
- </div>
- </a>
- <a class="navcard" href="06_我的模块_设置与换肤.html">
- <div class="thumb">
- <span class="no">06</span>
- <div class="mini l"><b style="background:#1B4FD8"></b><span style="background:#CFD9E7;width:70%"></span><span style="background:#CFD9E7;width:50%"></span></div>
- <div class="mini d"><b style="background:#5B8CFF"></b><span style="background:#32436A;width:70%"></span><span style="background:#32436A;width:50%"></span></div>
- </div>
- <div class="body2">
- <h3>我的 · 设置与换肤</h3>
- <p>个人中心、<b style="color:var(--brand)">外观</b>、字体大小、登录解锁与生物识别、修改密码、费用信息、帮助中心、账户信息、开户文件上传(本期未上线)、升级检查、关于。</p>
- <div class="foot"><span>17 帧</span><span>路由可见性</span></div>
- </div>
- </a>
- <a class="navcard" href="07_多语言_中繁英切换.html">
- <div class="thumb">
- <span class="no">07</span>
- <div class="mini l"><b style="background:#B4700E"></b><span style="background:#CFD9E7;width:55%"></span><span style="background:#E3E9F1;width:80%"></span></div>
- <div class="mini d"><b style="background:#F0A93B"></b><span style="background:#32436A;width:55%"></span><span style="background:#232F4B;width:80%"></span></div>
- </div>
- <div class="body2">
- <h3>多语言 · 语言切换入口与 UI</h3>
- <p>两处语言入口、语言设置页、切换遮罩、登录页语言弹层;组件规格与切换规格(数字日期三语一致)。</p>
- <div class="foot"><span>5 帧</span><span>组件规格</span><span>切换规格</span></div>
- </div>
- </a>
- <a class="navcard" href="08_列表视图_卡片与表格.html">
- <div class="thumb">
- <span class="no">08</span>
- <div class="mini l"><b style="background:#1B4FD8"></b><span style="background:#CFD9E7;width:90%"></span><span style="background:#CFD9E7;width:90%"></span></div>
- <div class="mini d"><b style="background:#5B8CFF"></b><span style="background:#32436A;width:90%"></span><span style="background:#32436A;width:90%"></span></div>
- </div>
- <div class="body2">
- <h3>列表视图 · 卡片与表格切换</h3>
- <p>全站 10 个数据型列表的双视图:切换控件与三种落点、冻结列横滑、行下展开操作、空态、各列表列定义。</p>
- <div class="foot"><span>9 帧</span><span>列定义</span><span>通用能力</span></div>
- </div>
- </a>
- <a class="navcard" href="09_消息中心_通知与推送.html">
- <div class="thumb">
- <span class="no">09</span>
- <div class="mini l"><b style="background:#DC2626"></b><span style="background:#CFD9E7;width:75%"></span><span style="background:#E3E9F1;width:58%"></span></div>
- <div class="mini d"><b style="background:#FF6B6E"></b><span style="background:#32436A;width:75%"></span><span style="background:#232F4B;width:58%"></span></div>
- </div>
- <div class="body2">
- <h3>消息中心 · 通知与推送</h3>
- <p>底部「消息」Tab 与红点、分类聚合 → 分类内列表 → 消息详情、推送前置引导 / 系统授权 / 提示条 / 去设置、推送落点表。</p>
- <div class="foot"><span>13 帧</span><span>权限状态</span><span>落点表</span></div>
- </div>
- </a>
- <a class="navcard" href="10_总收益票据_订单与持仓.html">
- <div class="thumb">
- <span class="no">10</span>
- <div class="mini l"><b style="background:#B4700E"></b><span style="background:#CFD9E7;width:82%"></span><span style="background:#E3E9F1;width:64%"></span></div>
- <div class="mini d"><b style="background:#F0A93B"></b><span style="background:#32436A;width:82%"></span><span style="background:#232F4B;width:64%"></span></div>
- </div>
- <div class="body2">
- <h3>总收益票据 · 订单与持仓</h3>
- <p><b style="color:var(--accent)">v2.0 新增</b>:品类 Tab 与排序、三处红点、买入订单(金额确认 · 合适性 · 详情与调仓费用)、卖出订单与撤单、各状态卡片与详情、单品类与空态、账户页两个品类 Tab、强平与在途卖出、资产详情、票据详情概要与持仓 / 指令 / 历史 / 查询、历史筛选面板、全部历史指令。</p>
- <div class="foot"><span>58 帧</span><span>状态口径</span><span>待确认</span></div>
- </div>
- </a>
- <a class="navcard" href="11_总收益票据_操作与查询.html">
- <div class="thumb">
- <span class="no">11</span>
- <div class="mini l"><b style="background:#B4700E"></b><span style="background:#CFD9E7;width:82%"></span><span style="background:#E3E9F1;width:64%"></span></div>
- <div class="mini d"><b style="background:#F0A93B"></b><span style="background:#32436A;width:82%"></span><span style="background:#232F4B;width:64%"></span></div>
- </div>
- <div class="body2">
- <h3>总收益票据 · 操作与查询</h3>
- <p><b style="color:var(--accent)">v2.0 新增</b>:追保、现金提取、票据变更、卖出、调仓(初始态 · 联想 · 限价 / 市价 / TWAP / POV · 时间与类型选择面板 · 跟价 · 快捷数量 · 校验文案)与改单、新增可交易证券、表单报错态、六个查询子页与就地筛选、三类申请各状态详情与空态、撤销申请,资金流水与费用信息兼容。</p>
- <div class="foot"><span>61 帧</span><span>万单位</span><span>调仓字段</span></div>
- </div>
- </a>
- <a class="navcard" href="12_开户与加开_交易品类.html">
- <div class="thumb">
- <span class="no">12</span>
- <div class="mini l"><b style="background:#B4700E"></b><span style="background:#CFD9E7;width:82%"></span><span style="background:#E3E9F1;width:64%"></span></div>
- <div class="mini d"><b style="background:#F0A93B"></b><span style="background:#32436A;width:82%"></span><span style="background:#232F4B;width:64%"></span></div>
- </div>
- <div class="body2">
- <h3>开户 · 加开交易品类</h3>
- <p><b style="color:var(--accent)">v2.0 新增</b>:登录页申请开户、账户信息交易品类四态与加开入口(仅 H5)、前置拦截与资格校验、选择品类、签署协议与逐份阅读、风险披露、设置密码、提交反馈;含各步按钮置灰 / 点亮、报错与审核中 / 驳回各态。</p>
- <div class="foot"><span>34 帧</span><span>前置检查</span><span>机构联动</span></div>
- </div>
- </a>
- </div>
- </div>
- <script>
- (function(){
- var root=document.documentElement,btns=document.querySelectorAll('.skin button');
- document.querySelectorAll('[data-clone]').forEach(function(el){
- var src=document.querySelector(el.getAttribute('data-clone'));
- if(src) el.innerHTML=src.innerHTML;
- });
- function set(t){
- root.setAttribute('data-theme',t);
- btns.forEach(function(b){b.classList.toggle('on',b.dataset.set===t)});
- document.querySelectorAll('.phone:not([data-lock])').forEach(function(p){p.setAttribute('data-theme',t)});
- try{localStorage.setItem('hh-skin',t)}catch(e){}
- }
- btns.forEach(function(b){b.addEventListener('click',function(){set(b.dataset.set)})});
- document.body.setAttribute('data-h',String(document.body.scrollHeight));
- var hash=(location.hash||'').replace('#','');
- var saved=null;try{saved=localStorage.getItem('hh-skin')}catch(e){}
- set(hash==='dark'||hash==='light'?hash:(saved||'light'));
- })();
- </script>
- </body>
- </html>
|