修改背景

src/views/DZP3.vue

@@ -126,30 +126,25 @@ onMounted(() => {
 
 <template>
   <div class="full-background">
-        <!-- <img :src="jiantou" alt="111"> -->
+
+    <!-- 把底图和转盘放入一个容器中，统一定位 -->
+    <div class="lucky-wrapper">
+      <div class="wheel-base">
         <div class="luckyWheel">
-            <LuckyWheel class="lucky" ref="myLucky" width="434px" height="434px" :default-config="wheelConfig"
+          <LuckyWheel class="lucky" ref="myLucky" width="470" height="470" :default-config="wheelConfig"
             :prizes="prizes" :blocks="blocks" :buttons="buttons" @start="startCallback" @end="endCallback" />
-
         </div>
-
-
-        <div class="full-background">
-            <!-- 其他原有代码不变 -->
-
       </div>
 
-        <div class="wheel-base">
     </div>
+
+    <!-- 弹窗得分效果 -->
     <transition name="popup-fade">
       <div v-if="showPopup" class="score-popup" :class="{ 'boom-effect': showPopup }">
-            <!-- <div class="score-popup" :class="{ 'boom-effect': showPopup }"> -->
         <div class="ziti">
-                    
           {{ popupMessage }}
         </div>
       </div>
-
     </transition>
 
   </div>
@@ -252,15 +247,12 @@ onMounted(() => {
 }
 
 .full-background {
-    background-image: url('/public/bg.png');
-    background-size: cover;
+  background-image: url('/public/bg.jpg');
+  background-size: 100% 100%;
   background-repeat: no-repeat;
   background-position: center;
   width: 100vw;
   height: 100vh;
-    position: fixed;
-    top: 0;
-    left: 0;
   z-index: 0;
 }
 
@@ -273,24 +265,37 @@ onMounted(() => {
   z-index: 999;
 }
 
-.luckyWheel {
+.lucky-wrapper {
   position: fixed;
-    z-index: 999;
-    left: 610px;
   top: 300px;
-    pointer-events: auto;
+  left: 610px;
+  width: 568px;
+  height: 600px;
+  z-index: 999;
 }
 
-/* 转盘底的样式 */
+/* 背景底图 */
 .wheel-base {
-    background-image: url('/public/wheel-base1.png');
-    position: fixed;
-    left: 28%;
-    top: 160px;
-    width: 568px;
-    height: 600px;
-    z-index: 990;
+ position: relative;
+    width: 116%;
+    height: 128%;
+    background-image: url(/public/wheel-base1.png);
+    background-size: 100% 100%;
+    background-repeat: no-repeat;
+    top: -11%;
+    left: -12%;
+    z-index: 1;
+}
 
+/* 转盘组件 */
+.luckyWheel {
+  position: absolute;
+  top: 83px;
+  /* 微调转盘位置以对齐底图中心 */
+  left: 67px;
+  width: 434px;
+  height: 434px;
+  z-index: 2;
 }
 
 
@@ -298,7 +303,8 @@ onMounted(() => {
 .luckyWheel .lucky {
   aspect-ratio: 1/1;
   color: aqua;
-    margin-top: -10%;
+  margin-top: 6%;
+  margin-left: 4%;
 }
 
 h1 {