feat: 真机反馈 13 项修改(下拉/拍照页/语音时机/预热/报告样式/翻转镜头)

1. 城市改自定义下拉(原生 select 各端样式不一)
2. 姿态提示浮层下移,不再压住脸部轮廓
3. 倒计时 321 前不再抢播「保持不动」(被切断听着像吞字)
4. 相机预热:分辨率稳定两拍后才出实时画面+放开检测,开头 1-2s 大脸闪变消除
5. 隐私协议页去掉头部文字条,返回键改悬浮
6. 肌龄小字常显「与实际年龄相差X岁」,钳制时追加「触发(原X→Y)」(vm 增 realAge 字段)
7. 删除设计稿没有的「6个维度观察/状态动态流动」两段文字
8. 维度卡关注行改设计稿两行式:灰小字+深色口号(稳定力口号用设计稿原文,另两条待确认)
9. Tab 黄色指示条宽度跟随文字(原固定 78px)
10. 抓拍只取取景框可见区域(object-fit cover 中心裁切),照片=所见画幅;拍照页顶栏黑条删除;无进展提示上移不再压快门
11. 相册选择器「拍照」项为系统行为,代码层已是图库意图(无 capture),详见回复
12. 切换镜头实现:前后置切换+镜像/姿态参数跟随,替换 Toast 占位
13. 报告分类卡去掉得分与档位徽章(设计稿只有话术),图片改 100px 见方圆角 10
e2e 全量绿(E0-E7)

h5/index.html

@@ -58,12 +58,14 @@
 
     <div class="field">
       <label class="field-label">您的所在地区</label>
-      <div class="field-select-wrap">
-        <select id="f-region" class="field-input field-select">
-          <option value="" selected disabled>请选择</option>
-        </select>
-        <i class="chev down"></i>
+      <div class="rs" id="region-rs">
+        <button type="button" class="rs-current" id="rs-current">
+          <span id="rs-value" class="rs-value rs-placeholder">请选择</span>
+          <i class="chev down"></i>
+        </button>
+        <ul class="rs-list" id="rs-list" hidden></ul>
       </div>
+      <input type="hidden" id="f-region">
     </div>
 
     <div class="field">
@@ -88,10 +90,7 @@
 <!-- ═══════════ 05-07 拍照页 ═══════════ -->
 <section class="screen" id="s-cam">
   <div class="cam-bg" id="cam-bg"></div>
-  <header class="nav nav-dark">
-    <button class="nav-back" data-action="cam-back" aria-label="返回"><i class="chev left"></i></button>
-    <span class="nav-title">1'me在线肌肤测试</span>
-  </header>
+  <button class="nav-back nav-dark cam-back-float" data-action="cam-back" aria-label="返回"><i class="chev left"></i></button>
   <div class="cam-dots" id="cam-dots"><i></i><i></i><i></i></div>
   <p class="cam-step" id="cam-step">1/3<br>请单人正脸出镜</p>
   <!-- 取景蒙版:SVG mask 镂空压暗 + 轮廓线框;data-step 切换三种轮廓
@@ -158,9 +157,6 @@
       </div>
     </div>
 
-    <p class="dims-intro">我们从6个维度观察了你的肌肤，当下优先关注：紧致、光泽、纹路、耐受、细腻、水润</p>
-    <p class="dims-disclaimer">*状态是动态流动的，和作息、压力、季节都有关系，仅代表此刻的状态参考。</p>
-
     <div class="card card-dims">
       <div class="dims-row">
         <div class="dim"><span class="dim-name">紧塑力</span><span class="dim-score" id="dim-firm">-.-</span><span class="dim-lv" id="dim-firm-lv"></span></div>
@@ -172,9 +168,9 @@
 
     <div class="card card-detail">
       <div class="detail-tabs" id="detail-tabs">
-        <button class="dtab active" data-tab="0">紧塑力</button>
-        <button class="dtab" data-tab="1">活力感</button>
-        <button class="dtab" data-tab="2">稳定力</button>
+        <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="dpanel active" data-panel="0">
@@ -182,7 +178,6 @@
             <h3 class="ditem-title">轮廓</h3>
             <img id="ditem-img1" src="assets/img/det-1.jpg" loading="lazy" class="ditem-img" alt="轮廓检测图">
             <div class="ditem-text">
-              <p class="cat-head"><span class="cat-s" id="s-contour">-.-</span><i class="cat-badge" id="lv-contour"></i></p>
               <p class="ditem-para" id="ditem-para1">检测完成后显示分析结果。</p>
             </div>
           </div>
@@ -190,7 +185,6 @@
             <h3 class="ditem-title">皱纹</h3>
             <img id="ditem-img2" src="assets/img/det-2.jpg" loading="lazy" class="ditem-img" alt="皱纹检测图">
             <div class="ditem-text">
-              <p class="cat-head"><span class="cat-s" id="s-wrinkles">-.-</span><i class="cat-badge" id="lv-wrinkles"></i></p>
               <p class="ditem-para" id="ditem-para2">检测完成后显示分析结果。</p>
             </div>
           </div>
@@ -200,7 +194,6 @@
             <h3 class="ditem-title">光滑</h3>
             <img id="viz-smooth" loading="lazy" class="ditem-img" alt="光滑检测标记图" hidden>
             <div class="ditem-text">
-              <p class="cat-head"><span class="cat-s" id="s-smooth">-.-</span><i class="cat-badge" id="lv-smooth"></i></p>
               <p class="ditem-para" id="tx-smooth">检测完成后显示分析结果。</p>
             </div>
           </div>
@@ -208,7 +201,6 @@
             <h3 class="ditem-title">肤色水润</h3>
             <img id="viz-tone" loading="lazy" class="ditem-img" alt="肤色色沉图" hidden>
             <div class="ditem-text">
-              <p class="cat-head"><span class="cat-s" id="s-tone">-.-</span><i class="cat-badge" id="lv-tone"></i></p>
               <p class="ditem-para" id="tx-tone">检测完成后显示分析结果。</p>
             </div>
           </div>
@@ -218,7 +210,6 @@
             <h3 class="ditem-title">敏感</h3>
             <img id="viz-sens" loading="lazy" class="ditem-img" alt="敏感红区图" hidden>
             <div class="ditem-text">
-              <p class="cat-head"><span class="cat-s" id="s-sens">-.-</span><i class="cat-badge" id="lv-sens"></i></p>
               <p class="ditem-para" id="tx-sens">检测完成后显示分析结果。</p>
             </div>
           </div>
@@ -226,7 +217,6 @@
             <h3 class="ditem-title">痘痘</h3>
             <img id="viz-acne" loading="lazy" class="ditem-img" alt="痘痘检测标记图" hidden>
             <div class="ditem-text">
-              <p class="cat-head"><span class="cat-s" id="s-acne">-.-</span><i class="cat-badge" id="lv-acne"></i></p>
               <p class="ditem-para" id="tx-acne">检测完成后显示分析结果。</p>
             </div>
           </div>
@@ -304,10 +294,7 @@
 <!-- ═══════════ 弹层:隐私政策与服务协议(全文) ═══════════ -->
 <div class="overlay overlay-policy" id="p-policy">
   <div class="policy-page">
-    <header class="policy-header">
-      <button class="nav-back" data-action="close-policy" aria-label="返回"><i class="chev left"></i></button>
-      <span class="policy-header-title">隐私政策与服务协议</span>
-    </header>
+    <button class="nav-back policy-float-back" data-action="close-policy" aria-label="返回"><i class="chev left"></i></button>
     <div class="policy-body">
       <h1 class="policy-title">Face⁺⁺个人信息与隐私保护政策</h1>