Skip to content

Commit 902707b

Browse files
RubberTaleRubberTale
committed
Fix UI overflow: global box-sizing, fluid header, and wrapping trade buttons
1 parent 8a492de commit 902707b

9 files changed

Lines changed: 121 additions & 117 deletions

File tree

‎commodity-crisis/dist/assets/index-1qw5MRQG.css‎

Lines changed: 1 addition & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎commodity-crisis/dist/assets/index-BYuHQLiA.css‎

Lines changed: 0 additions & 1 deletion
This file was deleted.

commodity-crisis/dist/assets/index-D85Bl0g4.js renamed to commodity-crisis/dist/assets/index-Cri411dl.js

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎commodity-crisis/dist/index.html‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -16,8 +16,8 @@
1616
</script>
1717
<!-- Busuanzi -->
1818
<script async src="//busuanzi.ibruce.info/busuanzi/2.3/busuanzi.pure.mini.js"></script>
19-
<script type="module" crossorigin src="/games/commodity-crisis/assets/index-D85Bl0g4.js"></script>
20-
<link rel="stylesheet" crossorigin href="/games/commodity-crisis/assets/index-BYuHQLiA.css">
19+
<script type="module" crossorigin src="/games/commodity-crisis/assets/index-Cri411dl.js"></script>
20+
<link rel="stylesheet" crossorigin href="/games/commodity-crisis/assets/index-1qw5MRQG.css">
2121
</head>
2222
<body>
2323
<div id="root"></div>

‎commodity-crisis/src/App.tsx‎

Lines changed: 38 additions & 38 deletions
Original file line numberDiff line numberDiff line change
@@ -188,26 +188,26 @@ const App: React.FC = () => {
188188
return (
189189
<div className={getContainerClass()}>
190190
<header className="header">
191-
<div style={{ display: 'flex', alignItems: 'center', gap: '15px' }}>
192-
<Activity size={32} color="#ffd700" />
191+
<div style={{ display: 'flex', alignItems: 'center', gap: '12px' }}>
192+
<Activity size={28} color="#ffd700" />
193193
<div>
194-
<h1 style={{ margin: 0, fontSize: '24px' }}>期货风云</h1>
195-
<div style={{ display: 'flex', gap: '10px', marginTop: '4px', flexWrap: 'wrap' }}>
196-
<a href="/" style={{ color: '#aaa', fontSize: '12px', textDecoration: 'none', border: '1px solid #444', padding: '2px 8px', borderRadius: '4px' }}>返回博客主页</a>
194+
<h1 style={{ margin: 0, fontSize: '22px' }}>期货风云</h1>
195+
<div style={{ display: 'flex', gap: '8px', marginTop: '4px', flexWrap: 'wrap' }}>
196+
<a href="/" style={{ color: '#aaa', fontSize: '11px', textDecoration: 'none', border: '1px solid #444', padding: '1px 6px', borderRadius: '3px' }}>返回首页</a>
197197
<button
198198
onClick={() => setViewMode(prev => prev === 'mobile' ? 'desktop' : 'mobile')}
199-
style={{ background: 'none', border: '1px solid #444', color: '#ffd700', fontSize: '12px', padding: '2px 8px', borderRadius: '4px', cursor: 'pointer' }}
199+
style={{ background: 'none', border: '1px solid #444', color: '#ffd700', fontSize: '11px', padding: '1px 6px', borderRadius: '3px', cursor: 'pointer' }}
200200
>
201-
切换至{viewMode === 'mobile' ? '电脑版' : '手机版'}
201+
切至{viewMode === 'mobile' ? '电脑' : '手机'}
202202
</button>
203-
<span id="busuanzi_container_page_pv" style={{ color: '#666', fontSize: '12px' }}>
203+
<span id="busuanzi_container_page_pv" style={{ color: '#666', fontSize: '11px' }}>
204204
访客: <span id="busuanzi_value_page_pv"></span>
205205
</span>
206206
</div>
207207
</div>
208208
</div>
209-
<div style={{ display: 'flex', gap: '30px', fontSize: '18px' }}>
210-
<div style={{ color: '#888' }}>净资产: <span style={{ color: equity > 10000 ? '#26a69a' : '#ef5350' }}>${equity.toLocaleString(undefined, {minimumFractionDigits: 2, maximumFractionDigits: 2})}</span></div>
209+
<div className="header-stats">
210+
<div style={{ color: '#888' }}>净资产: <span style={{ color: equity > 10000 ? '#26a69a' : '#ef5350', fontWeight: 'bold' }}>${equity.toLocaleString(undefined, {minimumFractionDigits: 2, maximumFractionDigits: 2})}</span></div>
211211
<div style={{ color: '#888' }}>可用余额: <span style={{ color: '#fff' }}>${balance.toLocaleString(undefined, {maximumFractionDigits: 0})}</span></div>
212212
</div>
213213
</header>
@@ -221,23 +221,23 @@ const App: React.FC = () => {
221221
</div>
222222
))}
223223
</div>
224-
<div style={{ display: 'flex', justifyContent: 'space-between', marginBottom: '10px' }}>
225-
<div style={{ fontSize: '24px', fontWeight: 'bold' }}>{prices[activeAsset].toLocaleString(undefined, {minimumFractionDigits: 2})}</div>
224+
<div style={{ display: 'flex', justifyContent: 'space-between', marginBottom: '8px' }}>
225+
<div style={{ fontSize: '22px', fontWeight: 'bold' }}>{prices[activeAsset].toLocaleString(undefined, {minimumFractionDigits: 2})}</div>
226226
<div className={prices[activeAsset] >= priceHistory[activeAsset][0] ? 'price-up' : 'price-down'}>
227227
{((prices[activeAsset] / priceHistory[activeAsset][0] - 1) * 100).toFixed(2)}%
228228
</div>
229229
</div>
230-
<div style={{ height: '300px', width: '100%', background: '#111', borderRadius: '4px' }}>{renderChart()}</div>
230+
<div style={{ height: '260px', width: '100%', background: '#111', borderRadius: '4px' }}>{renderChart()}</div>
231231
</div>
232232

