修改背景

src/views/DZP3.vue

@@ -1,6 +1,6 @@
 <script setup>
 
-import { ref, onBeforeMount,onMounted } from 'vue'
+import { ref, onBeforeMount, onMounted } from 'vue'
 import jiantou from '../assets/img/jiantou.png'
 
 const showPopup = ref(false);
@@ -89,9 +89,9 @@ function endCallback(prize) {
   const result = prize.fonts[0].text
   console.log(prize.fonts[0].text)
   // 更新总分
-    setTimeout(()=>{
+  setTimeout(() => {
     totalScore.value = totalScore.value + result
-    },1000);
+  }, 1000);
 
   // 触发动画
   animateScoreChange()
@@ -100,7 +100,7 @@ function endCallback(prize) {
   showPopup.value = true;
   // 设置弹窗内容
   setTimeout(() => {
-      popupMessage.value= `${result}`; 
+    popupMessage.value = `${result}`;
   }, 1000); //  <---  正确的用法
 
   showPopup.value = true;
@@ -118,38 +118,33 @@ const animateScoreChange = () => {
 }
 
 onMounted(() => {
-    console.log(import.meta.env.MODE,'1111')
-    console.log(process.env.NODE_ENV,'2222')
+  console.log(import.meta.env.MODE, '1111')
+  console.log(process.env.NODE_ENV, '2222')
 })
 
 </script>
 
 <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 {