Improve desktop settings and trades list UX.

Fold backup/WeCom help into rules; backup list one-per-line (5 visible); trades table with 10/page; hide funds bar on mobile.

Co-authored-by: Cursor <cursoragent@cursor.com>
This commit is contained in:
dekun
2026-07-29 19:31:30 +08:00
parent 0ee1d8be5d
commit e1da830eac
4 changed files with 311 additions and 73 deletions
+126
View File
@@ -177,6 +177,12 @@ input {
margin: 0 0 12px;
}
@media (max-width: 900px) {
.funds-bar-shell {
display: none;
}
}
.funds-bar-inner {
width: 100%;
max-width: none;
@@ -766,6 +772,81 @@ input {
padding-bottom: 4px;
}
/* 电脑端表格;手机端保持卡片列表 */
.trade-list-desktop {
display: none;
}
.trade-list-mobile {
display: block;
}
.trade-table-card {
padding: 12px 14px 10px;
margin-bottom: 12px;
}
.trade-table-wrap {
width: 100%;
overflow-x: auto;
}
.trade-table {
width: 100%;
border-collapse: collapse;
font-size: 13px;
}
.trade-table th,
.trade-table td {
padding: 10px 8px;
text-align: left;
border-bottom: 1px solid var(--line);
white-space: nowrap;
vertical-align: middle;
}
.trade-table th {
color: var(--muted);
font-weight: 600;
font-size: 12px;
}
.trade-table-row {
cursor: pointer;
}
.trade-table-row:hover td {
background: rgba(240, 185, 11, 0.06);
}
.trade-table-id {
font-weight: 600;
}
.trade-pager {
display: flex;
align-items: center;
justify-content: center;
gap: 16px;
padding: 12px 0 4px;
}
.trade-pager-info {
color: var(--muted);
font-size: 13px;
}
@media (min-width: 901px) {
.trade-list-desktop {
display: block;
}
.trade-list-mobile {
display: none;
}
}
.trade-row {
display: flex;
justify-content: space-between;
@@ -1306,6 +1387,51 @@ input {
gap: 10px;
}
.backup-list {
display: flex;
flex-direction: column;
gap: 0;
border: 1px solid var(--line);
border-radius: 8px;
overflow: hidden;
}
.backup-list-row {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
padding: 10px 12px;
border-bottom: 1px solid var(--line);
width: 100%;
box-sizing: border-box;
}
.backup-list-row:last-child {
border-bottom: none;
}
.backup-list-name {
flex: 1 1 auto;
min-width: 0;
word-break: break-all;
font-size: 13px;
line-height: 1.4;
}
.backup-list-meta {
color: var(--muted);
font-weight: 400;
}
/* 电脑端:一屏最多约 5 行,超出滚动 */
@media (min-width: 901px) {
.backup-list {
max-height: calc(5 * 48px);
overflow-y: auto;
}
}
@media (min-width: 700px) {
.settings-fields {
grid-template-columns: repeat(2, minmax(0, 1fr));