style(profile): 调整学习课程页面底部间距
style(checkin): 优化打卡卡片图片布局 修改学习课程页面底部间距从30vh增加到80vh以提供更多空间 重构打卡卡片图片布局,使用固定宽高比和更合理的间距
Showing
2 changed files
with
12 additions
and
3 deletions
| ... | @@ -43,8 +43,10 @@ | ... | @@ -43,8 +43,10 @@ |
| 43 | <div class="post-media"> | 43 | <div class="post-media"> |
| 44 | <!-- Images --> | 44 | <!-- Images --> |
| 45 | <div v-if="post.images.length" class="post-images"> | 45 | <div v-if="post.images.length" class="post-images"> |
| 46 | - <van-image width="30%" fit="cover" v-for="(image, index) in post.images" :key="index" | 46 | + <div class="post-image-item" v-for="(image, index) in post.images" :key="index"> |
| 47 | - :src="getOptimizedUrl(image)" radius="5" @click="openImagePreview(index)" /> | 47 | + <van-image width="100%" height="100%" fit="cover" :src="getOptimizedUrl(image)" radius="5" |
| 48 | + @click="openImagePreview(index)" /> | ||
| 49 | + </div> | ||
| 48 | </div> | 50 | </div> |
| 49 | <van-image-preview v-if="post.images.length" v-model:show="showLocalImagePreview" :images="post.images" | 51 | <van-image-preview v-if="post.images.length" v-model:show="showLocalImagePreview" :images="post.images" |
| 50 | :start-position="localStartPosition" :show-index="true" /> | 52 | :start-position="localStartPosition" :show-index="true" /> |
| ... | @@ -253,6 +255,13 @@ defineExpose({ | ... | @@ -253,6 +255,13 @@ defineExpose({ |
| 253 | display: flex; | 255 | display: flex; |
| 254 | flex-wrap: wrap; | 256 | flex-wrap: wrap; |
| 255 | gap: 0.5rem; | 257 | gap: 0.5rem; |
| 258 | + | ||
| 259 | + .post-image-item { | ||
| 260 | + width: calc((100% - 1rem) / 3); | ||
| 261 | + aspect-ratio: 1 / 1; | ||
| 262 | + border-radius: 6px; | ||
| 263 | + overflow: hidden; | ||
| 264 | + } | ||
| 256 | } | 265 | } |
| 257 | 266 | ||
| 258 | .post-video { | 267 | .post-video { | ... | ... |
-
Please register or login to post a comment