Fit hub monitor, market, and funds to one 1080p screen.
Constrain desktop shell to 100dvh with flex fill so OKX perp+option plus peer cards, chart, and equity overview avoid page scroll. Co-authored-by: Cursor <cursoragent@cursor.com>
This commit is contained in:
dekun
@@ -9786,3 +9786,306 @@ html[data-theme="light"] .hub-logs-card-hint {
|
||||
}
|
||||
}
|
||||
|
||||
/* ── 1920×1080 一屏:监控区 / 行情区 / 资金概况(无整页纵向滚动) ── */
|
||||
@media (min-width: 1600px) and (min-height: 900px) {
|
||||
body.hub-page-monitor:not(.hub-phone) .app-shell,
|
||||
body.hub-page-market:not(.hub-phone) .app-shell,
|
||||
body.hub-page-funds:not(.hub-phone) .app-shell {
|
||||
max-width: min(1860px, calc(100vw - 24px));
|
||||
height: 100dvh;
|
||||
max-height: 100dvh;
|
||||
padding-top: 0;
|
||||
padding-bottom: 8px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
body.hub-page-monitor:not(.hub-phone) .app-header,
|
||||
body.hub-page-market:not(.hub-phone) .app-header,
|
||||
body.hub-page-funds:not(.hub-phone) .app-header {
|
||||
flex: 0 0 auto;
|
||||
padding: 10px 0 8px;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
/* —— 监控区 —— */
|
||||
body.hub-page-monitor:not(.hub-phone) #page-monitor {
|
||||
flex: 1 1 auto;
|
||||
min-height: 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
body.hub-page-monitor:not(.hub-phone) #page-monitor > .page-head {
|
||||
flex: 0 0 auto;
|
||||
margin: 6px 0 4px;
|
||||
}
|
||||
|
||||
body.hub-page-monitor:not(.hub-phone) #page-monitor > .page-head h1 {
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
body.hub-page-monitor:not(.hub-phone) #page-monitor .host-status-panel,
|
||||
body.hub-page-monitor:not(.hub-phone) #page-monitor .monitor-macro-banner,
|
||||
body.hub-page-monitor:not(.hub-phone) #page-monitor .monitor-alert-summary,
|
||||
body.hub-page-monitor:not(.hub-phone) #page-monitor .hub-m-fold {
|
||||
flex: 0 0 auto;
|
||||
margin-bottom: 6px;
|
||||
}
|
||||
|
||||
body.hub-page-monitor:not(.hub-phone) #page-monitor .host-status-summary {
|
||||
padding: 6px 10px;
|
||||
}
|
||||
|
||||
body.hub-page-monitor:not(.hub-phone) #page-monitor .host-status-bar {
|
||||
padding: 8px 10px 10px;
|
||||
}
|
||||
|
||||
body.hub-page-monitor:not(.hub-phone) #page-monitor .host-status-metrics {
|
||||
gap: 6px;
|
||||
}
|
||||
|
||||
body.hub-page-monitor:not(.hub-phone) #page-monitor .host-metric-card {
|
||||
padding: 6px 8px;
|
||||
}
|
||||
|
||||
body.hub-page-monitor:not(.hub-phone) #page-monitor .grid-monitor {
|
||||
flex: 1 1 auto;
|
||||
min-height: 0;
|
||||
gap: 8px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
body.hub-page-monitor:not(.hub-phone) .grid-monitor.grid-monitor-options-split {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: 100%;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
body.hub-page-monitor:not(.hub-phone) .grid-monitor-options-split .monitor-stats-card {
|
||||
flex: 0 0 auto;
|
||||
padding: 5px 10px;
|
||||
gap: 10px 14px;
|
||||
}
|
||||
|
||||
body.hub-page-monitor:not(.hub-phone) .grid-monitor-options-split .monitor-stats-grid {
|
||||
gap: 6px;
|
||||
}
|
||||
|
||||
body.hub-page-monitor:not(.hub-phone) .grid-monitor-options-split .monitor-stat-cell {
|
||||
padding: 3px 4px;
|
||||
}
|
||||
|
||||
body.hub-page-monitor:not(.hub-phone) .grid-monitor-options-split .monitor-stat-value {
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
body.hub-page-monitor:not(.hub-phone) .grid-monitor-options-split .monitor-split-body {
|
||||
flex: 1 1 auto;
|
||||
min-height: 0;
|
||||
gap: 8px;
|
||||
height: auto;
|
||||
}
|
||||
|
||||
body.hub-page-monitor:not(.hub-phone) .monitor-split-right {
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
body.hub-page-monitor:not(.hub-phone) .card-monitor-okx-split,
|
||||
body.hub-page-monitor:not(.hub-phone) .card-monitor-split-side {
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
body.hub-page-monitor:not(.hub-phone) .card-monitor-okx-split .card-head,
|
||||
body.hub-page-monitor:not(.hub-phone) .card-monitor-split-side .card-head {
|
||||
padding: 6px 10px;
|
||||
}
|
||||
|
||||
body.hub-page-monitor:not(.hub-phone) .card-monitor-okx-split .card-body,
|
||||
body.hub-page-monitor:not(.hub-phone) .card-monitor-split-side .card-body {
|
||||
padding: 8px 10px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
body.hub-page-monitor:not(.hub-phone) .hub-inner-cards {
|
||||
gap: 6px;
|
||||
}
|
||||
|
||||
body.hub-page-monitor:not(.hub-phone) .hub-inner-card {
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
body.hub-page-monitor:not(.hub-phone) .hub-inner-card-head {
|
||||
padding: 5px 8px;
|
||||
font-size: 10px;
|
||||
}
|
||||
|
||||
body.hub-page-monitor:not(.hub-phone) .hub-inner-card-body {
|
||||
padding: 6px 8px;
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
body.hub-page-monitor:not(.hub-phone) .grid-monitor-options-split .hub-options-table-wrap,
|
||||
body.hub-page-monitor:not(.hub-phone) .grid-monitor-options-split .pos-table-wrap,
|
||||
body.hub-page-monitor:not(.hub-phone) .grid-monitor-options-split .table-scroll {
|
||||
overflow: auto;
|
||||
max-height: 100%;
|
||||
}
|
||||
|
||||
body.hub-page-monitor:not(.hub-phone) .data-table th,
|
||||
body.hub-page-monitor:not(.hub-phone) .data-table td {
|
||||
padding: 3px 5px;
|
||||
font-size: 11px;
|
||||
line-height: 1.25;
|
||||
}
|
||||
|
||||
body.hub-page-monitor:not(.hub-phone) .section-title {
|
||||
margin: 4px 0 4px;
|
||||
font-size: 11px;
|
||||
}
|
||||
|
||||
body.hub-page-monitor:not(.hub-phone) .hub-monitor-options {
|
||||
margin-top: 6px;
|
||||
padding-top: 6px;
|
||||
}
|
||||
|
||||
body.hub-page-monitor:not(.hub-phone) .empty-hint {
|
||||
padding: 6px 0;
|
||||
font-size: 11px;
|
||||
}
|
||||
|
||||
/* —— 行情区 —— */
|
||||
body.hub-page-market:not(.hub-phone) #page-market {
|
||||
flex: 1 1 auto;
|
||||
min-height: 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
body.hub-page-market:not(.hub-phone) #page-market > .page-head {
|
||||
flex: 0 0 auto;
|
||||
margin: 6px 0 4px;
|
||||
}
|
||||
|
||||
body.hub-page-market:not(.hub-phone) #page-market > .page-head h1 {
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
body.hub-page-market:not(.hub-phone) #page-market .hub-m-fold,
|
||||
body.hub-page-market:not(.hub-phone) #page-market .market-vol-rank-anchor,
|
||||
body.hub-page-market:not(.hub-phone) #page-market .market-status {
|
||||
flex: 0 0 auto;
|
||||
}
|
||||
|
||||
body.hub-page-market:not(.hub-phone) #page-market .market-status {
|
||||
margin: 2px 0 6px;
|
||||
}
|
||||
|
||||
body.hub-page-market:not(.hub-phone) #page-market .market-chart-wrap,
|
||||
body.hub-page-market:not(.hub-phone) #page-market .market-chart-wrap.has-pos-panel {
|
||||
flex: 1 1 auto;
|
||||
height: auto !important;
|
||||
min-height: 0;
|
||||
max-height: none;
|
||||
}
|
||||
|
||||
body.hub-page-market:not(.hub-phone) #page-market .market-ohlcv-bar {
|
||||
padding: 6px 10px;
|
||||
}
|
||||
|
||||
/* —— 资金概况 —— */
|
||||
body.hub-page-funds:not(.hub-phone) #page-funds {
|
||||
flex: 1 1 auto;
|
||||
min-height: 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
body.hub-page-funds:not(.hub-phone) .funds-stage {
|
||||
flex: 1 1 auto;
|
||||
min-height: 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
body.hub-page-funds:not(.hub-phone) .funds-stage-inner {
|
||||
flex: 1 1 auto;
|
||||
min-height: 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
padding: 8px 12px 10px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
body.hub-page-funds:not(.hub-phone) .funds-head {
|
||||
flex: 0 0 auto;
|
||||
margin-bottom: 4px !important;
|
||||
}
|
||||
|
||||
body.hub-page-funds:not(.hub-phone) .funds-head h1 {
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
body.hub-page-funds:not(.hub-phone) .funds-toolbar {
|
||||
flex: 0 0 auto;
|
||||
margin-bottom: 6px;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
body.hub-page-funds:not(.hub-phone) .funds-summary {
|
||||
flex: 0 0 auto;
|
||||
margin-bottom: 6px;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
body.hub-page-funds:not(.hub-phone) .funds-stat-card {
|
||||
padding: 8px 10px;
|
||||
}
|
||||
|
||||
body.hub-page-funds:not(.hub-phone) .funds-stat-value {
|
||||
font-size: 1.15rem;
|
||||
}
|
||||
|
||||
body.hub-page-funds:not(.hub-phone) .funds-meta {
|
||||
flex: 0 0 auto;
|
||||
margin: 0 0 6px;
|
||||
padding: 4px 8px;
|
||||
}
|
||||
|
||||
body.hub-page-funds:not(.hub-phone) .funds-chart-panel {
|
||||
flex: 1 1 auto;
|
||||
min-height: 140px;
|
||||
max-height: 42vh;
|
||||
margin-bottom: 8px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
body.hub-page-funds:not(.hub-phone) .funds-chart-host {
|
||||
flex: 1 1 auto;
|
||||
height: auto;
|
||||
min-height: 120px;
|
||||
}
|
||||
|
||||
body.hub-page-funds:not(.hub-phone) .funds-section-head {
|
||||
flex: 0 0 auto;
|
||||
margin-bottom: 6px;
|
||||
}
|
||||
|
||||
body.hub-page-funds:not(.hub-phone) .funds-accounts {
|
||||
flex: 0 0 auto;
|
||||
gap: 8px;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
body.hub-page-funds:not(.hub-phone) .funds-ac-card {
|
||||
padding: 8px 10px;
|
||||
gap: 6px;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
Reference in New Issue
Block a user