Lxy
/
AlphaFuturesPro2
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

fix: 修改卡片样式

Browse Source
master
Lxy 3 months ago
parent 0331915728
commit 361daff9cc
2 changed files with 99 additions and 23 deletions
Show Stats Download Patch File Download Diff File

93
src/pages/dashboard/Dashboard.jsx
Unescape View File

@ -66,37 +66,96 @@ const Dashboard = () => {
> >
<Row gutter={[16, 16]}> <Row gutter={[16, 16]}>
<Col span={24}> <Col span={24}>
<div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: 8 }}> <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start', marginBottom: 8 }}>
<div style={{ fontWeight: 'bold', fontSize: '16px' }}>{item.name} ({item.code})</div> <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 <Badge
status={item.changePercent > 0 ? 'success' : 'error'} status={item.changePercent > 0 ? 'success' : 'error'}
text={`${item.changePercent > 0 ? '+' : ''}${item.changePercent}%`} text={`${item.changePercent > 0 ? '+' : ''}${item.changePercent}%`}
/> />
</div> </div>
</div>
</Col> </Col>
{/* 当前价格、支撑、压力 */}
<Col span={24}> <Col span={24}>
<Statistic <Row gutter={[16, 0]} align="middle">
title="当前价格" <Col flex="auto">
value={item.currentPrice} <div style={{
valueStyle={{ color: item.changePercent > 0 ? '#52c41a' : '#ff4d4f' }} fontSize: '20px',
suffix="元" fontWeight: 'bold',
size="small" 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>
<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>
<Col span={12}> ))}
<div style={{ fontSize: '12px', color: '#8c8c8c' }}>ATR: {item.atr}</div> </Row>
</Col> </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>
<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> </Col>
</Row> </Row>
</Card> </Card>

19
src/utils/mockData.js
Unescape View File

@ -56,6 +56,13 @@ export const generateFutureData = (code, name) => {
adxStatus = '弱趋势'; 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 { return {
code, code,
name, name,
@ -68,8 +75,9 @@ export const generateFutureData = (code, name) => {
winRate, winRate,
trends: { trends: {
'5MIN': { direction: Math.random() > 0.5 ? '看多' : '看空', status: Math.random() > 0.5 ? '多头趋势' : '空头趋势', rsi: Math.floor(Math.random() * 100) }, '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) }, '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) } '1DAY': { direction: Math.random() > 0.5 ? '看多' : '看空', status: Math.random() > 0.5 ? '多头趋势' : '空头趋势', rsi: Math.floor(Math.random() * 100) }
}, },
indicators: { indicators: {
@ -83,6 +91,15 @@ export const generateFutureData = (code, name) => {
stopLoss: (currentPrice * (1 - 0.02)).toFixed(2), stopLoss: (currentPrice * (1 - 0.02)).toFixed(2),
target: (currentPrice * (1 + 0.03)).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)], riskLevel: ['低', '中等', '高'][Math.floor(Math.random() * 3)],
volatility: ['低', '中等', '高'][Math.floor(Math.random() * 3)] volatility: ['低', '中等', '高'][Math.floor(Math.random() * 3)]
}; };

Write Preview
Loading…
Cancel
Save