| | |
|---|
| | | <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"> |
|---|
| | |
|---|
| | | </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; |
|---|
