feat(cases): 实现大公司品牌级标杆案例独立页(多维筛选、挑战方案结果与成果数据指标墙)

这个提交包含在:
wikiboss
2026-10-08 17:19:08 +08:00
父节点 c6dbda61da
当前提交 0a9f8adae6
共有 5 个文件被更改,包括 948 次插入 和 135 次删除

查看文件

@@ -2509,3 +2509,107 @@ img {
padding: 24px;
}
}
/* ==========================================================================
案例独立页专有样式 (Cases Page Modern Style)
========================================================================== */
/* 多维分类筛选器 */
.nhc-case-filter-wrap {
display: flex;
justify-content: center;
flex-wrap: wrap;
gap: 12px;
margin-bottom: 50px;
}
.nhc-case-filter-btn {
padding: 8px 24px;
border-radius: 30px;
border: 1px solid var(--border-color);
background: #FFFFFF;
color: var(--text-secondary);
font-size: 14px;
font-weight: 500;
cursor: pointer;
transition: all 0.25s ease;
user-select: none;
}
.nhc-case-filter-btn:hover {
border-color: var(--primary);
color: var(--primary);
background: #EFF6FF;
}
.nhc-case-filter-btn.active {
background: var(--primary);
color: #FFFFFF;
border-color: var(--primary);
box-shadow: 0 4px 14px rgba(37, 99, 235, 0.25);
}
/* 成果数据指标墙板块 */
.nhc-case-metrics-section {
padding: 80px 0;
background-color: var(--bg-secondary);
border-top: 1px solid var(--border-color);
border-bottom: 1px solid var(--border-color);
margin-top: 60px;
}
.nhc-case-metrics-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 24px;
}
.nhc-case-metric-card {
background: #FFFFFF;
border: 1px solid var(--border-color);
border-radius: var(--radius-sm);
padding: 28px 24px;
text-align: center;
box-shadow: var(--shadow-subtle);
transition: all 0.25s ease;
}
.nhc-case-metric-card:hover {
transform: translateY(-2px);
border-color: var(--primary);
box-shadow: 0 10px 24px -5px rgba(15, 23, 42, 0.08);
}
.nhc-case-metric-big {
font-family: var(--font-sans);
font-size: 40px;
font-weight: 700;
color: var(--primary);
line-height: 1.1;
margin-bottom: 8px;
}
.nhc-case-metric-title {
font-family: var(--font-serif);
font-size: 15px;
font-weight: 700;
color: var(--text-primary);
margin-bottom: 4px;
}
.nhc-case-metric-sub {
font-size: 12px;
color: var(--text-muted);
}
@media (max-width: 1024px) {
.nhc-case-metrics-grid {
grid-template-columns: repeat(2, 1fr);
}
}
@media (max-width: 768px) {
.nhc-case-metrics-grid {
grid-template-columns: 1fr;
}
}