修改背景

2 weeks ago · c06f90daca
3 changed files with 181 additions and 175 deletions
--- a/public/bg.jpg
+++ b/public/bg.jpg
--- a/public/bg.png
+++ b/public/bg.png
--- a/src/views/DZP3.vue
+++ b/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);
@ -15,26 +15,26 @@ const isSpinning = ref(false)
 const wheelConfig = ref({
 })
 const prizes = ref([
-    { fonts: [{ text: '188', top: '10%', fontColor: '#FF2C29', fontSize: '40px' }], background: '#FAF9F0' },  //0
-    { fonts: [{ text: '88', top: '10%', fontColor: '#FF2C29', fontSize: '40px' }], background: '#F5D7AD' },   //1
-    { fonts: [{ text: '188', top: '10%', fontColor: '#FF2C29', fontSize: '40px' }], background: '#FAF9F0' },   //2
-    { fonts: [{ text: '588', top: '10%', fontColor: '#FF2C29', fontSize: '40px' }], background: '#F5D7AD' },    //3
-    { fonts: [{ text: '88', top: '10%', fontColor: '#FF2C29', fontSize: '40px' }], background: '#FAF9F0' },    //4
-    { fonts: [{ text: '688', top: '10%', fontColor: '#FF2C29', fontSize: '40px' }], background: '#F5D7AD' },   //5
-    { fonts: [{ text: '888', top: '10%', fontColor: '#FF2C29', fontSize: '40px' }], background: '#FAF9F0' },   //6
-    { fonts: [{ text: '88', top: '10%', fontColor: '#FF2C29', fontSize: '40px' }], background: '#F5D7AD' },    //7
+  { fonts: [{ text: '188', top: '10%', fontColor: '#FF2C29', fontSize: '40px' }], background: '#FAF9F0' },  //0
+  { fonts: [{ text: '88', top: '10%', fontColor: '#FF2C29', fontSize: '40px' }], background: '#F5D7AD' },   //1
+  { fonts: [{ text: '188', top: '10%', fontColor: '#FF2C29', fontSize: '40px' }], background: '#FAF9F0' },   //2
+  { fonts: [{ text: '588', top: '10%', fontColor: '#FF2C29', fontSize: '40px' }], background: '#F5D7AD' },    //3
+  { fonts: [{ text: '88', top: '10%', fontColor: '#FF2C29', fontSize: '40px' }], background: '#FAF9F0' },    //4
+  { fonts: [{ text: '688', top: '10%', fontColor: '#FF2C29', fontSize: '40px' }], background: '#F5D7AD' },   //5
+  { fonts: [{ text: '888', top: '10%', fontColor: '#FF2C29', fontSize: '40px' }], background: '#FAF9F0' },   //6
+  { fonts: [{ text: '88', top: '10%', fontColor: '#FF2C29', fontSize: '40px' }], background: '#F5D7AD' },    //7
 ])
 const blocks = ref([{ padding: '13px', background: '	#FF2A00' }])
 const buttons = ref([{
-    radius: '35%',
-    imgs: [{
-        src: jiantou,
-        width: '100%',
-        top: '-130%'
-    }],
-    //background: '#8a9bf3',
+  radius: '35%',
+  imgs: [{
+    src: jiantou,
+    width: '100%',
+    top: '-130%'
+  }],
+  //background: '#8a9bf3',

-    pointer: true,
+  pointer: true,

 }])

