diff --git a/lib/common/static/instance_theme.css b/lib/common/static/instance_theme.css index 8787d71..fd2d41d 100644 --- a/lib/common/static/instance_theme.css +++ b/lib/common/static/instance_theme.css @@ -3597,6 +3597,173 @@ html[data-theme="light"] .options-estimate-row { .options-page-wrap .opt-pos-card .pos-value { font-size: 0.78rem; } +.options-page-wrap .opt-pos-cell--depth { + grid-column: span 2; +} +.options-page-wrap .opt-bid-depth { + display: flex; + flex-wrap: wrap; + gap: 5px; + align-items: center; +} +.options-page-wrap .opt-bid-level { + display: inline-grid; + grid-template-columns: auto auto auto; + align-items: center; + gap: 4px; + min-height: 24px; + padding: 3px 7px; + border: 1px solid rgba(82, 101, 143, 0.55); + border-radius: 999px; + background: rgba(18, 24, 37, 0.72); + color: #dbe6ff; + line-height: 1; + font-variant-numeric: tabular-nums; +} +.options-page-wrap .opt-bid-level--best { + border-color: rgba(93, 143, 255, 0.9); + background: linear-gradient(135deg, rgba(47, 86, 170, 0.72), rgba(28, 39, 68, 0.84)); + box-shadow: inset 0 0 0 1px rgba(122, 164, 255, 0.1), 0 6px 14px rgba(24, 46, 92, 0.24); +} +.options-page-wrap .opt-bid-rank { + color: #91a4cc; + font-size: 0.64rem; + font-weight: 600; +} +.options-page-wrap .opt-bid-level--best .opt-bid-rank { + color: #c8d8ff; +} +.options-page-wrap .opt-bid-price { + color: #ffffff; + font-weight: 700; +} +.options-page-wrap .opt-bid-size { + color: #93a2bd; + font-size: 0.66rem; +} +.options-page-wrap .opt-close-preview { + display: flex; + flex-direction: column; + gap: 5px; + align-items: flex-start; +} +.options-page-wrap .opt-close-main { + display: inline-flex; + align-items: baseline; + gap: 4px; + color: #ff7b87; + font-size: 0.9rem; + font-weight: 800; + font-variant-numeric: tabular-nums; + line-height: 1.05; +} +.options-page-wrap .opt-close-main span { + color: #9aa8c2; + font-size: 0.62rem; + font-weight: 600; +} +.options-page-wrap .opt-close-sub { + display: flex; + flex-wrap: wrap; + gap: 4px; + align-items: center; +} +.options-page-wrap .opt-close-pill, +.options-page-wrap .opt-close-pnl { + display: inline-flex; + align-items: center; + min-height: 20px; + padding: 2px 6px; + border-radius: 999px; + font-size: 0.64rem; + font-weight: 650; + line-height: 1; + font-variant-numeric: tabular-nums; +} +.options-page-wrap .opt-close-pill--ok { + color: #9fe6c1; + background: rgba(40, 154, 104, 0.16); + border: 1px solid rgba(67, 190, 128, 0.35); +} +.options-page-wrap .opt-close-pill--warn { + color: #ffd0d5; + background: rgba(214, 80, 96, 0.16); + border: 1px solid rgba(233, 104, 118, 0.35); +} +.options-page-wrap .opt-close-pnl { + color: #9aa8c2; + background: rgba(82, 101, 143, 0.18); + border: 1px solid rgba(82, 101, 143, 0.34); +} +.options-page-wrap .opt-close-pnl.is-profit { + color: #8ce9bb; +} +.options-page-wrap .opt-close-pnl.is-loss { + color: #ff97a2; +} +.options-page-wrap .opt-close-rule { + margin-top: 8px; + padding: 0; + border: 1px solid rgba(67, 82, 118, 0.55); + border-radius: 10px; + background: rgba(14, 19, 30, 0.58); + overflow: hidden; +} +.options-page-wrap .opt-close-rule summary { + display: flex; + align-items: center; + justify-content: space-between; + gap: 8px; + padding: 8px 10px; + color: #c9d6f2; + font-size: 0.72rem; + font-weight: 650; + cursor: pointer; + user-select: none; + list-style: none; +} +.options-page-wrap .opt-close-rule summary::-webkit-details-marker { + display: none; +} +.options-page-wrap .opt-close-rule summary::after { + content: "展开"; + padding: 2px 7px; + border-radius: 999px; + background: rgba(82, 101, 143, 0.25); + color: #91a4cc; + font-size: 0.62rem; + font-weight: 600; +} +.options-page-wrap .opt-close-rule[open] summary { + border-bottom: 1px solid rgba(67, 82, 118, 0.45); + background: rgba(28, 38, 60, 0.55); +} +.options-page-wrap .opt-close-rule[open] summary::after { + content: "收起"; +} +.options-page-wrap .opt-close-rule-body { + padding: 8px 10px 10px; + color: #96a4bf; + font-size: 0.7rem; + line-height: 1.55; +} +.options-page-wrap .opt-close-rule-body p { + margin: 0 0 6px; + color: #b6c2dc; +} +.options-page-wrap .opt-close-rule-body ul { + margin: 0; + padding-left: 16px; +} +.options-page-wrap .opt-close-rule-body li + li { + margin-top: 3px; +} +.options-page-wrap .opt-close-rule-body code { + color: #dbe6ff; + background: rgba(82, 101, 143, 0.22); + border-radius: 4px; + padding: 1px 4px; +} .options-page-wrap .pos-empty { padding: 10px; font-size: 0.72rem; diff --git a/lib/common/static/options_panel.js b/lib/common/static/options_panel.js index 56aa1a3..196f4ee 100644 --- a/lib/common/static/options_panel.js +++ b/lib/common/static/options_panel.js @@ -188,12 +188,36 @@ function fmtBidDepth(levels) { const bids = (levels || []).slice(0, 5); if (!bids.length) return "—"; - return bids.map(function (x, idx) { - return "买" + (idx + 1) + " " + fmtPxSz(x.px, x.sz); - }).join(" · "); + return '