feat(ui): 第二轮P1 — scoped样式/mc-dialog暗黑适配/空状态/字号变量

This commit is contained in:
Hermes CI Fix
2026-07-17 16:55:09 +08:00
parent c82bd5b40f
commit c68bdd1e1d
12 changed files with 159 additions and 54 deletions
+21 -12
View File
@@ -12,33 +12,33 @@
<el-row :gutter="16" class="section-gap">
<el-col :span="6">
<el-card shadow="never">
<div style="text-align:center;">
<div style="font-size:28px;font-weight:600;color:#409eff;">{{ stats.total_kpis }}</div>
<div style="font-size:13px;color:#999;">KPI总数</div>
<div class="stat-card-inner">
<div class="stat-value" style="color:#409eff;">{{ stats.total_kpis }}</div>
<div class="stat-label">KPI总数</div>
</div>
</el-card>
</el-col>
<el-col :span="6">
<el-card shadow="never">
<div style="text-align:center;">
<div style="font-size:28px;font-weight:600;color:var(--bsc-learning);">{{ stats.open_logs }}</div>
<div style="font-size:13px;color:#999;">未解决异常</div>
<div class="stat-card-inner">
<div class="stat-value" style="color:var(--bsc-learning);">{{ stats.open_logs }}</div>
<div class="stat-label">未解决异常</div>
</div>
</el-card>
</el-col>
<el-col :span="6">
<el-card shadow="never">
<div style="text-align:center;">
<div style="font-size:28px;font-weight:600;color:#f56c6c;">{{ stats.severity_counts?.critical ?? 0 }}</div>
<div style="font-size:13px;color:#999;">严重异常</div>
<div class="stat-card-inner">
<div class="stat-value" style="color:#f56c6c;">{{ stats.severity_counts?.critical ?? 0 }}</div>
<div class="stat-label">严重异常</div>
</div>
</el-card>
</el-col>
<el-col :span="6">
<el-card shadow="never">
<div style="text-align:center;">
<div style="font-size:28px;font-weight:600;color:#67c23a;">{{ stats.type_counts?.missing_data ?? 0 }}</div>
<div style="font-size:13px;color:#999;">数据缺失</div>
<div class="stat-card-inner">
<div class="stat-value" style="color:#67c23a;">{{ stats.type_counts?.missing_data ?? 0 }}</div>
<div class="stat-label">数据缺失</div>
</div>
</el-card>
</el-col>
@@ -113,6 +113,7 @@
</template>
</el-table-column>
</el-table>
<el-empty v-if="!loading && logs.length === 0" description="暂无质量异常日志" />
</el-card>
</div>
</template>
@@ -189,3 +190,11 @@ onMounted(() => {
loadLogs()
})
</script>
<style scoped>
.quality-page { }
.stat-card-inner { text-align: center; }
.stat-card-inner .stat-value { font-size: 28px; font-weight: 600; }
.stat-card-inner .stat-label { font-size: 13px; color: #999; }
.section-gap-tabs { margin-top: 16px; }
</style>