fix: 修改卡片样式

master
Lxy 3 months ago
parent 0331915728
commit 361daff9cc

@ -66,37 +66,96 @@ const Dashboard = () => {
>
<Row gutter={[16, 16]}>
<Col span={24}>
<div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: 8 }}>
<div style={{ fontWeight: 'bold', fontSize: '16px' }}>{item.name} ({item.code})</div>
<div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start', marginBottom: 8 }}>
<div>
<div style={{ fontWeight: 'bold', fontSize: '16px' }}>{item.name}-{item.code}2603</div>
<div style={{ fontSize: '12px', color: '#8c8c8c', marginTop: 2 }}>ATR: {item.atr} | ADX: {item.adx}</div>
</div>
<div style={{ textAlign: 'right' }}>
<div style={{ fontSize: '12px', color: '#8c8c8c', marginBottom: 2 }}>胜率: {item.winRate}%</div>
<Badge
status={item.changePercent > 0 ? 'success' : 'error'}
text={`${item.changePercent > 0 ? '+' : ''}${item.changePercent}%`}
/>
</div>
</div>
</Col>
{/* 当前价格、支撑、压力 */}
<Col span={24}>
<Statistic
title="当前价格"
value={item.currentPrice}
valueStyle={{ color: item.changePercent > 0 ? '#52c41a' : '#ff4d4f' }}
suffix="元"
size="small"
/>
<Row gutter={[16, 0]} align="middle">
<Col flex="auto">
<div style={{
fontSize: '20px',
fontWeight: 'bold',
color: item.changePercent > 0 ? '#52c41a' : '#ff4d4f'
}}>
{item.currentPrice}
</div>
</Col>
<Col flex="none">
<div style={{ fontSize: '12px', color: '#8c8c8c', marginRight: 16 }}>
支撑: {item.support}
</div>
</Col>
<Col flex="none">
<div style={{ fontSize: '12px', color: '#8c8c8c' }}>
压力: {item.resistance}
</div>
</Col>
</Row>
</Col>
<Col span={12}>
<div style={{ fontSize: '12px', color: '#8c8c8c' }}>胜率: {item.winRate}%</div>
{/* 多周期趋势 */}
<Col span={24}>
<div style={{ fontSize: '12px', fontWeight: 'bold', marginBottom: 4 }}>多周期趋势:</div>
<Row gutter={[8, 4]}>
{['15MIN', '30MIN', '60MIN', '1DAY'].map(period => (
<Col key={period} span={6}>
<div style={{
fontSize: '11px',
textAlign: 'center',
padding: '6px 4px',
borderRadius: '2px',
backgroundColor: item.trends[period].direction === '看多' ? 'rgba(82, 196, 26, 0.1)' : 'rgba(255, 77, 79, 0.1)',
color: item.trends[period].direction === '看多' ? '#52c41a' : '#ff4d4f'
}}>
{period.replace('MIN', 'min').replace('DAY', 'day')}<br />
{item.trends[period].direction}<br />
<span style={{ fontSize: '10px', color: '#8c8c8c' }}>{item.trends[period].status}</span><br />
<span style={{ fontSize: '10px', color: '#8c8c8c' }}>RSI: {item.trends[period].rsi}</span>
</div>
</Col>
<Col span={12}>
<div style={{ fontSize: '12px', color: '#8c8c8c' }}>ATR: {item.atr}</div>
))}
</Row>
</Col>
<Col span={12}>
<div style={{ fontSize: '12px', color: '#8c8c8c' }}>ADX: {item.adx}</div>
{/* 整体预判 */}
<Col span={24}>
<div style={{ fontSize: '12px', color: '#8c8c8c' }}>整体预判:
<span style={{
marginLeft: '4px',
padding: '2px 8px',
borderRadius: '10px',
backgroundColor: item.overallView === '多头排列' ? 'rgba(82, 196, 26, 0.1)' :
item.overallView === '空头排列' ? 'rgba(255, 77, 79, 0.1)' :
'rgba(250, 173, 20, 0.1)',
color: item.overallView === '多头排列' ? '#52c41a' :
item.overallView === '空头排列' ? '#ff4d4f' :
'#faad14'
}}>
{item.overallView}
</span>
</div>
</Col>
<Col span={12}>
<div style={{ fontSize: '12px', color: '#8c8c8c' }}>趋势: {item.adxStatus}</div>
{/* AI分析 */}
<Col span={24}>
<div style={{ fontSize: '12px', fontWeight: 'bold', marginBottom: 4 }}>AI分析:</div>
<div style={{ fontSize: '11px', color: '#8c8c8c', lineHeight: 1.4 }}>
MACD: {item.aiAnalysis.macd}<br />
{item.aiAnalysis.rsi}
</div>
</Col>
</Row>
</Card>

@ -56,6 +56,13 @@ export const generateFutureData = (code, name) => {
adxStatus = '弱趋势';
}
// 生成压力位和支撑位
const support = (currentPrice * (1 - 0.03)).toFixed(2);
const resistance = (currentPrice * (1 + 0.03)).toFixed(2);
// 生成整体预判
const overallView = ['观望', '中线', '多头排列', '空头排列', '震荡'][Math.floor(Math.random() * 5)];
return {
code,
name,
@ -68,8 +75,9 @@ export const generateFutureData = (code, name) => {
winRate,
trends: {
'5MIN': { direction: Math.random() > 0.5 ? '看多' : '看空', status: Math.random() > 0.5 ? '多头趋势' : '空头趋势', rsi: Math.floor(Math.random() * 100) },
'15MIN': { direction: Math.random() > 0.5 ? '看多' : '看空', status: Math.random() > 0.5 ? '多头趋势' : '空头趋势', rsi: Math.floor(Math.random() * 100) },
'30MIN': { direction: Math.random() > 0.5 ? '看多' : '看空', status: Math.random() > 0.5 ? '多头趋势' : '空头趋势', rsi: Math.floor(Math.random() * 100) },
'1HOUR': { direction: Math.random() > 0.5 ? '看多' : '看空', status: Math.random() > 0.5 ? '多头趋势' : '空头趋势', rsi: Math.floor(Math.random() * 100) },
'60MIN': { direction: Math.random() > 0.5 ? '看多' : '看空', status: Math.random() > 0.5 ? '多头趋势' : '空头趋势', rsi: Math.floor(Math.random() * 100) },
'1DAY': { direction: Math.random() > 0.5 ? '看多' : '看空', status: Math.random() > 0.5 ? '多头趋势' : '空头趋势', rsi: Math.floor(Math.random() * 100) }
},
indicators: {
@ -83,6 +91,15 @@ export const generateFutureData = (code, name) => {
stopLoss: (currentPrice * (1 - 0.02)).toFixed(2),
target: (currentPrice * (1 + 0.03)).toFixed(2)
},
support,
resistance,
overallView,
aiAnalysis: {
macd: Math.random() > 0.5 ? '金叉向上' : '死叉向下',
rsi: `RSI: ${Math.floor(Math.random() * 100)}`,
bollinger: `布林带: ${['触及上轨', '触及下轨', '在轨道内'][Math.floor(Math.random() * 3)]}`,
kdj: Math.random() > 0.5 ? 'KDJ:金叉向上' : 'KDJ:死叉向下'
},
riskLevel: ['低', '中等', '高'][Math.floor(Math.random() * 3)],
volatility: ['低', '中等', '高'][Math.floor(Math.random() * 3)]
};

Loading…
Cancel
Save