feat(journalism): 全面升级新闻资讯列表为标题、简介、缩略图专业图文排版模式并适配多端

这个提交包含在:
wikiboss
2026-10-09 09:59:20 +08:00
父节点 c58a89ae31
当前提交 cbadce183b
共有 5 个文件被更改,包括 225 次插入 和 27 次删除

查看文件

@@ -4108,6 +4108,156 @@ img {
overflow: hidden;
}
/* 7.5 现代中式专业图文行卡片规范(标题、简介、缩略图专业排版) */
.nhc-news-list {
display: flex;
flex-direction: column;
gap: 20px;
}
.nhc-news-row {
display: flex;
align-items: stretch;
background: #FFFFFF;
border: 1px solid var(--border-color);
border-radius: var(--radius-sm);
padding: 24px;
box-shadow: var(--shadow-subtle);
transition: all var(--transition-fast);
text-decoration: none;
overflow: hidden;
}
.nhc-news-row:hover {
border-color: #BFDBFE;
box-shadow: 0 10px 25px -5px rgba(37, 99, 235, 0.08);
transform: translateY(-2px);
text-decoration: none;
}
.nhc-news-thumb {
flex-shrink: 0;
width: 280px;
height: 180px;
border-radius: var(--radius-sm);
overflow: hidden;
background: #F8FAFC;
border: 1px solid var(--border-color);
display: flex;
align-items: center;
justify-content: center;
}
.nhc-news-thumb img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.4s ease;
}
.nhc-news-row:hover .nhc-news-thumb img {
transform: scale(1.04);
}
.nhc-news-body {
flex: 1;
min-width: 0;
padding-left: 28px;
display: flex;
flex-direction: column;
justify-content: space-between;
}
.nhc-news-meta {
display: flex;
align-items: center;
gap: 12px;
margin-bottom: 8px;
}
.nhc-news-badge {
display: inline-flex;
align-items: center;
font-size: 12px;
font-weight: 500;
padding: 2px 10px;
border-radius: 3px;
background: #EFF6FF;
color: var(--primary);
border: 1px solid #BFDBFE;
white-space: nowrap;
}
.nhc-news-date {
font-size: 13px;
color: var(--text-muted);
font-variant-numeric: tabular-nums;
}
.nhc-news-title {
font-family: var(--font-serif);
font-size: 19px;
font-weight: 700;
color: var(--text-primary);
line-height: 1.45;
margin: 0 0 10px 0;
transition: color var(--transition-fast);
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
.nhc-news-row:hover .nhc-news-title {
color: var(--primary);
}
.nhc-news-desc {
font-size: 14px;
color: var(--text-secondary);
line-height: 1.65;
margin: 0 0 14px 0;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
.nhc-news-more {
display: inline-flex;
align-items: center;
gap: 6px;
font-size: 13px;
font-weight: 600;
color: var(--primary);
}
.nhc-news-row:hover .nhc-news-more svg {
transform: translateX(3px);
}
.nhc-news-more svg {
transition: transform var(--transition-fast);
}
@media (max-width: 768px) {
.nhc-news-row {
flex-direction: column;
padding: 16px;
gap: 14px;
}
.nhc-news-thumb {
width: 100%;
height: 180px;
}
.nhc-news-body {
padding-left: 0;
}
.nhc-news-title {
font-size: 16px;
}
}
/* 8. 现代中式紧凑纯标题列表规范 (nhc-title-list) */
.nhc-title-list {
background: #FFFFFF;