@charset "UTF-8"; /* ══════════════════════════════════════════════════════════════════ 首屏 · 实时行情面板 r24 · 2026-09-23 配 herolive-r24.js。判据与实测数字写在那个文件的头部,这里只管画。 两件事决定了本文件的尺寸预算: · 首屏净高 638px(1440 档实测),产品面里还有一块 132px 的执行流; ⇒ 留给面板的是 ~490px。 · 品种从 5 个加到 8 个、还多了三条分组 —— 行高必须从 r23 的 ~44px 压到 ~38px,注释从三行压到两行,否则面板会被 .hero{overflow:hidden} 切掉。 改这里的字号 / 行距前,先按上面这两个数重算一遍。 一个色值都没新造,全部 color-mix 自 brand/tokens-dark.css。 ══════════════════════════════════════════════════════════════════ */ /* ── §1 行:四列 —— 品种 / 走势 / 价 / 涨跌 ───────────────────────── ⚠️ 行高 32px 是**算出来的,不是调出来的**,别随手加大: 首屏 638 − 执行流 181 − 面板间距 16 = 面板可用 441; 441 − 表头 35 − 面板脚 60 = 给行的 346; 8 行 × 32 + 3 条分组 × 17 + 描边 ≈ 310 ⇒ 还剩 36px 余量。 第一版按 38px 做,实测 plane 717 > hero 638,**面板脚那段法定免责声明 被 .hero{overflow:hidden} 整段切掉了** —— 那是不能切的东西。 */ .qlv24 .hstage__row { grid-template-columns: minmax(0, 1fr) 78px auto 4.2em; align-items: center; gap: var(--s-2); padding-block: 3px; padding-inline: var(--s-4); min-block-size: 0; } .qlv24 .hstage__bar { padding-block: 9px; } .qlv24 .qlv__name { line-height: 1.2; } .qlv24 .hstage__code { font-size: 11px; font-weight: 700; } .qlv24 .hstage__zh { font-size: 10px; } .qlv24 .hstage__px { font-size: 12.5px; } .qlv24 .hstage__chg { font-size: 10px; } /* 档位标记。r23 用 ::after 写死中文,英文页会串味 —— r24 改成 JS 填的 真元素(两套串按 取)。同时把 r23 那两条 ::after 关掉。 */ .qlv24 .qlv__row[data-cadence="slow"] .hstage__zh::after, .qlv24 .qlv__row[data-cadence="daily"] .hstage__zh::after { content: none; } .qlv24__cad { font-style: normal; opacity: .68; } /* ── §2 分组 ────────────────────────────────────────────────────── */ .qlv24__grp { padding: 5px var(--s-4) 1px; border-block-start: 1px solid color-mix(in srgb, var(--c-border-strong) 18%, transparent); font-size: 9px; line-height: 1.2; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: color-mix(in srgb, var(--c-text-3) 82%, transparent); } .qlv24__grp:first-child { border-block-start: 0; } /* 分组标题下面第一行不再画分隔线 —— 两条线挨着会读成一条粗线 */ .qlv24__grp + .hstage__row { border-block-start: 0; } /* ── §3 走势线 + 24 小时区间轨(竖着叠在同一格,不多占行高)────── */ .qlv24__viz { display: grid; gap: 3px; justify-items: stretch; } .qlv24 .qlv__spark { inline-size: 78px; block-size: 20px; overflow: hidden; } .qlv24__line { fill: none; stroke: currentColor; stroke-width: 1.25; stroke-linecap: round; stroke-linejoin: round; /* ⚠️ viewBox 被 preserveAspectRatio:none 横向拉伸,描边会跟着变粗变扁。 non-scaling-stroke 让线宽回到设备像素,细线才不糊。 */ vector-effect: non-scaling-stroke; } .qlv24__area { stroke: none; } .qlv24__lead { fill: none; stroke: currentColor; stroke-width: 1; opacity: .35; stroke-dasharray: 1.5 3; vector-effect: non-scaling-stroke; } .qlv__row[data-flat] .qlv24__line { stroke-dasharray: 3 3; opacity: .6; } .qlv__row[data-flat] .qlv24__area, .qlv__row[data-flat] .qlv24__head { display: none; } .qlv24__head { fill: currentColor; } .qlv24 .qlv__row[data-trend="up"] .qlv__spark { color: var(--sem-up); } .qlv24 .qlv__row[data-trend="down"] .qlv__spark { color: var(--sem-down); } .qlv24 .qlv__row[data-trend="flat"] .qlv__spark { color: var(--c-text-2, #8b97a8); } /* 24 小时区间轨:轨=真实 24h 高低区间,游标=现价落点。 取不到真实高低价就不画(没有 data-on),不画估算值。 */ .qlv24__rail { position: relative; display: block; block-size: 2px; border-radius: 2px; background: color-mix(in srgb, var(--c-border-strong) 30%, transparent); opacity: 0; transition: opacity 240ms var(--ease); } .qlv24__rail[data-on="1"] { opacity: 1; } .qlv24__cur { position: absolute; inset-block-start: 50%; inline-size: 4px; block-size: 4px; margin-inline-start: -2px; border-radius: 50%; background: var(--c-text-2); transform: translateY(-50%); transition: inset-inline-start 420ms var(--ease); } /* ── §4 价格逐位滚动 ───────────────────────────────────────────── ⛔ 滚动只是**显示方式**:每一格显示的都是真的收到过的那个数字, 两笔之间不做插值(插值 = 在券商官网上画一笔没成交过的价)。 */ .qlv24 .hstage__px { display: inline-flex; font-weight: 500; } .qlv24 .qlv__d { display: inline-block; position: relative; block-size: 1.22em; line-height: 1.22em; overflow: hidden; } .qlv24__roll { display: block; } .qlv24__roll i { display: block; font-style: normal; line-height: 1.22em; } /* 上涨:新数字从下面滚上来;下跌反向。460ms —— 比 r23 的 620ms 硬闪短, 但因为是位移不是闪色,读起来反而更慢、更稳。 */ .qlv24 .qlv__d[data-dir="up"] .qlv24__roll { animation: qlv24-up 460ms var(--ease) both; } .qlv24 .qlv__d[data-dir="dn"] .qlv24__roll { animation: qlv24-dn 460ms var(--ease) both; } .qlv24 .qlv__d[data-dir="up"] { color: var(--sem-up); animation: qlv24-fade 900ms var(--ease) both; } .qlv24 .qlv__d[data-dir="dn"] { color: var(--sem-down); animation: qlv24-fade 900ms var(--ease) both; } @keyframes qlv24-up { from { transform: translateY(0); } to { transform: translateY(-1.22em); } } @keyframes qlv24-dn { from { transform: translateY(-1.22em); } to { transform: translateY(0); } } @keyframes qlv24-fade { 0%, 45% { color: inherit; } 100% { color: var(--c-text); } } /* r23 的整格闪色动画在 r24 不再使用(改成了位移),关掉免得两套叠着跑 */ .qlv24 .qlv__d--up, .qlv24 .qlv__d--dn { animation: none; } /* 整行方向冲刷保留(第二重提示),浓度压低一档 —— 行高变矮之后 原来的 16% 在 8 行上同时闪会显得躁。 */ .qlv24 .hstage__row[data-flash="up"]::before { background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--sem-up) 11%, transparent)); } .qlv24 .hstage__row[data-flash="down"]::before { background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--sem-down) 11%, transparent)); } /* ── §5 面板脚 ────────────────────────────────────────────────── 注释从三行压到两行(见文件头的高度预算)。 */ .qlv24 .qlv__stat { font-size: 10px; padding-block-start: 6px; } .qlv24 .hstage__note { font-size: 10px; line-height: 1.55; padding-block: 3px var(--s-3); } /* ── §6 面板整体 ───────────────────────────────────────────────── */ @media (min-width: 1024px) { /* 8 行 + 3 条分组比 r23 的 5 行宽一些才不挤,56% → 60% */ .qlv24.hstage__panel--quotes { inline-size: 60%; } /* 执行流从 132 压到 100。 ⚠️ 这一步是**必须**的,不是顺手收紧:.hstage__plane 带 perspective(1600px) rotateY(-17deg) rotateX(5deg) scale(1.04), 所以它**渲染出来比 offsetHeight 高约 9%**。 实测:布局高 619 → 上下各被 .hero{overflow:hidden} 切掉 18px。 布局高必须压到 ≤ 590 才不切。行高已经到底了,余量只能从这里出。 100px 仍够代币走完「进场 → 过闸 → 等距出去」一整轮。 */ .hstage__lane { block-size: 100px; } } /* ── §7 手机 ───────────────────────────────────────────────────── */ @media (max-width: 1023px) { .qlv24 .hstage__row { grid-template-columns: minmax(0, 1fr) 62px auto 4.2em; } .qlv24 .qlv__spark { inline-size: 62px; } } /* ── §8 关掉动效时 ───────────────────────────────────────────── 数字照常更新(那是信息),只是不滚、不闪。走势线也照画 —— 它是静态图形。 */ @media (prefers-reduced-motion: reduce) { .qlv24 .qlv__d { block-size: auto; overflow: visible; } .qlv24 .qlv__d[data-dir] { animation: none; color: var(--c-text); } .qlv24__roll { animation: none !important; } .qlv24__cur, .qlv24__rail { transition: none; } } /* ── §R 右缘安全边(2026-10-04) ─────────────────────────────────── 斜面本来就冲出右缘被 .hero 裁掉(herostage-r19 §1),但 r24 在最右一列放了 涨跌%、顶栏放了「逐笔实时」徽章、脚注放了法定免责声明 —— 面板右缘贴着视口, 这三样的右端被切掉。整块左收 48px,让最右一列落在视口内。 */ @media (min-width: 1024px) { .hstage { inset-inline-end: calc((100% - 100vw) / 2 + 48px); } } /* ── §N 不滚动 + 无变动不画线(2026-10-04) ───────────────────────── 数字直接换字,只保留变色淡出;整段无变动的行不画虚线,写「无变动」。 */ .qlv24 .qlv__d { overflow: visible; } .qlv__row[data-flat="series"] .qlv24__viz { position: relative; } .qlv__row[data-flat="series"] .qlv__spark { visibility: hidden; } .qlv__row[data-flat="series"] .qlv24__viz::before { content: '无变动'; position: absolute; inset-inline: 0; inset-block-start: 0; text-align: end; font-size: 10px; line-height: 1.6; color: var(--c-text-3, var(--c-text-2)); } html[lang^="en"] .qlv__row[data-flat="series"] .qlv24__viz::before { content: 'Unchanged'; } /* ── §P 首屏流畅度(2026-10-05) ─────────────────────────────────── 行情面板和执行流面板压在不断重绘的内容上(逐笔数字、走势线每帧位移、背景光场), backdrop-filter 每帧都要把背后整块重新模糊 —— 实测 1440 宽首屏 22fps → 去掉后 60fps。 玻璃的「透」靠底色不透明度保留,不再靠实时模糊。 */ .hero .hstage__panel { -webkit-backdrop-filter: none; backdrop-filter: none; background: linear-gradient(180deg, color-mix(in srgb, var(--c-surface) 92%, transparent), color-mix(in srgb, var(--c-surface) 86%, transparent)); } .hero .eyebrow--hero { -webkit-backdrop-filter: none; backdrop-filter: none; }