优化结果总览标题层级与人员区标题

This commit is contained in:
wkc
2026-03-27 15:05:59 +08:00
parent 966754e8c6
commit e7ad46edaf
9 changed files with 163 additions and 24 deletions

View File

@@ -262,21 +262,25 @@ export default {
.risk-overview-card {
margin-bottom: 16px;
padding: 24px 20px 20px;
}
.section-header {
margin-bottom: 16px;
margin-bottom: 18px;
padding-left: 12px;
border-left: 4px solid #2563eb;
}
.section-title {
font-size: 16px;
font-weight: 600;
color: #1f2937;
font-size: 20px;
line-height: 28px;
font-weight: 700;
color: #0f172a;
}
.section-subtitle {
margin-top: 4px;
margin-top: 6px;
font-size: 12px;
color: #94a3b8;
color: #64748b;
}
</style>

View File

@@ -100,19 +100,22 @@ export default {
}
.section-header {
margin-bottom: 16px;
margin-bottom: 18px;
padding-left: 12px;
border-left: 4px solid #2563eb;
}
.section-title {
font-size: 16px;
font-weight: 600;
color: #1f2937;
font-size: 20px;
line-height: 28px;
font-weight: 700;
color: #0f172a;
}
.section-subtitle {
margin-top: 4px;
margin-top: 6px;
font-size: 12px;
color: #94a3b8;
color: #64748b;
}
.block + .block {
@@ -127,13 +130,28 @@ export default {
}
.block-title {
font-size: 16px;
position: relative;
padding-left: 10px;
font-size: 15px;
font-weight: 600;
color: #1f2937;
color: #334155;
}
.block-title::before {
content: "";
position: absolute;
left: 0;
top: 50%;
width: 4px;
height: 14px;
border-radius: 999px;
background: #94a3b8;
transform: translateY(-50%);
}
.block-subtitle {
margin-top: 4px;
padding-left: 10px;
font-size: 12px;
color: #94a3b8;
}

View File

@@ -370,19 +370,22 @@ export default {
}
.section-header {
margin-bottom: 16px;
margin-bottom: 18px;
padding-left: 12px;
border-left: 4px solid #2563eb;
}
.section-title {
font-size: 16px;
font-weight: 600;
color: #1f2937;
font-size: 20px;
line-height: 28px;
font-weight: 700;
color: #0f172a;
}
.section-subtitle {
margin-top: 4px;
margin-top: 6px;
font-size: 12px;
color: #94a3b8;
color: #64748b;
}
.block + .block {
@@ -397,13 +400,28 @@ export default {
}
.block-title {
font-size: 16px;
position: relative;
padding-left: 10px;
font-size: 15px;
font-weight: 600;
color: #1f2937;
color: #334155;
}
.block-title::before {
content: "";
position: absolute;
left: 0;
top: 50%;
width: 4px;
height: 14px;
border-radius: 999px;
background: #94a3b8;
transform: translateY(-50%);
}
.block-subtitle {
margin-top: 4px;
padding-left: 10px;
font-size: 12px;
color: #94a3b8;
}

View File

@@ -1,6 +1,10 @@
<template>
<section class="risk-people-section">
<div class="section-toolbar">
<div>
<div class="section-title">风险人员总览</div>
<div class="section-subtitle">展示命中风险规则的重点人员</div>
</div>
<el-button size="mini" type="text">导出</el-button>
</div>
@@ -183,11 +187,38 @@ export default {
.section-toolbar {
display: flex;
justify-content: flex-end;
justify-content: space-between;
align-items: center;
margin-bottom: 14px;
}
.section-title {
position: relative;
padding-left: 10px;
font-size: 15px;
font-weight: 600;
color: #334155;
}
.section-title::before {
content: "";
position: absolute;
left: 0;
top: 50%;
width: 4px;
height: 14px;
border-radius: 999px;
background: #94a3b8;
transform: translateY(-50%);
}
.section-subtitle {
margin-top: 4px;
padding-left: 10px;
font-size: 12px;
color: #94a3b8;
}
.people-table {
border-radius: 12px;
overflow: hidden;

View File

@@ -21,3 +21,5 @@ const source = fs.readFileSync(componentPath, "utf8");
assert(source.includes("risk-overview-card"), "结果总览页缺少统一风险总览容器");
assert(source.includes("风险总览"), "结果总览页缺少风险总览标题");
assert(source.includes("border-left: 4px solid #2563eb;"), "主卡片标题应有更强的左侧强调样式");
assert(source.includes("font-size: 20px;"), "主卡片标题字号应提升到 20px");

View File

@@ -29,3 +29,9 @@ const detail = fs.readFileSync(
["风险明细", "涉险交易明细", "异常账户人员信息", "查看详情"].forEach((token) =>
assert(detail.includes(token), token)
);
assert(model.includes("border-left: 4px solid #2563eb;"), "风险模型主标题应有更强的左侧强调样式");
assert(detail.includes("border-left: 4px solid #2563eb;"), "风险明细主标题应有更强的左侧强调样式");
assert(model.includes("font-size: 20px;"), "风险模型主标题字号应提升到 20px");
assert(detail.includes("font-size: 20px;"), "风险明细主标题字号应提升到 20px");
assert(model.includes("font-size: 15px;"), "风险模型内部区块标题应保持次级字号");
assert(detail.includes("font-size: 15px;"), "风险明细内部区块标题应保持次级字号");

View File

@@ -54,4 +54,6 @@ assert(entry.includes("risk-people-section"), "入口应挂载风险人员区");
assert(entry.includes("risk-overview-card"), "统计区与风险人员区应位于统一总览卡片中");
assert(!stats.includes("风险仪表盘"), "统计区不应继续保留风险仪表盘标题");
assert(!stats.includes("风险总体数据概览"), "统计区不应继续保留旧副标题");
assert(!people.includes("风险人员总览"), "风险人员区不应继续保留独立大卡片标题");
assert(people.includes("风险人员总览"), "风险人员区应补充风险人员总览标题");
assert(people.includes("section-title"), "风险人员区应提供独立的小节标题样式");
assert(people.includes("font-size: 15px;"), "风险人员区内部标题应维持次级字号层级");