+
diff --git a/css/style.css b/css/style.css
index a72dbdf..fff9be5 100644
--- a/css/style.css
+++ b/css/style.css
@@ -1531,3 +1531,109 @@ body {
font-size: 0.8rem;
}
}
+
+/* ========================================
+ 建造过程模拟 - 网格布局
+ ======================================== */
+.process-grid {
+ display: grid;
+ gap: var(--spacing-md);
+ margin-bottom: var(--spacing-xl);
+}
+
+/* 3x3 网格（基座部分） */
+.grid-3x3 {
+ grid-template-columns: repeat(3, 1fr);
+ grid-template-rows: repeat(3, auto);
+}
+
+/* 2x3 网格（主体结构部分） */
+.grid-2x3 {
+ grid-template-columns: repeat(3, 1fr);
+ grid-template-rows: repeat(2, auto);
+}
+
+/* 1x4 横向网格（屋面、墙面围护部分） */
+.grid-1x4 {
+ grid-template-columns: repeat(4, 1fr);
+ grid-template-rows: 1fr;
+}
+
+/* 网格项通用样式 */
+.grid-item {
+ background: var(--bg-card);
+ border-radius: var(--border-radius);
+ box-shadow: var(--shadow-soft);
+ overflow: hidden;
+ transition: var(--transition);
+}
+
+.grid-item:hover {
+ box-shadow: var(--shadow-hover);
+ transform: translateY(-5px);
+}
+
+.grid-item img {
+ width: 100%;
+ height: 250px;
+ object-fit: contain;
+ background: #FFFFFF;
+ display: block;
+}
+
+.grid-item .placeholder-text.small {
+ min-height: 250px;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ color: var(--text-light);
+ font-size: 0.9rem;
+}
+
+/* 图名标注样式 */
+.image-caption {
+ padding: 1rem;
+ text-align: center;
+ font-size: 0.9rem;
+ color: var(--text-secondary);
+ background: var(--bg-primary);
+ border-top: 2px solid var(--primary-muted);
+ margin: 0;
+ font-weight: 500;
+ line-height: 1.6;
+}
+
+/* 响应式适配 */
+@media (max-width: 1200px) {
+ /* 平板端：3x3和2x3改为2列，1x4改为2行2列 */
+ .grid-3x3,
+ .grid-2x3 {
+ grid-template-columns: repeat(2, 1fr);
+ grid-template-rows: auto;
+ }
+
+ .grid-1x4 {
+ grid-template-columns: repeat(2, 1fr);
+ grid-template-rows: repeat(2, auto);
+ }
+}
+
+@media (max-width: 768px) {
+ /* 移动端：所有网格改为单列 */
+ .grid-3x3,
+ .grid-2x3,
+ .grid-1x4 {
+ grid-template-columns: 1fr;
+ grid-template-rows: auto;
+ }
+
+ .grid-item img {
+ height: 200px;
+ }
+
+ .image-caption {
+ font-size: 0.85rem;
+ padding: 0.8rem;
+ }
+}
+
建造过程模拟
+ + +
+
+
+
+ 3.1 基座部分
+
+
+
+ 
+
+
+
+
+ 场地平整与定位放线
+
+ 
+
+
+
+
+ 地螺丝螺旋桩安装
+
+ 
+
+
+
+
+ 预制基础板吊装就位
+
+ 
+
+
+
+
+ 砖堆砌筑与加热棒预埋
+
+ 
+
+
+
+
+ 工字钢梁安装
+
+ 
+
+
+
+
+ 风管支架固定
+
+ 
+
+
+
+
+ 圆钢管柱定位安装
+
+ 
+
+
+
+
+ 外墙保温装饰一体板安装
+
+ 
+
+
+
+
+ 基座验收与防水处理
+
+
+
+
+ 3.2 主体结构部分
+
+
+
+ 
+
+
+
+
+ 钢柱吊装与定位
+
+ 
+
+
+
+
+ 钢梁安装与焊接
+
+ 
+
+
+
+
+ 拉索系统安装
+
+ 
+
+
+
+
+ 连接件紧固
+
+ 
+
+
+
+
+ 结构校正与调整
+
+ 
+
+
+
+
+ 主体结构验收
+
+
+
+
+ 3.3 屋面围护部分
+
+
+
+ 
+
+
+
+
+ 檩条安装
+
+ 
+
+
+
+
+ 屋面板铺设
+
+ 
+
+
+
+
+ 防水层与保温层施工
+
+ 
+
+
+
+
+ 屋面验收与收边处理
+
+
3.4 墙面围护部分
+
+
+ 
+
+
+
+
+ 龙骨安装
+
+ 
+
+
+
+
+ 外墙板安装
+
+ 
+
+
+
+
+ 门窗框安装
+
+ 
+
+
+
+ 墙面收口与验收
+