diff --git a/frontend/src/pages/Plan.tsx b/frontend/src/pages/Plan.tsx index 8afdcb3..f4e188f 100644 --- a/frontend/src/pages/Plan.tsx +++ b/frontend/src/pages/Plan.tsx @@ -703,13 +703,15 @@ export default function PlanPage() { 波动比例 {fmt(movePct, 2)}% -
- 开仓时间 - {openTimeLabel} -
-
- 持仓时长 - {holdDurationLabel} +
+
+ 开仓时间 + {openTimeLabel} +
+
+ 持仓时长 + {holdDurationLabel} +
@@ -780,13 +782,15 @@ export default function PlanPage() { 初始权利金 {fmt(pos?.initial_premium)} -
- 开仓时间 - {openTimeLabel} -
-
- 持仓时长 - {holdDurationLabel} +
+
+ 开仓时间 + {openTimeLabel} +
+
+ 持仓时长 + {holdDurationLabel} +
diff --git a/frontend/src/styles/app.css b/frontend/src/styles/app.css index 944f16e..a63b912 100644 --- a/frontend/src/styles/app.css +++ b/frontend/src/styles/app.css @@ -703,7 +703,7 @@ input { .kv { display: flex; justify-content: space-between; - align-items: baseline; + align-items: flex-start; gap: 12px; padding: 8px 0; border-bottom: 1px solid var(--line); @@ -718,11 +718,17 @@ input { color: var(--muted); flex: 0 0 auto; min-width: 5.5em; + padding-top: 1px; } .kv > span:last-child { text-align: right; min-width: 0; + flex: 1 1 auto; + overflow-wrap: anywhere; + word-break: break-word; + white-space: normal; + line-height: 1.35; } .plan-residual-block { @@ -1108,7 +1114,9 @@ input { flex-direction: column; height: 100%; min-height: 0; + min-width: 0; box-sizing: border-box; + overflow: hidden; } .plan-metrics { @@ -1116,6 +1124,7 @@ input { flex-direction: column; flex: 1; min-height: 0; + min-width: 0; } .plan-metrics .kv { @@ -1147,6 +1156,9 @@ input { color: #e8ecf4; white-space: nowrap; margin-left: auto; + max-width: 42%; + overflow: hidden; + text-overflow: ellipsis; } @media (max-width: 960px) { @@ -1596,6 +1608,8 @@ input { border: 1px solid #2a3348; border-radius: 10px; padding: 12px 14px; + min-width: 0; + overflow: hidden; } .pos-card-head { @@ -1604,6 +1618,7 @@ input { justify-content: space-between; gap: 10px; margin-bottom: 10px; + min-width: 0; } .pos-card-symbol { @@ -1663,21 +1678,34 @@ input { .pos-grid { display: grid; - grid-template-columns: repeat(3, 1fr); + grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px 14px; + min-width: 0; } .pos-cell-wide { grid-column: 1 / -1; } +.pos-time-row { + grid-column: 1 / -1; + display: grid; + grid-template-columns: repeat(2, minmax(0, 1fr)); + gap: 12px 14px; + min-width: 0; +} + .pos-countdown-urgent { color: #ffb020 !important; } @media (max-width: 520px) { .pos-grid { - grid-template-columns: repeat(2, 1fr); + grid-template-columns: repeat(2, minmax(0, 1fr)); + } + + .pos-time-row { + grid-template-columns: 1fr; } } @@ -1692,6 +1720,7 @@ input { flex-direction: column; gap: 4px; min-width: 0; + overflow: hidden; } .pos-label { @@ -1704,6 +1733,11 @@ input { color: #e8ecf4; font-weight: 500; line-height: 1.25; + min-width: 0; + max-width: 100%; + overflow-wrap: anywhere; + word-break: break-word; + white-space: normal; } .pos-empty {