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

miniprogram/pages/scan-report/scan-report.wxss

@@ -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; }