feat(新年活动): 使用背景图组件

src/views/Activities/NewYear/index.vue

@@ -12,15 +12,9 @@
       style="width: 100vw; min-height: 100vh; overflow: hidden; position: relative"
     >
       <!-- 页面背景 -->
-      <div class="bg-layer">
+      <BackgroundLayer
-        <img
+        :backgroundImages="[imageUrl('bg0'), imageUrl('bg1'), imageUrl('bg2'), imageUrl('bg3')]"
-          v-smart-img
+      />
-          v-for="(value, index) in 4"
-          :src="imageUrl(`bg${index}`)"
-          alt=""
-          class="bg-image"
-        />
-      </div>
 
       <!-- 页面内容 -->
       <div class="content-layer" style="position: relative; z-index: 2">
@@ -1637,6 +1631,7 @@ import {
   exchangeCoin, //兑换代币
 } from '@/api/lottery'
 
+import BackgroundLayer from '@/components/BackgroundLayer.vue'
 import TopUser from './components/topUser.vue'
 import Barrage from './components/Barrage.vue'
 import itemCenter from '@/components/itemCenter.vue'
@@ -2761,23 +2756,6 @@ onUnmounted(() => {
   }
 }
 
-.bg-layer {
-  width: 100vw;
-  min-height: 100vh;
-  position: absolute;
-  top: 0;
-  left: 0;
-  z-index: 0; /* 确保背景图在内容下方 */
-  pointer-events: none; /* 防止背景图拦截点击事件 */
-}
-
-.bg-image {
-  width: 100vw;
-  object-fit: cover; /* 保持宽高比的同时覆盖容器 */
-  object-position: center top; /* 从顶部开始对齐 */
-  display: block;
-}
-
 .scrollbar::-webkit-scrollbar {
   display: none;
 }