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

Fix position cards, breakeven badge, and tablet equal-height layout.

Browse Source 
Stop clipping pos cards and match trailing-BE stop detection for the badge. On tablet, align order and live-trading panels to equal height with internal scroll; keep desktop positions scrollable after three cards.

Co-authored-by: Cursor <cursoragent@cursor.com>
This commit is contained in:
dekun
2026-06-29 23:47:59 +08:00
parent c6c6c3fe83
commit 9dbf6b1f1e
6 changed files with 149 additions and 27 deletions
Download Patch File Download Diff File Expand all files Collapse all files
static/css/trade.css
+81 -1
View File
@@ -92,7 +92,87 @@
#recommend.card{height:auto}
#recommend .card-body{display:flex;flex-direction:column}
#recommend .trade-table-wrap{flex:0 0 auto}
#positions .card-body.card-scroll{flex:1;max-height:none;overflow-y:auto}
#trading-live.card,
.trade-split .trade-card#trading-live {
overflow: visible;
}
#position-live-list {
overflow: visible;
}
#trading-live .trading-live-body.card-scroll {
flex: 1;
max-height: none;
overflow-y: visible;
}
/* 电脑端：右侧委托面板随内容增高；平板见下方等高规则 */
@media (min-width: 768px) {
html:not([data-layout="phone"]):not(.layout-phone):not([data-layout="tablet"]):not(.layout-tablet) .trade-split .card-body {
overflow: visible;
}
html:not([data-layout="phone"]):not(.layout-phone):not([data-layout="tablet"]):not(.layout-tablet) .trade-split .trade-card#trading-live {
height: auto;
min-height: auto;
align-self: start;
}
html:not([data-layout="phone"]):not(.layout-phone):not([data-layout="tablet"]):not(.layout-tablet) .trade-split .trade-card#trading-live .trading-live-body {
overflow: visible;
flex: none;
}
html:not([data-layout="phone"]):not(.layout-phone):not([data-layout="tablet"]):not(.layout-tablet) #position-live-list.pos-list-many {
--pos-card-unit-h: 17.5rem;
max-height: calc(var(--pos-card-unit-h) * 3 + 1.5rem);
overflow-y: auto;
-webkit-overflow-scrolling: touch;
padding-right: .15rem;
}
}
/* 平板：期货下单与委托持仓两列卡片等高 */
html[data-layout="tablet"] .trade-split,
html.layout-tablet .trade-split {
align-items: stretch;
}
html[data-layout="tablet"] .trade-split .trade-card#order,
html[data-layout="tablet"] .trade-split .trade-card#trading-live,
html.layout-tablet .trade-split .trade-card#order,
html.layout-tablet .trade-split .trade-card#trading-live {
height: 100%;
min-height: 380px;
align-self: stretch;
}
html[data-layout="tablet"] .trade-split .trade-card#order .card-body,
html.layout-tablet .trade-split .trade-card#order .card-body {
flex: 1;
min-height: 0;
overflow-y: auto;
-webkit-overflow-scrolling: touch;
}
html[data-layout="tablet"] .trade-split .trade-card#trading-live .trading-live-body,
html.layout-tablet .trade-split .trade-card#trading-live .trading-live-body {
flex: 1;
min-height: 0;
overflow-y: auto;
-webkit-overflow-scrolling: touch;
}
html[data-layout="tablet"] #position-live-list,
html.layout-tablet #position-live-list {
overflow: visible;
}
html[data-layout="tablet"] #position-live-list.pos-list-many,
html.layout-tablet #position-live-list.pos-list-many {
--pos-card-unit-h: 17.5rem;
max-height: calc(var(--pos-card-unit-h) * 3 + 1.5rem);
overflow-y: auto;
-webkit-overflow-scrolling: touch;
padding-right: .15rem;
}
.dash-be-badge,
.pos-be-badge {
font-size: .66rem;
vertical-align: middle;
}
.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)}