fix(CheckinMap): 优化封面图显示模式
- 将封面图 mode 从 aspectTop 改为 widthFix - 修复封面图顶部标题被遮挡的问题 - 保持图片宽高比 - 更新 CHANGELOG 记录 Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
Showing
2 changed files
with
13 additions
and
3 deletions
| ... | @@ -22,3 +22,13 @@ | ... | @@ -22,3 +22,13 @@ |
| 22 | - **技术栈**: 文档系统 | 22 | - **技术栈**: 文档系统 |
| 23 | - **测试状态**: N/A | 23 | - **测试状态**: N/A |
| 24 | - **备注**: 为后续开发建立完善的文档体系 | 24 | - **备注**: 为后续开发建立完善的文档体系 |
| 25 | + | ||
| 26 | +## [2026-02-10] - 便民地图列表页样式优化 | ||
| 27 | + | ||
| 28 | +### 优化 | ||
| 29 | +- 调整 `CheckinMap` 页面封面图显示模式,将无效的 `aspectTop` 改为 `widthFix`,解决封面图顶部标题被遮挡的问题,并保持图片比例。 | ||
| 30 | + | ||
| 31 | +**详细信息**: | ||
| 32 | +- **影响文件**: src/pages/CheckinMap/index.vue | ||
| 33 | +- **技术栈**: Vue3, Taro, CSS | ||
| 34 | +- **测试状态**: 已修正代码,需在模拟器验证 | ... | ... |
| 1 | <!-- | 1 | <!-- |
| 2 | * @Date: 2026-02-05 19:48:00 | 2 | * @Date: 2026-02-05 19:48:00 |
| 3 | * @LastEditors: hookehuyr hookehuyr@gmail.com | 3 | * @LastEditors: hookehuyr hookehuyr@gmail.com |
| 4 | - * @LastEditTime: 2026-02-10 10:32:43 | 4 | + * @LastEditTime: 2026-02-10 11:48:00 |
| 5 | * @FilePath: /lls_program/src/pages/CheckinMap/index.vue | 5 | * @FilePath: /lls_program/src/pages/CheckinMap/index.vue |
| 6 | * @Description: 便民地图列表页 | 6 | * @Description: 便民地图列表页 |
| 7 | --> | 7 | --> |
| ... | @@ -12,7 +12,7 @@ | ... | @@ -12,7 +12,7 @@ |
| 12 | <view v-for="item in mapList" :key="item.id" class="map-card" @tap="handleCardClick(item)"> | 12 | <view v-for="item in mapList" :key="item.id" class="map-card" @tap="handleCardClick(item)"> |
| 13 | <!-- 封面图 --> | 13 | <!-- 封面图 --> |
| 14 | <view class="card-cover"> | 14 | <view class="card-cover"> |
| 15 | - <image :src="item.cover" mode="aspectTop" class="cover-image" /> | 15 | + <image :src="item.cover" mode="widthFix" class="cover-image" /> |
| 16 | </view> | 16 | </view> |
| 17 | 17 | ||
| 18 | <!-- 卡片内容 --> | 18 | <!-- 卡片内容 --> |
| ... | @@ -197,7 +197,7 @@ useLoad(() => { | ... | @@ -197,7 +197,7 @@ useLoad(() => { |
| 197 | 197 | ||
| 198 | .cover-image { | 198 | .cover-image { |
| 199 | width: 100%; | 199 | width: 100%; |
| 200 | - /* 高度由 mode="aspectTop" 自动控制,保持宽高比 */ | 200 | + /* 高度由 mode="widthFix" 自动控制,保持宽高比 */ |
| 201 | } | 201 | } |
| 202 | 202 | ||
| 203 | .card-content { | 203 | .card-content { | ... | ... |
-
Please register or login to post a comment