hookehuyr

style(profile): 调整学习课程页面底部间距

style(checkin): 优化打卡卡片图片布局

修改学习课程页面底部间距从30vh增加到80vh以提供更多空间
重构打卡卡片图片布局,使用固定宽高比和更合理的间距
...@@ -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 {
......
...@@ -96,7 +96,7 @@ ...@@ -96,7 +96,7 @@
96 </div> 96 </div>
97 </div> 97 </div>
98 98
99 - <div style="height: 30vh;"></div> 99 + <div style="height: 80vh;"></div>
100 </div> 100 </div>
101 101
102 <!-- 打卡弹窗:统一使用 CheckInDialog 组件 --> 102 <!-- 打卡弹窗:统一使用 CheckInDialog 组件 -->
......