83 lines
1.3 KiB
Plaintext
83 lines
1.3 KiB
Plaintext
.metric-card {
|
|
background: #ffffff;
|
|
border-radius: var(--radius-lg);
|
|
padding: 24rpx;
|
|
box-shadow: var(--shadow-lg);
|
|
}
|
|
|
|
.metric-header {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
margin-bottom: 12rpx;
|
|
}
|
|
|
|
.metric-title {
|
|
font-size: var(--font-sm);
|
|
color: var(--color-gray-7);
|
|
}
|
|
|
|
.metric-help {
|
|
padding: 4rpx;
|
|
}
|
|
|
|
.metric-body {
|
|
display: flex;
|
|
align-items: baseline;
|
|
gap: 8rpx;
|
|
margin-bottom: 8rpx;
|
|
}
|
|
|
|
.metric-value {
|
|
font-size: 48rpx;
|
|
font-weight: 700;
|
|
color: var(--color-gray-13);
|
|
font-variant-numeric: tabular-nums;
|
|
}
|
|
|
|
.metric-unit {
|
|
font-size: var(--font-sm);
|
|
color: var(--color-gray-7);
|
|
}
|
|
|
|
.metric-trend {
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
|
|
.trend-tag {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 4rpx;
|
|
padding: 4rpx 12rpx;
|
|
border-radius: var(--radius-sm);
|
|
font-size: var(--font-xs);
|
|
}
|
|
|
|
/* 上升 → 绿色 */
|
|
.trend-up {
|
|
color: var(--color-success);
|
|
background: rgba(0, 168, 112, 0.08);
|
|
}
|
|
|
|
/* 下降 → 红色 */
|
|
.trend-down {
|
|
color: var(--color-error);
|
|
background: rgba(227, 77, 89, 0.08);
|
|
}
|
|
|
|
/* 持平 → 灰色 */
|
|
.trend-flat {
|
|
color: var(--color-gray-7);
|
|
background: rgba(139, 139, 139, 0.08);
|
|
}
|
|
|
|
.trend-flat-icon {
|
|
font-weight: 700;
|
|
}
|
|
|
|
.trend-text {
|
|
font-size: var(--font-xs);
|
|
font-variant-numeric: tabular-nums;
|
|
}
|