Browse Source

feat(web): gut-testing 产品页补充商品图片(谷禾肠道菌群检测专业版)

asus 3 months ago
parent
commit
9f084017a1

BIN
web/img/product-intro/gut-detail-banner.jpg


BIN
web/img/product-intro/gut-kit-2.jpg


BIN
web/img/product-intro/gut-kit-3.jpg


BIN
web/img/product-intro/gut-kit-5.jpg


BIN
web/img/product-intro/gut-kit-6.jpg


BIN
web/img/product-intro/gut-kit-7.jpg


BIN
web/img/product-intro/gut-kit-8.jpg


BIN
web/img/product-intro/gut-kit-cover.jpg


+ 50 - 0
web/product-intro/gut-testing.html

@@ -85,6 +85,26 @@
   </div>
 </div>
 
+<!-- 产品实物图 -->
+<div class="container" style="margin-top:2rem;">
+  <div class="grid-2">
+    <div style="background:white;border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow);">
+      <img src="../img/product-intro/gut-kit-cover.jpg" alt="肠道菌群基因检测套件实物" style="width:100%;height:280px;object-fit:cover;display:block;">
+      <div style="padding:1rem 1.2rem;">
+        <div style="font-weight:700;color:var(--text-primary);font-size:1rem;">居家采样 · 寄回实验室</div>
+        <div style="font-size:0.85rem;color:var(--text-muted);margin-top:0.3rem;">采样管含保存液,常温可稳定保存 7 天,无创无痛</div>
+      </div>
+    </div>
+    <div style="background:white;border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow);">
+      <img src="../img/product-intro/gut-kit-5.jpg" alt="肠道健康与日常饮食" style="width:100%;height:280px;object-fit:cover;display:block;">
+      <div style="padding:1rem 1.2rem;">
+        <div style="font-weight:700;color:var(--text-primary);font-size:1rem;">检测 + 饮食干预闭环</div>
+        <div style="font-size:0.85rem;color:var(--text-muted);margin-top:0.3rem;">基于检测结果定制个性化营养方案,从餐桌开始改善菌群</div>
+      </div>
+    </div>
+  </div>
+</div>
+
 <section>
   <div class="container">
     <h2>什么是肠道菌群检测?</h2>
@@ -122,6 +142,16 @@
         <p>从样本采集、DNA提取、PCR扩增、文库构建到上机测序,全流程标准化质控,确保数据可靠。</p>
       </div>
     </div>
+
+    <div style="text-align:center;margin:1.5rem 0;">
+      <img src="../img/product-intro/gut-kit-6.jpg" alt="大样本量 vs 小样本量的准确性对比" style="max-width:100%;border-radius:12px;box-shadow:0 4px 20px rgba(0,0,0,0.1);">
+      <p style="font-size:0.8rem;color:var(--text-muted);margin-top:0.5rem;">数万例临床样本构建的比对数据库——样本量越大,检测越准确</p>
+    </div>
+
+    <div style="text-align:center;margin:1.5rem 0;">
+      <img src="../img/product-intro/gut-kit-7.jpg" alt="精准检测实验室" style="max-width:100%;border-radius:12px;box-shadow:0 4px 20px rgba(0,0,0,0.1);">
+      <p style="font-size:0.8rem;color:var(--text-muted);margin-top:0.5rem;">精准检测 · 大样本量比对 · 大规模临床验证</p>
+    </div>
   </div>
 </section>
 
@@ -145,6 +175,11 @@
       <div style="font-size:0.9rem;color:var(--text-muted);"><strong>截图待插入:</strong>检测报告样本——8大维度综合评估页面</div>
       <div style="font-size:0.78rem;color:var(--text-muted);margin-top:0.3rem;">文件名: <code>gut-testing-report-sample.png</code> · 显示多样性指数、肠道年龄、屏障功能评分的报告截图</div>
     </div>
+
+    <div style="text-align:center;margin:1.5rem 0;">
+      <img src="../img/product-intro/gut-detail-banner.jpg" alt="肠道菌群精准健康检测专业版 - 全流程介绍" style="max-width:100%;border-radius:12px;box-shadow:0 4px 20px rgba(0,0,0,0.1);">
+      <p style="font-size:0.8rem;color:var(--text-muted);margin-top:0.5rem;">专业版检测服务全景——从技术原理到报告解读的一站式服务</p>
+    </div>
   </div>
 </section>
 
@@ -163,6 +198,11 @@
       <img src="../img/ref-screenshots/indicator-diversity-shannon.webp" alt="肠道菌群α多样性荟萃分析——Shannon指数和Simpson指数" style="max-width:100%;border-radius:12px;box-shadow:0 4px 20px rgba(0,0,0,0.1);">
       <p style="font-size:0.8rem;color:var(--text-muted);margin-top:0.5rem;">菌群多样性分析示例——Shannon指数是衡量菌群多样性的核心指标</p>
     </div>
+
+    <div style="text-align:center;margin:1.5rem 0;">
+      <img src="../img/product-intro/gut-kit-2.jpg" alt="样本绑定与寄回流程" style="max-width:100%;border-radius:12px;box-shadow:0 4px 20px rgba(0,0,0,0.1);">
+      <p style="font-size:0.8rem;color:var(--text-muted);margin-top:0.5rem;">扫码绑定样本 → 顺丰寄回 → 实验室接收,全程可追踪</p>
+    </div>
   </div>
 </section>
 
@@ -225,6 +265,11 @@
         <p>干预后复测对比,数据趋势一目了然。效果看得见,钱不白花。</p>
       </div>
     </div>
+
+    <div style="text-align:center;margin:1.5rem 0;">
+      <img src="../img/product-intro/gut-kit-8.jpg" alt="专业分析团队与技术能力" style="max-width:100%;border-radius:12px;box-shadow:0 4px 20px rgba(0,0,0,0.1);">
+      <p style="font-size:0.8rem;color:var(--text-muted);margin-top:0.5rem;">稳定模型架构 · 肠道菌群特征工程 · 深度学习模型 · AI 专家团队</p>
+    </div>
   </div>
 </section>
 
@@ -252,6 +297,11 @@
       <div class="faq-a">报告包含详细的检测结果说明和个性化建议。同时,浠艾福会员可享受1对1健康管理师解读服务,帮助您理解报告内容并制定后续方案。</div>
     </div>
   </div>
+
+  <div style="text-align:center;margin:1.5rem 0;">
+    <img src="../img/product-intro/gut-kit-3.jpg" alt="专家报告解读咨询" style="max-width:100%;border-radius:12px;box-shadow:0 4px 20px rgba(0,0,0,0.1);">
+    <p style="font-size:0.8rem;color:var(--text-muted);margin-top:0.5rem;">专业解读服务——检测只是开始,看懂报告并落地行动才是关键</p>
+  </div>
 </section>
 
 <div class="container">