xsl/juzi
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(h5): apply October 12 customer report feedback

Browse Source
This commit is contained in:
xsl
2026-10-12 13:15:09 +08:00
parent 3193a4b683
commit d7ae748e08
22 changed files with 2282 additions and 1027 deletions
Download Patch File Download Diff File Expand all files Collapse all files
h5/css/style.css
+50 -50
View File
@@ -1,6 +1,6 @@
/* ═══════════════════════════════════════════
巨子测肤 · 1'me 在线肌肤测试 — H5 样式
设计稿 1080px 基准 → 375px(÷2.88);尺寸写成 N × --u,不同宽度手机等比缩放、视觉一致
设计稿 1080px 基准 → 375px(÷2.88);布局尺寸随 --u 缩放，字号使用固定 CSS px
主色 #F5F078 · 文字 #282828 · 底 #EFEFEF
═══════════════════════════════════════════ */
:root {
@@ -56,7 +56,7 @@ button { font-family: inherit; border: 0; background: none; cursor: pointer; col
background: var(--yellow);
border-radius: calc(5 * var(--u));
color: var(--ink);
font-size: calc(14.5 * var(--u)); font-weight: 500; letter-spacing: calc(.5 * var(--u));
font-size: 14.5px; font-weight: 500; letter-spacing: calc(.5 * var(--u));
text-align: center;
transition: transform .12s ease;
}
@@ -88,7 +88,7 @@ button { font-family: inherit; border: 0; background: none; cursor: pointer; col
.splash-slogan {
position: absolute; left: 0; right: 0; top: 10.7%;
text-align: center;
color: #fff; font-size: calc(23 * var(--u)); font-weight: 500;
color: #fff; font-size: 23px; font-weight: 500;
line-height: 1.38; letter-spacing: calc(.6 * var(--u));
text-shadow: 0 1px 8px rgba(0,0,0,.15);
}
@@ -99,7 +99,7 @@ button { font-family: inherit; border: 0; background: none; cursor: pointer; col
}
.brand-row { display: flex; align-items: center; gap: calc(7 * var(--u)); }
.brand-logo { width: calc(46 * var(--u)); height: auto; filter: brightness(0) invert(1); }
.brand-text { color: #fff; font-size: calc(21.5 * var(--u)); font-weight: 500; letter-spacing: calc(1 * var(--u)); }
.brand-text { color: #fff; font-size: 21.5px; font-weight: 500; letter-spacing: calc(1 * var(--u)); }
/* ═══════════ 03 档案填写 ═══════════ */
#s-profile { background: #0e0f18; }
@@ -116,14 +116,14 @@ button { font-family: inherit; border: 0; background: none; cursor: pointer; col
padding: calc(34 * var(--u)) calc(64 * var(--u)) calc(40 * var(--u));
}
.page-title {
color: #fff; font-size: calc(21.5 * var(--u)); font-weight: 700;
color: #fff; font-size: 21.5px; font-weight: 700;
letter-spacing: calc(1 * var(--u)); text-align: center;
margin-bottom: calc(22 * var(--u));
}
.field { margin-bottom: calc(19 * var(--u)); }
.field-label {
display: block; text-align: center;
color: #fff; font-size: calc(14.5 * var(--u)); font-weight: 400;
color: #fff; font-size: 14.5px; 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)); }
@@ -135,7 +135,7 @@ button { font-family: inherit; border: 0; background: none; cursor: pointer; col
width: 100%; height: calc(37 * var(--u));
padding: 0 calc(13 * var(--u)) 0 calc(12 * var(--u));
background: #fff; border-radius: calc(5 * var(--u));
font-size: calc(13.5 * var(--u)); color: var(--ink); text-align: left;
font-size: 13.5px; color: var(--ink); text-align: left;
}
.pick-value { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.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; }
@@ -152,7 +152,7 @@ button { font-family: inherit; border: 0; background: none; cursor: pointer; col
}
.axis-item {
display: inline-flex; align-items: center; gap: calc(5 * var(--u));
font-size: calc(9 * var(--u)); color: var(--ink);
font-size: 9px; color: var(--ink);
}
.chip { width: calc(8 * var(--u)); height: calc(8 * var(--u)); border-radius: 50%; display: inline-block; }
.skin-stage { position: relative; padding: 0 calc(28 * var(--u)); }
@@ -172,9 +172,9 @@ button { font-family: inherit; border: 0; background: none; cursor: pointer; col
display: flex; flex-direction: column; align-items: center;
}
.skin-item img { width: calc(109 * var(--u)); height: calc(109 * var(--u)); }
.skin-name { font-size: calc(12.5 * var(--u)); font-weight: 700; color: #000; margin-top: calc(16 * var(--u)); }
.skin-name { font-size: 12.5px; font-weight: 700; color: #000; margin-top: calc(16 * var(--u)); }
.skin-desc {
font-size: calc(10.3 * var(--u)); color: var(--ink);
font-size: 10.3px; color: var(--ink);
line-height: 1.55; text-align: center;
margin-top: calc(5 * var(--u)); max-width: calc(136 * var(--u));
}
@@ -222,7 +222,7 @@ button { font-family: inherit; border: 0; background: none; cursor: pointer; col
.cam-step {
position: absolute; left: 0; right: 0; top: 7.1%;
text-align: center;
color: #fff; font-size: calc(21.5 * var(--u)); font-weight: 500;
color: #fff; font-size: 21.5px; font-weight: 500;
line-height: 1.5; letter-spacing: calc(1 * var(--u));
text-shadow: 0 1px 10px rgba(0,0,0,.4);
z-index: 2;
@@ -232,7 +232,7 @@ button { font-family: inherit; border: 0; background: none; cursor: pointer; col
display: flex; justify-content: center; align-items: center; gap: calc(26 * var(--u));
z-index: 2;
}
.cam-guide span { color: #fff; font-size: calc(14.5 * var(--u)); font-weight: 400; }
.cam-guide span { color: #fff; font-size: 14.5px; font-weight: 400; }
.cam-guide i { width: 0; height: calc(15 * var(--u)); border-left: 1px solid rgba(255,255,255,.7); }
.cam-controls {
position: absolute; left: 0; right: 0; bottom: 5.2%;
@@ -281,7 +281,7 @@ button { font-family: inherit; border: 0; background: none; cursor: pointer; col
.cam-status {
position: absolute; top: 17px; left: 50%;
transform: translateX(-50%);
font-size: calc(11 * var(--u)); color: rgba(255,255,255,.85);
font-size: 11px; color: rgba(255,255,255,.85);
background: rgba(0,0,0,.35);
padding: 4px 12px; border-radius: 11px;
z-index: 2; opacity: 0; transition: opacity .25s; white-space: nowrap;
@@ -292,7 +292,7 @@ button { font-family: inherit; border: 0; background: none; cursor: pointer; col
.cam-hint {
position: absolute; left: 50%; bottom: 27%;
transform: translateX(-50%) translateY(6px);
font-size: calc(17 * var(--u)); font-weight: 500; color: #fff;
font-size: 17px; font-weight: 500; color: #fff;
text-shadow: 0 1px 8px rgba(0,0,0,.65);
z-index: 2; opacity: 0; pointer-events: none;
transition: opacity .2s ease, transform .2s ease;
@@ -305,7 +305,7 @@ button { font-family: inherit; border: 0; background: none; cursor: pointer; col
.cam-nudge {
position: absolute; left: 50%; bottom: 16.5%;
transform: translateX(-50%) translateY(6px);
font-size: calc(11.5 * var(--u)); color: #fff;
font-size: 11.5px; color: #fff;
background: rgba(0,0,0,.55);
padding: 6px 14px; border-radius: 14px;
z-index: 2; opacity: 0; pointer-events: none;
@@ -336,14 +336,14 @@ button { font-family: inherit; border: 0; background: none; cursor: pointer; col
border: solid #fff; border-width: 0 0 calc(3 * var(--u)) calc(3 * var(--u));
transform: translate(-50%, -50%) rotate(-45deg);
}
.cam-next b { font-size: calc(17 * var(--u)); font-weight: 500; }
.cam-next span { margin-top: calc(8 * var(--u)); font-size: calc(14 * var(--u)); color: rgba(255,255,255,.85); line-height: 1.5; }
.cam-next b { font-size: 17px; font-weight: 500; }
.cam-next span { margin-top: calc(8 * var(--u)); font-size: 14px; color: rgba(255,255,255,.85); line-height: 1.5; }
/* ═══════════ 08 报告页 ═══════════ */
#s-report { background: var(--bg); }
.report-body { padding: 0 calc(18 * var(--u)) calc(28 * var(--u)); }
.report-title {
font-size: calc(23 * var(--u)); font-weight: 700; color: var(--ink);
font-size: 23px; font-weight: 700; color: var(--ink);
text-align: center; letter-spacing: calc(.5 * var(--u));
padding: calc(32 * var(--u)) 0 calc(20 * var(--u));
}
@@ -351,7 +351,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: 12px; 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; }
@@ -371,20 +371,20 @@ button { font-family: inherit; border: 0; background: none; cursor: pointer; col
position: absolute; inset: 0;
display: flex; flex-direction: column; align-items: center; justify-content: center;
}
.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-value b { font-size: 40px; }
.ring-center .stat-value i { font-size: 14px; }
.ring-center .stat-label { margin-top: calc(3 * var(--u)); font-size: 11.5px; color: var(--para); }
.sum-age {
flex: 1; min-width: 0;
display: flex; flex-direction: column; align-items: flex-start;
padding-left: calc(26 * var(--u));
}
.stat-age { margin-top: calc(6 * var(--u)); }
.stat-age b { font-size: calc(58 * var(--u)); }
.stat-age i { font-size: calc(19 * var(--u)); margin-left: 2px; }
.stat-age b { font-size: 58px; }
.stat-age i { font-size: 19px; margin-left: 2px; }
.age-pill {
margin-top: calc(7 * var(--u));
font-size: calc(9.5 * var(--u)); color: var(--grey-2);
font-size: 9.5px; color: var(--grey-2);
background: #F2F2F2; border-radius: calc(9 * var(--u));
padding: calc(2 * var(--u)) calc(10 * var(--u));
white-space: nowrap;
@@ -400,9 +400,9 @@ 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-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-name { font-size: 12px; color: var(--ink); }
.dim-score { margin-top: calc(4 * var(--u)); font-size: 30px; font-weight: 500; color: var(--ink); line-height: 1.1; }
.dim-score b { font-size: 42px; font-weight: 500; }
.dim-score.dim-bad { color: var(--bad); }
.dim-bar {
display: block; margin-top: calc(6 * var(--u));
@@ -415,7 +415,7 @@ button { font-family: inherit; border: 0; background: none; cursor: pointer; col
.dim-flag {
visibility: hidden;
margin-top: calc(6 * var(--u));
font-style: normal; font-size: calc(9 * var(--u)); color: var(--ink);
font-style: normal; font-size: 9px; color: var(--ink);
background: #F8F4A6; border-radius: calc(8 * var(--u));
padding: calc(1 * var(--u)) calc(8 * var(--u));
}
@@ -429,15 +429,15 @@ 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: 13px; 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(4 * var(--u)); font-size: 12px; color: var(--grey); }
/* 维度详情卡(原布局):紧塑力/活力感/稳定力三个 Tab,每个 Tab 两条「竖排标题 + 左图右文」;检测图点击放大 */
.card-detail { padding: 0 calc(19 * var(--u)) calc(19 * var(--u)); }
.detail-tabs { display: flex; border-bottom: 1px solid #F0F0F0; }
.dtab { flex: 1; padding: calc(13 * var(--u)) 0 0; font-weight: 500; color: var(--ink); }
.dtab-tx { position: relative; display: inline-block; font-size: calc(10.1 * var(--u)); padding: 0 calc(5 * var(--u)) calc(7 * var(--u)); }
.dtab-tx { position: relative; display: inline-block; font-size: 10.1px; padding: 0 calc(5 * var(--u)) calc(7 * var(--u)); }
.dtab.active { font-weight: 700; }
.dtab.active .dtab-tx::after {
content: ""; position: absolute; left: 50%; transform: translateX(-50%); bottom: -1px;
@@ -458,28 +458,28 @@ button { font-family: inherit; border: 0; background: none; cursor: pointer; col
.ditem-title {
writing-mode: vertical-rl;
letter-spacing: calc(4 * var(--u));
font-size: calc(11.5 * var(--u)); font-weight: 500; color: var(--ink);
font-size: 11.5px; font-weight: 500; color: var(--ink);
margin-right: calc(3.5 * var(--u)); flex-shrink: 0;
}
.ditem-para { font-size: calc(10.1 * var(--u)); font-weight: 400; color: var(--para); line-height: 1.41; overflow-wrap: anywhere; }
.ditem-para { font-size: 10.1px; font-weight: 400; color: var(--para); line-height: 1.41; overflow-wrap: anywhere; }
.vm-notes { font-size: calc(10 * var(--u)); color: var(--grey-3); line-height: 1.7; margin: calc(14 * var(--u)) calc(6 * var(--u)) 0; }
.vm-notes { font-size: 10px; color: var(--grey-3); line-height: 1.7; margin: calc(14 * var(--u)) calc(6 * var(--u)) 0; }
.report-disclaimer {
font-size: calc(10 * var(--u)); color: var(--para);
font-size: 10px; color: var(--para);
line-height: 1.7; margin: calc(18 * var(--u)) calc(6 * var(--u)) calc(14 * var(--u));
}
/* 护理建议 / 精华推荐 */
.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-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; }
.card-heading { font-size: 17px; font-weight: 700; color: #000; margin-bottom: calc(10 * var(--u)); }
.care-item { font-size: 13.5px; color: var(--para); line-height: 1.7; margin-bottom: calc(10 * var(--u)); overflow-wrap: anywhere; }
.care-summary { font-size: 13.5px; font-weight: 500; color: #000; margin-top: calc(4 * var(--u)); }
.essence-name { font-size: 16px; font-weight: 700; color: var(--ink); }
.essence-triggers { font-size: 11px; color: var(--grey-3); margin-top: calc(6 * var(--u)); line-height: 1.5; }
/* 产品推荐:大标题落在灰底;白卡左文案右图(各占一半) */
.prod-title {
font-size: calc(23 * var(--u)); font-weight: 700; color: var(--ink);
font-size: 23px; font-weight: 700; color: var(--ink);
line-height: 1.45; text-align: center; letter-spacing: calc(1 * var(--u));
margin: calc(30 * var(--u)) 0 calc(18 * var(--u));
}
@@ -491,8 +491,8 @@ button { font-family: inherit; border: 0; background: none; cursor: pointer; col
display: flex; flex-direction: column; align-items: flex-start;
}
.prod-badge { width: calc(44 * var(--u)); height: auto; }
.prod-name { font-size: calc(14.5 * var(--u)); font-weight: 700; color: var(--ink); line-height: 1.45; margin-top: calc(10 * var(--u)); }
.prod-sub { font-size: calc(9.5 * var(--u)); color: var(--grey-3); margin-top: auto; padding-top: calc(10 * var(--u)); }
.prod-name { font-size: 14.5px; font-weight: 700; color: var(--ink); line-height: 1.45; margin-top: calc(10 * var(--u)); }
.prod-sub { font-size: 9.5px; color: var(--grey-3); margin-top: auto; padding-top: calc(10 * var(--u)); }
.prod-scroll { flex: 0 0 51%; display: flex; overflow: hidden; }
.prod-scroll img { width: 100%; height: 100%; object-fit: cover; }
.btn-more { margin: calc(26 * var(--u)) auto 0; }
@@ -528,11 +528,11 @@ button { font-family: inherit; border: 0; background: none; cursor: pointer; col
}
.popup-close img { width: calc(19 * var(--u)); height: calc(19 * var(--u)); }
.popup-title {
font-size: calc(23 * var(--u)); font-weight: 500; color: var(--ink);
font-size: 23px; font-weight: 500; color: var(--ink);
line-height: 1.38; letter-spacing: calc(.5 * var(--u));
margin-bottom: calc(14 * var(--u));
}
.popup-body { font-size: calc(11.6 * var(--u)); color: var(--ink); line-height: 1.6; margin-bottom: calc(26 * var(--u)); }
.popup-body { font-size: 11.6px; color: var(--ink); line-height: 1.6; margin-bottom: calc(26 * var(--u)); }
.privacy-row { display: flex; align-items: center; gap: calc(9 * var(--u)); cursor: pointer; }
.checkbox {
width: calc(12 * var(--u)); height: calc(12 * var(--u)); border-radius: 50%;
@@ -544,7 +544,7 @@ button { font-family: inherit; border: 0; background: none; cursor: pointer; col
inset: 2px; border-radius: 50%;
background: var(--ink-2);
}
.privacy-text { font-size: calc(10.3 * var(--u)); color: var(--grey-2); }
.privacy-text { font-size: 10.3px; color: var(--grey-2); }
.privacy-link { color: var(--ink); font-weight: 500; text-decoration: underline; cursor: pointer; }
.privacy-link:active { opacity: .7; }
.popup-btn { margin: auto auto 0; }
@@ -566,10 +566,10 @@ button { font-family: inherit; border: 0; background: none; cursor: pointer; col
.overlay-dark { background: rgba(16,16,16,.82); }
.analyzing {
color: #fff; text-align: center;
font-size: calc(14 * var(--u)); letter-spacing: 1px;
font-size: 14px; letter-spacing: 1px;
display: flex; flex-direction: column; align-items: center; gap: 16px;
}
.analyzing-tip { font-size: calc(11 * var(--u)); color: rgba(255,255,255,.45); letter-spacing: 0; }
.analyzing-tip { font-size: 11px; color: rgba(255,255,255,.45); letter-spacing: 0; }
.spinner {
width: 34px; height: 34px;
border: 3px solid rgba(255,255,255,.25);
@@ -585,7 +585,7 @@ button { font-family: inherit; border: 0; background: none; cursor: pointer; col
transform: translateX(-50%) translateY(8px);
max-width: 86%;
background: rgba(20,20,20,.85); color: #fff;
font-size: calc(13 * var(--u)); line-height: 1.5; text-align: center;
font-size: 13px; line-height: 1.5; text-align: center;
padding: 9px 18px; border-radius: 18px;
opacity: 0; pointer-events: none;
transition: all .25s ease;