diff --git a/static/css/records.css b/static/css/records.css index 24a841c..65f3dc5 100644 --- a/static/css/records.css +++ b/static/css/records.css @@ -1,5 +1,5 @@ /* Copyright (c) 2025-2026 马建军. All rights reserved. - * 交易记录与复盘 — 手机简洁列表 + 详情弹窗 + * 交易记录与复盘 — 手机/平板简洁列表 + 详情弹窗 */ .records-page .records-mobile-list { @@ -140,13 +140,78 @@ border-color: rgba(239, 68, 68, .35); } +/* 平板横屏:每条记录单行展示,右侧保留「详情」 */ +html:is([data-layout="tablet"], .layout-tablet) .records-mobile-item { + display: flex; + flex-direction: row; + align-items: center; + gap: .5rem .65rem; + padding: .5rem .75rem; + overflow: hidden; +} + +html:is([data-layout="tablet"], .layout-tablet) .records-mobile-item-head, +html:is([data-layout="tablet"], .layout-tablet) .records-mobile-item-meta, +html:is([data-layout="tablet"], .layout-tablet) .records-mobile-item-foot { + display: inline-flex; + align-items: center; + margin-bottom: 0; + gap: .35rem; +} + +html:is([data-layout="tablet"], .layout-tablet) .records-mobile-item-head { + flex: 0 1 auto; + min-width: 0; + justify-content: flex-start; +} + +html:is([data-layout="tablet"], .layout-tablet) .records-mobile-symbol { + font-size: .84rem; + max-width: 7.5rem; +} + +html:is([data-layout="tablet"], .layout-tablet) .records-mobile-item-meta { + flex: 1 1 auto; + min-width: 0; + flex-wrap: nowrap; + overflow: hidden; + font-size: .7rem; + white-space: nowrap; +} + +html:is([data-layout="tablet"], .layout-tablet) .records-mobile-item-meta .badge { + flex-shrink: 0; +} + +html:is([data-layout="tablet"], .layout-tablet) .records-mobile-item-foot { + flex: 0 0 auto; + margin-left: auto; + justify-content: flex-end; + gap: .45rem; +} + +html:is([data-layout="tablet"], .layout-tablet) .records-mobile-pnl { + font-size: .82rem; + white-space: nowrap; +} + +html:is([data-layout="tablet"], .layout-tablet) .records-mobile-chevron { + flex-shrink: 0; +} + +html:is([data-layout="tablet"], .layout-tablet) .records-mobile-pnl-lbl { + display: none; +} + html:is([data-mobile="1"], .layout-phone) .records-page .records-mobile-list, -html:is([data-layout="phone"], .layout-phone) .records-page .records-mobile-list { +html:is([data-layout="phone"], .layout-phone) .records-page .records-mobile-list, +html:is([data-layout="tablet"], .layout-tablet) .records-page .records-mobile-list { display: block; } html:is([data-mobile="1"], .layout-phone) .records-page .records-desktop-only, -html:is([data-layout="phone"], .layout-phone) .records-page .records-desktop-only { +html:is([data-layout="phone"], .layout-phone) .records-page .records-desktop-only, +html:is([data-layout="tablet"], .layout-tablet) .records-page .records-desktop-only { display: none !important; } @@ -155,6 +220,11 @@ html:is([data-layout="phone"], .layout-phone) .records-page .records-trade-card padding: 0; } +html:is([data-layout="tablet"], .layout-tablet) .records-page .records-trade-card .card-body, +html:is([data-layout="tablet"], .layout-tablet) .records-page .records-split .card .card-body { + padding: 0 .75rem .35rem; +} + html:is([data-mobile="1"], .layout-phone) .records-page .records-equity-card #equity-curve-chart, html:is([data-layout="phone"], .layout-phone) .records-page .records-equity-card #equity-curve-chart { min-height: 180px; @@ -175,6 +245,16 @@ html:is([data-layout="phone"], .layout-phone) .records-page .preset-tabs a { font-size: .75rem; } +html:is([data-layout="tablet"], .layout-tablet) .records-page .preset-tabs a { + flex: 1; + text-align: center; + min-width: 0; + padding: .45rem .35rem; + font-size: .75rem; +} + +html:is([data-layout="tablet"], .layout-tablet) #review-modal .review-detail-headers, +html:is([data-layout="tablet"], .layout-tablet) #review-modal .review-detail-values, html:is([data-mobile="1"], .layout-phone) #review-modal .review-detail-headers, html:is([data-mobile="1"], .layout-phone) #review-modal .review-detail-values, html:is([data-layout="phone"], .layout-phone) #review-modal .review-detail-headers, diff --git a/static/js/records.js b/static/js/records.js index 43def63..fdacc11 100644 --- a/static/js/records.js +++ b/static/js/records.js @@ -1,5 +1,5 @@ /* Copyright (c) 2025-2026 马建军. All rights reserved. - * 交易记录 — 手机简洁列表与详情弹窗 + * 交易记录 — 手机/平板简洁列表与详情弹窗 */ (function () { function esc(v) { diff --git a/templates/records.html b/templates/records.html index 8edaa77..637b633 100644 --- a/templates/records.html +++ b/templates/records.html @@ -69,9 +69,9 @@