hookehuyr

refactor(AdOverlay): 移除滚动容器并优化关闭按钮样式

将广告图片容器从 scroll-view 改为普通 view 以简化结构
调整关闭按钮位置和样式,增加背景模糊效果
......@@ -7,10 +7,9 @@
>
<view class="overlay-body">
<view class="overlay-content">
<!-- 广告图片容器 - 支持滚动 -->
<scroll-view
class="ad-scroll-container"
scroll-y
<!-- 广告图片容器 -->
<view
class="ad-image-container"
@tap="handleAdClick"
>
<image
......@@ -19,11 +18,11 @@
class="ad-image"
alt="广告图片"
/>
</scroll-view>
</view>
<!-- 关闭按钮 -->
<view class="close-button" @tap="handleClose">
<Close size="24" class="close-icon" />
<Close size="16" class="close-icon" />
</view>
</view>
</view>
......@@ -52,6 +51,7 @@ const emit = defineEmits(['close', 'click'])
// 响应式数据
const visible = ref(false)
const showCloseButton = ref(true)
/**
* 获取今天的日期字符串(YYYY-MM-DD格式)
......@@ -194,6 +194,7 @@ onMounted(async () => {
justify-content: center;
padding: 40rpx;
box-sizing: border-box;
position: relative;
}
.overlay-content {
......@@ -204,46 +205,46 @@ onMounted(async () => {
width: 80vw;
max-width: 600rpx;
height: 100%;
max-height: calc(100vh - 80rpx);
position: relative;
}
.ad-scroll-container {
.ad-image-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;
position: relative;
}
.ad-image {
width: 100%;
display: block;
min-height: 200rpx; // 设置最小高度
// 移除图片的圆角,让容器的圆角生效
min-height: 200rpx;
border-radius: 16rpx;
// 确保图片完全填充容器
object-fit: cover;
// 移除可能的边距和边框
margin: 0;
padding: 0;
border: none;
// 确保图片垂直对齐
vertical-align: top;
}
.close-button {
width: 60rpx;
height: 60rpx;
position: fixed;
bottom: 60rpx;
left: 50%;
transform: translateX(-50%);
width: 80rpx;
height: 80rpx;
background-color: rgba(0, 0, 0, 0.6);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
z-index: 1001;
backdrop-filter: blur(10rpx);
cursor: pointer;
flex-shrink: 0; // 防止被压缩
flex-shrink: 0;
}
.close-icon {
......@@ -251,7 +252,7 @@ onMounted(async () => {
}
/* 点击效果 */
.ad-scroll-container:active {
.ad-image-container:active {
transform: scale(0.98);
transition: transform 0.1s ease;
}
......