save

h5/css/style.css

@@ -21,16 +21,18 @@
 
 * { margin: 0; padding: 0; box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
 html, body { height: 100%; }
+html { overflow: hidden; }
 body {
   font-family: var(--font);
   color: var(--ink);
   background: #000;
   overflow: hidden;
+  overflow: clip;             /* 滚轮在屏外准备时不能把整个页面程序化滚走 */
   -webkit-font-smoothing: antialiased;
   user-select: none;
   max-width: 480px;           /* 桌面预览时居中显示 */
   margin: 0 auto;
-  position: relative;
+  position: fixed; inset: 0; width: 100%;
 }
 img { display: block; }
 button { font-family: inherit; border: 0; background: none; cursor: pointer; color: inherit; }
@@ -124,8 +126,9 @@ button { font-family: inherit; border: 0; background: none; cursor: pointer; col
   color: #fff; font-size: calc(14.5 * var(--u)); font-weight: 400;
   margin-bottom: calc(9 * var(--u)); letter-spacing: calc(.5 * var(--u));
 }
-.form-row.two { display: flex; gap: calc(23 * var(--u)); }
+.form-row.two { display: flex; gap: calc(14 * var(--u)); }
 .form-row.two .field { flex: 1; min-width: 0; }
+.form-row.two .field:first-child { flex: 1.25; }
 
 /* 选择控件(出生年月/性别/地区同一样式) */
 .pick {
@@ -136,6 +139,9 @@ button { font-family: inherit; border: 0; background: none; cursor: pointer; col
   font-size: calc(13.5 * var(--u)); color: var(--ink); text-align: left;
 }
 .pick-value { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.pick-value.placeholder { color: #777; }
+.profile-age { color: #eee; font-size: max(12px, calc(12 * var(--u))); text-align: center; margin: calc(-9 * var(--u)) 0 calc(18 * var(--u)); }
+.pick:focus-visible, .btn:focus-visible, .ditem-img:focus-visible, .zoom-close:focus-visible { outline: 3px solid #D3BF29; outline-offset: 3px; }
 .pick .chev { flex: none; width: calc(8 * var(--u)); height: calc(8 * var(--u)); margin-top: calc(-4 * var(--u)); border-width: 0 1.5px 1.5px 0; }
 .pick:active { background: #F7F7F7; }
 
@@ -245,6 +251,15 @@ button { font-family: inherit; border: 0; background: none; cursor: pointer; col
 .cam-shutter img { width: calc(62 * var(--u)); height: calc(62 * var(--u)); }
 .cam-shutter:active { transform: scale(.92); }
 #s-cam.cam-manual .cam-shutter { visibility: visible; }
+.cam-controls button:disabled { opacity: .35; pointer-events: none; }
+.cam-retry { position: absolute; bottom: 14%; left: 50%; transform: translateX(-50%); z-index: 3; padding: 10px 18px; border: 1px solid #fff; border-radius: 5px; color: #fff; background: #282828; font-size: 14px; white-space: nowrap; }
+.cam-retry[hidden] { display: none; }
+.cam-progress { position: absolute; top: 21%; left: 0; right: 0; display: flex; justify-content: center; gap: 22px; z-index: 2; color: #bbb; font-size: max(12px, calc(12 * var(--u))); }
+.cam-progress span::before { content: ''; display: inline-block; width: 6px; height: 6px; margin-right: 6px; border-radius: 50%; background: #777; vertical-align: middle; }
+.cam-progress .current { color: var(--yellow); }
+.cam-progress .current::before { background: var(--yellow); }
+.cam-progress .done { color: #70E28A; }
+.cam-progress .done::before { background: #70E28A; }
 /* 白屏补光:瞬间点亮(.on 无过渡),移除后淡出 */
 .cam-fill {
   position: absolute; inset: 0; background: #fff;
@@ -324,7 +339,7 @@ button { font-family: inherit; border: 0; background: none; cursor: pointer; col
   background: #fff; border-radius: calc(8 * var(--u));
   margin-bottom: calc(12 * var(--u));
 }
-.stat-label { font-size: calc(12 * var(--u)); color: var(--ink); }
+.stat-label { font-size: max(13px, calc(14 * var(--u))); color: var(--ink); }
 .stat-value { color: var(--ink); line-height: 1; white-space: nowrap; }
 .stat-value b { font-weight: 500; letter-spacing: calc(.5 * var(--u)); }
 .stat-value i { font-style: normal; font-weight: 500; }
@@ -346,7 +361,7 @@ button { font-family: inherit; border: 0; background: none; cursor: pointer; col
 }
 .ring-center .stat-value b { font-size: calc(40 * var(--u)); }
 .ring-center .stat-value i { font-size: calc(14 * var(--u)); }
-.ring-center .stat-label { margin-top: calc(3 * var(--u)); font-size: calc(11.5 * var(--u)); color: var(--para); }
+.ring-center .stat-label { margin-top: calc(3 * var(--u)); font-size: max(12px, calc(13 * var(--u))); color: var(--para); }
 .sum-age {
   flex: 1; min-width: 0;
   display: flex; flex-direction: column; align-items: flex-start;
@@ -357,7 +372,7 @@ button { font-family: inherit; border: 0; background: none; cursor: pointer; col
 .stat-age i { font-size: calc(19 * var(--u)); margin-left: 2px; }
 .age-pill {
   margin-top: calc(7 * var(--u));
-  font-size: calc(9.5 * var(--u)); color: var(--grey-2);
+  font-size: max(11px, calc(11 * var(--u))); color: var(--grey-2);
   background: #F2F2F2; border-radius: calc(9 * var(--u));
   padding: calc(2 * var(--u)) calc(10 * var(--u));
   white-space: nowrap;
@@ -373,7 +388,7 @@ button { font-family: inherit; border: 0; background: none; cursor: pointer; col
   padding: 0 0 calc(4 * var(--u)) calc(14 * var(--u));
 }
 .dim + .dim { border-left: 1px solid #EFEFEF; }
-.dim-name { font-size: calc(12 * var(--u)); color: var(--ink); }
+.dim-name { font-size: max(13px, calc(14 * var(--u))); color: var(--ink); }
 .dim-score { margin-top: calc(4 * var(--u)); font-size: calc(30 * var(--u)); font-weight: 500; color: var(--ink); line-height: 1.1; }
 .dim-score b { font-size: calc(42 * var(--u)); font-weight: 500; }
 .dim-score.dim-bad { color: var(--bad); }
@@ -402,9 +417,9 @@ button { font-family: inherit; border: 0; background: none; cursor: pointer; col
   content: ""; position: absolute; left: calc(14 * var(--u)); top: calc(12 * var(--u)); bottom: calc(12 * var(--u));
   width: calc(3 * var(--u)); border-radius: 2px; background: var(--yellow);
 }
-.dims-note-l1 { font-size: calc(13 * var(--u)); color: var(--para); }
+.dims-note-l1 { font-size: max(14px, calc(14 * var(--u))); color: var(--para); }
 .dims-note-l1 b { font-weight: 500; color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }
-.dims-note-l2 { margin-top: calc(4 * var(--u)); font-size: calc(12 * var(--u)); color: var(--grey); }
+.dims-note-l2 { margin-top: calc(6 * var(--u)); font-size: max(13px, calc(13 * var(--u))); color: var(--grey-2); line-height: 1.6; }
 
 /* 维度区块:大标题 + 卡内子 Tab + 大图 + 说明 */
 .sec-title {
@@ -412,7 +427,7 @@ button { font-family: inherit; border: 0; background: none; cursor: pointer; col
   text-align: center; letter-spacing: calc(1 * var(--u));
   margin: calc(26 * var(--u)) 0 calc(16 * var(--u));
 }
-.card-detail { padding: calc(14 * var(--u)) calc(30 * var(--u)) calc(22 * var(--u)); }
+.card-detail { padding: calc(14 * var(--u)) calc(20 * var(--u)) calc(22 * var(--u)); }
 .detail-tabs { display: flex; justify-content: space-between; border-bottom: 1px solid #EFEFEF; }
 .dtab {
   position: relative;
@@ -429,15 +444,15 @@ button { font-family: inherit; border: 0; background: none; cursor: pointer; col
 .dpanel.active { display: block; animation: fade .25s ease; padding-top: calc(14 * var(--u)); }
 @keyframes fade { from { opacity: 0; } to { opacity: 1; } }
 .ditem-img {
-  width: calc(213 * var(--u)); height: calc(277 * var(--u));
+  width: 100%; height: auto; max-height: calc(360 * var(--u));
   margin: 0 auto calc(14 * var(--u));
-  object-fit: cover; border-radius: calc(6 * var(--u));
+  object-fit: contain; border-radius: calc(6 * var(--u));
   background: #F5F5F5; cursor: zoom-in;
 }
 .ditem-img[hidden] { display: none; }
 .ditem-para {
   padding-top: calc(12 * var(--u)); border-top: 1px solid #EFEFEF;
-  font-size: calc(13 * var(--u)); color: var(--para); line-height: 1.72;
+  font-size: max(14px, calc(15 * var(--u))); color: var(--para); line-height: 1.8;
   text-align: justify; overflow-wrap: anywhere;
 }
 
@@ -450,10 +465,10 @@ button { font-family: inherit; border: 0; background: none; cursor: pointer; col
 /* 护理建议 / 精华推荐 */
 .card-care, .card-essence { padding: calc(20 * var(--u)) calc(22 * var(--u)) calc(18 * var(--u)); }
 .card-heading { font-size: calc(17 * var(--u)); font-weight: 700; color: #000; margin-bottom: calc(10 * var(--u)); }
-.care-item { font-size: calc(13.5 * var(--u)); color: var(--para); line-height: 1.7; margin-bottom: calc(10 * var(--u)); overflow-wrap: anywhere; }
+.care-item { font-size: max(14px, calc(15 * var(--u))); color: var(--para); line-height: 1.8; margin-bottom: calc(14 * var(--u)); overflow-wrap: anywhere; }
 .care-summary { font-size: calc(13.5 * var(--u)); font-weight: 500; color: #000; margin-top: calc(4 * var(--u)); }
 .essence-name { font-size: calc(16 * var(--u)); font-weight: 700; color: var(--ink); }
-.essence-triggers { font-size: calc(11 * var(--u)); color: var(--grey-3); margin-top: calc(6 * var(--u)); line-height: 1.5; }
+.essence-triggers { font-size: max(12px, calc(12 * var(--u))); color: var(--grey-3); margin-top: calc(8 * var(--u)); line-height: 1.7; }
 
 /* 产品推荐:大标题落在灰底;白卡左文案右图(各占一半) */
 .prod-title {
@@ -538,6 +553,9 @@ button { font-family: inherit; border: 0; background: none; cursor: pointer; col
 /* 报告检测图放大 */
 .overlay-zoom { background: rgba(0,0,0,.92); z-index: 80; cursor: zoom-out; }
 .overlay-zoom img { max-width: 100%; max-height: 100%; object-fit: contain; animation: zoomIn .22s ease both; }
+.overlay-zoom img { max-height: calc(100% - 110px); }
+.zoom-close { position: absolute; top: max(16px, env(safe-area-inset-top)); right: 14px; width: 44px; height: 44px; font-size: 34px; color: #fff; border-radius: 50%; background: rgba(255,255,255,.12); }
+.zoom-tip { position: absolute; bottom: max(24px, env(safe-area-inset-bottom)); color: #eee; font-size: 14px; }
 @keyframes zoomIn { from { opacity: 0; transform: scale(.88); } to { opacity: 1; transform: none; } }
 
 /* 分析中 */
@@ -621,3 +639,7 @@ button { font-family: inherit; border: 0; background: none; cursor: pointer; col
 .his-score b { font-size: 22px; font-weight: 500; color: var(--ink); }
 .his-score span { font-size: 11px; color: var(--grey); margin-left: 2px; }
 .his-del { flex: none; font-size: 11px; color: var(--grey-2); padding: 6px 4px; }
+
+@media (prefers-reduced-motion: reduce) {
+  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
+}