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

fix: 修改卡片样式

Browse Source
master
Lxy 4 months ago
parent d4155bb9a8
commit 578e88dbf0
2 changed files with 145 additions and 131 deletions
Show Stats Download Patch File Download Diff File

154
src/pages/dashboard/Dashboard.css
Unescape View File

@ -121,6 +121,7 @@
height: 100%; height: 100%;
transition: all 0.3s ease; transition: all 0.3s ease;
cursor: pointer; cursor: pointer;
padding: 20px;
} }
.future-card:hover { .future-card:hover {
@ -128,128 +129,149 @@
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1); box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
} }
.future-header { /* 品种名称和胜率 */
.future-header-new {
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
align-items: flex-start; align-items: center;
margin-bottom: 12px; margin-bottom: 8px;
} }
.future-name h4 { .future-name-new h3 {
margin: 0 0 4px 0; margin: 0;
font-size: 16px;
font-weight: 600;
color: #262626; color: #262626;
} }
.future-change { .future-winrate-new {
font-size: 14px; font-size: 14px;
font-weight: 500; color: #262626;
} }
.future-price { /* ATR/ADX和涨跌幅 */
font-size: 20px; .future-info-new {
font-weight: bold; display: flex;
color: #262626; justify-content: space-between;
align-items: center;
margin-bottom: 16px; margin-bottom: 16px;
font-size: 14px;
color: #8c8c8c;
} }
.future-overview { .future-indicators-new {
margin-bottom: 12px;
text-align: center;
} }
.future-metrics { .future-change-new {
display: flex; font-weight: 500;
justify-content: space-between;
margin-bottom: 16px;
padding-bottom: 16px;
border-bottom: 1px solid #f0f0f0;
} }
.future-levels { /* 当前价格和支撑压力位 */
display: flex; .future-price-new {
justify-content: space-between; font-size: 24px;
font-weight: bold;
margin-bottom: 12px; margin-bottom: 12px;
padding: 12px;
background: #fafafa;
border-radius: 4px;
} }
.level-item { .future-levels-new {
display: flex; display: flex;
flex-direction: column; justify-content: space-between;
align-items: center; margin-bottom: 16px;
flex: 1; font-size: 14px;
color: #262626;
} }
.level-label { .level-label-new {
font-size: 12px;
color: #8c8c8c;
margin-bottom: 4px;
} }
.level-value { /* 多周期趋势 */
.future-trend-title-new {
font-size: 14px; font-size: 14px;
font-weight: 500; font-weight: 500;
color: #262626; color: #262626;
margin-bottom: 12px;
} }
.future-ai-analysis { .future-trends-new {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 12px;
margin-bottom: 16px; margin-bottom: 16px;
}
.trend-item-new {
display: flex;
flex-direction: column;
align-items: center;
padding: 12px; padding: 12px;
background: #f0f8ff; background: #fafafa;
border-radius: 4px; border-radius: 4px;
font-size: 12px; text-align: center;
line-height: 1.4;
} }
.ai-label { .trend-period-new {
font-size: 14px;
font-weight: 500; font-weight: 500;
color: #1890ff; margin-bottom: 8px;
margin-right: 8px;
}
.ai-content {
color: #262626; color: #262626;
} }
.metric-item { .trend-direction-new {
display: flex; font-size: 14px;
flex-direction: column; font-weight: 500;
align-items: center; margin-bottom: 4px;
} }
.metric-label { .trend-status-new {
font-size: 12px; font-size: 12px;
color: #8c8c8c; color: #8c8c8c;
margin-bottom: 4px; margin-bottom: 4px;
} }
.metric-value { .trend-rsi-new {
font-size: 12px;
color: #8c8c8c;
}
/* 整体预判 */
.future-overview-new {
display: flex;
align-items: center;
margin-bottom: 16px;
font-size: 14px;
}
.overview-label-new {
color: #262626;
margin-right: 8px;
}
/* AI分析 */
.future-ai-analysis-new {
margin-bottom: 20px;
}
.ai-title-new {
font-size: 14px; font-size: 14px;
font-weight: 500; font-weight: 500;
color: #262626; color: #262626;
margin: 0 0 8px 0;
} }
.future-trends { .ai-content-new {
display: grid; font-size: 14px;
grid-template-columns: repeat(2, 1fr); color: #262626;
gap: 8px; line-height: 1.4;
} }
.trend-item { /* 查看详细分析按钮 */
display: flex; .detail-button-new {
flex-direction: column; width: 100%;
align-items: center;
padding: 8px;
background: #fafafa;
border-radius: 4px; border-radius: 4px;
font-size: 14px;
padding: 10px;
} }
.trend-period {
font-size: 12px;
color: #8c8c8c;
margin-bottom: 4px;
}
/* 加载容器 */ /* 加载容器 */
.loading-container { .loading-container {

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

@ -221,86 +221,78 @@ const Dashboard = () => {
hoverable hoverable
onClick={() => handleFutureClick(item)} onClick={() => handleFutureClick(item)}
> >
<div className="future-header"> {/* 品种名称和胜率 */}
<div className="future-name"> <div className="future-header-new">
<h4>{item.name}</h4> <div className="future-name-new">
<Tag size="small">{item.code}</Tag> <h3>{item.name}-{item.code}</h3>
</div>
<div className="future-change" style={{ color: getChangeColor(item.changePercent) }}>
{getChangeIcon(item.changePercent)} {Math.abs(item.changePercent)}%
</div> </div>
<div className="future-winrate-new">
胜率: {item.winRate}%
</div> </div>
<div className="future-price">
¥{item.currentPrice.toFixed(2)}
</div> </div>
{/* 整体预判 */} {/* ATR/ADX和涨跌幅 */}
<div className="future-overview"> <div className="future-info-new">
<Tag color={item.overallView === '多头排列' ? 'green' : item.overallView === '空头排列' ? 'red' : 'blue'}> <div className="future-indicators-new">
{item.overallView} ATR: {item.atr} | ADX: {item.adx}
</Tag>
</div> </div>
<div className="future-change-new" style={{ color: getChangeColor(item.changePercent) }}>
<div className="future-metrics"> ● {Math.abs(item.changePercent)}%
<div className="metric-item">
<span className="metric-label">胜率</span>
<span className="metric-value">{item.winRate}%</span>
</div> </div>
<div className="metric-item">
<span className="metric-label">ATR</span>
<span className="metric-value">{item.atr}</span>
</div> </div>
<div className="metric-item">
<span className="metric-label">ADX</span> {/* 当前价格和支撑压力位 */}
<span className="metric-value">{item.adx}</span> <div className="future-price-new" style={{ color: getChangeColor(item.changePercent) }}>
{item.currentPrice.toFixed(2)}
</div> </div>
<div className="future-levels-new">
<span className="level-label-new">支撑: {item.tradingAdvice?.support?.toFixed(2) || '-'}</span>
<span className="level-label-new">压力: {item.tradingAdvice?.resistance?.toFixed(2) || '-'}</span>
</div> </div>
{/* 压力支撑位 */} {/* 多周期趋势 */}
<div className="future-levels"> <div className="future-trend-title-new">
<div className="level-item"> 多周期趋势:
<span className="level-label">压力</span>
<span className="level-value">¥{item.tradingAdvice?.resistance?.toFixed(2) || '-'}</span>
</div> </div>
<div className="level-item"> <div className="future-trends-new">
<span className="level-label">支撑</span> {Object.entries(item.trends).map(([period, trend]) => (
<span className="level-value">¥{item.tradingAdvice?.support?.toFixed(2) || '-'}</span> <div key={period} className="trend-item-new">
<div className="trend-period-new">{period.replace('MIN', 'min').replace('HOUR', 'min')}</div>
<div className="trend-direction-new" style={{ color: getTrendColor(trend.direction) }}>
{trend.direction}
</div> </div>
<div className="trend-status-new">
{trend.status}
</div> </div>
<div className="trend-rsi-new">
{/* AI分析 */} RSI: {trend.rsi}
<div className="future-ai-analysis">
<span className="ai-label">AI分析:</span>
<span className="ai-content">{item.aiAnalysis || '-'}</span>
</div> </div>
<div className="future-trends">
<div className="trend-item">
<span className="trend-period">5MIN</span>
<Tag size="small" color={getTrendColor(item.trends['5MIN'].direction)}>
{item.trends['5MIN'].direction}
</Tag>
</div> </div>
<div className="trend-item"> ))}
<span className="trend-period">30MIN</span>
<Tag size="small" color={getTrendColor(item.trends['30MIN'].direction)}>
{item.trends['30MIN'].direction}
</Tag>
</div> </div>
<div className="trend-item">
<span className="trend-period">1HOUR</span> {/* 整体预判 */}
<Tag size="small" color={getTrendColor(item.trends['1HOUR'].direction)}> <div className="future-overview-new">
{item.trends['1HOUR'].direction} <span className="overview-label-new">整体预判:</span>
<Tag color={item.overallView === '多头排列' ? 'green' : item.overallView === '空头排列' ? 'red' : 'orange'}>
{item.overallView}
</Tag> </Tag>
</div> </div>
<div className="trend-item">
<span className="trend-period">1DAY</span> {/* AI分析 */}
<Tag size="small" color={getTrendColor(item.trends['1DAY'].direction)}> <div className="future-ai-analysis-new">
{item.trends['1DAY'].direction} <h4 className="ai-title-new">AI分析:</h4>
</Tag> <div className="ai-content-new">
{item.aiAnalysis?.split(' | ').map((item, index) => (
<div key={index}>{item}</div>
))}
</div> </div>
</div> </div>
{/* 查看详细分析按钮 */}
<Button type="primary" className="detail-button-new" onClick={() => handleFutureClick(item)}>
查看详细分析
</Button>
</Card> </Card>
</Col> </Col>
))} ))}

Write Preview
Loading…
Cancel
Save