Explorar o código

feat(web): gut-testing 检测流程改用SVG流程图,8大检测维度补充商品解析长图

asus hai 1 mes
pai
achega
2d99daa13a
Modificáronse 2 ficheiros con 45 adicións e 2 borrados
  1. BIN=BIN
      web/img/product-intro/gut-8dims-diagram.jpg
  2. 45 2
      web/product-intro/gut-testing.html

BIN=BIN
web/img/product-intro/gut-8dims-diagram.jpg


+ 45 - 2
web/product-intro/gut-testing.html

@@ -165,6 +165,10 @@
       <div class="dim-item"><strong>🧪 营养建议</strong>个性化膳食指南</div>
     </div>
 
+    <div style="text-align:center;margin:1.5rem 0;">
+      <img src="../img/product-intro/gut-8dims-diagram.jpg" alt="肠道菌群精准健康检测8大维度解析图" 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;">16S rRNA高通量测序 · 菌群-通路-疾病综合评估</p>
+    </div>
   </div>
 </section>
 
@@ -180,8 +184,47 @@
     </ol>
 
     <div style="text-align:center;margin:1.5rem 0;">
-      <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>
+      <svg viewBox="0 0 400 416" style="max-width:480px;width:100%;height:auto;" role="img" aria-label="肠道菌群检测流程示意图" xmlns="http://www.w3.org/2000/svg">
+        <defs>
+          <marker id="arrowhead" markerWidth="10" markerHeight="7" refX="9" refY="3.5" orient="auto">
+            <polygon points="0 0, 10 3.5, 0 7" fill="#0d9488"></polygon>
+          </marker>
+        </defs>
+        <!-- 步骤1 -->
+        <rect x="0" y="0" width="400" height="64" rx="12" fill="#ccfbf1" stroke="#0d9488" stroke-width="1.5"></rect>
+        <circle cx="38" cy="32" r="17" fill="#0d9488"></circle>
+        <text x="38" y="37" text-anchor="middle" font-size="15" font-weight="bold" fill="#fff">1</text>
+        <text x="68" y="25" font-size="14" font-weight="600" fill="#134e4a">在线下单</text>
+        <text x="68" y="47" font-size="12" fill="#4a5568">完成购买,检测套件24小时内寄出</text>
+        <line x1="200" y1="67" x2="200" y2="85" stroke="#0d9488" stroke-width="2" marker-end="url(#arrowhead)"></line>
+        <!-- 步骤2 -->
+        <rect x="0" y="88" width="400" height="64" rx="12" fill="#ccfbf1" stroke="#0d9488" stroke-width="1.5"></rect>
+        <circle cx="38" cy="120" r="17" fill="#0d9488"></circle>
+        <text x="38" y="125" text-anchor="middle" font-size="15" font-weight="bold" fill="#fff">2</text>
+        <text x="68" y="113" font-size="14" font-weight="600" fill="#134e4a">居家采样</text>
+        <text x="68" y="135" font-size="12" fill="#4a5568">米粒大小样本,无创无痛</text>
+        <line x1="200" y1="155" x2="200" y2="173" stroke="#0d9488" stroke-width="2" marker-end="url(#arrowhead)"></line>
+        <!-- 步骤3 -->
+        <rect x="0" y="176" width="400" height="64" rx="12" fill="#ccfbf1" stroke="#0d9488" stroke-width="1.5"></rect>
+        <circle cx="38" cy="208" r="17" fill="#0d9488"></circle>
+        <text x="38" y="213" text-anchor="middle" font-size="15" font-weight="bold" fill="#fff">3</text>
+        <text x="68" y="201" font-size="14" font-weight="600" fill="#134e4a">样本寄回</text>
+        <text x="68" y="223" font-size="12" fill="#4a5568">预付费快递包装,直邮实验室</text>
+        <line x1="200" y1="243" x2="200" y2="261" stroke="#0d9488" stroke-width="2" marker-end="url(#arrowhead)"></line>
+        <!-- 步骤4 -->
+        <rect x="0" y="264" width="400" height="64" rx="12" fill="#ccfbf1" stroke="#0d9488" stroke-width="1.5"></rect>
+        <circle cx="38" cy="296" r="17" fill="#0d9488"></circle>
+        <text x="38" y="301" text-anchor="middle" font-size="15" font-weight="bold" fill="#fff">4</text>
+        <text x="68" y="289" font-size="14" font-weight="600" fill="#134e4a">实验室检测</text>
+        <text x="68" y="311" font-size="12" fill="#4a5568">5个工作日内完成DNA测序分析</text>
+        <line x1="200" y1="331" x2="200" y2="349" stroke="#0d9488" stroke-width="2" marker-end="url(#arrowhead)"></line>
+        <!-- 步骤5 -->
+        <rect x="0" y="352" width="400" height="64" rx="12" fill="#ccfbf1" stroke="#0d9488" stroke-width="1.5"></rect>
+        <circle cx="38" cy="384" r="17" fill="#0d9488"></circle>
+        <text x="38" y="389" text-anchor="middle" font-size="15" font-weight="bold" fill="#fff">5</text>
+        <text x="68" y="377" font-size="14" font-weight="600" fill="#134e4a">获取报告</text>
+        <text x="68" y="399" font-size="12" fill="#4a5568">在线查看结果与个性化建议</text>
+      </svg>
     </div>
   </div>
 </section>