feat: 优化环保订单班页面布局

详细说明:
- 将多个section的grid-2改为grid-3,统一为3列布局
- Section 2: 标准图片展示改为3列
- Section 3: 采样布点图片和设备工具卡片改为3列
- Section 7: 交付成果卡片改为3列
- 为实验室质量控制卡片添加背景图片(Unsplash)
- 保持Section 4数据处理流程为4列布局

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>

web_frontend/web_result/order-classes/environmental/index.html

@@ -169,7 +169,7 @@
                     <p>根据监测任务需求，考核的水质指标包括理化指标、营养盐、重金属、有机污染物及生物指标，共26项关键参数，严格按照GB 3838-2002和HJ/T 91-2022标准执行。</p>
                 </div>
 
-                <div class="grid grid-2">
+                <div class="grid grid-3">
                     <div class="image-container">
                         <img data-src="images/地表水环境质量标准示意图.jpg" alt="地表水环境质量标准" loading="lazy">
                         <div class="image-caption">地表水环境质量标准</div>
@@ -285,7 +285,7 @@
                     <p>根据河流宽度和水深条件，在断面设置3个垂线（左、中、右），每个垂线设置2-3个采样深度点，确保样品代表性。丰水期采集上、中、下层样品，枯水期采集上、下层样品。</p>
                 </div>
 
-                <div class="grid grid-2">
+                <div class="grid grid-3">
                     <div class="image-container">
                         <img data-src="images/长江采样布点图.jpg" alt="采样布点图" loading="lazy">
                         <div class="image-caption">长江采样断面布点图</div>
@@ -336,7 +336,7 @@
 
                 <div class="expert-intro" style="margin-top: var(--spacing-xl);">
                     <h3><i data-lucide="wrench"></i> 采样设备与工具</h3>
-                    <div class="grid grid-2" style="margin-top: var(--spacing-md);">
+                    <div class="grid grid-3" style="margin-top: var(--spacing-md);">
                         <div class="card">
                             <div class="image-container">
                                 <img data-src="images/采样仪器设备.jpg" alt="采样仪器" loading="lazy">
@@ -517,7 +517,7 @@
                         </div>
                     </div>
 
-                    <div class="card">
+                    <div class="card" style="background-image: linear-gradient(rgba(255, 255, 255, 0.92), rgba(255, 255, 255, 0.92)), url('https://images.unsplash.com/photo-1582719471384-894fbb16e074?w=800&q=80'); background-size: cover; background-position: center;">
                         <div class="card-header">
                             <h3 class="card-title">实验室质量控制</h3>
                         </div>
@@ -729,7 +729,7 @@
                     <p>每季度提交1份季度监测报告，全年共4份。报告包含监测数据汇总、水质达标分析、污染趋势评估、改善建议等内容。同时提交原始记录、质控数据、电子数据库等附件材料。</p>
                 </div>
 
-                <div class="grid grid-2">
+                <div class="grid grid-3">
                     <div class="card">
                         <div class="image-container">
                             <img data-src="images/文件输出与报告图标.jpg" alt="监测报告" loading="lazy">