dekun
9dbf6b1f1e
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>
221 lines
12 KiB
CSS
221 lines
12 KiB
CSS
/* Copyright (c) 2025-2026 马建军. All rights reserved. 专有软件，详见 LICENSE.zh-CN.txt */
|
|
/* 持仓监控页 — 与 split-grid（关键位监控）同宽，全端自适应 */
|
|
.trade-page{width:100%}
|
|
.trade-split{margin-bottom:1.25rem}
|
|
.trade-split .card{min-height:360px}
|
|
.trade-split .trade-card#order{margin-bottom:.75rem}
|
|
.trading-live-body{gap:0}
|
|
.trading-live-section{padding-bottom:.5rem}
|
|
.trading-live-section.trading-live-positions{
|
|
margin-top:.65rem;padding-top:.75rem;border-top:1px solid var(--card-border);
|
|
}
|
|
.trading-live-subtitle{
|
|
font-size:.82rem;font-weight:600;color:var(--text-muted);
|
|
margin:0 0 .45rem .15rem;letter-spacing:.02em;
|
|
}
|
|
.sync-badge{font-size:.72rem;font-weight:400;margin-left:.35rem}
|
|
.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}
|
|
.trade-session-clock{font-size:.78rem;line-height:1.45}
|
|
.session-clock-detail strong{color:var(--accent);font-weight:600}
|
|
.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;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}
|
|
.trade-order-status .status-row{display:flex;flex-wrap:wrap;align-items:center;gap:.35rem .65rem}
|
|
.trade-form-rows{display:flex;flex-direction:column;gap:.75rem;margin-bottom:.85rem}
|
|
.trade-form-line{display:grid;gap:.65rem;align-items:end}
|
|
.trade-form-line.line-3{grid-template-columns:1.4fr 0.8fr 0.8fr}
|
|
.trade-field label{display:block;font-size:.72rem;margin-bottom:.28rem;color:var(--text-label)}
|
|
.symbol-wrap.trade-field>label.text-label{display:flex;align-items:baseline;flex-wrap:wrap;gap:.35rem}
|
|
.trade-field select,.trade-field input{width:100%;box-sizing:border-box}
|
|
.trade-field .lots-auto{color:var(--accent);font-weight:600;background:var(--card-inner);cursor:default}
|
|
.lots-warn{font-size:.7rem;margin-top:.25rem;margin-bottom:0}
|
|
.price-type-tabs{display:flex;gap:.35rem;margin-bottom:.35rem}
|
|
.price-tab{border:1px solid var(--card-border);background:var(--card-inner);color:var(--text-muted);padding:.28rem .7rem;border-radius:6px;font-size:.75rem;cursor:pointer;flex:1;text-align:center;width:auto}
|
|
.price-tab.active{border-color:var(--accent);color:var(--accent);font-weight:600;background:rgba(56,189,248,.08)}
|
|
.market-hint{font-size:.7rem;margin-top:.25rem}
|
|
.trade-action-row{display:flex;flex-direction:column;gap:.45rem;margin:.85rem 0 .55rem}
|
|
.trade-action-row .btn-open{padding:.65rem .75rem;font-size:.9rem;width:100%}
|
|
.trade-action-row .btn-open:disabled{opacity:.45;cursor:not-allowed;filter:grayscale(.25)}
|
|
.trade-action-row .btn-open.btn-session-off{background:var(--text-muted);border-color:var(--text-muted)}
|
|
.trailing-be-toggle{display:flex;align-items:center;gap:.4rem;font-size:.78rem;color:var(--text-label);margin-bottom:.45rem;cursor:pointer;user-select:none}
|
|
.trailing-be-toggle input{width:auto;margin:0}
|
|
.trailing-be-hint{font-size:.72rem;margin:0;color:var(--text-muted)}
|
|
.trade-form-line.line-3 #field-tp.is-hidden{display:none}
|
|
.trade-rr-hint{font-size:.78rem;color:var(--text-accent);margin:0}
|
|
.session-hint{font-size:.72rem;margin:.35rem 0 0;text-align:center}
|
|
.trade-order-msg{font-size:.82rem;text-align:center;margin:0;padding:.35rem}
|
|
.trade-order-msg.ok{color:var(--profit)}
|
|
.trade-order-msg.err{color:var(--loss)}
|
|
.trade-footer{background:var(--card-inner);border-radius:8px;padding:.65rem .85rem;font-size:.78rem;line-height:1.5;border:1px solid var(--card-border);margin-top:.5rem}
|
|
.trade-footer strong{color:var(--accent)}
|
|
.rec-blocked td{opacity:.55}
|
|
.rec-ok td:first-child{font-weight:600}
|
|
.rec-trend-break td:first-child .trend-name{font-weight:700}
|
|
.trend-badge{font-size:.72rem;white-space:nowrap}
|
|
.trend-badge.break{color:var(--accent);font-weight:700;border:1px solid var(--accent);background:rgba(56,189,248,.12)}
|
|
.trend-hint{font-size:.72rem;color:var(--text-muted);margin:.35rem 0 .65rem;line-height:1.5}
|
|
.rec-sort-bar{display:flex;flex-wrap:wrap;align-items:center;gap:.45rem .65rem;margin-bottom:.55rem;font-size:.78rem}
|
|
.rec-sort-bar label{color:var(--text-muted);white-space:nowrap}
|
|
.rec-sort-bar select{padding:.35rem .5rem;font-size:.78rem;min-width:7rem}
|
|
.rec-stats{
|
|
font-size:.78rem;color:var(--text-muted);margin-bottom:.45rem;line-height:1.5;
|
|
}
|
|
.rec-stats strong{color:var(--accent);font-weight:600}
|
|
.rec-sort-dir-btn{
|
|
border:1px solid var(--card-border);background:var(--card-inner);color:var(--text-muted);
|
|
padding:.3rem .55rem;border-radius:6px;cursor:pointer;font-size:.78rem;min-width:2rem;
|
|
}
|
|
.rec-sort-dir-btn:hover{border-color:var(--accent);color:var(--accent)}
|
|
.gap-badge{font-size:.72rem}
|
|
.rec-market-link{color:inherit;text-decoration:none;display:inline-flex;flex-wrap:wrap;align-items:baseline;gap:.2rem .35rem}
|
|
.rec-market-link:hover strong,.rec-market-link:hover .text-accent{color:var(--accent);text-decoration:underline}
|
|
.pos-market-link{color:inherit;text-decoration:none}
|
|
.pos-market-link:hover{color:var(--accent)}
|
|
.pos-market-link:hover .text-accent{text-decoration:underline}
|
|
.pos-symbol-sub{font-size:.72rem;line-height:1.35}
|
|
.pos-main-badge{font-size:.68rem;vertical-align:middle}
|
|
.pos-change-up{color:var(--profit)}
|
|
.rec-change-down{color:var(--loss)}
|
|
#recommend .trade-table-wrap{max-height:none;overflow:visible}
|
|
#recommend.card{height:auto}
|
|
#recommend .card-body{display:flex;flex-direction:column}
|
|
#recommend .trade-table-wrap{flex:0 0 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)}
|
|
.pos-pending-right{display:flex;align-items:center;gap:.45rem;flex-shrink:0}
|
|
.pos-dismiss-btn{padding:.2rem .55rem;font-size:.68rem;border-radius:6px;border:1px solid var(--table-border);background:var(--card-inner);color:var(--text-muted);cursor:pointer;width:auto;min-height:auto;line-height:1.3}
|
|
.pos-dismiss-btn:disabled{opacity:.55;cursor:wait}
|
|
.pos-sl-btn{border-color:var(--accent);color:var(--accent)}
|
|
.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-card.is-pending{border:1px dashed var(--accent);opacity:.95}
|
|
.pos-card.is-pending .badge.pending{background:rgba(56,189,248,.15);color:var(--accent)}
|
|
.pos-card.is-pending .pos-metrics .cell.pnl-pending label{color: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;min-height:36px}
|
|
.pos-close-btn:disabled,.pos-close-btn.is-session-off{opacity:.45;cursor:not-allowed;border-color:var(--text-muted);background:var(--card-inner);color:var(--text-muted)}
|
|
.pos-dismiss-btn:disabled,.pos-dismiss-btn.is-session-off{opacity:.45;cursor:not-allowed;color:var(--text-muted)}
|
|
.pos-card-meta-line{font-size:.78rem;line-height:1.65;color:var(--text-muted);margin-bottom:.55rem}
|
|
.pos-card-meta-line strong{color:var(--text)}
|
|
.pos-card-actions{display:flex;gap:.35rem;flex-shrink:0;align-items:center}
|
|
.pos-order-btn{padding:.4rem .85rem;font-size:.78rem;border-radius:8px;border:1px solid var(--accent);background:rgba(56,189,248,.1);color:var(--accent);cursor:pointer;white-space:nowrap;width:auto;flex-shrink:0;min-height:36px}
|
|
.pos-order-btn:disabled,.pos-order-btn.pos-order-done{opacity:.55;cursor:default;border-color:var(--table-border);background:var(--card-inner);color:var(--text-muted)}
|
|
.pos-order-btn:disabled:not(.pos-order-done){cursor:wait}
|
|
|
|
.sl-tp-modal{max-width:420px;width:100%}
|
|
.sl-tp-modal-fields{display:flex;flex-direction:column;gap:.75rem;margin-bottom:1rem}
|
|
.sl-tp-modal-fields .trade-field{margin:0}
|
|
.sl-tp-modal-trailing{margin-top:.15rem}
|
|
.sl-tp-modal-actions{display:flex;gap:.5rem;justify-content:flex-end}
|
|
.sl-tp-modal-actions .btn-secondary,.sl-tp-modal-actions .btn-primary{width:auto;min-width:5rem;padding:.45rem 1rem;font-size:.85rem}
|
|
|
|
@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}
|
|
html:not([data-mobile="1"]) .trade-form-line.line-3{grid-template-columns:1fr}
|
|
.trade-card-full{margin-bottom:1rem}
|
|
.trade-table-wrap{max-height:320px}
|
|
}
|