dekun/CoinOX
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Relax perp order dialog spacing; fix styles when dialog mounts on body.

Browse Source 
Co-authored-by: Cursor <cursoragent@cursor.com>
This commit is contained in:
dekun
2026-10-14 16:25:22 +08:00
parent 7d29181a04
commit 5c95625817
3 changed files with 194 additions and 39 deletions
Download Patch File Download Diff File Expand all files Collapse all files
lib/common/static/hedge_plan.js
+17 -5
View File
@@ -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) {
lib/common/static/instance_theme.css
+162 -19
View File
@@ -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;