/** * 全站行情条（Tape Bar）— UI 升级 P0-2 * * 深色行情带：复用数据大屏深色 token（--dash-*，design-tokens.css）， * 红涨绿跌用深底提亮变体（--color-rise/fall 是浅底色阶，深底上辨识度不足）。 * 数字排印走 .num-fin 语义（等宽 + mono）。 * 消费方：common/header.html（容器）+ js/web/common/header/market-tape.js（数据渲染）。 * 数据过期 / 接口失败 → JS 保持 [hidden]，整条不占位。 */ .market-tape{position:relative;height:34px;background:var(--dash-bg-deep);border-bottom:1px solid rgba(0,212,255,0.14);overflow:hidden;user-select:none}.market-tape::before,.market-tape::after{content:'';position:absolute;top:0;bottom:0;width:48px;z-index:2;pointer-events:none}.market-tape::before{left:0;background:linear-gradient(to right,var(--dash-bg-deep),transparent)}.market-tape::after{right:0;background:linear-gradient(to left,var(--dash-bg-deep),transparent)}.market-tape-track{display:flex;align-items:center;gap:0;height:34px;width:max-content;will-change:transform}.market-tape-track.is-scrolling{animation:market-tape-scroll 60s linear infinite}.market-tape:hover .market-tape-track.is-scrolling{animation-play-state:paused}@keyframes market-tape-scroll{from{transform:translateX(0)}to{transform:translateX(-50%)}}.mt-item{display:inline-flex;align-items:baseline;gap:7px;padding:0 14px;white-space:nowrap;text-decoration:none}.mt-name{font-size:12px;color:var(--dash-text)}.mt-price{font-size:12px;font-weight:600;font-variant-numeric:tabular-nums;font-family:var(--font-family-mono);color:var(--dash-text)}.mt-item.mt-up .mt-price{color:#ff6f61}.mt-item.mt-down .mt-price{color:#35d99a}.mt-change{display:inline-flex;align-items:center;font-size:11px;font-variant-numeric:tabular-nums;font-family:var(--font-family-mono);border-radius:var(--radius-xs);padding:0 4px;line-height:18px}.mt-item.mt-up .mt-change{color:#ff8d82;background:rgba(232,64,37,0.16)}.mt-item.mt-down .mt-change{color:#52e0ac;background:rgba(26,170,85,0.14)}.mt-item.mt-flat .mt-change{color:var(--dash-text-dim);background:rgba(224,230,240,0.08)}.mt-arrow{font-size:9px;line-height:1}@media (prefers-reduced-motion:reduce){.market-tape-track.is-scrolling{animation:none}}@media screen and (max-width:768px){.market-tape{height:30px}.market-tape-track{height:30px}.mt-item{gap:5px;padding:0 10px}.mt-name,.mt-price{font-size:11px}}