1
This commit is contained in:
aaron
parent
ba43015148
commit
2ebb38c843
@ -301,6 +301,52 @@
|
||||
color: #ff4444;
|
||||
}
|
||||
|
||||
/* 核心指标网格 - 突出显示 */
|
||||
.core-metrics-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(4, 1fr);
|
||||
gap: 20px;
|
||||
margin-bottom: 30px;
|
||||
}
|
||||
|
||||
.core-metric-card {
|
||||
background: var(--bg-secondary);
|
||||
border: 2px solid var(--border);
|
||||
border-radius: 12px;
|
||||
padding: 24px 20px;
|
||||
text-align: center;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.core-metric-card:hover {
|
||||
border-color: var(--accent);
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 8px 20px rgba(0, 255, 65, 0.15);
|
||||
}
|
||||
|
||||
.core-metric-label {
|
||||
font-size: 13px;
|
||||
color: var(--text-secondary);
|
||||
margin-bottom: 12px;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 1px;
|
||||
}
|
||||
|
||||
.core-metric-value {
|
||||
font-size: 32px;
|
||||
font-weight: 700;
|
||||
font-feature-settings: 'tnum';
|
||||
font-variant-numeric: tabular-nums;
|
||||
}
|
||||
|
||||
.core-metric-value.positive {
|
||||
color: var(--accent);
|
||||
}
|
||||
|
||||
.core-metric-value.negative {
|
||||
color: #ff4444;
|
||||
}
|
||||
|
||||
/* 按等级统计 - 优化样式 */
|
||||
.grade-stats {
|
||||
display: grid;
|
||||
@ -698,6 +744,15 @@
|
||||
min-width: calc(50% - 8px);
|
||||
}
|
||||
|
||||
.core-metrics-grid {
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.core-metric-value {
|
||||
font-size: 24px;
|
||||
}
|
||||
|
||||
.grade-stats {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
@ -1322,11 +1377,35 @@
|
||||
|
||||
<!-- 详细统计 -->
|
||||
<div v-if="activeTab === 'stats'">
|
||||
<!-- 总体指标汇总 -->
|
||||
<div class="grade-stats" style="margin-bottom: 30px;">
|
||||
<!-- 核心指标 - 突出显示 -->
|
||||
<div class="core-metrics-grid">
|
||||
<div class="core-metric-card">
|
||||
<div class="core-metric-label">累计收益率</div>
|
||||
<div class="core-metric-value" :class="totalReturn >= 0 ? 'positive' : 'negative'">
|
||||
{{ totalReturn >= 0 ? '+' : '' }}{{ totalReturn.toFixed(2) }}%
|
||||
</div>
|
||||
</div>
|
||||
<div class="core-metric-card">
|
||||
<div class="core-metric-label">最大回撤</div>
|
||||
<div class="core-metric-value" :class="stats.max_drawdown <= 0 ? 'negative' : 'positive'">
|
||||
{{ stats.max_drawdown ? stats.max_drawdown.toFixed(2) : '0.00' }}%
|
||||
</div>
|
||||
</div>
|
||||
<div class="core-metric-card">
|
||||
<div class="core-metric-label">胜率</div>
|
||||
<div class="core-metric-value">{{ stats.win_rate.toFixed(1) }}%</div>
|
||||
</div>
|
||||
<div class="core-metric-card">
|
||||
<div class="core-metric-label">盈亏比</div>
|
||||
<div class="core-metric-value">{{ stats.profit_factor === Infinity ? '∞' : stats.profit_factor.toFixed(2) }}</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 详细数据 -->
|
||||
<div class="grade-stats" style="margin-top: 30px;">
|
||||
<div class="grade-card">
|
||||
<div class="grade-card-header">
|
||||
<span class="grade-card-title">交易统计</span>
|
||||
<span class="grade-card-title">交易详情</span>
|
||||
</div>
|
||||
<div class="grade-card-stats">
|
||||
<div class="grade-stat-row">
|
||||
@ -1341,21 +1420,6 @@
|
||||
<span class="grade-stat-label">亏损交易</span>
|
||||
<span class="negative">{{ stats.losing_trades }}</span>
|
||||
</div>
|
||||
<div class="grade-stat-row">
|
||||
<span class="grade-stat-label">胜率</span>
|
||||
<span>{{ stats.win_rate.toFixed(1) }}%</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="grade-card">
|
||||
<div class="grade-card-header">
|
||||
<span class="grade-card-title">盈亏指标</span>
|
||||
</div>
|
||||
<div class="grade-card-stats">
|
||||
<div class="grade-stat-row">
|
||||
<span class="grade-stat-label">盈亏比</span>
|
||||
<span>{{ stats.profit_factor === Infinity ? '∞' : stats.profit_factor.toFixed(2) }}</span>
|
||||
</div>
|
||||
<div class="grade-stat-row">
|
||||
<span class="grade-stat-label">最佳交易</span>
|
||||
<span class="positive">{{ stats.best_trade.toFixed(2) }}%</span>
|
||||
@ -1368,28 +1432,9 @@
|
||||
</div>
|
||||
<div class="grade-card">
|
||||
<div class="grade-card-header">
|
||||
<span class="grade-card-title">风险指标</span>
|
||||
<span class="grade-card-title">收益分析</span>
|
||||
</div>
|
||||
<div class="grade-card-stats">
|
||||
<div class="grade-stat-row">
|
||||
<span class="grade-stat-label">最大回撤</span>
|
||||
<span :class="stats.max_drawdown <= 0 ? 'negative' : 'positive'">
|
||||
{{ stats.max_drawdown ? stats.max_drawdown.toFixed(2) : '0.00' }}%
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="grade-card">
|
||||
<div class="grade-card-header">
|
||||
<span class="grade-card-title">收益统计</span>
|
||||
</div>
|
||||
<div class="grade-card-stats">
|
||||
<div class="grade-stat-row">
|
||||
<span class="grade-stat-label">累计收益率</span>
|
||||
<span :class="totalReturn >= 0 ? 'positive' : 'negative'">
|
||||
{{ totalReturn >= 0 ? '+' : '' }}{{ totalReturn.toFixed(2) }}%
|
||||
</span>
|
||||
</div>
|
||||
<div class="grade-stat-row">
|
||||
<span class="grade-stat-label">盈利天数</span>
|
||||
<span class="positive">{{ profitableDays }}</span>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user