- {open ? (
- <>
-
-
-
- {pos?.perp_inst_id || "ETH-USDT-SWAP"}
-
- {pos?.perp_side === "long" ? "做多" : "做空"}
-
-
-
-
- 永续持仓
- 组 {pos?.group_id}
- 数量 {fmt(pos?.perp_qty_eth, 2)} ETH
-
- {fmt(pos?.leverage ?? plan?.leverage, 0)}x
-
-
-
-
- 开仓价
- {fmt(pos?.perp_entry_px)}
-
-
- 可平价
- {fmt(pos?.perp_mark_px)}
-
-
- 浮盈亏
-
- {fmt(pos?.perp_upl)}
-
-
-
- 保证金
- {fmt(pos?.perp_margin)}
-
-
- 名义价值
- {fmt(pos?.perp_notional)}
-
-
- 波动比例
- {fmt(movePct, 2)}%
-
-
-
-
-
-
-
- {pos?.option_inst_id || "期权"}
-
- {pos?.option_side === "call" ? "看涨 Call" : "看跌 Put"}
-
-
-
- {countdown}
-
-
-
- 期权持仓
- 到期 {pos?.expiry_ymd || "—"}
- 行权 {fmt(pos?.strike, 0)}
-
- {fmt(pos?.option_qty_eth, 2)} ETH · {fmt(pos?.option_qty_contracts, 0)} 张
-
-
-
-
- 开仓均价
- {fmt(pos?.option_entry_px)}
-
-
- 标记/买一
- {fmt(pos?.option_mark_px)}
-
-
- 浮盈亏
-
- {fmt(pos?.option_upl)}
-
-
-
- 初始权利金
- {fmt(pos?.initial_premium)}
-
-
-
- >
- ) : (
- <>
-
永续持仓 · 暂无
-
期权持仓 · 暂无
- >
- )}
-
期权 ATM {snap?.pair ? `@ ${snap.pair.strike}` : ""}
diff --git a/frontend/src/styles/app.css b/frontend/src/styles/app.css
index 639ce59..c30a107 100644
--- a/frontend/src/styles/app.css
+++ b/frontend/src/styles/app.css
@@ -232,22 +232,28 @@ input {
min-width: 0;
}
-/* 计划页:左右两列对齐(策略+行情 | 持仓+ATM) */
-.plan-board {
- display: grid;
- grid-template-columns: minmax(280px, 1fr) minmax(320px, 1.15fr);
- gap: 12px;
- align-items: start;
+/* 计划页:上排策略|持仓顶底对齐;下排行情同列宽对齐 */
+.plan-shell {
+ --plan-cols: minmax(280px, 1fr) minmax(320px, 1.15fr);
+ --plan-gap: 12px;
+ display: flex;
+ flex-direction: column;
+ gap: var(--plan-gap);
margin-bottom: 12px;
}
-.plan-col {
- display: flex;
- flex-direction: column;
- gap: 12px;
+.plan-board,
+.plan-market {
+ display: grid;
+ grid-template-columns: var(--plan-cols);
+ gap: var(--plan-gap);
min-width: 0;
}
+.plan-board {
+ align-items: stretch;
+}
+
.plan-panel-title {
margin: 0 0 10px;
font-size: 14px;
@@ -258,12 +264,15 @@ input {
.plan-strategy {
display: flex;
flex-direction: column;
+ height: 100%;
min-height: 0;
+ box-sizing: border-box;
}
.plan-metrics {
display: flex;
flex-direction: column;
+ flex: 1;
min-height: 0;
}
@@ -271,11 +280,22 @@ input {
min-width: 0;
}
+.plan-positions {
+ display: flex;
+ flex-direction: column;
+ gap: var(--plan-gap);
+ height: 100%;
+ min-height: 0;
+ min-width: 0;
+}
+
.plan-positions .pos-card,
.plan-positions .pos-empty {
+ flex: 1 1 0;
display: flex;
flex-direction: column;
min-height: 0;
+ box-sizing: border-box;
}
.pos-countdown {
@@ -288,8 +308,13 @@ input {
}
@media (max-width: 960px) {
- .plan-board {
- grid-template-columns: 1fr;
+ .plan-shell {
+ --plan-cols: 1fr;
+ }
+
+ .plan-positions .pos-card,
+ .plan-positions .pos-empty {
+ flex: 0 0 auto;
}
.pos-countdown {