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/index.html
+10 -15
View File
@@ -238,8 +238,8 @@
</div>
</div></div>
</div>
<h2 class="dimension-title">稳韧力</h2>
<div class="card card-detail">
<h2 class="dimension-title dimension-stability-title">稳韧力</h2>
<div class="card card-detail stability-card">
<div class="detail-tabs"><button class="dtab active" data-tab="0"><span class="dtab-tx">泛红</span></button><button class="dtab" data-tab="1"><span class="dtab-tx">痘痘</span></button></div>
<div class="detail-viewport"><div class="detail-panels">
<div class="dpanel active" data-panel="0">
@@ -254,33 +254,28 @@
</div>
<p class="vm-notes" id="vm-notes" style="display:none"></p>
<p class="report-disclaimer">*您的肌肤状态会随年龄、环境、作息和生活节奏动态变化。<br>*本次检测仅代表当前肌肤状态参考。</p>
<div class="card card-care">
<h2 class="card-heading">护理建议</h2>
<h2 class="prod-title">感受高光时刻<br>从日常的好状态开始</h2>
<div class="card card-care report-care-products">
<h2 class="card-heading">日常护理</h2>
<div id="care-list">
<p class="care-item">检测完成后显示分析结果。</p>
</div>
<p class="care-summary">好状态，是内外同调的长期节奏。</p>
</div>
<!-- 产品推荐大标题独立于白卡之外,直接落在灰底上(Figma 08) -->
<h2 class="prod-title">感受高光时刻<br>从日常的好状态开始</h2>
<h2 class="product-section-heading">推荐产品</h2>
<p id="product-unavailable" class="care-item" hidden>本次未获取有效肌龄，暂无法推荐产品，建议重新检测。</p>
<div class="card card-product">
<div class="card-product">
<div class="prod-card">
<div class="prod-info">
<h3 id="product-title"></h3>
<p class="prod-name" id="product-name"></p>
<img class="prod-badge" src="assets/img/ui-20261009/product-badge.png" alt="1’me">
<img class="prod-badge" src="assets/img/ui-20261015/product-badge.png" alt="1’me">
</div>
<div class="prod-scroll" id="prod-scroll">
<img id="product-image" alt="算法推荐精华">
</div>
</div>
</div>
</div>
<p class="report-disclaimer">*您的肌肤状态会随年龄、环境、作息和生活节奏动态变化。<br>*本次检测仅代表当前肌肤状态参考。<br>*仅根据您最近的测肤记录推荐。</p>
</div>
</section>