fix(日程): 居中弹层补齐背景色,之前透明看不清内容 (#52)
## 现象
时间选择框弹出来后没有背景色,"啥都看不见"。
## 根因
日程页的三个弹层(时间选择 / 重复范围 / 重复截止)原来靠 **bindSheet 自带的背景色**
(配置里的 `backgroundColor: $r('app.color.card_bg')`)。
#51 改成自绘居中弹层后,这三个 @Builder 的根 Column 只有
`.width('100%')` 和 `.padding(...)`,**没有设置 backgroundColor** →
弹层透明,背后的表单内容直接透出来,与滚轮文字糊在一起。
待办页的 dueDialog 当时写对了(有 backgroundColor),所以只有日程页出问题。
## 修法
三个弹层统一改为居中卡片样式:
.width('86%')
.padding(18)
.borderRadius(16)
.backgroundColor($r('app.color.card_bg'))
## 真机验证(5NC0225B27004718)
像素采样:
| 位置 | 实测颜色 | 期望 |
|---|---|---|
| 弹层内 y=750/900/1200/1500 | (255,255,255) 纯白 | 卡片背景 ✅ |
| 弹层按钮 y=1650 | (0,126,255) 品牌蓝 | 确定按钮 ✅ |
| 弹层外 y=200/400 | (149,150,152) 灰 | 遮罩压暗 ✅ |
| 弹层外 y=2000/2200 | (145,146,148) 灰 | 遮罩压暗 ✅ |
内白外灰,对比清晰,内容可读。
This commit is contained in:
@@ -1917,8 +1917,10 @@ struct EventEditPage {
|
||||
this.sheetShow = false;
|
||||
})
|
||||
}
|
||||
.width('100%')
|
||||
.padding({ left: 16, right: 16, bottom: 24 })
|
||||
.width('86%')
|
||||
.padding(18)
|
||||
.borderRadius(16)
|
||||
.backgroundColor($r('app.color.card_bg'))
|
||||
}
|
||||
|
||||
/** ⭐ 重复日程"作用范围"选择弹层:保存/删除前让用户明确改哪几次 */
|
||||
@@ -1954,8 +1956,10 @@ struct EventEditPage {
|
||||
this.sheetShow = false;
|
||||
})
|
||||
}
|
||||
.width('100%')
|
||||
.padding({ left: 20, right: 20 })
|
||||
.width('86%')
|
||||
.padding(18)
|
||||
.borderRadius(16)
|
||||
.backgroundColor($r('app.color.card_bg'))
|
||||
}
|
||||
|
||||
@Builder
|
||||
@@ -2164,8 +2168,10 @@ struct EventEditPage {
|
||||
this.sheetShow = false;
|
||||
})
|
||||
}
|
||||
.width('100%')
|
||||
.padding({ left: 16, right: 16, bottom: 24 })
|
||||
.width('86%')
|
||||
.padding(18)
|
||||
.borderRadius(16)
|
||||
.backgroundColor($r('app.color.card_bg'))
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
Reference in New Issue
Block a user