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

Use compact single-row trade records on tablet with detail modal.

Browse Source 
Co-authored-by: Cursor <cursoragent@cursor.com>
This commit is contained in:
dekun
2026-06-29 23:59:02 +08:00
parent 9dbf6b1f1e
commit 21d68f6269
3 changed files with 88 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files
static/css/records.css
+83 -3
View File
@@ -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,