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

将静态广告图片容器替换为可垂直滚动的scroll-view，优化图片显示模式为widthFix
调整布局样式，包括高度、间距和图片容器样式，提升用户体验

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