diff --git a/frontend/src/styles/app.css b/frontend/src/styles/app.css index 610cbaa..a7676d9 100644 --- a/frontend/src/styles/app.css +++ b/frontend/src/styles/app.css @@ -686,6 +686,9 @@ input { border: 1px solid var(--line); border-radius: 10px; padding: 16px; + min-width: 0; + max-width: 100%; + box-sizing: border-box; } .grid-2 { @@ -705,9 +708,10 @@ input { justify-content: space-between; align-items: flex-start; gap: 12px; - padding: 8px 0; + padding: 10px 0; border-bottom: 1px solid var(--line); font-size: 14px; + min-width: 0; } .kv:last-child { @@ -728,7 +732,7 @@ input { overflow-wrap: anywhere; word-break: break-word; white-space: normal; - line-height: 1.35; + line-height: 1.45; } .plan-residual-block { @@ -1082,14 +1086,17 @@ input { } } -/* 计划页:上排策略|持仓顶底对齐;下排行情同列宽对齐 */ +/* 计划页:上排策略|持仓;窄窗允许内容撑开,避免持仓被裁切 */ .plan-shell { - --plan-cols: minmax(280px, 1fr) minmax(320px, 1.15fr); + --plan-cols: minmax(0, 1fr) minmax(0, 1.15fr); --plan-gap: 12px; display: flex; flex-direction: column; gap: var(--plan-gap); margin-bottom: 12px; + min-width: 0; + width: 100%; + box-sizing: border-box; } .plan-board, @@ -1098,10 +1105,11 @@ input { grid-template-columns: var(--plan-cols); gap: var(--plan-gap); min-width: 0; + width: 100%; } .plan-board { - align-items: stretch; + align-items: start; } .plan-panel-title { @@ -1114,40 +1122,42 @@ input { .plan-strategy { display: flex; flex-direction: column; - height: 100%; min-height: 0; min-width: 0; + width: 100%; box-sizing: border-box; - overflow: hidden; + overflow: visible; } .plan-metrics { display: flex; flex-direction: column; - flex: 1; min-height: 0; min-width: 0; } .plan-metrics .kv { min-width: 0; + flex: 0 0 auto; } .plan-positions { display: flex; flex-direction: column; gap: var(--plan-gap); - height: 100%; min-height: 0; min-width: 0; + width: 100%; } .plan-positions .pos-card, .plan-positions .pos-empty { - flex: 1 1 0; + flex: 0 0 auto; display: flex; flex-direction: column; min-height: 0; + min-width: 0; + width: 100%; box-sizing: border-box; } @@ -1163,9 +1173,16 @@ input { text-overflow: ellipsis; } -@media (max-width: 960px) { +/* 非全屏常见宽度:两列仍窄时持仓改 2 列;更窄整页单列 */ +@media (max-width: 1400px) { + .plan-positions .pos-grid { + grid-template-columns: repeat(2, minmax(0, 1fr)); + } +} + +@media (max-width: 1100px) { .plan-shell { - --plan-cols: 1fr; + --plan-cols: minmax(0, 1fr); } .plan-positions .pos-card, @@ -1192,7 +1209,7 @@ input { .pos-countdown { margin-left: 0; - width: auto; + max-width: 100%; align-self: flex-start; } } @@ -1611,7 +1628,8 @@ input { border-radius: 10px; padding: 12px 14px; min-width: 0; - overflow: hidden; + overflow: visible; + box-sizing: border-box; } .pos-card-head { @@ -1665,11 +1683,20 @@ input { flex-wrap: wrap; align-items: center; gap: 4px 0; + min-width: 0; + max-width: 100%; + overflow-wrap: anywhere; + word-break: break-word; } .pos-meta-item { display: inline-flex; align-items: center; + max-width: 100%; + min-width: 0; + overflow-wrap: anywhere; + word-break: break-word; + white-space: normal; } .pos-meta-item:not(:last-child)::after { @@ -1703,11 +1730,11 @@ input { @media (max-width: 520px) { .pos-grid { - grid-template-columns: repeat(2, minmax(0, 1fr)); + grid-template-columns: minmax(0, 1fr); } .pos-time-row { - grid-template-columns: 1fr; + grid-template-columns: minmax(0, 1fr); } }