233233
<div className="card news-panel">
234-
<div style={{ display: 'flex', alignItems: 'center', gap: '10px', marginBottom: '15px', color: '#ffd700' }}>
235-
<Newspaper size={20} /><h3 style={{ margin: 0 }}>实时新闻快讯</h3>
234+
<div style={{ display: 'flex', alignItems: 'center', gap: '10px', marginBottom: '12px', color: '#ffd700' }}>
235+
<Newspaper size={18} /><h3 style={{ margin: 0, fontSize: '16px' }}>实时快讯</h3>
236236
</div>
237-
{news.length === 0 && <div style={{ color: '#555', textAlign: 'center', marginTop: '20px' }}>等待市场行情事件...</div>}
237+
{news.length === 0 && <div style={{ color: '#555', textAlign: 'center', marginTop: '10px' }}>等待市场行情...</div>}
238238
{news.map(item => (
239239
<div key={item.id} className="news-item">
240-
<span style={{ color: '#888', marginRight: '10px' }}>[{new Date(item.id).toLocaleTimeString([], {hour: '2-digit', minute:'2-digit', second:'2-digit'})}]</span>
240+
<span style={{ color: '#888', marginRight: '8px', fontSize: '12px' }}>[{new Date(item.id).toLocaleTimeString([], {hour: '2-digit', minute:'2-digit', second:'2-digit'})}]</span>
241241
{item.text}
242242
</div>
243243
))}
@@ -246,48 +246,48 @@ const App: React.FC = () => {
246246

247247
<aside className="sidebar">
248248
<div className="card trading-panel">
249-
<div style={{ display: 'flex', alignItems: 'center', gap: '10px', marginBottom: '10px' }}>
250-
<Wallet size={20} color="#ffd700" /><h3 style={{ margin: 0 }}>交易 {ASSET_CONFIG[activeAsset].name}</h3>
249+
<div style={{ display: 'flex', alignItems: 'center', gap: '8px', marginBottom: '8px' }}>
250+
<Wallet size={18} color="#ffd700" /><h3 style={{ margin: 0, fontSize: '16px' }}>交易 {ASSET_CONFIG[activeAsset].name}</h3>
251251
</div>
252-
<div style={{ fontSize: '14px', color: '#888', marginBottom: '10px' }}>杠杆倍数: {LEVERAGE}x</div>
253-
<div style={{ marginBottom: '15px' }}>
254-
<div style={{ fontSize: '12px', color: '#888', marginBottom: '8px' }}>资金使用率: {(utilizationRate * 100).toFixed(0)}%</div>
252+
<div style={{ fontSize: '13px', color: '#888', marginBottom: '8px' }}>杠杆倍数: {LEVERAGE}x</div>
253+
<div style={{ marginBottom: '12px' }}>
254+
<div style={{ fontSize: '12px', color: '#888', marginBottom: '6px' }}>资金使用率: {(utilizationRate * 100).toFixed(0)}%</div>
255255
<div style={{ display: 'flex', gap: '4px', flexWrap: 'wrap' }}>
256256
{[0.1, 0.3, 0.5, 0.8, 1.0].map(rate => (
257-
<button key={rate} onClick={() => setUtilizationRate(rate)} style={{ padding: '4px 6px', fontSize: '11px', background: utilizationRate === rate ? '#444' : '#222', border: utilizationRate === rate ? '1px solid #ffd700' : '1px solid #444', borderRadius: '4px', color: '#fff', cursor: 'pointer', flex: '1 0 30%' }}>
257+
<button key={rate} onClick={() => setUtilizationRate(rate)} style={{ padding: '4px 0', fontSize: '11px', background: utilizationRate === rate ? '#444' : '#222', border: utilizationRate === rate ? '1px solid #ffd700' : '1px solid #444', borderRadius: '4px', color: '#fff', cursor: 'pointer', flex: '1 0 30%', minWidth: '50px' }}>
258258
{rate * 100}%
259259
</button>
260260
))}
261261
</div>
262262
</div>
263-
<button className="btn btn-long" onClick={() => openPosition(1)} disabled={!!position} style={{ width: '100%', marginBottom: '10px' }}>买入 / 做多</button>
264-
<button className="btn btn-short" onClick={() => openPosition(-1)} disabled={!!position} style={{ width: '100%' }}>卖出 / 做空</button>
263+
<button className="btn btn-long" onClick={() => openPosition(1)} disabled={!!position}>买入 / 做多</button>
264+
<button className="btn btn-short" onClick={() => openPosition(-1)} disabled={!!position} style={{ marginTop: '8px' }}>卖出 / 做空</button>
265265
{position && (
266-
<div style={{ marginTop: '20px', padding: '15px', background: '#222', borderRadius: '4px', borderLeft: `4px solid ${position.direction === 1 ? '#26a69a' : '#ef5350'}` }}>
267-
<div style={{ display: 'flex', justifyContent: 'space-between', marginBottom: '5px' }}>
268-
<span>{position.direction === 1 ? '做多' : '做空'} {ASSET_CONFIG[position.asset].name}</span>
269-
<span className={unrealizedPnL >= 0 ? 'price-up' : 'price-down'}>{unrealizedPnL >= 0 ? '+' : ''}{unrealizedPnL.toLocaleString(undefined, {minimumFractionDigits: 2, maximumFractionDigits: 2})}</span>
266+
<div style={{ marginTop: '15px', padding: '12px', background: '#222', borderRadius: '4px', borderLeft: `4px solid ${position.direction === 1 ? '#26a69a' : '#ef5350'}` }}>
267+
<div style={{ display: 'flex', justifyContent: 'space-between', marginBottom: '4px' }}>
268+
<span style={{ fontSize: '14px' }}>{position.direction === 1 ? '做多' : '做空'} {ASSET_CONFIG[position.asset].name}</span>
269+
<span className={unrealizedPnL >= 0 ? 'price-up' : 'price-down'} style={{ fontWeight: 'bold' }}>{unrealizedPnL >= 0 ? '+' : ''}{unrealizedPnL.toLocaleString(undefined, {minimumFractionDigits: 2, maximumFractionDigits: 2})}</span>
270270
</div>
271-
<div style={{ fontSize: '12px', color: '#888' }}>开仓价: ${position.entryPrice.toFixed(2)}</div>
272-
<button className="btn btn-close" style={{ width: '100%', marginTop: '15px' }} onClick={closePosition}>平仓</button>
271+
<div style={{ fontSize: '11px', color: '#888' }}>开仓价: ${position.entryPrice.toFixed(2)}</div>
272+
<button className="btn btn-close" style={{ marginTop: '10px', padding: '8px' }} onClick={closePosition}>平仓</button>
273273
</div>
274274
)}
275275
</div>
276276
<div className="card">
277-
<h3 style={{ margin: '0 0 15px 0', fontSize: '16px' }}>实时风控</h3>
278-
<div style={{ height: '10px', background: '#333', borderRadius: '5px', overflow: 'hidden' }}>
277+
<h3 style={{ margin: '0 0 12px 0', fontSize: '15px' }}>实时风控</h3>
278+
<div style={{ height: '8px', background: '#333', borderRadius: '4px', overflow: 'hidden' }}>
279279
<div style={{ height: '100%', width: `${Math.min(100, (currentUtilization / 1.2) * 100)}%`, background: currentUtilization > 1.0 ? '#ef5350' : '#26a69a' }} />
280280
</div>
281-
<div style={{ fontSize: '12px', color: '#888', marginTop: '10px', textAlign: 'center' }}>实时资金使用率: {(currentUtilization * 100).toFixed(1)}% / 120%</div>
281+
<div style={{ fontSize: '11px', color: '#888', marginTop: '8px', textAlign: 'center' }}>资金使用率: {(currentUtilization * 100).toFixed(1)}% / 120%</div>
282282
</div>
283283
</aside>
284284

285285
{isLiquidated && (
286286
<div className="liquidation-overlay">
287-
<AlertTriangle size={64} color="#ef5350" />
288-
<h1 style={{ color: '#ef5350', fontSize: '48px', margin: '20px 0' }}>爆仓！</h1>
289-
<p style={{ fontSize: '20px', color: '#888' }}>您的净资产已亏损殆尽，账户已被强制平仓。</p>
290-
<button className="btn btn-long" style={{ marginTop: '30px', padding: '15px 40px' }} onClick={() => window.location.reload()}>重新开始职业生涯</button>
287+
<AlertTriangle size={48} color="#ef5350" />
288+
<h1 style={{ color: '#ef5350', fontSize: '36px', margin: '15px 0' }}>爆仓！</h1>
289+
<p style={{ fontSize: '16px', color: '#888' }}>您的净资产已亏损殆尽。</p>
290+
<button className="btn btn-long" style={{ marginTop: '20px', padding: '12px 30px', width: 'auto' }} onClick={() => window.location.reload()}>重新开始职业生涯</button>
291291
</div>
292292
)}
293293
</div>

0 commit comments

Comments
 (0)