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 {