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

Move desktop calculator tabs left.

Browse Source 
Compress wide-screen calculator inputs into three rows while preserving mobile layout.

Co-authored-by: Cursor <cursoragent@cursor.com>
This commit is contained in:
dekun
2026-07-16 14:50:42 +08:00
parent c9d40e5e52
commit e280220951
3 changed files with 57 additions and 14 deletions
Download Patch File Download Diff File Expand all files Collapse all files
manual_trading_hub/static/app.css
+19 -3
View File
@@ -9364,12 +9364,19 @@ body.funds-fullscreen-open {
display: none;
}
body:not(.hub-phone) #page-calculator .calc-workspace {
display: grid;
grid-template-columns: 180px minmax(0, 1fr);
gap: 14px;
align-items: start;
}
body:not(.hub-phone) #page-calculator .calc-mobile-tabs {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
grid-template-columns: minmax(0, 1fr);
gap: 8px;
max-width: 640px;
margin: 0 auto 14px;
max-width: none;
margin: 0;
padding: 5px;
border: 1px solid var(--border-soft);
border-radius: 12px;
@@ -9386,6 +9393,8 @@ body:not(.hub-phone) #page-calculator .calc-m-tab {
font-size: 13px;
font-weight: 600;
cursor: pointer;
text-align: left;
padding: 9px 12px;
}
body:not(.hub-phone) #page-calculator .calc-m-tab:hover {
@@ -9410,6 +9419,7 @@ body:not(.hub-phone) #page-calculator .calc-tab-label-desktop {
body:not(.hub-phone) #page-calculator .calc-layout {
grid-template-columns: minmax(0, 1fr);
min-width: 0;
}
body:not(.hub-phone) #page-calculator .calc-layout[data-calc-tab="trend"] [data-calc-pane="roll"],
@@ -9417,6 +9427,12 @@ body:not(.hub-phone) #page-calculator .calc-layout[data-calc-tab="roll"] [data-c
display: none;
}
@media (min-width: 1200px) {
body:not(.hub-phone) #page-calculator .calc-form-grid {
grid-template-columns: repeat(5, minmax(0, 1fr));
}
}
/* --- 策略说明 --- */
.strategy-page-head {
display: flex;
manual_trading_hub/static/index.html
+13 -11
View File
@@ -15,7 +15,7 @@
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link href="https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500;600&family=Orbitron:wght@500;600;700&display=swap" rel="stylesheet" media="print" onload="this.media='all'" />
<noscript><link href="https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500;600&family=Orbitron:wght@500;600;700&display=swap" rel="stylesheet" /></noscript>
<link rel="stylesheet" href="/assets/app.css?v=20260716-calc-desktop-tabs" />
<link rel="stylesheet" href="/assets/app.css?v=20260716-calc-left-tabs" />
<link rel="stylesheet" href="/assets/trade_stats_calendar.css?v=4" />
<link rel="stylesheet" href="/assets/account_risk_badge.css?v=4" />
<script src="/assets/account_risk_badge.js?v=4"></script>
@@ -746,15 +746,16 @@
<button type="button" id="calc-btn-refresh" class="primary">刷新</button>
<span id="calc-refresh-status" class="toolbar-meta"></span>
</div>
<div class="calc-mobile-tabs" role="tablist" aria-label="计算器切换">
<button type="button" class="calc-m-tab is-active" data-calc-tab="trend" role="tab" aria-selected="true">
<span class="calc-tab-label-mobile">趋势回调</span><span class="calc-tab-label-desktop">趋势回调计算器</span>
</button>
<button type="button" class="calc-m-tab" data-calc-tab="roll" role="tab" aria-selected="false">
<span class="calc-tab-label-mobile">滚仓</span><span class="calc-tab-label-desktop">滚仓计算器</span>
</button>
</div>
<div class="calc-layout" data-calc-tab="trend">
<div class="calc-workspace">
<div class="calc-mobile-tabs" role="tablist" aria-label="计算器切换">
<button type="button" class="calc-m-tab is-active" data-calc-tab="trend" role="tab" aria-selected="true">
<span class="calc-tab-label-mobile">趋势回调</span><span class="calc-tab-label-desktop">趋势回调计算器</span>
</button>
<button type="button" class="calc-m-tab" data-calc-tab="roll" role="tab" aria-selected="false">
<span class="calc-tab-label-mobile">滚仓</span><span class="calc-tab-label-desktop">滚仓计算器</span>
</button>
</div>
<div class="calc-layout" data-calc-tab="trend">
<section class="calc-card card" data-calc-pane="trend">
<h2>趋势回调计算器</h2>
<p class="calc-hint">逻辑与实例策略页一致:首仓 50% + 补仓网格;止损金额 = 资金 × 风险%.</p>
@@ -876,7 +877,8 @@
</div>
</form>
<div id="calc-roll-result" class="calc-result hidden"></div>
</section>
</section>
</div>
</div>
</div>