zhy.he/jw-beauty
1
0
派生 0
代码 工单 合并请求 工作流 软件包 项目 发布 百科 活动

ui: 报告分区/手动区域选择改用「使用设置」同款卡片栅格布局(弃面罩大矩形);修复使用设置脸型图label-idx错位

浏览代码
这个提交包含在：
Guoguo
2026-07-28 06:35:37 -07:00
父节点 9745b6d7b8
当前提交 39177e5ff4
共修改 4 个文件，包含 41 行新增和 117 行删除
下载 Patch 文件 下载 Diff 文件 展开所有文件 折叠所有文件
miniprogram/pages/scan-report/scan-report.wxml
+8 -50
查看文件
@@ -30,58 +30,16 @@
<view class="empty-hint" wx:else>{{i18n.report.noProblem}}</view>
</view>
<!-- Face zones -->
<!-- Face zones — 卡片栅格，与「使用设置」模式选择同款布局（果果 2026-07-28 要求，弃面罩大矩形） -->
<view class="card">
<view class="card-title">{{i18n.report.faceTitle}}</view>
<view class="face-map">
<view class="face-col face-col-side">
<view class="face-zone {{faceZones[0].colorClass}}" bindtap="onTapZone" data-wave="{{faceZones[0].waveKey}}">
<text class="face-zone-name">{{faceZones[0].name}}</text>
<text class="face-zone-mode" wx:if="{{faceZones[0].hasProblem}}">{{faceZones[0].modeLabel}}</text>
<text class="face-zone-level" wx:if="{{faceZones[0].hasProblem}}">{{faceZones[0].levelLabel}}</text>
</view>
</view>
<view class="face-col face-col-mid">
<view class="face-zone {{faceZones[1].colorClass}}" bindtap="onTapZone" data-wave="{{faceZones[1].waveKey}}">
<text class="face-zone-name">{{faceZones[1].name}}</text>
<text class="face-zone-mode" wx:if="{{faceZones[1].hasProblem}}">{{faceZones[1].modeLabel}}</text>
<text class="face-zone-level" wx:if="{{faceZones[1].hasProblem}}">{{faceZones[1].levelLabel}}</text>
</view>
<view class="face-zone {{faceZones[2].colorClass}}" bindtap="onTapZone" data-wave="{{faceZones[2].waveKey}}">
<text class="face-zone-name">{{faceZones[2].name}}</text>
<text class="face-zone-mode" wx:if="{{faceZones[2].hasProblem}}">{{faceZones[2].modeLabel}}</text>
<text class="face-zone-level" wx:if="{{faceZones[2].hasProblem}}">{{faceZones[2].levelLabel}}</text>
</view>
<view class="face-zone {{faceZones[3].colorClass}}" bindtap="onTapZone" data-wave="{{faceZones[3].waveKey}}">
<text class="face-zone-name">{{faceZones[3].name}}</text>
<text class="face-zone-mode" wx:if="{{faceZones[3].hasProblem}}">{{faceZones[3].modeLabel}}</text>
<text class="face-zone-level" wx:if="{{faceZones[3].hasProblem}}">{{faceZones[3].levelLabel}}</text>
</view>
</view>
<view class="face-col face-col-side">
<view class="face-zone {{faceZones[4].colorClass}}" bindtap="onTapZone" data-wave="{{faceZones[4].waveKey}}">
<text class="face-zone-name">{{faceZones[4].name}}</text>
<text class="face-zone-mode" wx:if="{{faceZones[4].hasProblem}}">{{faceZones[4].modeLabel}}</text>
<text class="face-zone-level" wx:if="{{faceZones[4].hasProblem}}">{{faceZones[4].levelLabel}}</text>
</view>
</view>
</view>
<view class="face-legend">
<view class="legend-item">
<view class="legend-dot zone-red"></view>
<text class="legend-label">{{i18n.report.modeNames.red}}</text>
</view>
<view class="legend-item">
<view class="legend-dot zone-ir"></view>
<text class="legend-label">{{i18n.report.modeNames.ir}}</text>
</view>
<view class="legend-item">
<view class="legend-dot zone-uv"></view>
<text class="legend-label">{{i18n.report.modeNames.uv}}</text>
</view>
<view class="legend-item">
<view class="legend-dot zone-yellow"></view>
<text class="legend-label">{{i18n.report.modeNames.yellow}}</text>
<view class="zone-grid">
<view class="zone-card {{item.colorClass}}" wx:for="{{faceZones}}" wx:key="key"
bindtap="onTapZone" data-wave="{{item.waveKey}}">
<view class="zone-card-name">{{item.name}}</view>
<view class="zone-card-mode" wx:if="{{item.hasProblem}}">{{item.modeLabel}}</view>
<view class="zone-card-level" wx:if="{{item.hasProblem}}">{{item.levelLabel}}</view>
<view class="zone-card-mode" wx:if="{{!item.hasProblem}}">{{i18n.report.noProblem}}</view>
</view>
</view>
<view class="face-tap-hint">{{i18n.report.faceTapHint}}</view>
miniprogram/pages/scan-report/scan-report.wxss
+22 -58
查看文件
@@ -60,69 +60,33 @@
.empty-hint { color: #999; font-size: 26rpx; }
.face-map {
/* 分区卡片栅格 — 与「使用设置」mode-selector 同款：等宽圆角卡片，3+2 排布 */
.zone-grid {
display: flex;
height: 480rpx;
gap: 8rpx;
padding: 12rpx;
box-sizing: border-box;
background: #FAFAFA;
border-radius: 32rpx;
}
.face-col { display: flex; flex-direction: column; flex: 1; gap: 8rpx; }
.face-col-mid { flex: 1.15; }
.face-zone {
flex: 1;
display: flex;
flex-direction: column;
align-items: center;
flex-wrap: wrap;
gap: 20rpx;
justify-content: center;
border-radius: 20rpx;
border: 2rpx solid transparent;
padding: 8rpx;
}
.zone-card {
flex: 0 0 calc((100% - 40rpx) / 3);
box-sizing: border-box;
transition: transform 0.1s ease;
padding: 24rpx 12rpx;
border: 4rpx solid #e5e5e5;
border-radius: 24rpx;
text-align: center;
color: #666;
}
.face-col-side .face-zone { border-radius: 28rpx; }
.face-zone:active { transform: scale(0.96); }
.face-zone-name { font-size: 26rpx; font-weight: 600; }
.face-zone-mode { font-size: 22rpx; margin-top: 6rpx; }
.face-zone-level { font-size: 20rpx; margin-top: 2rpx; opacity: 0.85; }
.zone-card:active { transform: scale(0.97); }
.zone-card-name { font-size: 28rpx; font-weight: 600; color: inherit; }
.zone-card-mode { font-size: 22rpx; margin-top: 6rpx; }
.zone-card-level { font-size: 20rpx; margin-top: 2rpx; opacity: 0.85; }
.zone-red {
background: rgba(232, 93, 93, 0.14);
border-color: rgba(232, 93, 93, 0.4);
color: #B23C3C;
}
.zone-ir {
background: rgba(192, 107, 74, 0.14);
border-color: rgba(192, 107, 74, 0.4);
color: #8C4A2E;
}
.zone-uv {
background: rgba(142, 107, 216, 0.14);
border-color: rgba(142, 107, 216, 0.4);
color: #5F3FAE;
}
.zone-yellow {
background: rgba(232, 185, 61, 0.18);
border-color: rgba(232, 185, 61, 0.45);
color: #8A6A10;
}
.zone-none {
background: #F0F0F0;
border-color: #E5E5E5;
color: #999;
}
.face-legend { display: flex; flex-wrap: wrap; margin-top: 20rpx; }
.legend-item { display: flex; align-items: center; margin: 0 20rpx 10rpx 0; }
.legend-dot { width: 16rpx; height: 16rpx; border-radius: 50%; margin-right: 8rpx; }
.legend-dot.zone-red { background: #E85D5D; border: none; }
.legend-dot.zone-ir { background: #C06B4A; border: none; }
.legend-dot.zone-uv { background: #8E6BD8; border: none; }
.legend-dot.zone-yellow { background: #E8B93D; border: none; }
.legend-label { font-size: 22rpx; color: #666; }
/* 波长配色（置于 .zone-card 之后以覆盖默认边框/文字色） */
.zone-red { background: rgba(232, 93, 93, 0.10); border-color: rgba(232, 93, 93, 0.55); color: #B23C3C; }
.zone-ir { background: rgba(192, 107, 74, 0.10); border-color: rgba(192, 107, 74, 0.55); color: #8C4A2E; }
.zone-uv { background: rgba(142, 107, 216, 0.10); border-color: rgba(142, 107, 216, 0.55); color: #5F3FAE; }
.zone-yellow { background: rgba(232, 185, 61, 0.12); border-color: rgba(232, 185, 61, 0.6); color: #8A6A10; }
.zone-none { background: #FAFAFA; border-color: #e5e5e5; color: #999; }
.face-tap-hint { font-size: 22rpx; color: #bbb; margin-top: 14rpx; text-align: center; }
.face-all-normal-hint { font-size: 24rpx; color: #6BBF59; text-align: center; margin-top: 12rpx; }