feat(h5): refine report layout, add finger-following tabs and optimize images

h5/index.html

@@ -173,18 +173,20 @@
     <!-- 总分卡:左环形综合评分 / 右肌肤年龄 + 与实际年龄对比 -->
     <div class="card card-summary">
       <div class="sum-score">
-        <svg class="ring" viewBox="0 0 120 120" aria-hidden="true">
-          <circle class="ring-bg" cx="60" cy="60" r="52"/>
-          <circle class="ring-fg" id="ring-fg" cx="60" cy="60" r="52"/>
-        </svg>
-        <div class="ring-center">
-          <span class="stat-value" id="stat-score"><b>--</b><i>分</i></span>
-          <span class="stat-label">综合评分</span>
+        <span class="stat-label">综合评分</span>
+        <div class="score-dial">
+          <svg class="ring" viewBox="0 0 120 120" aria-hidden="true">
+            <circle class="ring-bg" cx="60" cy="60" r="52"/>
+            <circle class="ring-fg" id="ring-fg" cx="60" cy="60" r="52"/>
+          </svg>
+          <div class="ring-center">
+            <span class="stat-value" id="stat-score"><b>--</b><i>分</i></span>
+          </div>
         </div>
       </div>
       <div class="sum-age">
         <span class="stat-label">生物可视年龄</span>
-        <span class="stat-value stat-age" id="stat-age"><b>--</b><i>岁</i></span>
+        <div class="age-dial"><span class="stat-value stat-age" id="stat-age"><b>--</b><i>岁</i></span></div>
         <span class="age-pill" id="stat-age-note" hidden></span>
       </div>
 
@@ -202,7 +204,7 @@
     <h2 class="dimension-title">紧塑力</h2>
     <div class="card card-detail">
       <div class="detail-tabs"><button class="dtab active" data-tab="0"><span class="dtab-tx">轮廓</span></button><button class="dtab" data-tab="1"><span class="dtab-tx">皱纹</span></button></div>
-      <div class="detail-panels">
+      <div class="detail-viewport"><div class="detail-panels">
         <div class="dpanel active" data-panel="0">
           <div class="ditem"><div class="viz-frame"><img id="ditem-img1" class="ditem-img" alt="轮廓检测图" hidden><span class="viz-missing">本次未获取轮廓检测图</span></div>
           <div class="ditem-text"><p class="ditem-para" id="ditem-para1">检测完成后显示分析结果。</p></div></div>
@@ -211,13 +213,12 @@
           <div class="ditem"><div class="viz-frame"><img id="ditem-img2" class="ditem-img" alt="皱纹检测图" hidden><span class="viz-missing">本次未获取皱纹检测图</span></div>
           <div class="ditem-text"><p class="ditem-para" id="ditem-para2">检测完成后显示分析结果。</p></div></div>
         </div>
-      </div>
+      </div></div>
     </div>
-
     <h2 class="dimension-title">透亮感</h2>
     <div class="card card-detail">
       <div class="detail-tabs"><button class="dtab active" data-tab="0"><span class="dtab-tx">肤色</span></button><button class="dtab" data-tab="1"><span class="dtab-tx">平滑度</span></button><button class="dtab" data-tab="2"><span class="dtab-tx">水分</span></button></div>
-      <div class="detail-panels">
+      <div class="detail-viewport"><div class="detail-panels">
         <div class="dpanel active" data-panel="0">
           <div class="ditem"><div class="viz-frame"><img id="viz-tone" class="ditem-img" alt="肤色检测图" hidden><span class="viz-missing">本次未获取肤色检测图</span></div>
           <div class="ditem-text"><p class="ditem-para" id="tx-tone">检测完成后显示分析结果。</p></div></div>
@@ -231,13 +232,12 @@
           <div class="ditem"><div class="viz-frame"><img id="viz-water" class="ditem-img" alt="水分检测图" hidden><span class="viz-missing">本次未获取水分检测图</span></div>
           <div class="ditem-text"><p class="ditem-para" id="tx-water">检测完成后显示分析结果。</p></div></div>
         </div>
-      </div>
+      </div></div>
     </div>
-
     <h2 class="dimension-title">稳韧力</h2>
     <div class="card card-detail">
       <div class="detail-tabs"><button class="dtab active" data-tab="0"><span class="dtab-tx">泛红</span></button><button class="dtab" data-tab="1"><span class="dtab-tx">痘痘</span></button></div>
-      <div class="detail-panels">
+      <div class="detail-viewport"><div class="detail-panels">
         <div class="dpanel active" data-panel="0">
           <div class="ditem"><div class="viz-frame"><img id="viz-sens" class="ditem-img" alt="泛红检测图" hidden><span class="viz-missing">本次未获取泛红检测图</span></div>
           <div class="ditem-text"><p class="ditem-para" id="tx-sens">检测完成后显示分析结果。</p></div></div>
@@ -246,9 +246,8 @@
           <div class="ditem"><div class="viz-frame"><img id="viz-acne" class="ditem-img" alt="痘痘检测图" hidden><span class="viz-missing">本次未获取痘痘检测图</span></div>
           <div class="ditem-text"><p class="ditem-para" id="tx-acne">检测完成后显示分析结果。</p></div></div>
         </div>
-      </div>
+      </div></div>
     </div>
-
     <p class="vm-notes" id="vm-notes" style="display:none"></p>
 
     <p class="report-disclaimer">*您的肌肤状态会随年龄、环境、作息和生活节奏动态变化。<br>*本次检测仅代表当前肌肤状态参考。</p>
@@ -457,10 +456,7 @@
        Not camera controls: no action attributes, focus targets or file inputs. -->
   <div class="scan-stage" aria-hidden="true">
     <img id="scan-artwork" class="scan-artwork" data-src="assets/img/ui-20261012/scan-base.webp" width="1080" height="2091" alt="" draggable="false">
-    <div id="scan-face" class="scan-face" data-mask="assets/img/ui-20261012/scan-face-mask.png">
-      <img id="scan-photo" class="scan-photo" alt="" draggable="false">
-      <i class="scan-beam"></i>
-    </div>
+    <div id="scan-face" class="scan-face" data-mask="assets/img/ui-20261012/scan-face-mask.png"><i class="scan-beam"></i></div>
   </div>
   <p class="scan-status" role="status">检测中…</p>
   <button class="scan-cancel" type="button" data-action="cancel-analysis">取消</button>
@@ -491,6 +487,7 @@ if (/[?&]mock=1/.test(location.search)) document.write('<script src="assets/mock
 <script src="js/report-ui.js" defer></script>
 <script src="js/account-client.js" defer></script>
 <script src="js/profile-store.js" defer></script>
+<script src="js/swipe-track.js" defer></script>
 <script src="js/camera-geometry.js" defer></script>
 <script src="js/app.js" defer></script>
 </body>