@ -45,7 +45,7 @@ const customOrder = ref([
  ...Array(8).fill(1),   // +88 => 20次
  ...Array(6).fill(4),
  ...Array(6).fill(7),
-  ...Array(3).fill(0), 
+  ...Array(3).fill(0),
  ...Array(7).fill(2),  // +188 => 10次 (索引0)
  ...Array(3).fill(3),    // +588 => 3次  (索引3)
  ...Array(2).fill(5),    // +688 => 2次  (索引5)
@ -59,7 +59,7 @@ function shuffle(array) {
    [array[i], array[j]] = [array[j], array[i]];
  }
 }
-shuffle(customOrder.value); 
+shuffle(customOrder.value);

 function startCallback() {
  if (spinCount.value >= 36) { // 总共抽奖36次
@ -86,231 +86,237 @@ const scoreAnimation = ref(false)

 // 抽奖结束end回调
 function endCallback(prize) {
-    const result = prize.fonts[0].text
-    console.log(prize.fonts[0].text)
-    // 更新总分
-    setTimeout(()=>{
-        totalScore.value = totalScore.value + result
-    },1000);
-    
-    // 触发动画
-    animateScoreChange()
-    // 先清空文字
-  popupMessage.value = ""; 
+  const result = prize.fonts[0].text
+  console.log(prize.fonts[0].text)
+  // 更新总分
+  setTimeout(() => {
+    totalScore.value = totalScore.value + result
+  }, 1000);
+
+  // 触发动画
+  animateScoreChange()
+  // 先清空文字
+  popupMessage.value = "";
  showPopup.value = true;
-    // 设置弹窗内容
-    setTimeout(() => {
-      popupMessage.value= `${result}`; 
- }, 1000); //  <---  正确的用法
-  
-    showPopup.value = true;
-    // 3秒后隐藏弹窗
-    setTimeout(() => {
-        showPopup.value = false;
-    }, 3000);
+  // 设置弹窗内容
+  setTimeout(() => {
+    popupMessage.value = `${result}`;
+  }, 1000); //  <---  正确的用法
+
+  showPopup.value = true;
+  // 3秒后隐藏弹窗
+  setTimeout(() => {
+    showPopup.value = false;
+  }, 3000);
 }
 // 添加分数变化动画方法
 const animateScoreChange = () => {
-    scoreAnimation.value = true
-    setTimeout(() => {
-        scoreAnimation.value = false
-    }, 3000)
+  scoreAnimation.value = true
+  setTimeout(() => {
+    scoreAnimation.value = false
+  }, 3000)
 }

 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="luckyWheel">
-            <LuckyWheel class="lucky" ref="myLucky" width="434px" height="434px" :default-config="wheelConfig"
-                :prizes="prizes" :blocks="blocks" :buttons="buttons" @start="startCallback" @end="endCallback" />
+  <div class="full-background">

+    <!-- 把底图和转盘放入一个容器中，统一定位 -->
+    <div class="lucky-wrapper">
+      <div class="wheel-base">
+        <div class="luckyWheel">
+          <LuckyWheel class="lucky" ref="myLucky" width="470" height="470" :default-config="wheelConfig"
+            :prizes="prizes" :blocks="blocks" :buttons="buttons" @start="startCallback" @end="endCallback" />
        </div>
+      </div>

+    </div>

-        <div class="full-background">
-            <!-- 其他原有代码不变 -->
-
-        </div>
-
-        <div class="wheel-base">
+    <!-- 弹窗得分效果 -->
+    <transition name="popup-fade">
+      <div v-if="showPopup" class="score-popup" :class="{ 'boom-effect': showPopup }">
+        <div class="ziti">
+          {{ popupMessage }}
        </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>
+      </div>
+    </transition>

-        </transition>
-
-    </div>
+  </div>
 </template>

 <style scoped>
 /* 爆炸动画关键帧 */
@keyframes boom {
-    0% {
-        transform: translate(-50%, -50%) scale(0);
-        opacity: 0;
-    }
-
-    50% {
-        transform: translate(-50%, -50%) scale(1.2);
-        opacity: 1;
-    }
-
-    100% {
-        transform: translate(-50%, -50%) scale(1);
-        opacity: 1;
-    }
+  0% {
+    transform: translate(-50%, -50%) scale(0);
+    opacity: 0;
+  }
+
+  50% {
+    transform: translate(-50%, -50%) scale(1.2);
+    opacity: 1;
+  }
+
+  100% {
+    transform: translate(-50%, -50%) scale(1);
+    opacity: 1;
+  }
 }



 .score-popup {
-    /* 基础样式同上 */
+  /* 基础样式同上 */


-    position: fixed;
-    left: 44%;
-    top: 55%;
-    transform: translate(-50%, -50%);
+  position: fixed;
+  left: 44%;
+  top: 55%;
+  transform: translate(-50%, -50%);

-    z-index: 1000;
+  z-index: 1000;

-    /* 背景图配置 */
-    background:
-        url('/public/tanchuang1.png') center/contain no-repeat;
-    padding: 120px 80px;
-    /* 根据图片留出边距 */
+  /* 背景图配置 */
+  background:
+    url('/public/tanchuang1.png') center/contain no-repeat;
+  padding: 120px 80px;
+  /* 根据图片留出边距 */

-    /* 尺寸控制 */
-    width: 500px;
-    height: 550px;
-    display: flex;
-    justify-content: center;
-    align-items: center;
+  /* 尺寸控制 */
+  width: 500px;
+  height: 550px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
 }

 .score-popup::before {
-    background: rgba(255, 215, 0, 0.1);
+  background: rgba(255, 215, 0, 0.1);
 }

 .ziti {
-    /* 文字样式 */
-    font-family: '华康金文体', 'Arial Black', sans-serif;
-    
-    font-size: 100px;
-
-    /* 根据图片调整字号 */
-    color: #ffd904;
-    /* 金色文字 */
-    line-height: 250px;
-    /* 垂直居中文字 */
-    text-shadow: 2px 2px 0 #B8860B;
-    /* 略微加粗文字 */
-    margin-bottom: 100px;
+  /* 文字样式 */
+  font-family: '华康金文体', 'Arial Black', sans-serif;
+
+  font-size: 100px;
+
+  /* 根据图片调整字号 */
+  color: #ffd904;
+  /* 金色文字 */
+  line-height: 250px;
+  /* 垂直居中文字 */
+  text-shadow: 2px 2px 0 #B8860B;
+  /* 略微加粗文字 */
+  margin-bottom: 100px;
 }

 /* 添加艺术字样式 */
 .art-text {
-    position: fixed;
-    left: 30%;
-    bottom: 20%;
-    transform: translateX(-50%);
-    font-family: 'Arial Black', sans-serif;
-    font-size: 150px;
-    color: #FFD700;
-    /* 金色 */
-    text-shadow:
-        3px 3px 0 #FF0000,
-        /* 红色描边 */
-        -1px -1px 0 #000,
-        1px -1px 0 #000,
-        -1px 1px 0 #000,
-        1px 1px 0 #000;
-    transition: transform 0.3s ease;
-    z-index: 1000;
+  position: fixed;
+  left: 30%;
+  bottom: 20%;
+  transform: translateX(-50%);
+  font-family: 'Arial Black', sans-serif;
+  font-size: 150px;
+  color: #FFD700;
+  /* 金色 */
+  text-shadow:
+    3px 3px 0 #FF0000,
+    /* 红色描边 */
+    -1px -1px 0 #000,
+    1px -1px 0 #000,
+    -1px 1px 0 #000,
+    1px 1px 0 #000;
+  transition: transform 0.3s ease;
+  z-index: 1000;
 }



 /* 添加分数变化动画 */
 .score-change {
-    transform: translateX(-50%) scale(1.2);
-    color: hwb(69 0% 0%);
-    /* 变化时的橙色 */
+  transform: translateX(-50%) scale(1.2);
+  color: hwb(69 0% 0%);
+  /* 变化时的橙色 */
 }

 .full-background {
-    background-image: url('/public/bg.png');
-    background-size: cover;
-    background-repeat: no-repeat;
-    background-position: center;
-    width: 100vw;
-    height: 100vh;
-    position: fixed;
-    top: 0;
-    left: 0;
-    z-index: 0;
+  background-image: url('/public/bg.jpg');
+  background-size: 100% 100%;
+  background-repeat: no-repeat;
+  background-position: center;
+  width: 100vw;
+  height: 100vh;
+  z-index: 0;
 }

 .custom-text {
-    position: fixed;
-    left: 300px;
-    bottom: 200px;
-    color: black;
-    font-size: 150px;
-    z-index: 999;
+  position: fixed;
+  left: 300px;
+  bottom: 200px;
+  color: black;
+  font-size: 150px;
+  z-index: 999;
 }

-.luckyWheel {
-    position: fixed;
-    z-index: 999;
-    left: 610px;
-    top: 300px;
-    pointer-events: auto;
+.lucky-wrapper {
+  position: fixed;
+  top: 300px;
+  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;
 }



 .luckyWheel .lucky {
-    aspect-ratio: 1/1;
-    color: aqua;
-    margin-top: -10%;
+  aspect-ratio: 1/1;
+  color: aqua;
+  margin-top: 6%;
+  margin-left: 4%;
 }

 h1 {
-    position: relative;
-    z-index: 1;
-    text-align: center;
-    /* 居中标题 */
-    width: 100%;
-    top: 50px;
-    /* 让标题占据整个宽度 */
-    font-size: 100px;
-    /* 文字大小 */
+  position: relative;
+  z-index: 1;
+  text-align: center;
+  /* 居中标题 */
+  width: 100%;
+  top: 50px;
+  /* 让标题占据整个宽度 */
+  font-size: 100px;
+  /* 文字大小 */

 }
 </style>