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

Options: loosen order dialog spacing and stack mode/note rows.

Browse Source 
Co-authored-by: Cursor <cursoragent@cursor.com>
This commit is contained in:
dekun
2026-07-20 08:15:55 +08:00
parent 4e614eb9ed
commit 972ef4f910
4 changed files with 139 additions and 64 deletions
Download Patch File Download Diff File Expand all files Collapse all files
lib/common/static/instance_theme.css
+107 -36
View File
@@ -3937,14 +3937,14 @@ html[data-theme="light"] .options-strike-table--t .opt-strike-row-atm td {
display: none !important;
}
.opt-order-dialog {
width: min(96vw, 720px);
width: min(96vw, 760px);
max-height: 92vh;
overflow: auto;
background: var(--card-bg, #121726);
color: inherit;
border: 1px solid rgba(127, 127, 127, 0.35);
border-radius: 12px;
padding: 14px 16px 16px;
border-radius: 14px;
padding: 18px 20px 20px;
box-shadow: 0 12px 40px rgba(0, 0, 0, 0.45);
}
.opt-order-layout {
@@ -3952,6 +3952,18 @@ html[data-theme="light"] .options-strike-table--t .opt-strike-row-atm td {
}
.opt-order-main {
min-width: 0;
display: flex;
flex-direction: column;
gap: 14px;
}
.opt-order-dialog #opt-order-inst,
.opt-order-dialog .options-order-inst {
font-size: 0.95rem;
font-weight: 600;
letter-spacing: 0.01em;
line-height: 1.4;
word-break: break-all;
margin: 0;
}
.opt-order-pending-head {
display: flex;
@@ -4040,48 +4052,73 @@ html[data-theme="light"] .opt-pending-item {
gap: 8px;
margin-bottom: 10px;
}
.opt-order-dialog-head {
margin-bottom: 4px;
}
.opt-order-dialog-head .opt-order-title {
margin: 0;
margin-right: auto;
font-size: 0.95rem;
font-size: 1.02rem;
color: #9ec0ff;
font-weight: 650;
}
.opt-order-dialog-actions {
display: flex;
flex-wrap: wrap;
gap: 8px;
margin-top: 10px;
gap: 10px;
margin-top: 4px;
}
.opt-order-dialog-actions .btn-primary,
.opt-order-dialog-actions .btn-secondary {
flex: 1 1 140px;
min-height: 38px;
font-size: 0.86rem;
padding: 8px 14px;
}
.opt-order-dialog #opt-order-msg {
margin-top: 2px;
min-height: 1.2em;
line-height: 1.4;
}
.options-order-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
gap: 10px;
margin: 10px 0;
grid-template-columns: repeat(auto-fit, minmax(148px, 1fr));
gap: 12px 14px;
margin: 0;
padding: 12px 12px;
border-radius: 10px;
background: rgba(255, 255, 255, 0.03);
border: 1px solid rgba(255, 255, 255, 0.06);
}
.options-order-grid .k {
display: block;
font-size: 0.68rem;
font-size: 0.7rem;
color: #8892b0;
margin-bottom: 3px;
}
.options-order-grid .v,
.options-page-wrap .options-order-grid .v {
font-size: 0.8rem;
font-size: 0.86rem;
font-weight: 600;
line-height: 1.35;
}
.options-estimate-row {
display: flex;
flex-direction: column;
align-items: stretch;
gap: 10px;
margin: 0;
padding: 12px 14px;
border-radius: 10px;
background: rgba(255, 255, 255, 0.03);
border: 1px dashed rgba(255, 255, 255, 0.12);
font-size: 0.78rem;
}
.opt-est-main {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 8px 12px;
margin: 8px 0 10px;
padding: 8px 10px;
border-radius: 8px;
background: rgba(255, 255, 255, 0.03);
border: 1px dashed rgba(255, 255, 255, 0.08);
font-size: 0.74rem;
gap: 10px 12px;
}
.opt-order-chip {
display: inline-flex;
@@ -4090,11 +4127,20 @@ html[data-theme="light"] .opt-pending-item {
margin: 0;
cursor: pointer;
user-select: none;
font-size: 0.72rem;
padding: 3px 10px;
min-height: 26px;
font-size: 0.76rem;
padding: 6px 12px;
min-height: 32px;
line-height: 1.2;
white-space: nowrap;
border: 1px solid rgba(140, 160, 200, 0.35);
border-radius: 8px;
background: rgba(255, 255, 255, 0.04);
color: inherit;
box-sizing: border-box;
}
.opt-order-chip:hover {
border-color: rgba(140, 170, 230, 0.55);
background: rgba(255, 255, 255, 0.07);
}
.opt-size-mode-chip {
position: relative;
@@ -4116,40 +4162,52 @@ html[data-theme="light"] .opt-pending-item {
box-shadow: inset 0 0 0 1px rgba(120, 160, 255, 0.45);
}
.options-estimate-row .opt-target-idx {
width: 120px;
font-size: 0.74rem;
padding: 3px 6px;
width: 140px;
font-size: 0.8rem;
padding: 6px 8px;
min-height: 32px;
box-sizing: border-box;
}
.options-estimate-row .k {
color: #8892b0;
}
.options-estimate-row .v {
font-size: 0.82rem;
font-size: 0.86rem;
font-weight: 600;
}
.options-estimate-row .opt-est-note {
font-size: 0.66rem;
display: block;
font-size: 0.7rem;
line-height: 1.45;
opacity: 0.85;
}
html[data-theme="light"] .options-estimate-row {
html[data-theme="light"] .options-estimate-row,
html[data-theme="light"] .options-order-grid {
background: rgba(0, 0, 0, 0.02);
border-color: rgba(0, 0, 0, 0.08);
border-color: rgba(0, 0, 0, 0.1);
}
html[data-theme="light"] .opt-order-chip {
border-color: rgba(0, 0, 0, 0.16);
background: #fff;
}
.options-hint {
font-size: 0.75rem;
margin-bottom: 6px;
}
.options-page-wrap .options-order-mode-row {
font-size: 0.74rem;
gap: 6px;
font-size: 0.78rem;
gap: 10px;
}
.options-page-wrap .options-order-mode-row input[type="number"],
.options-page-wrap .options-order-mode-row input[type="text"] {
font-size: 0.74rem;
padding: 3px 6px;
font-size: 0.8rem;
padding: 6px 8px;
min-height: 32px;
box-sizing: border-box;
}
.options-page-wrap .options-order-mode-row .btn-primary {
font-size: 0.74rem;
padding: 4px 10px;
font-size: 0.8rem;
padding: 6px 12px;
}
.options-page-wrap .opt-row-actions .btn-primary,
.options-page-wrap .opt-row-actions .btn-secondary {
@@ -4191,13 +4249,26 @@ html[data-theme="light"] .options-estimate-row {
background: rgba(255, 209, 102, 0.12);
}
.options-order-mode-row {
display: flex;
flex-direction: column;
align-items: stretch;
gap: 10px;
margin: 0;
}
.opt-size-mode-bar {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 8px;
gap: 10px;
}
.options-order-mode-row input[type="number"] {
width: 88px;
width: 96px;
}
.options-order-mode-row .opt-signal-note,
.options-order-mode-row #opt-signal-note {
width: 100%;
max-width: 100%;
box-sizing: border-box;
}
.options-order-mode-row .opt-order-chip {
flex: 0 0 auto;
lib/instance/templates/embed_shell.html
+1 -1
View File
@@ -7,7 +7,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=11">
<link rel="stylesheet" href="/static/instance_theme.css?v=100">
<link rel="stylesheet" href="/static/instance_theme.css?v=101">
<script src="/static/account_risk_badge.js?v=4"></script>
<meta name="theme-color" content="#0b0d14">
<title>{{ pwa_app_name }}</title>
lib/instance/templates/index.html
+1 -1
View File
@@ -17,7 +17,7 @@
<link rel="manifest" href="/static/icons/manifest.webmanifest">
<title>{{ pwa_app_name }}</title>
<link rel="stylesheet" href="/static/instance_page.css?v=11">
<link rel="stylesheet" href="/static/instance_theme.css?v=100">
<link rel="stylesheet" href="/static/instance_theme.css?v=101">
</head>
<body
lib/options/templates/options_panel.html
+30 -26
View File
@@ -85,34 +85,38 @@
<div><span class="k">距平衡</span><span id="opt-order-dist-be" class="v">—</span></div>
</div>
<div class="options-estimate-row">
<label class="btn-secondary opt-order-chip" for="opt-target-idx">目标位(指数)</label>
<input type="number" id="opt-target-idx" class="opt-target-idx" step="0.1" min="0" placeholder="达价限价平仓">
<span class="k">预计价值</span>
<span id="opt-est-value" class="v">—</span>
<span class="k">盈利</span>
<span id="opt-est-profit" class="v">—</span>
<span class="k">目标杠杆</span>
<span id="opt-est-leverage" class="v" title="目标位名义价值÷权利金">—</span>
<div class="opt-est-main">
<label class="btn-secondary opt-order-chip" for="opt-target-idx">目标位(指数)</label>
<input type="number" id="opt-target-idx" class="opt-target-idx" step="0.1" min="0" placeholder="达价限价平仓">
<span class="k">预计价值</span>
<span id="opt-est-value" class="v">—</span>
<span class="k">盈利</span>
<span id="opt-est-profit" class="v">—</span>
<span class="k">目标杠杆</span>
<span id="opt-est-leverage" class="v" title="目标位名义价值÷权利金">—</span>
</div>
<span class="muted opt-est-note">目标价=监控指数;到位后按买一限价平仓;无止损,到期即止损</span>
</div>
<div class="form-row options-order-mode-row">
<label class="btn-secondary opt-order-chip opt-size-mode-chip">
<input type="radio" name="opt-size-mode" value="sheets" checked>
<span>指定张数</span>
</label>
<input type="number" id="opt-sheets-amount" min="1" step="1" value="1" placeholder="张数"
autocomplete="off" inputmode="numeric" data-lpignore="true" data-1p-ignore="true" data-form-type="other">
<label class="btn-secondary opt-order-chip opt-size-mode-chip">
<input type="radio" name="opt-size-mode" value="budget_full">
<span>按可用余额打满</span>
</label>
<label class="btn-secondary opt-order-chip opt-size-mode-chip">
<input type="radio" name="opt-size-mode" value="eth_amount" id="opt-size-mode-eth">
<span>指定币数量</span>
</label>
<input type="number" id="opt-eth-amount" min="0.01" step="0.01" placeholder="如 0.5" style="display:none"
autocomplete="off" inputmode="decimal" data-lpignore="true" data-1p-ignore="true" data-form-type="other">
<input type="text" id="opt-signal-note" name="opt_signal_note" placeholder="备注(关键位说明)"
<div class="opt-size-mode-bar">
<label class="btn-secondary opt-order-chip opt-size-mode-chip">
<input type="radio" name="opt-size-mode" value="sheets" checked>
<span>指定张数</span>
</label>
<input type="number" id="opt-sheets-amount" min="1" step="1" value="1" placeholder="张数"
autocomplete="off" inputmode="numeric" data-lpignore="true" data-1p-ignore="true" data-form-type="other">
<label class="btn-secondary opt-order-chip opt-size-mode-chip">
<input type="radio" name="opt-size-mode" value="budget_full">
<span>按可用余额打满</span>
</label>
<label class="btn-secondary opt-order-chip opt-size-mode-chip">
<input type="radio" name="opt-size-mode" value="eth_amount" id="opt-size-mode-eth">
<span>指定币数量</span>
</label>
<input type="number" id="opt-eth-amount" min="0.01" step="0.01" placeholder="如 0.5" style="display:none"
autocomplete="off" inputmode="decimal" data-lpignore="true" data-1p-ignore="true" data-form-type="other">
</div>
<input type="text" id="opt-signal-note" name="opt_signal_note" class="opt-signal-note" placeholder="备注(关键位说明)"
autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false"
data-lpignore="true" data-1p-ignore="true" data-form-type="other" readonly>
</div>
@@ -295,4 +299,4 @@
</div>
</div>
<script src="/static/options_expiry_countdown.js?v=1"></script>
<script src="/static/options_panel.js?v=44"></script>
<script src="/static/options_panel.js?v=45"></script>