dekun/qihuo
1
0
Fork 0
Code Issues Actions Packages Projects Releases Wiki Activity

ui: 持仓监控卡片与关键位同宽，完善多端与 PWA

Browse Source 
改用 split-grid 全宽布局；手机/平板/电脑断点适配；更新 manifest 与 Service Worker 支持安装为 App。

Co-authored-by: Cursor <cursoragent@cursor.com>
This commit is contained in:
dekun
2026-06-24 12:50:58 +08:00
parent 67683f5562
commit 3ba3be6035
6 changed files with 104 additions and 35 deletions
Download Patch File Download Diff File Expand all files Collapse all files
static/css/responsive.css
+30
View File
@@ -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);
}
static/css/trade.css
+31 -12
View File
@@ -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}
}