/* ============================================================================= * h5-fixes-round6.css — H5 收口·第六波·纯样式覆盖(零功能丢失) * 端: H5 预览副本 D:/最新版项目包/JP项目审计最终包/preview-h5/ * 注入: index.html 末尾(在既有 CSS 、尤其 round5 之后): * * 性质: 只调样式(换行/裁切/清晰度),不删功能、不改主包逻辑、不绑业务事件、不动接口。 * 回滚: 删除该 行并删除本文件即可,无持久化副作用。 * * 设计令牌(沿用 index-JmA2uOWk.css / uiux-h5pc-binance.css): * bg #0B0E11 / surface #181A20 / surface2 #1E2329 / border #2B3139 * text #EAECEF / muted #848E9C / gold #FCD535 / danger #F6465D / 买 #3D7EFF * ========================================================================== */ /* ----------------------------------------------------------------------------- * [B] 交易页「杠杆」胶囊行右侧溢出修复(收窄作用域,绝不波及其它横滑条) * * 实测(预览 4199 · 交易页 · KO · 无补丁基线): * 杠杆行 =
* 内含 7 颗 flex-shrink:0 胶囊(5x 10x 20x 30x 40x 50x 100x) * scrollWidth=404 > clientWidth=329 → 100x 被裁/需横向滚动才可见。 * * 为什么不能用裸 .no-scrollbar{flex-wrap:wrap}(原写法的过宽缺陷): * .no-scrollbar 是全站横滑 utility,实测同时命中下列【设计上必须保持单行横滑】的容器, * 裸规则会把它们全部强制换行、破坏布局: * · 行情页品种分类标签栏:
* (관심/전체/금속/농산물/에너지/지수/외환) 实测 scrollW 490 > clientW 391,本就该横滑。 * · 交易/持仓页多处 gap:8 的 flex 横滑条(主包内 5 处 gap:8 + 1 处 gap:7)。 * * 收窄锚点(已对主包 index-D7as98F1.js 全量核验,组合全站唯一): * 只有杠杆行同时满足 no-scrollbar + 内联 gap:6px + 内联 margin-bottom:10px(display:flex)。 * 主包内 no-scrollbar 的 gap 取值分布:gap:6 ×1(=杠杆行)、gap:7 ×1、gap:8 ×5。 * 故用两个属性子串 AND 精确命中杠杆行,且【结构性排除】: * - 品种标签栏/其它横滑条 = gap:8px 或 gap:7px → 不含 "gap: 6px" → 不命中。 * - 时间周期行 = display:grid;gap:8px → 不含 "gap: 6px" 也非 flex → 不命中。 * 浏览器把内联 gap:6/marginBottom:10 序列化为 "gap: 6px" / "margin-bottom: 10px" * (已实测 inline = "display: flex; gap: 6px; overflow-x: auto; margin-bottom: 10px;")。 * * 效果: 仅杠杆行换行,5x…100x 全部可见、不裁切、不需横滚;其余 no-scrollbar 横滑条零影响。 * 只改 flex-wrap,不动 overflow,避免对容器滚动模型产生副作用。 * -------------------------------------------------------------------------- */ .no-scrollbar[style*="gap: 6px"][style*="margin-bottom: 10px"] { flex-wrap: wrap !important; row-gap: 6px !important; } /* ----------------------------------------------------------------------------- * [C] K线区「不标准」—— 可由 CSS 修正的清晰度/裁切部分 * * 实测根因(预览 4199 · 交易页 · TradingView Lightweight Charts): * 主图 K线 canvas 的「位图分辨率(canvas.width/height 属性)」恒为浏览器默认 300×150, * 而 CSS 显示尺寸为 384×292(dpr=1)/×2(dpr=2)→ 位图被纵向 150→292 拉伸近 2 倍、 * 横向 300→384 拉伸 → 蜡烛模糊、变形(= 主要「不标准」观感)。 * 且右侧价格轴 宽度塌成 0(价格刻度 canvas cssWidth=0)→ 右价轴/价签不显示。 * * 说明(诚实边界): * 位图分辨率(canvas 属性宽高)与价轴 的 0 宽,都由主包内 lightweight-charts * 实例在 JS 里设定/重算(本实例以固定 {width,height} 创建、无 autoSize/ResizeObserver, * 外部 resize 事件与容器尺寸扰动均无效——已实测)。CSS 既【无法】设置 canvas 位图分辨率, * 也【无法】正确撑开由库自身坐标系管理的 0 宽价轴(强行 CSS 撑宽会令价签绘制错位、更不标准)。 * → 该两项需主包侧补一次 chart.applyOptions({width,height}) / chart.resize() 或 * 改 autoSize:true(已在产出说明中标注给主包负责方),非 CSS 补丁层能根治。 * * 本层只做 CSS 能稳妥承担的「最小修正」(不放大问题、不伪装): * 1) 给被拉伸的 K线 canvas 加 image-rendering 提示,缩放时边缘更利落、减轻糊感(纯观感)。 * 2) 容器 overflow 容错: 价签若由主包修复后超出,不被裁切(为后续根治留出余量)。 * 仅命中 lightweight-charts 自身根节点 .tv-lightweight-charts,绝不波及其它 canvas。 * -------------------------------------------------------------------------- */ .tv-lightweight-charts canvas { image-rendering: -webkit-optimize-contrast; /* 拉伸时锐化(WebKit/Blink) */ image-rendering: crisp-edges; } /* 价格轴/价签一旦由主包修复获得宽度,容器不要把它裁掉 */ .tv-lightweight-charts, .tv-lightweight-charts table { overflow: visible !important; } /* lightweight-charts 内部 table 假定 content-box 默认值; * 防止站点全局 table{box-sizing:border-box} 泄漏污染其像素计算(已实测全局泄漏)。 */ .tv-lightweight-charts table, .tv-lightweight-charts tr, .tv-lightweight-charts td { box-sizing: content-box !important; border-spacing: 0 !important; border-collapse: collapse !important; padding: 0 !important; }