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

feat(h5): apply second customer UI feedback and homepage refinements

Browse Source
This commit is contained in:
xsl
2026-10-12 14:35:39 +08:00
parent abb1c4c1de
commit fe9623a1d7
16 changed files with 1963 additions and 1082 deletions
Download Patch File Download Diff File Expand all files Collapse all files
h5/css/fonts.css
+3 -1
View File
@@ -1,3 +1,5 @@
/* Original MiSans files, unchanged; never needed for login/session restoration. */
/* Original MiSans files, unchanged; never needed for login/session restoration.
PSD Semibold titles use 600; PSD Demibold titles/numbers use 700. */
@font-face { font-family: MiSans; src: url(../assets/fonts/misans/MiSans-Regular.woff2) format('woff2'); font-weight: 100 500; font-display: swap; }
@font-face { font-family: MiSans; src: url(../assets/fonts/misans/MiSans-Semibold.woff2) format('woff2'); font-weight: 600 900; font-display: swap; }
@font-face { font-family: "MiSans Demibold"; src: url(../assets/fonts/misans/MiSans-Demibold.woff2) format('woff2'); font-weight: 700; font-display: swap; }
h5/css/style.css
+7 -8
View File
@@ -207,15 +207,16 @@ button { font-family: inherit; border: 0; background: none; cursor: pointer; col
#s-cam { background: #000; }
/* 相机未就绪/降级时的静态态:白底经蒙版 85% 压暗 → 框外深灰、轮廓内白 */
.cam-bg { position: absolute; inset: 0; background: #fff; }
/* 实时画面整体缩小 15%:脸离镜头近一点也能装进取景轮廓(检测距离阈值按同一比例放宽) */
/* 实时画面铺满视口，避免缩小预览产生矩形取景边界。送检仍抓原始视频帧。 */
#cam-video {
position: absolute; inset: 0;
width: 100%; height: 100%;
object-fit: cover;
transform: scale(.85);
transform: none;
border: 0; outline: none; box-shadow: none;
display: none; z-index: 0;
}
#cam-video.mirror { transform: scale(-.85, .85); } /* 前置镜头镜像预览 */
#cam-video.mirror { transform: scaleX(-1); } /* 前置镜头镜像预览 */
#s-cam.cam-live #cam-video { display: block; }
#s-cam.cam-live .cam-bg { display: none; }
/* 纵向定位按 WebView 口径:Figma 帧 812 高扣掉顶部 86px 微信导航栏 = 726 高视口 */
@@ -255,7 +256,7 @@ button { font-family: inherit; border: 0; background: none; cursor: pointer; col
}
.cam-fill.on { opacity: 1; transition: none; }
/* 取景蒙版:SVG mask 镂空 + 轮廓线框,按 data-step 切换轮廓;框外 85% 黑 */
/* 取景蒙版:SVG 镂空，无外轮廓描边；按 data-step 切换轮廓，框外 85% 黑 */
.cam-mask {
position: absolute; inset: 0;
width: 100%; height: 100%;
@@ -267,10 +268,8 @@ button { font-family: inherit; border: 0; background: none; cursor: pointer; col
.cam-mask[data-step="2"] [data-shape="2"] { display: block; }
.cam-mask.flip { transform: scaleX(-1); } /* 后置镜头预览不镜像:侧脸轮廓随之翻转 */
.cam-dim-rect { fill: #000; fill-opacity: .85; }
.cam-line path { fill: none; stroke: rgba(255,255,255,.85); stroke-width: 2.5; }
@keyframes maskBreath { 0%,100% { stroke-opacity: .3; } 50% { stroke-opacity: .95; } }
.cam-mask.no-face .cam-line path { animation: maskBreath 1.8s ease-in-out infinite; }
.cam-mask.ok .cam-line path { stroke: #34C759; stroke-opacity: 1; animation: none; }
.cam-line { display: none; }
.cam-line path { fill: none; stroke: none; }
/* 动态捕捉扫描带:自上而下扫过轮廓内 */
.cam-scan { display: none; }
.cam-mask.scanning .cam-scan { display: block; }
h5/css/ui-20261009.css
+11 -2
View File
@@ -19,10 +19,14 @@
.login-message { min-height: calc(28 * var(--u)); max-width: 84%; color: #eee; text-align: center; font-size: 10px; line-height: 1.5; }
.splash-bg, .guide-bg { background-image: url(../assets/img/ui-20261009/bg-splash-h5.webp); }
.splash-slogan { top: 7.2%; font-size: 23px; line-height: 1.16; letter-spacing: 0; font-weight: 400; }
.splash-slogan-en { font-weight: 400; }
.splash-slogan-zh { font-weight: 700; white-space: nowrap; }
.splash-bottom { bottom: 6.5%; gap: calc(9 * var(--u)); }
.brand-row { margin-bottom: calc(7 * var(--u)); gap: calc(5 * var(--u)); }
.brand-logo { width: calc(48 * var(--u)); }
.brand-text { font-size: 19px; letter-spacing: 0; }
/* Match visible CJK glyph height to the logo, not the font's line box.
Both stay fixed in CSS px so narrow screens retain the same proportions. */
.brand-logo { width: auto; height: 26px; flex-shrink: 0; }
.brand-text { font-size: 24px; line-height: 1.2; font-weight: 700; letter-spacing: 0; white-space: nowrap; }
.btn-history { background: #fff; }
.profile-bg { background: url(../assets/img/ui-20261009/bg-profile-h5.webp) center/cover no-repeat; }
.skin-desc { max-width: calc(150 * var(--u)); font-size: 11.5px; }
@@ -84,6 +88,11 @@
#p-privacy { background: linear-gradient(#0008,#0008),url(../assets/img/ui-20261009/bg-splash-h5.webp) center/cover; }
#p-photoguide .popup { padding: calc(62 * var(--u)) calc(30 * var(--u)) calc(40 * var(--u)); }
.popup-title-center { text-align: left; margin: 0 0 calc(18 * var(--u)); }
/* PSD uses Semibold for report headings, Demibold for capture/consent/numbers. */
.report-title, .dimension-title, .card-heading, .prod-title, .page-title { font-weight: 600; }
.popup-title, .cam-step, .stat-value b, .stat-value i, .dim-score, .dim-score b, .care-summary {
font-family: "MiSans Demibold", var(--font); font-weight: 700;
}
.guide-description { font-size: 12px; line-height: 1.6; margin-bottom: calc(35 * var(--u)); }
.cam-feature-lines { fill: none; stroke: #fff; stroke-width: 2.5; stroke-dasharray: 5 5; filter: drop-shadow(0 1px 1px #000); }
#s-cam:not(.cam-live) .cam-feature-lines { stroke: #111; filter: none; }