添加前期分析板块9张图片结构,统一格式确保底部对齐

This commit is contained in:
2026-06-02 20:49:35 +08:00
parent 94d9680174
commit d32736b2d0
3 changed files with 348 additions and 22 deletions

View File

@@ -528,16 +528,60 @@ body {
animation: fadeInUp 0.6s ease-out;
}
.card-image placeholder-img img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
/* ========================================
前期分析板块 - 9张图片统一格式
======================================== */
.analysis-grid {
/* 3列布局确保图片上下底平齐 */
grid-template-columns: repeat(3, 1fr) !important;
gap: var(--spacing-md);
}
og-image.jpg img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.analysis-img {
/* 固定高度,确保所有图片底部对齐 */
height: 280px;
width: 100%;
overflow: hidden;
position: relative;
background: linear-gradient(135deg, var(--primary-muted) 0%, var(--primary-light) 100%);
}
.analysis-img img {
/* 关键使用object-fit: cover确保图片填满容器且不变形 */
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
display: block;
}
.analysis-img .placeholder-text {
/* 占位文字样式 */
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
color: var(--primary-dark);
font-size: 1.1rem;
font-weight: 500;
letter-spacing: 1px;
}
/* 响应式平板设备改为2列 */
@media (max-width: 1024px) {
.analysis-grid {
grid-template-columns: repeat(2, 1fr) !important;
}
}
/* 响应式手机设备改为1列 */
@media (max-width: 768px) {
.analysis-grid {
grid-template-columns: 1fr !important;
}
.analysis-img {
height: 250px;
}
}