修改广告

src/components/page-builder/Carousel.vue

@@ -711,14 +711,14 @@ onMounted(() => {
   // 仅在浏览器环境下，根据滚动和窗口大小变化更新缩放
   if(props.maxWidth>0) return
   updateScrollScale()
-  document.querySelector("#app-document")?.addEventListener('scroll', updateScrollScale, { passive: true })
-  document.querySelector("#app-document")?.addEventListener('resize', updateScrollScale, { passive: true })
+  window.addEventListener('scroll', updateScrollScale, { passive: true })
+  window.addEventListener('resize', updateScrollScale, { passive: true })
 })
 
 onUnmounted(() => {
   if(props.maxWidth>0) return
-  document.querySelector("#app-document")?.removeEventListener('scroll', updateScrollScale)
-  document.querySelector("#app-document")?.removeEventListener('resize', updateScrollScale)
+  window.removeEventListener('scroll', updateScrollScale)
+  window.removeEventListener('resize', updateScrollScale)
 })
 
 const imageStyle = computed<CSSProperties>(() => {

src/components/page-builder/FloatingAd.vue

@@ -137,32 +137,9 @@ const replayAnimation = () => {
   }, 50)
 }
 
-// ==================== 计算属性 ====================
-
-// 位置文本
-const positionText = computed(() => {
-  const typeMap = {
-    top: '顶部',
-    bottom: '底部',
-    left: '左侧',
-    right: '右侧',
-    custom: '自定义'
-  }
-  return typeMap[props.position.type]
-})
-
-// 触发文本
-const triggerText = computed(() => {
-  const { type, delay, scrollDepth } = props.trigger
-  if (type === 'immediate') return '立即显示'
-  if (type === 'delay') return `延迟${delay}秒`
-  if (type === 'scroll') return `滚动${scrollDepth}%`
-  return ''
-})
-
 // 编辑器预览样式 - 模拟真实的固定定位效果
 const editorPreviewStyle = computed(() => {
-  const { position, size, style: styleConfig } = props
+  const { position, size, style: styleConfig, background } = props
   const styles: Record<string, string | number> = {
     position: 'fixed',
     zIndex: styleConfig.zIndex,
@@ -172,6 +149,17 @@ const editorPreviewStyle = computed(() => {
     height: size.height,
   }
 
+  // 背景样式
+  if (background?.backgroundColor) {
+    styles.backgroundColor = background.backgroundColor
+  }
+  if (background?.backgroundImage) {
+    styles.backgroundImage = `url(${background.backgroundImage})`
+    styles.backgroundSize = background.backgroundSize || 'cover'
+    styles.backgroundPosition = background.backgroundPosition || 'center'
+    styles.backgroundRepeat = background.backgroundRepeat || 'no-repeat'
+  }
+
   // 最大宽高
   if (size.maxWidth) {
     styles.maxWidth = `${size.maxWidth}px`
@@ -217,17 +205,6 @@ const editorPreviewStyle = computed(() => {
   return styles
 })
 
-// 图片加载处理
-const handleImageLoad = () => {
-  // 图片加载成功
-  console.log('FloatingAd 图片加载成功')
-}
-
-const handleImageError = () => {
-  // 图片加载失败
-  console.warn('FloatingAd 图片加载失败')
-}
-
 // 响应式类名
 const responsiveClasses = computed(() => ({
   'hide-mobile': props.responsive.hideOnMobile,
@@ -236,11 +213,22 @@ const responsiveClasses = computed(() => ({
 
 // 浮动广告容器样式
 const floatingAdStyle = computed(() => {
-  const { position, style: styleConfig } = props
+  const { position, style: styleConfig, background } = props
   const styles: Record<string, string | number> = {
     zIndex: styleConfig.zIndex
   }
 
+  // 背景样式
+  if (background?.backgroundColor) {
+    styles.backgroundColor = background.backgroundColor
+  }
+  if (background?.backgroundImage) {
+    styles.backgroundImage = `url(${background.backgroundImage})`
+    styles.backgroundSize = background.backgroundSize || 'cover'
+    styles.backgroundPosition = background.backgroundPosition || 'center'
+    styles.backgroundRepeat = background.backgroundRepeat || 'no-repeat'
+  }
+
   // 位置计算
   if (position.type === 'custom') {
     if (position.custom.top) styles.top = position.custom.top
@@ -486,6 +474,7 @@ watch(() => [props.animation.entrance, props.animation.duration, props.animation
   cursor: pointer;
   transition: border-color 0.2s ease;
   
+  
   .empty-state {
     width: 100%;
     height: 100%;
@@ -587,6 +576,9 @@ watch(() => [props.animation.entrance, props.animation.duration, props.animation
 .floating-ad {
   position: fixed;
   max-width: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
   
   &.hide-mobile {
     @media (max-width: 768px) {
@@ -630,6 +622,10 @@ watch(() => [props.animation.entrance, props.animation.duration, props.animation
   cursor: pointer;
   transition: all 0.2s ease;
   z-index: 1;
+  padding: 5px;
+  width: auto !important;
+  height: auto !important;
+  
 
   &:hover {
     transform: scale(1.1);

src/layouts/HomeLayout.vue

 <template>
-  <div class="h-screen overflow-y-auto" id="app-document">
+  <div class="overflow-y-auto">
       <!-- 顶部工具栏 -->
       <Headers />
       <!-- 页面内容 -->

src/layouts/components/Headers.vue

 <template>
   <header class="app-header flex flex-col items-center pt-[60px]">
-    <div class="fixed top-0 left-0 right-[14px] z-10 shadow-sm customPrimary-bg-7 flex justify-center">
+    <div class="fixed top-0 left-0 right-0 z-10 shadow-sm customPrimary-bg-7 flex justify-center">
       <HeaderTopBar />
     </div>
     <div class="h-[1px] w-full bg-gray-700/5"></div>

src/types/floatingAd.ts

@@ -122,6 +122,17 @@ export interface FloatingAdProps {
     boxShadow: string   // 阴影
   }
 
+  /**
+   * 背景配置
+   */
+  background: {
+    backgroundColor?: string      // 背景颜色
+    backgroundImage?: string      // 背景图片
+    backgroundSize?: string       // 背景尺寸 (cover, contain, auto)
+    backgroundPosition?: string   // 背景位置 (center, top, bottom, etc.)
+    backgroundRepeat?: string     // 背景重复 (no-repeat, repeat, repeat-x, repeat-y)
+  }
+
   /**
    * 动画配置
    */
@@ -210,6 +221,14 @@ export const defaultFloatingAdProps: FloatingAdProps = {
     boxShadow: '0 4px 16px rgba(0, 0, 0, 0.15)'
   },
 
+  background: {
+    backgroundColor: undefined,
+    backgroundImage: undefined,
+    backgroundSize: 'cover',
+    backgroundPosition: 'center',
+    backgroundRepeat: 'no-repeat'
+  },
+
   animation: {
     entrance: 'fade',
     exit: 'fade',