dekun/eth_hedge_sim
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Align plan columns and put option countdown on title row.

Browse Source 
Co-authored-by: Cursor <cursoragent@cursor.com>
This commit is contained in:
dekun
2026-07-25 09:43:02 +08:00
parent 12a6365fc9
commit 0a824d9d1e
2 changed files with 137 additions and 137 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/pages/Plan.tsx
+27 -28
View File
@@ -172,6 +172,7 @@ export default function PlanPage() {
</div>
<div className="plan-board">
<div className="plan-col">
<div className="card plan-strategy">
<h3 className="plan-panel-title">策略</h3>
<div className="plan-metrics">
@@ -250,7 +251,24 @@ export default function PlanPage() {
</div>
</div>
<div className="plan-positions">
<div className="card">
<h3 className="plan-panel-title">永续行情</h3>
<div className="kv">
<span>买一</span>
<span className="mono">{fmt(snap?.perp?.bid)}</span>
</div>
<div className="kv">
<span>卖一</span>
<span className="mono">{fmt(snap?.perp?.ask)}</span>
</div>
<div className="kv">
<span>指数</span>
<span className="mono">{fmt(snap?.index_px)}</span>
</div>
</div>
</div>
<div className="plan-col plan-positions">
{open ? (
<>
<div className="pos-card">
@@ -320,6 +338,12 @@ export default function PlanPage() {
{pos?.option_side === "call" ? "看涨 Call" : "看跌 Put"}
</span>
</div>
<div
className={`pos-countdown mono ${countdownUrgent ? "pos-countdown-urgent" : ""}`}
title="到期倒计时"
>
{countdown}
</div>
</div>
<div className="pos-meta">
<span className="pos-meta-item">期权持仓</span>
@@ -330,14 +354,6 @@ export default function PlanPage() {
</span>
</div>
<div className="pos-grid">
<div className="pos-cell pos-cell-wide">
<span className="pos-label">到期倒计时</span>
<span
className={`pos-value mono ${countdownUrgent ? "pos-countdown-urgent" : ""}`}
>
{countdown}
</span>
</div>
<div className="pos-cell">
<span className="pos-label">开仓均价</span>
<span className="pos-value mono">{fmt(pos?.option_entry_px)}</span>
@@ -365,27 +381,9 @@ export default function PlanPage() {
<div className="pos-empty">期权持仓 · 暂无</div>
</>
)}
</div>
</div>
<div className="grid-2">
<div className="card">
<h3 style={{ marginTop: 0 }}>永续</h3>
<div className="kv">
<span>买一</span>
<span className="mono">{fmt(snap?.perp?.bid)}</span>
</div>
<div className="kv">
<span>卖一</span>
<span className="mono">{fmt(snap?.perp?.ask)}</span>
</div>
<div className="kv">
<span>指数</span>
<span className="mono">{fmt(snap?.index_px)}</span>
</div>
</div>
<div className="card">
<h3 style={{ marginTop: 0 }}>
<h3 className="plan-panel-title">
期权 ATM {snap?.pair ? `@ ${snap.pair.strike}` : ""}
</h3>
<div className="kv">
@@ -407,5 +405,6 @@ export default function PlanPage() {
</div>
</div>
</div>
</div>
);
}
frontend/src/styles/app.css
+20 -19
View File
@@ -232,15 +232,22 @@ input {
min-width: 0;
}
/* 计划页：左策略 + 右上下持仓，两侧顶底对齐 */
/* 计划页：左右两列对齐（策略+行情 | 持仓+ATM） */
.plan-board {
display: grid;
grid-template-columns: minmax(280px, 0.95fr) minmax(320px, 1.15fr);
grid-template-columns: minmax(280px, 1fr) minmax(320px, 1.15fr);
gap: 12px;
align-items: stretch;
align-items: start;
margin-bottom: 12px;
}
.plan-col {
display: flex;
flex-direction: column;
gap: 12px;
min-width: 0;
}
.plan-panel-title {
margin: 0 0 10px;
font-size: 14px;
@@ -251,14 +258,12 @@ input {
.plan-strategy {
display: flex;
flex-direction: column;
height: 100%;
min-height: 0;
}
.plan-metrics {
display: flex;
flex-direction: column;
flex: 1;
min-height: 0;
}
@@ -266,24 +271,20 @@ input {
min-width: 0;
}
.plan-positions {
display: flex;
flex-direction: column;
gap: 10px;
min-height: 0;
height: 100%;
}
.plan-positions .pos-card,
.plan-positions .pos-empty {
flex: 1 1 0;
display: flex;
flex-direction: column;
min-height: 0;
}
.plan-positions .pos-grid {
margin-top: auto;
.pos-countdown {
flex: 0 0 auto;
font-size: 0.82rem;
font-weight: 600;
color: #e8ecf4;
white-space: nowrap;
margin-left: auto;
}
@media (max-width: 960px) {
@@ -291,9 +292,9 @@ input {
grid-template-columns: 1fr;
}
.plan-positions .pos-card,
.plan-positions .pos-empty {
flex: 0 0 auto;
.pos-countdown {
margin-left: 0;
width: 100%;
}
}