diff --git a/lib/common/static/hedge_plan.js b/lib/common/static/hedge_plan.js index b50a5e7..02582fd 100644 --- a/lib/common/static/hedge_plan.js +++ b/lib/common/static/hedge_plan.js @@ -1385,9 +1385,17 @@ const tag = $("hp-perp-acct-tag"); if (tag) tag.textContent = acctLabel; const amtPrec = d.amount_precision != null ? Number(d.amount_precision) : 4; + // 弹窗只保留一行行情;明细进测算折叠 const markEl = $("hp-po-mark"); - if (markEl) markEl.textContent = "标记 " + fmt(d.mark, 2); - // 指数优先用行情接口,期权链慢/失败时也不再显示 -- + if (markEl) { + markEl.textContent = + "标记 " + + fmt(d.mark, 2) + + " · 永续" + + (d.perp_direction === "short" ? "空" : "多") + + " · 面值 " + + fmt(d.contract_size, 4); + } const mIdx = d.index_px != null ? Number(d.index_px) : NaN; if (Number.isFinite(mIdx) && mIdx > 0) { const idxLine = $("hp-index-line"); @@ -1399,7 +1407,6 @@ ooIdx.textContent = "指数 " + fmt(mIdx, 2); } } - // OKX 交易账户 USDT 共用,永续行情不单独显示「可用 USDT」 const quoteHtml = "卖一 " + fmt(d.ask, 2) + @@ -1414,7 +1421,12 @@ ? " · 永续方向 " + (d.perp_direction === "short" ? "空" : "多") : ""); const q = $("hp-perp-quote"); - if (q) q.innerHTML = quoteHtml; + if (q) { + q.innerHTML = quoteHtml; + // 弹窗内行情已压缩到 mark 行,避免重复挤占 + if (q.closest && q.closest(".hp-po-order-dialog")) q.setAttribute("hidden", ""); + else q.removeAttribute("hidden"); + } const contractsInput = $("hp-contracts"); if (contractsInput) { const step = amtPrec <= 0 ? "1" : String(Math.pow(10, -amtPrec)); @@ -1732,7 +1744,7 @@ const ct = Number(state.selected.ct_mult || 0.01); const ask = Number(state.selected.ask || 0); const prem = ask * sheets * ct; - line.textContent = "预估权利金 ≈ " + fmt(prem, 4) + " 币(币本位) · 卖一 " + fmt(ask, 4); + line.textContent = "权利金 ≈ " + fmt(prem, 4) + " 币 · 卖一 " + fmt(ask, 4); } function buildStraddleRows(contracts) { diff --git a/lib/common/static/instance_theme.css b/lib/common/static/instance_theme.css index f56de5d..58414f7 100644 --- a/lib/common/static/instance_theme.css +++ b/lib/common/static/instance_theme.css @@ -3486,33 +3486,176 @@ html[data-theme="light"] .opt-be-dist-down { font-size: 0.82rem; line-height: 1.35; } -.hedge-plan-page-wrap .hp-po-order-dialog .hp-po-quote-compact { - display: flex; - flex-wrap: wrap; - gap: 8px 14px; - align-items: baseline; - font-size: 0.84rem; -} -.hedge-plan-page-wrap .hp-po-order-dialog .hp-po-quote-one { - margin: 2px 0 0; - font-size: 0.78rem; -} -.hedge-plan-page-wrap .hp-po-order-dialog .hp-po-order-calc { - margin-top: 4px; -} -.hedge-plan-page-wrap .hp-po-order-err { - margin: 6px 0 0; +.hedge-plan-page-wrap .hp-po-order-err, +.hp-po-order-dialog .hp-po-order-err { + margin: 8px 0 0; font-size: 0.82rem; } -.hedge-plan-page-wrap .hp-input-invalid { +.hedge-plan-page-wrap .hp-input-invalid, +.hp-po-order-dialog .hp-input-invalid { border-color: #e85d5d !important; box-shadow: 0 0 0 1px rgba(232, 93, 93, 0.45); } -.hedge-plan-page-wrap .hp-po-field--wide { +.hedge-plan-page-wrap .hp-po-field--wide, +.hp-po-order-dialog .hp-po-field--wide { grid-column: 1 / -1; } + +/* 弹窗挂 body 后脱离 .hedge-plan-page-wrap,样式必须写在 .hp-po-order-dialog 上 */ .opt-order-dialog.hp-po-order-dialog { - width: min(96vw, 560px); + width: min(94vw, 440px); + padding: 20px 22px 22px; + max-height: 90vh; +} +.hp-po-order-dialog .opt-order-main { + gap: 18px; +} +.hp-po-order-dialog .opt-order-dialog-head { + margin-bottom: 4px; +} +.hp-po-order-dialog .hp-po-dialog-x { + flex: 0 0 auto; + width: 32px; + height: 32px; + padding: 0; + border: none; + border-radius: 8px; + background: transparent; + color: #9aa4b2; + font-size: 1.35rem; + line-height: 1; + cursor: pointer; +} +.hp-po-order-dialog .hp-po-dialog-x:hover { + color: #fff; + background: rgba(255, 255, 255, 0.08); +} +.hp-po-order-dialog .hp-po-dialog-meta { + display: flex; + flex-direction: column; + gap: 6px; + padding-bottom: 4px; + border-bottom: 1px solid rgba(255, 255, 255, 0.06); +} +.hp-po-order-dialog .options-order-inst { + font-size: 0.92rem; + font-weight: 650; +} +.hp-po-order-dialog .hp-po-dialog-sub { + margin: 0; + font-size: 0.78rem; + line-height: 1.45; + color: #8b93a7; +} +.hp-po-order-dialog .hp-po-dialog-body { + display: flex; + flex-direction: column; + gap: 16px; +} +.hp-po-order-dialog .hp-po-section { + margin: 0; + display: flex; + flex-direction: column; + gap: 10px; +} +.hp-po-order-dialog .hp-po-section-title { + margin: 0; + font-size: 0.84rem; + font-weight: 650; + color: #c5cdd9; +} +.hp-po-order-dialog .hp-po-fields { + display: grid; + grid-template-columns: 1fr; + gap: 12px; + margin: 0; + padding: 14px; + border-radius: 10px; + background: rgba(255, 255, 255, 0.03); + border: 1px solid rgba(255, 255, 255, 0.07); +} +.hp-po-order-dialog .hp-po-fields--capital { + grid-template-columns: 1fr; +} +@media (min-width: 420px) { + .hp-po-order-dialog .hp-po-fields--capital { + grid-template-columns: repeat(3, minmax(0, 1fr)); + } + .hp-po-order-dialog #hp-po-exit-target.hp-po-fields { + grid-template-columns: 1fr 1fr; + } +} +.hp-po-order-dialog .hp-po-field { + display: flex; + flex-direction: column; + gap: 6px; + min-width: 0; + margin: 0; + font-size: 0.8rem; +} +.hp-po-order-dialog .hp-po-field-lab { + color: #9aa4b2; + font-size: 0.74rem; +} +.hp-po-order-dialog .hp-po-field-lab em { + font-style: normal; + color: #6b7388; + margin-left: 2px; +} +.hp-po-order-dialog .hp-po-field input { + width: 100%; + min-width: 0; + box-sizing: border-box; + min-height: 36px; + padding: 8px 10px; + font-size: 0.9rem; +} +.hp-po-order-dialog .hp-po-exit-seg { + display: flex; + gap: 8px; + flex-wrap: wrap; +} +.hp-po-order-dialog .hp-po-exit-mode { + flex: 1 1 120px; + min-height: 36px; +} +.hp-po-order-dialog .hp-po-exit-mode .hp-oo-check { + display: none; + margin-right: 4px; + font-weight: 700; +} +.hp-po-order-dialog .hp-po-exit-mode.is-selected, +.hp-po-order-dialog .hp-po-exit-mode.active { + border-color: var(--accent, #00d4ff); + color: var(--text, #fff); + background: rgba(0, 212, 255, 0.16); + box-shadow: inset 0 0 0 1px rgba(0, 212, 255, 0.35); + font-weight: 700; +} +.hp-po-order-dialog .hp-po-exit-mode.is-selected .hp-oo-check, +.hp-po-order-dialog .hp-po-exit-mode.active .hp-oo-check { + display: inline; + color: var(--accent, #00d4ff); +} +.hp-po-order-dialog .hp-po-order-calc { + margin: 0; +} +.hp-po-order-dialog .opt-order-dialog-actions { + margin-top: 4px; + padding-top: 14px; + border-top: 1px solid rgba(255, 255, 255, 0.06); + align-items: center; +} +.hp-po-order-dialog .opt-order-dialog-actions .hp-po-strategy-status { + flex: 1 1 auto; + font-size: 0.78rem; + color: #8b93a7; +} +.hp-po-order-dialog .opt-order-dialog-actions .btn-primary, +.hp-po-order-dialog .opt-order-dialog-actions .btn-secondary { + flex: 0 0 auto; + min-width: 96px; + min-height: 40px; } .hedge-plan-page-wrap .hp-po-top { display: flex; diff --git a/lib/hedge_plan/templates/hedge_plan_panel.html b/lib/hedge_plan/templates/hedge_plan_panel.html index 8ea165c..7e47496 100644 --- a/lib/hedge_plan/templates/hedge_plan_panel.html +++ b/lib/hedge_plan/templates/hedge_plan_panel.html @@ -101,22 +101,22 @@
- +