safety-eval-service-frontend/src/pages/Container/MonitorManage/RiskCenter/index.less

126 lines
2.1 KiB
Plaintext

.risk-center {
// 统计卡片网格
.stat-grid.cols-4 {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 16px;
margin-bottom: 10px;
}
// 统计卡片
.stat-card {
background: #fff;
border: 1px solid #e2e8f0;
border-radius: 8px;
padding: 12px;
display: flex;
justify-content: space-between;
.stat-info {
.stat-label {
font-size: 0.82rem;
color: #64748b;
}
.stat-value {
font-size: 1.75rem;
font-weight: 700;
line-height: 1.15;
margin-top: 6px;
}
.stat-value--high {
color: #dc2626;
}
.stat-value--mid {
color: #d97706;
}
.stat-value--ok {
color: #059669;
}
.stat-hint {
font-size: 0.75rem;
color: #64748b;
margin-top: 4px;
}
}
.stat-icon {
width: 38px;
height: 38px;
border-radius: 10px;
display: flex;
align-items: center;
justify-content: center;
font-size: 1.1rem;
flex-shrink: 0;
}
}
// 来源说明/规则提示
.source-note {
background: #f8fafc;
border: 1px solid #e2e8f0;
border-radius: 8px;
padding: 8px 14px;
font-size: 0.82rem;
color: #64748b;
margin-bottom: 10px;
display: flex;
align-items: center;
gap: 6px;
flex-wrap: wrap;
strong {
color: #1e293b;
}
}
// 来源字段药丸
.source-pill {
display: inline-flex;
align-items: center;
gap: 2px;
padding: 2px 7px;
border-radius: 999px;
background: #f1f5f9;
color: #475569;
font-size: 0.68rem;
white-space: nowrap;
}
// 工具条
.risk-toolbar {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 10px;
.risk-toolbar-left {
.risk-toolbar-desc {
font-size: 0.85rem;
color: #64748b;
}
}
.risk-toolbar-right {
display: flex;
gap: 8px;
}
}
.btn-ghost {
background: transparent;
color: #64748b;
border: 1px solid #e2e8f0;
&:hover {
background: #f1f5f9;
color: #1e293b;
}
}
}