style(scan-checkin-detail): 调整扫码打卡详情页样式并更新模拟数据
修改页面容器的内边距与背景色,将操作按钮栏固定至页面底部并适配iOS安全区域;新增大量模拟折扣描述文本以测试长文本场景,同时更新模拟文件的最后编辑时间
Showing
2 changed files
with
10 additions
and
5 deletions
| 1 | .scan-checkin-detail-page { | 1 | .scan-checkin-detail-page { |
| 2 | min-height: 100vh; | 2 | min-height: 100vh; |
| 3 | - padding: 0 0 60rpx; | 3 | + padding: 0 0 240rpx; |
| 4 | - background: #f2f4f7; | 4 | + background: #ebeaec; |
| 5 | box-sizing: border-box; | 5 | box-sizing: border-box; |
| 6 | } | 6 | } |
| 7 | 7 | ||
| ... | @@ -112,9 +112,14 @@ | ... | @@ -112,9 +112,14 @@ |
| 112 | } | 112 | } |
| 113 | 113 | ||
| 114 | .scan-checkin-detail-button-wrap { | 114 | .scan-checkin-detail-button-wrap { |
| 115 | + position: fixed; | ||
| 116 | + left: 24rpx; | ||
| 117 | + right: 24rpx; | ||
| 118 | + bottom: calc(84rpx + constant(safe-area-inset-bottom)); | ||
| 119 | + bottom: calc(84rpx + env(safe-area-inset-bottom)); | ||
| 115 | display: flex; | 120 | display: flex; |
| 116 | justify-content: center; | 121 | justify-content: center; |
| 117 | - margin-top: 48rpx; | 122 | + z-index: 20; |
| 118 | } | 123 | } |
| 119 | 124 | ||
| 120 | .scan-checkin-detail-button { | 125 | .scan-checkin-detail-button { | ... | ... |
| 1 | /* | 1 | /* |
| 2 | * @Date: 2026-05-19 14:40:21 | 2 | * @Date: 2026-05-19 14:40:21 |
| 3 | * @LastEditors: hookehuyr hookehuyr@gmail.com | 3 | * @LastEditors: hookehuyr hookehuyr@gmail.com |
| 4 | - * @LastEditTime: 2026-05-19 15:25:07 | 4 | + * @LastEditTime: 2026-05-19 17:57:08 |
| 5 | * @FilePath: /lls_program/src/utils/mockQrCheckin.js | 5 | * @FilePath: /lls_program/src/utils/mockQrCheckin.js |
| 6 | * @Description: 文件描述 | 6 | * @Description: 文件描述 |
| 7 | */ | 7 | */ |
| ... | @@ -40,7 +40,7 @@ const mockScanCheckinPoints = [ | ... | @@ -40,7 +40,7 @@ const mockScanCheckinPoints = [ |
| 40 | 'https://cdn.ipadbiz.cn/lls_prog/images/check_detail_img.png?imageMogr2/strip/quality/60', | 40 | 'https://cdn.ipadbiz.cn/lls_prog/images/check_detail_img.png?imageMogr2/strip/quality/60', |
| 41 | discountTitle: '打卡点专属优惠', | 41 | discountTitle: '打卡点专属优惠', |
| 42 | discountContent: | 42 | discountContent: |
| 43 | - '<p style="margin: 0 0 20rpx; line-height: 1.8; color: #4b5563; font-size: 30rpx;">现场互动完成后可领取康养手册 1 份。</p><p style="margin: 0 0 20rpx; line-height: 1.8; color: #4b5563; font-size: 30rpx;">指定商品现场下单可享专属立减优惠。</p>', | 43 | + '<p style="margin: 0 0 20rpx; line-height: 1.8; color: #4b5563; font-size: 30rpx;">现场互动完成后可领取康养手册 1 份。</p><p style="margin: 0 0 20rpx; line-height: 1.8; color: #4b5563; font-size: 30rpx;">指定商品现场下单可享专属立减优惠。</p><p style="margin: 0 0 20rpx; line-height: 1.8; color: #4b5563; font-size: 30rpx;">指定商品现场下单可享专属立减优惠。</p><p style="margin: 0 0 20rpx; line-height: 1.8; color: #4b5563; font-size: 30rpx;">指定商品现场下单可享专属立减优惠。</p><p style="margin: 0 0 20rpx; line-height: 1.8; color: #4b5563; font-size: 30rpx;">指定商品现场下单可享专属立减优惠。</p><p style="margin: 0 0 20rpx; line-height: 1.8; color: #4b5563; font-size: 30rpx;">指定商品现场下单可享专属立减优惠。</p><p style="margin: 0 0 20rpx; line-height: 1.8; color: #4b5563; font-size: 30rpx;">指定商品现场下单可享专属立减优惠。</p><p style="margin: 0 0 20rpx; line-height: 1.8; color: #4b5563; font-size: 30rpx;">指定商品现场下单可享专属立减优惠。</p><p style="margin: 0 0 20rpx; line-height: 1.8; color: #4b5563; font-size: 30rpx;">指定商品现场下单可享专属立减优惠。</p><p style="margin: 0 0 20rpx; line-height: 1.8; color: #4b5563; font-size: 30rpx;">指定商品现场下单可享专属立减优惠。</p><p style="margin: 0 0 20rpx; line-height: 1.8; color: #4b5563; font-size: 30rpx;">指定商品现场下单可享专属立减优惠。</p><p style="margin: 0 0 20rpx; line-height: 1.8; color: #4b5563; font-size: 30rpx;">指定商品现场下单可享专属立减优惠。</p><p style="margin: 0 0 20rpx; line-height: 1.8; color: #4b5563; font-size: 30rpx;">指定商品现场下单可享专属立减优惠。</p>', |
| 44 | }, | 44 | }, |
| 45 | ] | 45 | ] |
| 46 | 46 | ... | ... |
-
Please register or login to post a comment