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

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

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

Write Preview
Loading…
Cancel
Save