1
This commit is contained in:
parent
b3d6323f13
commit
0d1afe9b40
@ -126,11 +126,26 @@
|
||||
}
|
||||
|
||||
.stat-value.positive {
|
||||
color: #00ff41;
|
||||
color: #10b981;
|
||||
}
|
||||
|
||||
.stat-value.negative {
|
||||
color: #ff4444;
|
||||
color: #ef4444;
|
||||
}
|
||||
|
||||
/* 统计卡片内的正值/负值样式 */
|
||||
.grade-card-stats .positive {
|
||||
color: #10b981;
|
||||
background: rgba(16, 185, 129, 0.1);
|
||||
padding: 2px 8px;
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
.grade-card-stats .negative {
|
||||
color: #ef4444;
|
||||
background: rgba(239, 68, 68, 0.1);
|
||||
padding: 2px 8px;
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
/* 标签页 */
|
||||
@ -286,10 +301,10 @@
|
||||
color: #ff4444;
|
||||
}
|
||||
|
||||
/* 按等级统计 */
|
||||
/* 按等级统计 - 优化样式 */
|
||||
.grade-stats {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
|
||||
grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
|
||||
gap: 16px;
|
||||
margin-top: 30px;
|
||||
}
|
||||
@ -297,36 +312,101 @@
|
||||
.grade-card {
|
||||
background: var(--bg-secondary);
|
||||
border: 1px solid var(--border);
|
||||
border-radius: 4px;
|
||||
padding: 16px;
|
||||
border-radius: 8px;
|
||||
padding: 20px;
|
||||
transition: all 0.2s ease;
|
||||
}
|
||||
|
||||
.grade-card:hover {
|
||||
border-color: var(--accent);
|
||||
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
.grade-card-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-bottom: 12px;
|
||||
margin-bottom: 16px;
|
||||
padding-bottom: 12px;
|
||||
border-bottom: 1px solid var(--border);
|
||||
}
|
||||
|
||||
.grade-card-title {
|
||||
font-size: 16px;
|
||||
font-weight: 500;
|
||||
font-size: 15px;
|
||||
font-weight: 600;
|
||||
color: var(--text-primary);
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.5px;
|
||||
}
|
||||
|
||||
/* 为不同类型的卡片添加颜色标识 */
|
||||
.grade-card:nth-child(1) .grade-card-title {
|
||||
color: #60a5fa; /* 蓝色 - 交易统计 */
|
||||
}
|
||||
.grade-card:nth-child(2) .grade-card-title {
|
||||
color: #34d399; /* 绿色 - 盈亏指标 */
|
||||
}
|
||||
.grade-card:nth-child(3) .grade-card-title {
|
||||
color: #f87171; /* 红色 - 风险指标 */
|
||||
}
|
||||
.grade-card:nth-child(4) .grade-card-title {
|
||||
color: #fbbf24; /* 黄色 - 收益统计 */
|
||||
}
|
||||
|
||||
.grade-card-stats {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 8px;
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.grade-stat-row {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
font-size: 14px;
|
||||
padding: 4px 0;
|
||||
}
|
||||
|
||||
.grade-stat-label {
|
||||
color: var(--text-secondary);
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
/* 数字突出显示 */
|
||||
.grade-card-stats span:not(.grade-stat-label) {
|
||||
font-weight: 600;
|
||||
font-size: 15px;
|
||||
font-feature-settings: 'tnum';
|
||||
font-variant-numeric: tabular-nums;
|
||||
}
|
||||
|
||||
/* 添加统计卡片顶部指示条 */
|
||||
.grade-card::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
height: 3px;
|
||||
border-radius: 8px 8px 0 0;
|
||||
opacity: 0.8;
|
||||
}
|
||||
|
||||
.grade-card {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.grade-card:nth-child(1)::before {
|
||||
background: linear-gradient(90deg, #60a5fa, #3b82f6);
|
||||
}
|
||||
.grade-card:nth-child(2)::before {
|
||||
background: linear-gradient(90deg, #34d399, #10b981);
|
||||
}
|
||||
.grade-card:nth-child(3)::before {
|
||||
background: linear-gradient(90deg, #f87171, #ef4444);
|
||||
}
|
||||
.grade-card:nth-child(4)::before {
|
||||
background: linear-gradient(90deg, #fbbf24, #f59e0b);
|
||||
}
|
||||
|
||||
/* 空状态 */
|
||||
@ -2270,7 +2350,7 @@
|
||||
watch: {
|
||||
// 监听标签页切换,加载收益率数据并渲染图表
|
||||
activeTab(newTab) {
|
||||
if (newTab === 'returns') {
|
||||
if (newTab === 'stats') {
|
||||
if (this.dailyReturns.length === 0) {
|
||||
this.fetchDailyReturns();
|
||||
} else {
|
||||
|
||||
Loading…
Reference in New Issue
Block a user