1
This commit is contained in:
薇薇安
parent
c713e7d27e
commit
8ece78a3dc
|
|
@ -237,7 +237,7 @@
|
|||
display: grid;
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
gap: 1rem;
|
||||
margin-bottom: 2rem;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
@media (min-width: 768px) {
|
||||
|
|
@ -417,5 +417,130 @@
|
|||
}
|
||||
|
||||
.stats-table td:nth-child(2) {
|
||||
font-family: 'SF Mono', 'Roboto Mono', monospace; /* Monospace for numbers alignment if needed */
|
||||
font-family: 'SF Mono', 'Roboto Mono', monospace;
|
||||
}
|
||||
|
||||
/* 统计折叠按钮 */
|
||||
.stats-toggle-row {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.btn-toggle {
|
||||
background: none;
|
||||
border: none;
|
||||
color: #2196F3;
|
||||
cursor: pointer;
|
||||
font-size: 0.9rem;
|
||||
padding: 0.5rem 1rem;
|
||||
}
|
||||
|
||||
.btn-toggle:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
/* 移动端卡片视图 */
|
||||
.trades-cards {
|
||||
display: none; /* 默认隐藏，仅在小屏幕显示 */
|
||||
flex-direction: column;
|
||||
gap: 1rem;
|
||||
}
|
||||
|
||||
.trade-card {
|
||||
background: white;
|
||||
border: 1px solid #e9ecef;
|
||||
border-radius: 8px;
|
||||
padding: 1rem;
|
||||
box-shadow: 0 1px 3px rgba(0,0,0,0.05);
|
||||
}
|
||||
|
||||
.trade-card-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-bottom: 0.75rem;
|
||||
padding-bottom: 0.75rem;
|
||||
border-bottom: 1px solid #f1f3f5;
|
||||
}
|
||||
|
||||
.trade-card-symbol {
|
||||
font-weight: 600;
|
||||
font-size: 1.1rem;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.trade-card-side {
|
||||
font-size: 0.85rem;
|
||||
padding: 0.2rem 0.5rem;
|
||||
border-radius: 4px;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.trade-card-side.buy {
|
||||
background: #E3F2FD;
|
||||
color: #1976D2;
|
||||
}
|
||||
|
||||
.trade-card-side.sell {
|
||||
background: #FFEBEE;
|
||||
color: #D32F2F;
|
||||
}
|
||||
|
||||
.trade-card-body {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
gap: 0.75rem;
|
||||
margin-bottom: 0.75rem;
|
||||
}
|
||||
|
||||
.trade-card-field {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.25rem;
|
||||
}
|
||||
|
||||
.trade-card-label {
|
||||
font-size: 0.8rem;
|
||||
color: #888;
|
||||
}
|
||||
|
||||
.trade-card-value {
|
||||
font-size: 0.95rem;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.trade-card-value.positive {
|
||||
color: #4CAF50;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.trade-card-value.negative {
|
||||
color: #F44336;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.trade-card-footer {
|
||||
border-top: 1px solid #f1f3f5;
|
||||
padding-top: 0.75rem;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
font-size: 0.85rem;
|
||||
color: #666;
|
||||
}
|
||||
|
||||
.trade-time-item {
|
||||
display: flex;
|
||||
gap: 0.5rem;
|
||||
}
|
||||
|
||||
/* 响应式控制 */
|
||||
@media (max-width: 767px) {
|
||||
.table-wrapper {
|
||||
display: none; /* 小屏幕隐藏表格 */
|
||||
}
|
||||
|
||||
.trades-cards {
|
||||
display: flex; /* 小屏幕显示卡片 */
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -666,7 +666,7 @@ const TradeList = () => {
|
|||
{pnlPercent >= 0 ? '+' : ''}{pnlPercent.toFixed(2)}%
|
||||
</td>
|
||||
<td>
|
||||
<span className={`status ${trade.status}`}>{trade.status === 'open' ? '持仓中' : trade.status === 'closed' ? '已平仓' : '已取消'}</span>
|
||||
<span className={`status-badge status-${trade.status}`}>{trade.status === 'open' ? '持仓中' : trade.status === 'closed' ? '已平仓' : '已取消'}</span>
|
||||
</td>
|
||||
<td>{trade.exit_reason_display || '-'}</td>
|
||||
<td className="order-id" style={{ fontSize: '12px' }}>{formatOrderIds()}</td>
|
||||
|
|
@ -738,11 +738,18 @@ const TradeList = () => {
|
|||
return (
|
||||
<div key={trade.id} className="trade-card">
|
||||
<div className="trade-card-header">
|
||||
<span className="trade-card-symbol">{trade.symbol}</span>
|
||||
<span style={{ fontSize: '11px', color: '#999', marginLeft: '8px' }}>交易ID: #{trade.id}</span>
|
||||
<span className={`trade-card-side ${trade.side === 'BUY' ? 'buy' : 'sell'} status ${trade.status}`}>
|
||||
{trade.side === 'BUY' ? '买入' : '卖出'} · {trade.status === 'open' ? '持仓中' : trade.status === 'closed' ? '已平仓' : '已取消'}
|
||||
</span>
|
||||
<div>
|
||||
<span className="trade-card-symbol">{trade.symbol}</span>
|
||||
<span style={{ fontSize: '12px', color: '#999', marginLeft: '8px' }}>#{trade.id}</span>
|
||||
</div>
|
||||
<div style={{ display: 'flex', gap: '8px' }}>
|
||||
<span className={`trade-card-side ${trade.side === 'BUY' ? 'buy' : 'sell'}`}>
|
||||
{trade.side === 'BUY' ? '买入' : '卖出'}
|
||||
</span>
|
||||
<span className={`status-badge status-${trade.status}`}>
|
||||
{trade.status === 'open' ? '持仓中' : trade.status === 'closed' ? '已平仓' : '已取消'}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<div className="trade-card-body">
|
||||
<div className="trade-card-field">
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user