Show selected state on OO money filters and recommend buttons.
Muted idle chips, cyan checkmark when active so 平/虚 and 推荐跨式/双虚 are obvious after click. Co-authored-by: Cursor <cursoragent@cursor.com>
This commit is contained in:
@@ -24,6 +24,7 @@
|
||||
underlying: root.getAttribute("data-default-underly") || "ETH",
|
||||
moneyFilter: "itm", // 永期锁定:实值+平值
|
||||
ooMoneyFilter: "atm_otm", // 期期锁定:平值+虚值
|
||||
ooRecommend: null, // atm_straddle | double_otm | null
|
||||
chain: null,
|
||||
selected: null,
|
||||
legA: null,
|
||||
@@ -245,10 +246,24 @@
|
||||
document.querySelectorAll(".hp-money-btn").forEach(function (b) {
|
||||
const on = b.getAttribute("data-money") === state.moneyFilter;
|
||||
b.classList.toggle("active", on);
|
||||
b.classList.toggle("is-selected", on);
|
||||
b.setAttribute("aria-pressed", on ? "true" : "false");
|
||||
});
|
||||
document.querySelectorAll(".hp-oo-money-btn").forEach(function (b) {
|
||||
const on = b.getAttribute("data-oo-money") === state.ooMoneyFilter;
|
||||
b.classList.toggle("active", on);
|
||||
b.classList.toggle("is-selected", on);
|
||||
b.setAttribute("aria-pressed", on ? "true" : "false");
|
||||
});
|
||||
}
|
||||
|
||||
function syncOoRecommendUI() {
|
||||
const cur = state.ooRecommend || "";
|
||||
document.querySelectorAll(".hp-oo-recommend-btn").forEach(function (b) {
|
||||
const on = (b.getAttribute("data-oo-rec") || "") === cur;
|
||||
b.classList.toggle("active", on);
|
||||
b.classList.toggle("is-selected", on);
|
||||
b.setAttribute("aria-pressed", on ? "true" : "false");
|
||||
});
|
||||
}
|
||||
|
||||
@@ -1003,6 +1018,8 @@
|
||||
state.legA = c;
|
||||
state.legB = null;
|
||||
}
|
||||
state.ooRecommend = null;
|
||||
syncOoRecommendUI();
|
||||
renderOoLegs();
|
||||
});
|
||||
});
|
||||
@@ -1091,6 +1108,8 @@
|
||||
state.selected = null;
|
||||
state.legA = null;
|
||||
state.legB = null;
|
||||
state.ooRecommend = null;
|
||||
syncOoRecommendUI();
|
||||
if ($("hp-entry")) $("hp-entry").value = "";
|
||||
if ($("hp-contracts")) $("hp-contracts").value = "";
|
||||
if ($("hp-tp")) $("hp-tp").value = "";
|
||||
@@ -1348,6 +1367,8 @@
|
||||
}
|
||||
state.legA = pair.call;
|
||||
state.legB = pair.put;
|
||||
state.ooRecommend = "atm_straddle";
|
||||
syncOoRecommendUI();
|
||||
renderOoLegs();
|
||||
autoFillOoSheets();
|
||||
updateOoPremiumLine();
|
||||
@@ -1362,6 +1383,8 @@
|
||||
}
|
||||
state.legA = pair.call;
|
||||
state.legB = pair.put;
|
||||
state.ooRecommend = "double_otm";
|
||||
syncOoRecommendUI();
|
||||
renderOoLegs();
|
||||
autoFillOoSheets();
|
||||
updateOoPremiumLine();
|
||||
@@ -2052,6 +2075,7 @@
|
||||
syncTabUI();
|
||||
syncUnderlyingUI();
|
||||
syncMoneyUI();
|
||||
syncOoRecommendUI();
|
||||
syncPoDirUI();
|
||||
syncOoSizeModeUI();
|
||||
syncOoCloseModeUI();
|
||||
|
||||
@@ -3643,7 +3643,9 @@ html[data-theme="light"] .opt-be-dist-down {
|
||||
}
|
||||
.hedge-plan-page-wrap .hp-uly-btn,
|
||||
.hedge-plan-page-wrap .hp-uly-btn-oo,
|
||||
.hedge-plan-page-wrap .hp-money-btn {
|
||||
.hedge-plan-page-wrap .hp-money-btn,
|
||||
.hedge-plan-page-wrap .hp-oo-money-btn,
|
||||
.hedge-plan-page-wrap .hp-oo-recommend-btn {
|
||||
min-width: 52px;
|
||||
font-weight: 600;
|
||||
border: 1px solid rgba(255, 255, 255, 0.14);
|
||||
@@ -3652,11 +3654,29 @@ html[data-theme="light"] .opt-be-dist-down {
|
||||
}
|
||||
.hedge-plan-page-wrap .hp-uly-btn.active,
|
||||
.hedge-plan-page-wrap .hp-uly-btn-oo.active,
|
||||
.hedge-plan-page-wrap .hp-money-btn.active {
|
||||
color: #0b1220;
|
||||
background: linear-gradient(180deg, #ffffff 0%, #9ec0ff 100%);
|
||||
border-color: #fff;
|
||||
box-shadow: 0 0 0 2px rgba(100, 160, 255, 0.5);
|
||||
.hedge-plan-page-wrap .hp-money-btn.active,
|
||||
.hedge-plan-page-wrap .hp-oo-money-btn.is-selected,
|
||||
.hedge-plan-page-wrap .hp-oo-money-btn.active,
|
||||
.hedge-plan-page-wrap .hp-oo-recommend-btn.is-selected,
|
||||
.hedge-plan-page-wrap .hp-oo-recommend-btn.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;
|
||||
}
|
||||
.hedge-plan-page-wrap .hp-oo-money-btn .hp-oo-check,
|
||||
.hedge-plan-page-wrap .hp-oo-recommend-btn .hp-oo-check {
|
||||
display: none;
|
||||
margin-right: 4px;
|
||||
font-weight: 700;
|
||||
}
|
||||
.hedge-plan-page-wrap .hp-oo-money-btn.is-selected .hp-oo-check,
|
||||
.hedge-plan-page-wrap .hp-oo-money-btn.active .hp-oo-check,
|
||||
.hedge-plan-page-wrap .hp-oo-recommend-btn.is-selected .hp-oo-check,
|
||||
.hedge-plan-page-wrap .hp-oo-recommend-btn.active .hp-oo-check {
|
||||
display: inline;
|
||||
color: var(--accent, #00d4ff);
|
||||
}
|
||||
.hedge-plan-page-wrap .hp-money-hint {
|
||||
font-size: 0.68rem;
|
||||
@@ -3676,7 +3696,9 @@ html[data-theme="light"] .opt-be-dist-down {
|
||||
min-height: 26px;
|
||||
}
|
||||
.hedge-plan-page-wrap .hp-opt-toolbar .btn-secondary,
|
||||
.hedge-plan-page-wrap .hp-opt-toolbar .hp-money-btn {
|
||||
.hedge-plan-page-wrap .hp-opt-toolbar .hp-money-btn,
|
||||
.hedge-plan-page-wrap .hp-oo-money-btn,
|
||||
.hedge-plan-page-wrap .hp-oo-recommend-btn {
|
||||
padding: 3px 8px;
|
||||
min-height: 26px;
|
||||
font-size: 0.72rem;
|
||||
@@ -3907,10 +3929,15 @@ html[data-theme="light"] .hedge-plan-page-wrap .hp-tab.active {
|
||||
}
|
||||
html[data-theme="light"] .hedge-plan-page-wrap .hp-uly-btn.active,
|
||||
html[data-theme="light"] .hedge-plan-page-wrap .hp-uly-btn-oo.active,
|
||||
html[data-theme="light"] .hedge-plan-page-wrap .hp-money-btn.active {
|
||||
html[data-theme="light"] .hedge-plan-page-wrap .hp-money-btn.active,
|
||||
html[data-theme="light"] .hedge-plan-page-wrap .hp-oo-money-btn.is-selected,
|
||||
html[data-theme="light"] .hedge-plan-page-wrap .hp-oo-money-btn.active,
|
||||
html[data-theme="light"] .hedge-plan-page-wrap .hp-oo-recommend-btn.is-selected,
|
||||
html[data-theme="light"] .hedge-plan-page-wrap .hp-oo-recommend-btn.active {
|
||||
color: #0b1220;
|
||||
background: linear-gradient(180deg, #ffffff 0%, #b9d2ff 100%);
|
||||
border-color: #2f6fed;
|
||||
box-shadow: 0 0 0 2px rgba(47, 111, 237, 0.25);
|
||||
}
|
||||
html[data-theme="light"] .hedge-plan-page-wrap .hp-placeholder {
|
||||
border-color: rgba(15, 23, 42, 0.18);
|
||||
|
||||
@@ -185,11 +185,11 @@
|
||||
<h2>期权 T 型报价</h2>
|
||||
<div class="form-row">
|
||||
<select id="hp-oo-exp-select"><option value="">选择到期日</option></select>
|
||||
<button type="button" class="btn-secondary hp-oo-money-btn active" data-oo-money="atm_otm" title="平值+虚值">平/虚</button>
|
||||
<button type="button" class="btn-secondary hp-oo-money-btn" data-oo-money="atm" title="仅平值">仅平值</button>
|
||||
<button type="button" class="btn-secondary hp-oo-money-btn" data-oo-money="otm" title="仅虚值">仅虚值</button>
|
||||
<button type="button" class="btn-secondary" id="hp-oo-recommend-atm" title="最近平值 Call+Put">推荐跨式</button>
|
||||
<button type="button" class="btn-secondary" id="hp-oo-recommend-otm" title="最近虚值 Call+Put">推荐双虚</button>
|
||||
<button type="button" class="btn-secondary hp-oo-money-btn is-selected active" data-oo-money="atm_otm" title="平值+虚值" aria-pressed="true"><span class="hp-oo-check" aria-hidden="true">✓</span>平/虚</button>
|
||||
<button type="button" class="btn-secondary hp-oo-money-btn" data-oo-money="atm" title="仅平值" aria-pressed="false"><span class="hp-oo-check" aria-hidden="true">✓</span>仅平值</button>
|
||||
<button type="button" class="btn-secondary hp-oo-money-btn" data-oo-money="otm" title="仅虚值" aria-pressed="false"><span class="hp-oo-check" aria-hidden="true">✓</span>仅虚值</button>
|
||||
<button type="button" class="btn-secondary hp-oo-recommend-btn" id="hp-oo-recommend-atm" data-oo-rec="atm_straddle" title="最近平值 Call+Put" aria-pressed="false"><span class="hp-oo-check" aria-hidden="true">✓</span>推荐跨式</button>
|
||||
<button type="button" class="btn-secondary hp-oo-recommend-btn" id="hp-oo-recommend-otm" data-oo-rec="double_otm" title="最近虚值 Call+Put" aria-pressed="false"><span class="hp-oo-check" aria-hidden="true">✓</span>推荐双虚</button>
|
||||
<button type="button" class="btn-secondary" id="hp-oo-load-chain">刷新链</button>
|
||||
</div>
|
||||
<div class="options-strike-table-wrap options-strike-table-wrap--t">
|
||||
@@ -327,4 +327,4 @@
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<script src="/static/hedge_plan.js?v=34"></script>
|
||||
<script src="/static/hedge_plan.js?v=35"></script>
|
||||
|
||||
@@ -8,7 +8,7 @@
|
||||
<link rel="stylesheet" href="/static/instance_theme_early.css?v=4">
|
||||
<link rel="stylesheet" href="/static/account_risk_badge.css?v=4">
|
||||
<link rel="stylesheet" href="/static/instance_page.css?v=13">
|
||||
<link rel="stylesheet" href="/static/instance_theme.css?v=112">
|
||||
<link rel="stylesheet" href="/static/instance_theme.css?v=113">
|
||||
<script src="/static/account_risk_badge.js?v=4"></script>
|
||||
<script src="/static/open_submit_gate.js?v=1"></script>
|
||||
<meta name="theme-color" content="#0b0d14">
|
||||
|
||||
@@ -19,7 +19,7 @@
|
||||
<link rel="manifest" href="/static/icons/manifest.webmanifest">
|
||||
<title>{{ pwa_app_name }}</title>
|
||||
<link rel="stylesheet" href="/static/instance_page.css?v=13">
|
||||
<link rel="stylesheet" href="/static/instance_theme.css?v=112">
|
||||
<link rel="stylesheet" href="/static/instance_theme.css?v=113">
|
||||
|
||||
</head>
|
||||
<body
|
||||
|
||||
Reference in New Issue
Block a user