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

fix(h5): center score stack, lock profile scroll and gate turn guidance

Browse Source
This commit is contained in:
xsl
2026-10-12 23:48:11 +08:00
parent 2a49ebdab2
commit 6f83f58a09
17 changed files with 1396 additions and 969 deletions
Download Patch File Download Diff File Expand all files Collapse all files
h5/css/ui-20261012.css
+40 -7
View File
@@ -107,19 +107,52 @@
#dims-note .dims-note-l1 { font-size: 12px; line-height: 1.5; }
#dims-note .dims-note-l2 { font-size: 11px; line-height: 1.5; margin-top: 3px; }
/* Labels share a top baseline outside the dial; center the score digits, not
digits plus unit, inside the yellow ring. */
.sum-score, .sum-age { flex-direction: column; align-items: center; justify-content: flex-start; gap: calc(6 * var(--u)); }
.sum-age { align-self: stretch; }
.sum-score > .stat-label, .sum-age > .stat-label { font-size: 12px; line-height: 1.5; }
/* Center the complete score stack inside the ring, with the age label exactly
25 CSS px above its number. Units do not offset the score digits. */
.sum-score, .sum-age { flex-direction: column; align-items: center; justify-content: center; gap: 0; }
.sum-age { align-self: stretch; gap: 25px; }
.ring-center { gap: 6px; }
.ring-center .stat-label, .sum-age > .stat-label { margin: 0; font-size: 12px; line-height: 1.5; color: var(--ink); }
.score-dial, .age-dial { position: relative; width: calc(108 * var(--u)); height: calc(108 * var(--u)); }
.age-dial { display: flex; align-items: center; justify-content: center; }
.age-dial .stat-age { margin-top: 0; }
.age-dial { height: auto; display: flex; align-items: center; justify-content: center; }
.age-dial .stat-age { margin-top: 0; display: flex; align-items: baseline; }
.age-dial .stat-age b { display: block; line-height: 1; }
#stat-score { position: relative; }
#stat-score b { display: block; letter-spacing: 0; }
#stat-score i { position: absolute; left: 100%; bottom: 3px; margin-left: 2px; }
.card-care .card-heading { text-align: left; }
/* The profile is a fixed page, not a scroll container. Keep normal-height PSD
spacing; shrink only vertical whitespace/photo height on shorter viewports.
Wheel pickers are mounted outside this screen and retain their own gestures. */
#s-profile {
overflow: hidden; overscroll-behavior: none; touch-action: none;
--profile-space: min(var(--u), max(.3px, calc((100vh - 420px) / 306)));
}
@supports (height: 100dvh) {
#s-profile { --profile-space: min(var(--u), max(.3px, calc((100dvh - 420px) / 306))); }
}
#s-profile .profile-body {
height: 100%; min-height: 0; display: flex; flex-direction: column;
padding-top: max(env(safe-area-inset-top), calc(34 * var(--profile-space)));
padding-bottom: max(env(safe-area-inset-bottom), calc(40 * var(--profile-space)));
}
#s-profile .profile-body > * { flex-shrink: 0; }
#s-profile .page-title { margin-bottom: calc(22 * var(--profile-space)); }
#s-profile .field { margin-bottom: calc(19 * var(--profile-space)); }
#s-profile .field-label { margin-bottom: calc(9 * var(--profile-space)); }
#s-profile .profile-skin-field { flex: 0 1 auto; min-height: 0; display: flex; flex-direction: column; }
#s-profile .skin-card { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; padding-top: calc(21 * var(--profile-space)); padding-bottom: calc(24 * var(--profile-space)); }
#s-profile .skin-axis { flex-shrink: 0; margin-bottom: calc(18 * var(--profile-space)); }
#s-profile .skin-stage { flex: 1 1 auto; min-height: 0; display: flex; }
#s-profile .skin-carousel { flex: 1; min-width: 0; min-height: 0; display: flex; touch-action: none; }
#s-profile .skin-track { flex: 0 0 100%; min-width: 0; min-height: 0; }
#s-profile .skin-item img { flex-shrink: 1; min-height: 0; object-fit: contain; }
#s-profile .skin-name { flex-shrink: 0; margin-top: calc(16 * var(--profile-space)); }
#s-profile .skin-desc { flex-shrink: 0; width: calc(150 * var(--u)); min-height: calc(2 * 1.55 * 11.5px); }
#s-profile .skin-dots { flex-shrink: 0; margin-top: calc(22 * var(--profile-space)); }
#s-profile .btn-submit { margin-top: calc(25 * var(--profile-space)); }
.detail-viewport { overflow: hidden; touch-action: pan-y; transition: height .32s ease; }
.detail-viewport.dragging { transition: none; }
.detail-panels { display: flex; align-items: flex-start; transition: transform .32s cubic-bezier(.22,.61,.36,1); }