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

feat(report): add annotated wrinkle views and restore capture countdown

Browse Source
This commit is contained in:
xsl
2026-10-15 19:45:21 +08:00
parent 2d80f6dfd0
commit 757b96dfad
23 changed files with 396 additions and 75 deletions
Download Patch File Download Diff File Expand all files Collapse all files
h5/css/ui-20261012.css
+11 -4
View File
@@ -2,6 +2,10 @@
Native 248px WeChat header is excluded. Fixed text sizes/line breaks are
intentional; flexible photo backgrounds and safe areas accommodate phones. */
.account-logout { font-size: 11px; opacity: .8; white-space: nowrap; }
.cam-countdown { position:absolute; left:50%; top:45%; transform:translate(-50%,-50%); z-index:4; pointer-events:none; color:#fff; font:600 88px/1 Arial,sans-serif; text-shadow:0 2px 16px rgba(0,0,0,.5); }
.cam-countdown-tick { display:block; animation:camera-countdown-tick .6s ease-out both; }
@keyframes camera-countdown-tick { from { opacity:.3; transform:scale(1.25); } to { opacity:1; transform:scale(1); } }
@media (prefers-reduced-motion:reduce) { .cam-countdown-tick { animation:none; } }
.splash-slogan {
left: calc(50% - 1.041667px); right: auto;
width: 249.305556px; height: 75.347222px;
@@ -85,7 +89,7 @@
/* Figma 1:65, 1080px canvas. One algorithm-selected product, not a catalogue. */
/* User-confirmed: both lines centered; use the same font size/line height
as the stability heading rather than scaling text on wide previews. */
.prod-title { width:calc(206.597222 * var(--u)); max-width:100%; text-align:center; margin:calc(13 * var(--u)) auto calc(8.583333 * var(--u)); padding:0; transform:translateX(calc(.347222 * var(--u))); font-size:22.106597px; line-height:28.738542px; font-weight:700; white-space:nowrap; }
.prod-title { width:calc(206.597222 * var(--u)); max-width:100%; text-align:center; margin:calc(16.9 * var(--u)) auto calc(11.158333 * var(--u)); padding:0; transform:translateX(calc(.347222 * var(--u))); font-size:22.106597px; line-height:28.738542px; font-weight:700; white-space:nowrap; }
.report-care-products { width:calc(340.625 * var(--u)); margin-left:auto; margin-right:auto; padding:calc(21.180556 * var(--u)) calc(24.652778 * var(--u)) calc(7.986111 * var(--u)); }
.report-care-products .card-heading,
.product-section-heading { font-size:13.888889px; line-height:19.444444px; font-weight:700; text-align:left; }
@@ -102,6 +106,8 @@
.report-care-products .prod-name { left:8.677249%; top:41.095890%; font-size:12.013166px; line-height:15.070408px; font-weight:700; color:#989898; white-space:nowrap; }
.report-care-products .prod-badge { left:8.783069%; top:56.751468%; width:10.687831%; }
.report-care-products + .report-disclaimer { margin:calc(12.152778 * var(--u)) calc(5.208333 * var(--u)) calc(20 * var(--u)); font-size:7.233681px; line-height:10.127431px; }
/* Equal whitespace above/below all three headings; keep the original total gap. */
.dimension-title { margin:calc(18 * var(--u)) 0; }
.dimension-stability-title { font-size:22.106597px; line-height:28.738542px; }
.stability-card .dtab-tx { font-size:11.055903px; }
.stability-card .ditem-para { font-size:11.574074px; line-height:14.467593px; }
@@ -205,9 +211,10 @@
.contour-sides[hidden], .contour-sides figure[hidden] { display: none; }
.contour-sides figure { margin: 0; min-width: 0; }
.contour-sides figure[data-view="right"] { grid-column: 2; }
.contour-side-photo { display: block; position: relative; width: 100%; height: calc(92.25 * var(--u)); padding: 0; border: 0; border-radius: calc(5 * var(--u)); overflow: hidden; background: #f6f6f6; cursor: zoom-in; }
.contour-side-photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; transform: translateY(15%) scale(1.3); transform-origin: center; -webkit-user-drag: none; }
.contour-side-photo:focus-visible { outline: 2px solid #333; outline-offset: 3px; }
.contour-side-photo, .wrinkle-side-photo { display: block; position: relative; width: 100%; height: calc(92.25 * var(--u)); padding: 0; border: 0; border-radius: calc(5 * var(--u)); overflow: hidden; background: #f6f6f6; cursor: zoom-in; }
.contour-side-photo img, .wrinkle-side-photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; transform: translateY(-25%) scale(2.8); transform-origin: center; -webkit-user-drag: none; }
.contour-side-photo:focus-visible, .wrinkle-side-photo:focus-visible { outline: 2px solid #333; outline-offset: 3px; }
.wrinkle-layer-note { width:calc(215 * var(--u)); margin:0 auto calc(12 * var(--u)); color:#888; font-size:10px; line-height:1.4; }
@media (prefers-reduced-motion: reduce) {
.detail-panels, .detail-viewport { transition-duration: .01ms; }
}