diff --git a/static/css/responsive.css b/static/css/responsive.css index 12c9970..f6cd56f 100644 --- a/static/css/responsive.css +++ b/static/css/responsive.css @@ -176,6 +176,18 @@ body { grid-template-columns: 1fr; } + .trade-split .card { + min-height: auto; + } + + .trade-form-line.line-3 { + grid-template-columns: 1fr 1fr; + } + + .trade-form-line.line-3 .trade-field:first-child { + grid-column: 1 / -1; + } + .form-compact .line-4, .form-compact .line-5 { grid-template-columns: repeat(2, 1fr); @@ -314,6 +326,24 @@ body { min-height: auto; } + .trade-split .card { + min-height: auto; + } + + .trade-top-bar { + flex-direction: column; + align-items: stretch; + } + + .trade-top-bar-actions { + width: 100%; + } + + .trade-top-bar-actions .btn-ctp-sm { + width: 100%; + min-height: var(--touch-min); + } + .pos-metrics { grid-template-columns: repeat(2, 1fr); } diff --git a/static/css/trade.css b/static/css/trade.css index 66105f2..46448ef 100644 --- a/static/css/trade.css +++ b/static/css/trade.css @@ -1,11 +1,20 @@ -.trade-page{max-width:1200px;margin:0 auto} -.trade-top-bar{display:flex;flex-wrap:wrap;gap:.65rem;align-items:center;margin-bottom:1.25rem} -.trade-dashboard{display:flex;flex-direction:column;gap:1.25rem} -.trade-row-split{display:grid;grid-template-columns:1fr 1fr;gap:1.25rem;align-items:stretch} +/* 持仓监控页 — 与 split-grid（关键位监控）同宽，全端自适应 */ +.trade-page{width:100%} +.trade-split{margin-bottom:1.25rem} +.trade-split .card{min-height:480px} +.trade-top-bar{ + display:flex;flex-wrap:wrap;gap:.65rem 1rem; + align-items:center;justify-content:space-between; + margin-bottom:1.25rem; +} +.trade-top-bar-main{display:flex;flex-wrap:wrap;gap:.5rem .65rem;align-items:center;flex:1;min-width:0} +.trade-top-bar-actions{display:flex;flex-wrap:wrap;gap:.5rem;align-items:center} +.trade-top-hint{font-size:.72rem;white-space:nowrap} +.btn-ctp-sm{padding:.4rem .9rem;font-size:.8rem;width:auto;white-space:nowrap} .trade-card{margin-bottom:0;height:100%;display:flex;flex-direction:column} .trade-card h2{margin-bottom:.35rem;flex-shrink:0} -.trade-card .card-body{flex:1;min-height:0} -.trade-card-full{margin-bottom:0} +.trade-card .card-body{flex:1;min-height:0;display:flex;flex-direction:column} +.trade-card-full{margin-bottom:1.5rem} .pos-hint{font-size:.75rem;margin:-.15rem 0 .5rem .25rem;color:var(--text-muted)} .trade-order-status{display:grid;gap:.55rem;margin:.5rem 0 .75rem;padding:.65rem .85rem;background:var(--card-inner);border:1px solid var(--card-border);border-radius:8px;font-size:.82rem} .trade-order-status-compact{margin-top:0} @@ -30,18 +39,28 @@ .trade-footer strong{color:var(--accent)} .rec-blocked td{opacity:.55} .rec-ok td:first-child{font-weight:600} -#positions .card-body{max-height:460px;overflow-y:auto} +#positions .card-body.card-scroll{flex:1;max-height:none;overflow-y:auto} .pos-pending-orders{margin-top:.55rem;padding-top:.55rem;border-top:1px dashed var(--table-border)} .pos-pending-orders .pending-title{font-size:.68rem;color:var(--text-muted);margin-bottom:.35rem} .pos-pending-item{display:flex;justify-content:space-between;align-items:center;gap:.5rem;font-size:.75rem;padding:.35rem .5rem;border-radius:6px;margin-bottom:.25rem;background:var(--list-item-bg)} .pos-pending-item.sl{border-left:3px solid var(--loss)} .pos-pending-item.tp{border-left:3px solid var(--profit)} .pos-pending-item.ctp{border-left:3px solid var(--accent)} -.pos-close-btn{padding:.4rem .85rem;font-size:.78rem;border-radius:8px;border:1px solid var(--loss);background:var(--loss-bg);color:var(--loss);cursor:pointer;white-space:nowrap;width:auto;flex-shrink:0} +.pos-close-btn{padding:.4rem .85rem;font-size:.78rem;border-radius:8px;border:1px solid var(--loss);background:var(--loss-bg);color:var(--loss);cursor:pointer;white-space:nowrap;width:auto;flex-shrink:0;min-height:36px} .pos-close-btn:disabled{opacity:.55;cursor:wait} -@media (max-width:900px){ - .trade-row-split{grid-template-columns:1fr} - #positions .card-body{max-height:360px} - .trade-form-line.line-3{grid-template-columns:1fr} +@media (min-width:768px) and (max-width:1100px){ + .trade-split .card{min-height:420px} + .trade-form-line.line-3{grid-template-columns:1fr 1fr} + .trade-form-line.line-3 .trade-field:first-child{grid-column:1/-1} +} + +@media (max-width:767px){ + .trade-top-bar{flex-direction:column;align-items:stretch} + .trade-top-bar-actions{width:100%} + .btn-ctp-sm{width:100%;min-height:44px} + .trade-split .card{min-height:auto} + .trade-form-line.line-3{grid-template-columns:1fr} + .trade-card-full{margin-bottom:1rem} + .trade-table-wrap{max-height:320px} } diff --git a/static/js/pwa.js b/static/js/pwa.js index 8f8f5bc..7cb4cd0 100644 --- a/static/js/pwa.js +++ b/static/js/pwa.js @@ -13,6 +13,11 @@ && !window.MSStream; } + function isTouchDevice() { + return window.matchMedia('(hover: none) and (pointer: coarse)').matches + || window.matchMedia('(max-width: 1024px)').matches; + } + function updateThemeColor() { var meta = document.getElementById('meta-theme-color'); if (!meta) return; @@ -46,7 +51,10 @@ if (installBtn) { installBtn.addEventListener('click', function () { - if (!deferredPrompt) return; + if (!deferredPrompt) { + if (isIOS()) showIosHint(); + return; + } deferredPrompt.prompt(); deferredPrompt.userChoice.then(function () { deferredPrompt = null; @@ -64,8 +72,13 @@ document.addEventListener('DOMContentLoaded', function () { updateThemeColor(); showIosHint(); - if (!isStandalone() && !deferredPrompt && installBtn) { - installBtn.hidden = true; + if (isStandalone()) { + if (installBtn) installBtn.hidden = true; + if (iosHint) iosHint.classList.remove('show'); + return; + } + if (isTouchDevice() && installBtn && deferredPrompt) { + showInstallBtn(); } }); diff --git a/static/manifest.json b/static/manifest.json index a2d5c1b..7bef58d 100644 --- a/static/manifest.json +++ b/static/manifest.json @@ -1,13 +1,15 @@ { + "id": "/", "name": "国内期货交易监控复盘系统", "short_name": "期货监控", "description": "期货交易监控、持仓管理、复盘与统计分析", - "start_url": "/", + "start_url": "/login", "scope": "/", "display": "standalone", + "display_override": ["standalone", "browser"], "orientation": "any", - "background_color": "#050508", - "theme_color": "#050508", + "background_color": "#e8eef8", + "theme_color": "#2563eb", "lang": "zh-CN", "categories": ["finance", "productivity"], "icons": [ diff --git a/static/sw.js b/static/sw.js index 7fb3f4b..e46b1f0 100644 --- a/static/sw.js +++ b/static/sw.js @@ -1,14 +1,17 @@ -var CACHE_VERSION = 'qihuo-v2'; +var CACHE_VERSION = 'qihuo-v3'; var STATIC_CACHE = CACHE_VERSION + '-static'; var STATIC_ASSETS = [ '/static/css/tech.css', '/static/css/responsive.css', + '/static/css/trade.css', '/static/js/theme.js', '/static/js/nav.js', '/static/js/pwa.js', '/static/js/symbol.js', + '/static/js/trade.js', '/static/icons/icon-192.png', '/static/icons/icon-512.png', + '/static/icons/icon.svg', '/static/manifest.json', '/login' ]; diff --git a/templates/trade.html b/templates/trade.html index e8ff2dc..412ee09 100644 --- a/templates/trade.html +++ b/templates/trade.html @@ -6,21 +6,24 @@ {% block content %}
- {{ trading_mode_label }} - - {% if ctp_status.connected %}CTP 已连接{% else %}CTP 未连接{% endif %} - - {{ risk_status.status_label }} - 权益 {{ '%.2f'|format(capital) }} 元 - {% if ctp_account.available is defined and ctp_status.connected %} - 可用 {{ '%.2f'|format(ctp_account.available) }} 元 - {% endif %} - - 断线自动重连 +
+ {{ trading_mode_label }} + + {% if ctp_status.connected %}CTP 已连接{% else %}CTP 未连接{% endif %} + + {{ risk_status.status_label }} + 权益 {{ '%.2f'|format(capital) }} 元 + {% if ctp_account.available is defined and ctp_status.connected %} + 可用 {{ '%.2f'|format(ctp_account.available) }} 元 + {% endif %} +
+
+ + 断线自动重连 +
-
-
+

期货下单

@@ -98,9 +101,9 @@
{% if ctp_status.connected %}加载中…{% else %}请先连接 CTP 查看柜台持仓{% endif %}
-
+
-
+

品种推荐

按权益 {{ '%.2f'|format(capital) }} 元筛选，仅显示可开 1 手的品种。 @@ -132,7 +135,6 @@

-
{% endblock %}