添加前期分析板块9张图片结构,统一格式确保底部对齐
This commit is contained in:
@@ -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;
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user