diff --git a/frontend/src/components/TradeList.css b/frontend/src/components/TradeList.css
index 0a23685..69f4f70 100644
--- a/frontend/src/components/TradeList.css
+++ b/frontend/src/components/TradeList.css
@@ -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; /* 小屏幕显示卡片 */
+  }
 }
diff --git a/frontend/src/components/TradeList.jsx b/frontend/src/components/TradeList.jsx
index 9fdf20f..9e0b458 100644
--- a/frontend/src/components/TradeList.jsx
+++ b/frontend/src/components/TradeList.jsx
@@ -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">