fix(CheckinMap): 修复封面图对齐和变形问题
- 修改图片 mode 为 aspectTop,实现顶部对齐显示 - 移除 cover-image 的固定高度,避免图片拉伸变形 - 现在可以正确显示图片顶部的标题内容 Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
Showing
1 changed file
with
2 additions
and
2 deletions
| ... | @@ -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="aspectFill" class="cover-image" /> | 15 | + <image :src="item.cover" mode="aspectTop" 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 | - height: 100%; | 200 | + /* 高度由 mode="aspectTop" 自动控制,保持宽高比 */ |
| 201 | } | 201 | } |
| 202 | 202 | ||
| 203 | .card-content { | 203 | .card-content { | ... | ... |
-
Please register or login to post a comment