yangyuqing/new-site
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

新增第三部分建造过程模拟：包含基座(9张3*3)、主体(6张2*3)、屋面(4张1*4)、墙面(4张1*4)四个子部分，每张图下方带文字注释

Browse Source
This commit is contained in:
yangyuqing
2026-06-03 07:15:53 +08:00
parent d26b4fbcee
commit bab511ec62
2 changed files with 394 additions and 119 deletions
Download Patch File Download Diff File Expand all files Collapse all files

261
construction.html
View File

@@ -101,7 +101,6 @@
<div class="placeholder-text medium" style="display:none;">基座部分示意图</div>
</div>
<div class="layout-table-right">
<div class="table-container">
<table class="performance-table">
<thead>
<tr>
@@ -127,7 +126,6 @@
</table>
</div>
</div>
</div>
<!-- 下方：横向滑动小图（至少8张） -->
<div class="image-slider-container">
@@ -193,26 +191,31 @@
<div class="placeholder-text medium" style="display:none;">主体结构示意图</div>
</div>
<div class="layout-table-right">
<div class="table-container">
<table class="performance-table">
<thead>
<tr>
<th>编号</th>
<th>名称</th>
<th>规格</th>
<th>构件</th>
<th>材质</th>
<th>尺寸/mm</th>
<th>重量/kg</th>
<th>数量</th>
</tr>
</thead>
<tbody>
<tr><td>M-01</td><td>钢柱</td><td>H200×200</td><td>8</td></tr>
<tr><td>M-02</td><td>钢梁</td><td>H250×125</td><td>16</td></tr>
<tr><td>M-03</td><td>拉索</td><td>Φ12</td><td>24</td></tr>
<tr><td>M-04</td><td>连接件</td><td>M16</td><td>64</td></tr>
<tr><td>1</td><td>Q235B圆钢管柱上半截（带加劲肋外法兰对接）</td><td>钢材</td><td>Φ219*6*5000mm </td><td>157.6</td><td>4</td></tr>
<tr><td>2</td><td>Q235B圆钢管柱下半截（带加劲肋外法兰对接）</td><td>钢材</td><td>Φ219*6*5000mm </td><td>157.6</td><td>4</td></tr>
<tr><td>3</td><td>网架</td><td>钢材</td><td>60*60*4*8000*2000*1060mm</td><td>592</td><td>8</td></tr>
<tr><td>4</td><td>网架（预埋A套筒）</td><td>钢材</td><td>60*60*4*8000*2000*1060mm</td><td>592</td><td>2</td></tr>
<tr><td>5</td><td>网架（预埋B套筒）</td><td>钢材</td><td>60*60*4*8000*2000*1060mm</td><td>592</td><td>2</td></tr>
<tr><td>6</td><td>网架（预埋C套筒）</td><td>钢材</td><td>60*60*4*8000*2000*1060mm</td><td>592</td><td>2</td></tr>
<tr><td>7</td><td>网架（预埋D套筒）</td><td>钢材</td><td>60*60*4*8000*2000*1060mm</td><td>592</td><td>2</td></tr>
<tr><td>8</td><td>三角坡屋面支撑架</td><td>钢材</td><td>60*60*4*8000*2000*1080mm 60*60*4*6000*2000*1080mm</td><td>300/232</td><td>10/4</td></tr>
<tr><td>9</td><td>15.2mm钢绞线</td><td>钢材</td><td>大于132m</td><td>145</td><td>1</td></tr>
</tbody>
</table>
</div>
</div>
</div>
<!-- 下方：横向滑动小图（至少8张） -->
<div class="image-slider-container">
@@ -278,26 +281,34 @@
<div class="placeholder-text medium" style="display:none;">屋面围护示意图</div>
</div>
<div class="layout-table-right">
<div class="table-container">
<table class="performance-table">
<thead>
<tr>
<th>编号</th>
<th>名称</th>
<th>规格</th>
<th>构件</th>
<th>材质</th>
<th>尺寸/mm</th>
<th>重量/kg</th>
<th>数量</th>
</tr>
</thead>
<tbody>
<tr><td>R-01</td><td>屋面板</td><td>1200×6000mm</td><td>20</td></tr>
<tr><td>R-02</td><td>檩条</td><td>C160×60</td><td>40</td></tr>
<tr><td>R-03</td><td>防水层</td><td>TPO卷材</td><td>1</td></tr>
<tr><td>R-04</td><td>保温层</td><td>岩棉板100mm</td><td>1</td></tr>
<tr><td>1</td><td>彩钢压型屋面夹芯板1</td><td>钢材、岩棉</td><td>2260*2000*70mm</td><td>90</td><td>52</td></tr>
<tr><td>2</td><td>彩钢压型屋面夹芯板2</td><td>钢材、岩棉</td><td>2000*1160*70mm</td><td>46</td><td>52</td></tr>
<tr><td>3</td><td>彩钢压型屋面夹芯板3</td><td>钢材、岩棉</td><td>△30*2020*1260*70mm</td><td>25</td><td>18</td></tr>
<tr><td>4</td><td>彩钢压型屋面夹芯板4</td><td>钢材、岩棉</td><td>2050*2000*130mm</td><td>45</td><td>8</td></tr>
<tr><td>5</td><td>岩棉板组合1</td><td>岩棉</td><td>1925*720*60mm 1925*740*60mm 1925*460*60mm</td><td>25/26/16</td><td>52/52/52</td></tr>
<tr><td>6</td><td>岩棉板组合2</td><td>岩棉</td><td>△1460*840*60mm △750*430*60mm</td><td>15/9</td><td>18/18</td></tr>
<tr><td>7</td><td>天窗</td><td>钢材、玻璃</td><td>1920*1800*70mm</td><td>95</td><td>4</td></tr>
<tr><td>8</td><td>排水外天沟</td><td>不锈钢</td><td>u形4000*220*120*1mm</td><td>15</td><td>16</td></tr>
<tr><td>9</td><td>排水内天沟</td><td>不锈钢</td><td>异形4000*200*80*1mm</td><td>14</td><td>28</td></tr>
<tr><td>10</td><td>太阳能板支架及夹具</td><td>铝合金</td><td>1950*60*60*3mm（∠15mm）</td><td>9.7</td><td>104</td></tr>
<tr><td>11</td><td>光伏板A</td><td>/</td><td>1860*1110*30mm</td><td>25</td><td>102</td></tr>
<tr><td>12</td><td>光伏板B</td><td>/</td><td>1520*1110*30mm</td><td>20</td><td>2</td></tr>
</tbody>
</table>
</div>
</div>
</div>
<!-- 下方：横向滑动小图（至少8张） -->
<div class="image-slider-container">
@@ -368,26 +379,27 @@
<div class="placeholder-text medium" style="display:none;">墙面围护示意图</div>
</div>
<div class="layout-table-right">
<div class="table-container">
<table class="performance-table">
<thead>
<tr>
<th>编号</th>
<th>名称</th>
<th>规格</th>
<th>构件</th>
<th>材质</th>
<th>尺寸/mm</th>
<th>重量/kg</th>
<th>数量</th>
</tr>
</thead>
<tbody>
<tr><td>W-01</td><td>外墙板</td><td>1200×3000mm</td><td>48</td></tr>
<tr><td>W-02</td><td>龙骨</td><td>C75×50</td><td>96</td></tr>
<tr><td>W-03</td><td>玻璃窗</td><td>1500×1800mm</td><td>12</td></tr>
<tr><td>W-04</td><td>门</td><td>900×2100mm</td><td>4</td></tr>
<tr><td>1</td><td>C型竖龙骨</td><td>钢材</td><td>3450*50*45*0.6mm 1200*50*45*0.6mm</td><td>2.6/0.9</td><td>57/7</td></tr>
<tr><td>2</td><td>u型沿地/沿顶龙骨</td><td>钢材</td><td>4000*50*45*0.6mm</td><td>2.4</td><td>16</td></tr>
<tr><td>3</td><td>通贯龙骨</td><td>钢材</td><td>4000*DU38*12*1.0mm 2100*DU38*12*1.0mm 1100*DU38*12*1.0mm 870*DU38*12*1.0mm</td><td>1.8/0.9/0.5/0.4</td><td>19/8/9/5</td></tr>
<tr><td>4</td><td>保温一体板</td><td>硅酸钙板，岩棉</td><td>1040*1160*200mm 1040*1200*200mm 1040*920*200mm 1000*1160*200mm 1000*1200*200mm 1000*920*200mm 840*1160*200mm 840*1200*200mm 840*920*200mm</td><td>48kg/㎡</td><td>57/33/36/24/8/4/4</td></tr>
<tr><td>5</td><td>窗户</td><td>铝合金，玻璃</td><td>2260*1000*60mm</td><td>80</td><td>12</td></tr>
</tbody>
</table>
</div>
</div>
</div>
<!-- 下方：横向滑动小图（5张） -->
<div class="image-slider-container">
@@ -441,54 +453,211 @@
</div>
<!-- 下方：构件表 -->
<div class="table-container">
<table class="performance-table wide">
<thead>
<tr>
<th>编号</th>
<th>名称</th>
<th>规格</th>
<th>构件</th>
<th>材质</th>
<th>尺寸/mm</th>
<th>重量/kg</th>
<th>数量</th>
</tr>
</thead>
<tbody>
<tr><td>G-01</td><td>骨架</td><td>镀锌钢管</td><td>24</td></tr>
<tr><td>G-02</td><td>覆盖膜</td><td>PO膜0.12mm</td><td>1</td></tr>
<tr><td>G-03</td><td>通风窗</td><td>电动开启</td><td>4</td></tr>
<tr><td>G-04</td><td>遮阳网</td><td>外遮阳系统</td><td>1</td></tr>
<tr><td>1</td><td>围护中空阳光板</td><td>PC</td><td>10*2040*2000mm 10*3460*2040mm 10*3460*2000mm</td><td>0.06/0.11/0.11</td><td>8/18/18</td></tr>
<tr><td>2</td><td>钢框架（临时支架）</td><td>钢材</td><td>60*60*4*3460*2000*2040mm</td><td>519</td><td>18</td></tr>
</tbody>
</table>
</div>
</div>
<!-- 2.6 设备部分（只有一张表） -->
<div class="subsection">
<h3 class="subsection-title">2.6 设备部分</h3>
<div class="table-container">
<table class="performance-table wide">
<thead>
<tr>
<th>编号</th>
<th>设备名称</th>
<th>型号规格</th>
<th>设备</th>
<th>尺寸/mm</th>
<th>载重/t</th>
<th>自重/kg</th>
<th>数量</th>
<th>备注</th>
<th>其他</th>
</tr>
</thead>
<tbody>
<tr><td>E-01</td><td>太阳能光伏板</td><td>550W单晶</td><td>20</td><td>屋顶安装</td></tr>
<tr><td>E-02</td><td>逆变器</td><td>10kW</td><td>2</td><td>室内安装</td></tr>
<tr><td>E-03</td><td>蓄电池组</td><td>48V/200Ah</td><td>4</td><td>储能系统</td></tr>
<tr><td>E-04</td><td>雨水收集系统</td><td>5000L</td><td>1</td><td>地下埋设</td></tr>
<tr><td>E-05</td><td>净水设备</td><td>RO反渗透</td><td>1</td><td>室内安装</td></tr>
<tr><td>E-06</td><td>供暖设备</td><td>空气源热泵</td><td>2</td><td>室外安装</td></tr>
<tr><td>E-07</td><td>通风系统</td><td>新风换气机</td><td>2</td><td>吊顶安装</td></tr>
<tr><td>E-08</td><td>照明系统</td><td>LED智能控制</td><td>1</td><td>全屋覆盖</td></tr>
<tr><td>1</td><td>液压爬升千斤顶</td><td>高度1600</td><td>20</td><td>120</td><td>4</td><td>4点同步提升网架</td></tr>
<tr><td>2</td><td>液压泵站</td><td>700×520×900 mm</td><td>/</td><td>200</td><td>1</td><td>柴油机驱动，压力≥25MPa，可联控多路,一泵拖4顶</td></tr>
<tr><td>3</td><td>控制柜尺寸约500×400×300 mm</td><td>/</td><td>20</td><td>1</td><td>控制4点同步提升网架</td></tr>
<tr><td>4</td><td>水准仪</td><td>230×130×146 mm</td><td>/</td><td>5（全套设备）</td><td>1</td><td>/</td></tr>
<tr><td>5</td><td>全站仪</td><td>190×180×350 mm</td><td>/</td><td>20（全套设备）</td><td>1</td><td>/</td></tr>
<tr><td>6</td><td>手拉葫芦</td><td>350×250×200 mm</td><td>3</td><td>20</td><td>4</td><td>提升速度约0.3~0.8 m/min</td></tr>
<tr><td>7</td><td>光伏板</td><td>1860*1100*30mm/1520*1100*30mm</td><td>/</td><td>24/20</td><td>102/2</td><td>/</td></tr>
<tr><td>8</td><td>手持式电动旋紧机器</td><td>780X320x260mm</td><td>/</td><td>28</td><td>若干</td><td>转速60-150，功率3kw</td></tr>
<tr><td>9</td><td>翻斗车</td><td>1260X760x1160mm</td><td>0.5</td><td>155</td><td>若干</td><td>正常工作实践7-8h</td></tr>
<tr><td>10</td><td>穿心式张拉千斤顶</td><td>φ350×385 mm</td><td>/</td><td>160</td><td>2</td><td>公称张拉力 250 kN</td></tr>
<tr><td>11</td><td>超高压电动油泵</td><td>600×400×800 mm</td><td>/</td><td>100</td><td>2</td><td>额定压力 50~63 MPa</td></tr>
<tr><td>12</td><td>钢绞线锚具（工作锚+工具锚）</td><td>φ75*45mm</td><td>/</td><td>/</td><td>12+2</td><td>适用钢绞线 φ12.7~15.7 mm；夹片硬度 HRC 58~62</td></tr>
<tr><td>13</td><td>钢绞线穿束机</td><td>640×440×240 mm</td><td>/</td><td>100</td><td>1</td><td>/</td></tr>
<tr><td>14</td><td>钢绞线放索架（转盘）</td><td>/</td><td>/</td><td>/</td><td>2</td><td>/</td></tr>
<tr><td>15</td><td>手持式砂轮切割机</td><td>/</td><td>/</td><td>/</td><td>/</td><td>用于切断多余钢绞线（距锚具外 30~50 mm）</td></tr>
<tr><td>16</td><td>登高车</td><td>2500×1200×1800 mm</td><td>0.32</td><td>2400</td><td>2</td><td>升高10m</td></tr>
</tbody>
</table>
</div>
</div>
</section>
<!-- 3. 建造过程模拟 -->
<section class="section section-alt" id="construction-process">
<div class="container">
<h2 class="section-title">建造过程模拟</h2>
<!-- 3.1 基座部分（9张图，3*3排版） -->
<div class="subsection">
<h3 class="subsection-title">3.1 基座部分</h3>
<div class="process-grid grid-3x3">
<div class="grid-item with-caption">
<img src="images/construction-process-base-01.jpg" alt="基座施工步骤1" onerror="this.style.display='none'; this.nextElementSibling.style.display='flex';">
<div class="placeholder-text small" style="display:none;">基座施工步骤1</div>
<p class="image-caption">场地平整与定位放线</p>
</div>
<div class="grid-item with-caption">
<img src="images/construction-process-base-02.jpg" alt="基座施工步骤2" onerror="this.style.display='none'; this.nextElementSibling.style.display='flex';">
<div class="placeholder-text small" style="display:none;">基座施工步骤2</div>
<p class="image-caption">地螺丝螺旋桩安装</p>
</div>
<div class="grid-item with-caption">
<img src="images/construction-process-base-03.jpg" alt="基座施工步骤3" onerror="this.style.display='none'; this.nextElementSibling.style.display='flex';">
<div class="placeholder-text small" style="display:none;">基座施工步骤3</div>
<p class="image-caption">预制基础板吊装就位</p>
</div>
<div class="grid-item with-caption">
<img src="images/construction-process-base-04.jpg" alt="基座施工步骤4" onerror="this.style.display='none'; this.nextElementSibling.style.display='flex';">
<div class="placeholder-text small" style="display:none;">基座施工步骤4</div>
<p class="image-caption">砖堆砌筑与加热棒预埋</p>
</div>
<div class="grid-item with-caption">
<img src="images/construction-process-base-05.jpg" alt="基座施工步骤5" onerror="this.style.display='none'; this.nextElementSibling.style.display='flex';">
<div class="placeholder-text small" style="display:none;">基座施工步骤5</div>
<p class="image-caption">工字钢梁安装</p>
</div>
<div class="grid-item with-caption">
<img src="images/construction-process-base-06.jpg" alt="基座施工步骤6" onerror="this.style.display='none'; this.nextElementSibling.style.display='flex';">
<div class="placeholder-text small" style="display:none;">基座施工步骤6</div>
<p class="image-caption">风管支架固定</p>
</div>
<div class="grid-item with-caption">
<img src="images/construction-process-base-07.jpg" alt="基座施工步骤7" onerror="this.style.display='none'; this.nextElementSibling.style.display='flex';">
<div class="placeholder-text small" style="display:none;">基座施工步骤7</div>
<p class="image-caption">圆钢管柱定位安装</p>
</div>
<div class="grid-item with-caption">
<img src="images/construction-process-base-08.jpg" alt="基座施工步骤8" onerror="this.style.display='none'; this.nextElementSibling.style.display='flex';">
<div class="placeholder-text small" style="display:none;">基座施工步骤8</div>
<p class="image-caption">外墙保温装饰一体板安装</p>
</div>
<div class="grid-item with-caption">
<img src="images/construction-process-base-09.jpg" alt="基座施工步骤9" onerror="this.style.display='none'; this.nextElementSibling.style.display='flex';">
<div class="placeholder-text small" style="display:none;">基座施工步骤9</div>
<p class="image-caption">基座验收与防水处理</p>
</div>
</div>
</div>
<!-- 3.2 主体结构部分（6张图，2*3排版） -->
<div class="subsection">
<h3 class="subsection-title">3.2 主体结构部分</h3>
<div class="process-grid grid-2x3">
<div class="grid-item with-caption">
<img src="images/construction-process-main-01.jpg" alt="主体施工步骤1" onerror="this.style.display='none'; this.nextElementSibling.style.display='flex';">
<div class="placeholder-text small" style="display:none;">主体施工步骤1</div>
<p class="image-caption">钢柱吊装与定位</p>
</div>
<div class="grid-item with-caption">
<img src="images/construction-process-main-02.jpg" alt="主体施工步骤2" onerror="this.style.display='none'; this.nextElementSibling.style.display='flex';">
<div class="placeholder-text small" style="display:none;">主体施工步骤2</div>
<p class="image-caption">钢梁安装与焊接</p>
</div>
<div class="grid-item with-caption">
<img src="images/construction-process-main-03.jpg" alt="主体施工步骤3" onerror="this.style.display='none'; this.nextElementSibling.style.display='flex';">
<div class="placeholder-text small" style="display:none;">主体施工步骤3</div>
<p class="image-caption">拉索系统安装</p>
</div>
<div class="grid-item with-caption">
<img src="images/construction-process-main-04.jpg" alt="主体施工步骤4" onerror="this.style.display='none'; this.nextElementSibling.style.display='flex';">
<div class="placeholder-text small" style="display:none;">主体施工步骤4</div>
<p class="image-caption">连接件紧固</p>
</div>
<div class="grid-item with-caption">
<img src="images/construction-process-main-05.jpg" alt="主体施工步骤5" onerror="this.style.display='none'; this.nextElementSibling.style.display='flex';">
<div class="placeholder-text small" style="display:none;">主体施工步骤5</div>
<p class="image-caption">结构校正与调整</p>
</div>
<div class="grid-item with-caption">
<img src="images/construction-process-main-06.jpg" alt="主体施工步骤6" onerror="this.style.display='none'; this.nextElementSibling.style.display='flex';">
<div class="placeholder-text small" style="display:none;">主体施工步骤6</div>
<p class="image-caption">主体结构验收</p>
</div>
</div>
</div>
<!-- 3.3 屋面围护部分（4张图，1*4排版） -->
<div class="subsection">
<h3 class="subsection-title">3.3 屋面围护部分</h3>
<div class="process-grid grid-1x4">
<div class="grid-item with-caption">
<img src="images/construction-process-roof-01.jpg" alt="屋面施工步骤1" onerror="this.style.display='none'; this.nextElementSibling.style.display='flex';">
<div class="placeholder-text small" style="display:none;">屋面施工步骤1</div>
<p class="image-caption">檩条安装</p>
</div>
<div class="grid-item with-caption">
<img src="images/construction-process-roof-02.jpg" alt="屋面施工步骤2" onerror="this.style.display='none'; this.nextElementSibling.style.display='flex';">
<div class="placeholder-text small" style="display:none;">屋面施工步骤2</div>
<p class="image-caption">屋面板铺设</p>
</div>
<div class="grid-item with-caption">
<img src="images/construction-process-roof-03.jpg" alt="屋面施工步骤3" onerror="this.style.display='none'; this.nextElementSibling.style.display='flex';">
<div class="placeholder-text small" style="display:none;">屋面施工步骤3</div>
<p class="image-caption">防水层与保温层施工</p>
</div>
<div class="grid-item with-caption">
<img src="images/construction-process-roof-04.jpg" alt="屋面施工步骤4" onerror="this.style.display='none'; this.nextElementSibling.style.display='flex';">
<div class="placeholder-text small" style="display:none;">屋面施工步骤4</div>
<p class="image-caption">屋面验收与收边处理</p>
</div>
</div>
</div>
<!-- 3.4 墙面围护部分（4张图，1*4排版） -->
<div class="subsection">
<h3 class="subsection-title">3.4 墙面围护部分</h3>
<div class="process-grid grid-1x4">
<div class="grid-item with-caption">
<img src="images/construction-process-wall-01.jpg" alt="墙面施工步骤1" onerror="this.style.display='none'; this.nextElementSibling.style.display='flex';">
<div class="placeholder-text small" style="display:none;">墙面施工步骤1</div>
<p class="image-caption">龙骨安装</p>
</div>
<div class="grid-item with-caption">
<img src="images/construction-process-wall-02.jpg" alt="墙面施工步骤2" onerror="this.style.display='none'; this.nextElementSibling.style.display='flex';">
<div class="placeholder-text small" style="display:none;">墙面施工步骤2</div>
<p class="image-caption">外墙板安装</p>
</div>
<div class="grid-item with-caption">
<img src="images/construction-process-wall-03.jpg" alt="墙面施工步骤3" onerror="this.style.display='none'; this.nextElementSibling.style.display='flex';">
<div class="placeholder-text small" style="display:none;">墙面施工步骤3</div>
<p class="image-caption">门窗框安装</p>
</div>
<div class="grid-item with-caption">
<img src="images/construction-process-wall-04.jpg" alt="墙面施工步骤4" onerror="this.style.display='none'; this.nextElementSibling.style.display='flex';">
<div class="placeholder-text small" style="display:none;">墙面施工步骤4</div>
<p class="image-caption">墙面收口与验收</p>
</div>
</div>
</div>
</div>
</section>

106
css/style.css
View File

@@ -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;
}
}