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

feat(h5): align report care and single-product section with updated design

Browse Source
This commit is contained in:
xsl
2026-10-15 01:30:45 +08:00
parent 60ae6c97ef
commit 77493bdff5
18 changed files with 983 additions and 728 deletions
Download Patch File Download Diff File Expand all files Collapse all files
h5/css/ui-20261012.css
+28 -1
View File
@@ -82,6 +82,33 @@
.prod-scroll { flex: 0 0 51.219512%; }
.prod-scroll img { width: 100%; height: 100%; aspect-ratio: auto; object-fit: fill; }
/* 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; }
.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; }
.report-care-products .card-heading { margin-bottom:calc(5.208333 * var(--u)); }
.report-care-products .care-item { font-size:11.574074px; line-height:14.467593px; margin-bottom:calc(14.467593 * var(--u)); }
.report-care-products .care-item:last-child { margin-bottom:0; }
.product-section-heading { margin:calc(34.375 * var(--u)) 0 calc(5.555556 * var(--u)); }
.report-care-products .card-product { width:auto; margin:0 calc(-18.402778 * var(--u)); border-radius:calc(3.472222 * var(--u)); background:#F6F6F6; }
.report-care-products .prod-card { height:auto; aspect-ratio:945 / 511; }
.report-care-products .prod-info { flex-basis:49.100529%; }
.report-care-products .prod-scroll { flex-basis:50.899471%; }
.report-care-products #product-title { left:8.571429%; top:29.158513%; font-size:13.888889px; line-height:17.340278px; font-weight:700; white-space:nowrap; }
.report-care-products .prod-name { left:8.677249%; top:41.095890%; font-size:11.532639px; line-height:14.467593px; 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; }
.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; }
@media (max-width:359px) {
.report-care-products #product-title { font-size:12px; }
.report-care-products .prod-name { font-size:10px; }
}
/* Fourth feedback adds a fast one-second round trip to original PSD pixels.
The stage/mask share one contain transform, including short/landscape screens. */
#p-analyzing { background: #000; overflow: hidden; }
@@ -134,7 +161,7 @@
#stat-score { display: flex; align-items: baseline; justify-content: center; }
#stat-score b { display: block; letter-spacing: 0; }
#stat-score i { position: static; margin-left: 2px; }
.card-care .card-heading { text-align: left; margin-bottom: calc(9 * var(--u)); }
.card-care:not(.report-care-products) .card-heading { text-align: left; margin-bottom: calc(9 * var(--u)); }
/* The profile is a fixed page, not a scroll container. Keep normal-height PSD
spacing; shrink only vertical whitespace/photo height on shorter viewports.