重构建造模拟：建造总图（大图），构件表6部分（基座/主体/屋面/墙面/温棚/设备），前5部分上图下表+滑动小图，第6部分仅表格

2026-06-03 04:47:02 +08:00
parent 9d18235e9d
commit 47adff8869
2 changed files with 560 additions and 88 deletions
--- a/css/style.css
+++ b/css/style.css
@@ -1385,3 +1385,138 @@ body {
        max-height: 50vh;
    }
 }
+
+/* ========================================
+   建造模拟 - 构件表专用样式
+   ======================================== */
+
+/* 子板块标题 */
+.subsection {
+    margin-bottom: var(--spacing-xl);
+    padding-bottom: var(--spacing-lg);
+    border-bottom: 2px solid var(--primary-muted);
+}
+
+.subsection:last-child {
+    border-bottom: none;
+}
+
+.subsection-title {
+    font-size: 1.8rem;
+    color: var(--text-primary);
+    margin-bottom: var(--spacing-md);
+    font-weight: 600;
+    letter-spacing: 1px;
+}
+
+/* 上方左图右表布局 */
+.text-image-layout .layout-images img {
+    width: 100%;
+    height: auto;
+    max-height: 500px;
+    object-fit: contain;
+    background: #FFFFFF;
+    border-radius: var(--border-radius);
+    box-shadow: var(--shadow-soft);
+}
+
+.placeholder-text.medium {
+    min-height: 400px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    background: linear-gradient(135deg, var(--primary-muted) 0%, var(--primary-light) 100%);
+    color: var(--primary-dark);
+    font-size: 1.2rem;
+    border-radius: var(--border-radius);
+}
+
+/* 下方横向滑动小图 */
+.image-slider-container {
+    margin-top: var(--spacing-lg);
+}
+
+.slider-hint {
+    text-align: center;
+    color: var(--text-secondary);
+    font-size: 0.9rem;
+    margin-top: var(--spacing-sm);
+    font-style: italic;
+}
+
+.image-slider.construction-gallery .slider-item {
+    width: 250px;
+    flex-shrink: 0;
+}
+
+.image-slider.construction-gallery .slider-item img {
+    width: 100%;
+    height: 200px;
+    object-fit: contain;
+    background: #FFFFFF;
+    border-radius: var(--border-radius);
+    box-shadow: var(--shadow-soft);
+}
+
+.image-slider.construction-gallery .image-caption {
+    font-size: 0.85rem;
+    padding: var(--spacing-xs) 0;
+    border-top: 1px solid var(--primary-muted);
+}
+
+/* 响应式调整 */
+@media (max-width: 1024px) {
+    .text-image-layout {
+        flex-direction: column;
+    }
+    
+    .layout-images {
+        width: 100%;
+    }
+    
+    .layout-table-right {
+        width: 100%;
+    }
+    
+    .text-image-layout .layout-images img {
+        max-height: 400px;
+    }
+    
+    .placeholder-text.medium {
+        min-height: 300px;
+    }
+    
+    .image-slider.construction-gallery .slider-item {
+        width: 200px;
+    }
+    
+    .image-slider.construction-gallery .slider-item img {
+        height: 160px;
+    }
+}
+
+@media (max-width: 768px) {
+    .subsection-title {
+        font-size: 1.5rem;
+    }
+    
+    .text-image-layout .layout-images img {
+        max-height: 300px;
+    }
+    
+    .placeholder-text.medium {
+        min-height: 250px;
+    }
+    
+    .image-slider.construction-gallery .slider-item {
+        width: 180px;
+    }
+    
+    .image-slider.construction-gallery .slider-item img {
+        height: 140px;
+    }
+    
+    .image-slider.construction-gallery .image-caption {
+        font-size: 0.8rem;
+    }
+}