hookehuyr

feat(AdOverlay): 将广告图片容器改为可滚动视图并优化样式

将静态广告图片容器替换为可垂直滚动的scroll-view,优化图片显示模式为widthFix
调整布局样式,包括高度、间距和图片容器样式,提升用户体验
......@@ -7,15 +7,19 @@
>
<view class="overlay-body">
<view class="overlay-content">
<!-- 广告图片 -->
<view class="ad-image-container" @click="handleAdClick">
<!-- 广告图片容器 - 支持滚动 -->
<scroll-view
class="ad-scroll-container"
scroll-y
@click="handleAdClick"
>
<image
:src="adConfig.adImageUrl"
mode="aspectFill"
mode="widthFix"
class="ad-image"
alt="广告图片"
/>
</view>
</scroll-view>
<!-- 关闭按钮 -->
<view class="close-button" @click="handleClose">
......@@ -185,9 +189,11 @@ onMounted(async () => {
<style lang="less">
.overlay-body {
display: flex;
height: 100%;
height: 100vh;
align-items: center;
justify-content: center;
padding: 40rpx;
box-sizing: border-box;
}
.overlay-content {
......@@ -197,33 +203,48 @@ onMounted(async () => {
justify-content: center;
width: 80vw;
max-width: 600rpx;
height: 100%;
max-height: calc(100vh - 80rpx);
}
.ad-image-container {
.ad-scroll-container {
width: 100%;
max-height: calc(100vh - 200rpx); // 预留关闭按钮和间距的空间
border-radius: 16rpx;
overflow: hidden;
box-shadow: 0 8rpx 32rpx rgba(0, 0, 0, 0.3);
cursor: pointer;
margin-bottom: 40rpx;
// 移除背景色,避免白边
// background-color: #fff;
}
.ad-image {
width: 100%;
height: 50vh;
display: block;
min-height: 200rpx; // 设置最小高度
// 移除图片的圆角,让容器的圆角生效
border-radius: 16rpx;
// 确保图片完全填充容器
object-fit: cover;
// 移除可能的边距和边框
margin: 0;
padding: 0;
border: none;
// 确保图片垂直对齐
vertical-align: top;
}
.close-button {
width: 60rpx;
height: 60rpx;
// background-color: rgba(0, 0, 0, 0.6);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
flex-shrink: 0; // 防止被压缩
background-color: rgba(0, 0, 0, 0.5);
}
.close-icon {
......@@ -231,7 +252,7 @@ onMounted(async () => {
}
/* 点击效果 */
.ad-image-container:active {
.ad-scroll-container:active {
transform: scale(0.98);
transition: transform 0.1s ease;
}
......