主页页面，活动弹窗，图片适配

zxl

2025-10-27 7ae4e27a487e282b60dc65d7836d1bcd86e7a464

 pages/storeClaim/storePrizeClaim.vue

@@ -18,15 +18,17 @@
            <view slot="body" class="card-body">
               <!-- 封面图片 -->
               <view class="cover-image" v-if="prizeInfo.activityCover">
            <view class="image-wrapper">
                  <u-image 
                     :src="prizeInfo.activityCover" 
                     width="100%" 
                     height="300rpx"
                     mode="aspectFill"
                  mode="aspectFit"
                     border-radius="10"
                     :fade="true"
                     duration="450"
                  ></u-image>
            </view>
               </view>
               
               <view class="prize-title">
@@ -273,6 +275,18 @@
</script>

<style lang="scss" scoped>
.image-wrapper {
  // 1. 限制溢出，确保aspectFill模式下图片不超出容器
  overflow: hidden;
  // 2. 把圆角放在容器上，避免组件样式冲突
  border-radius: 10rpx; // 注意单位：原代码写10，需补rpx（否则在小程序中无效）
  // 3. 确保容器和图片尺寸一致
  width: 100%;
  height: 300rpx;
  // 4. 兜底背景色，避免加载前空白
  background-color: #f5f5f5;
  margin-bottom: 30rpx; // 保持和原布局一致的间距
}
.container {
   background-color: #f5f5f5;
   min-height: 100vh;