弹窗

src/views/DZP.vue

@@ -8,18 +8,18 @@ const popupMessage = ref('');
 const totalScore = ref(4000) // 初始分数
 const myLucky = ref()
 // 新增变量记录基础分数
-const baseScore = 4000
+//const baseScore = 4000
 const wheelConfig = ref({
 })
-const prizes = ref([  
-    { fonts: [{ text: '-199', top: '10%',fontColor: '#FF2C29',fontSize: '40px' }], background: '#FAF9F0' },  //0
-    { fonts: [{ text: '-55', top: '10%',fontColor: '#FF2C29',fontSize: '40px' }], background: '#F5D7AD' },   //1
-    { fonts: [{ text: '+200', top: '10%' ,fontColor: '#FF2C29',fontSize: '40px'}], background: '#FAF9F0' },   //2
-    { fonts: [{ text: '-88', top: '10%',fontColor: '#FF2C29',fontSize: '40px' }], background: '#F5D7AD' },    //3
-    { fonts: [{ text: '-11', top: '10%' ,fontColor: '#FF2C29',fontSize: '40px'}], background: '#FAF9F0' },    //4
-    { fonts: [{ text: '-299', top: '10%',fontColor: '#FF2C29',fontSize: '40px' }], background: '#F5D7AD' },   //5
-    { fonts: [{ text: '+200', top: '10%' ,fontColor: '#FF2C29',fontSize: '40px'}], background: '#FAF9F0' },   //6
-    { fonts: [{ text: '-66', top: '10%' ,fontColor: '#FF2C29',fontSize: '40px'}], background: '#F5D7AD' },    //7
+const prizes = ref([
+    { fonts: [{ text: '-199', top: '10%', fontColor: '#FF2C29', fontSize: '40px' }], background: '#FAF9F0' },  //0
+    { fonts: [{ text: '-55', top: '10%', fontColor: '#FF2C29', fontSize: '40px' }], background: '#F5D7AD' },   //1
+    { fonts: [{ text: '+200', top: '10%', fontColor: '#FF2C29', fontSize: '40px' }], background: '#FAF9F0' },   //2
+    { fonts: [{ text: '-88', top: '10%', fontColor: '#FF2C29', fontSize: '40px' }], background: '#F5D7AD' },    //3
+    { fonts: [{ text: '-11', top: '10%', fontColor: '#FF2C29', fontSize: '40px' }], background: '#FAF9F0' },    //4
+    { fonts: [{ text: '-299', top: '10%', fontColor: '#FF2C29', fontSize: '40px' }], background: '#F5D7AD' },   //5
+    { fonts: [{ text: '+200', top: '10%', fontColor: '#FF2C29', fontSize: '40px' }], background: '#FAF9F0' },   //6
+    { fonts: [{ text: '-66', top: '10%', fontColor: '#FF2C29', fontSize: '40px' }], background: '#F5D7AD' },    //7
 ])
 const blocks = ref([{ padding: '13px', background: '	#FF2A00' }])
 const buttons = ref([{
@@ -32,7 +32,7 @@ const buttons = ref([{
     //background: '#8a9bf3',
 
     pointer: true,
-   
+
 }])
 
 //自定义数组
@@ -41,7 +41,7 @@ let orderIndex = 0;
 
 function startCallback() {
     // 重置为初始分数
-    totalScore.value = baseScore
+    //totalScore.value = baseScore
     // 调用抽奖组件的play方法开始游戏
     myLucky.value.play()
     // 模拟调用接口异步抽奖
@@ -66,16 +66,16 @@ function endCallback(prize) {
     const result = Number(prize.fonts[0].text)
     console.log(prize.fonts[0].text)
     // 更新总分
-    totalScore.value = baseScore + result
+    totalScore.value = totalScore.value + result
     // 触发动画
     animateScoreChange()
     // 设置弹窗内容
-    popupMessage.value = `${totalScore.value}金币`;  //  <---  正确的用法
+    popupMessage.value = `${result}金币`;  //  <---  正确的用法
     showPopup.value = true;
     // 3秒后隐藏弹窗
     setTimeout(() => {
         showPopup.value = false;
-    },3000);
+    }, 3000);
 }
 // 添加分数变化动画方法
 const animateScoreChange = () => {
@@ -88,7 +88,7 @@ const animateScoreChange = () => {
 </script>
 
 <template>
-   <div class="full-background">
+    <div class="full-background">
         <img :src="jiantou" alt="111">
         <div class="art-text" :class="{ 'score-change': scoreAnimation }">
             {{ totalScore }}金币
@@ -102,17 +102,20 @@ const animateScoreChange = () => {
 
         <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}">
-        {{ popupMessage }}
-        </div>
-         </transition>
+            <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>
 </template>
@@ -120,53 +123,65 @@ const animateScoreChange = () => {
 <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 {
-  /* 保持与4000分相同的字体设置 */
-  font-family: '华康金文体', 'Arial Black', sans-serif;
-  font-size: 64px;
-  color: #FFD700;
-  left: 450px;
-  position: absolute; /* 改为absolute定位 */
-  left: 50%;
-  top: 50%;
-  transform: translate(-50%, -50%);
-  
-  
-  /* 爆炸动画参数 */
-  animation: boom 0.6s cubic-bezier(0.25, 0.46, 0.45, 2.5) forwards;
-  
-  /* 增强的立体效果 */
-  text-shadow: 
-    3px 3px 0 #A52A2A,
-    -2px -2px 0 #8B0000,
-    0 0 20px rgba(255, 215, 0, 0.8);
-  
-  /* 新增爆炸光效 */
-  box-shadow: 
-    0 0 50px rgba(255, 215, 0, 0.8),
-    0 0 30px rgba(255, 165, 0, 0.6);
+    /* 基础样式同上 */
+
+
+    position: fixed;
+    left: 50%;
+    top: 45%;
+    transform: translate(-50%, -50%);
+
+    z-index: 1000;
+
+    /* 背景图配置 */
+    background:
+        url('tanchaung.png') center/contain no-repeat;
+    padding: 240px 160px;
+    /* 根据图片留出边距 */
+
+    /* 尺寸控制 */
+    width: 800px;
+    height: 1000px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
 }
 
-/* 保持原有过渡效果 */
-.popup-fade-enter-active,
-.popup-fade-leave-active {
-  transition: opacity 3s;
+.score-popup::before {
+    background: rgba(255, 215, 0, 0.1);
 }
+
+.ziti {
+    /* 文字样式 */
+    font-family: '华康金文体', 'Arial Black', sans-serif;
+    font-size: 100px;
+    /* 根据图片调整字号 */
+    color: #0e0d0d;
+    /* 金色文字 */
+    line-height: 250px;
+    /* 垂直居中文字 */
+    text-shadow: 2px 2px 0 #B8860B;
+    /* 略微加粗文字 */
+    margin-bottom: 260px;
+}
+
 /* 添加艺术字样式 */
 .art-text {
     position: fixed;
@@ -191,7 +206,7 @@ const animateScoreChange = () => {
 /* 添加分数变化动画 */
 .score-change {
     transform: translateX(-50%) scale(1.2);
-    color: #FF4500;
+    color: hwb(69 0% 0%);
     /* 变化时的橙色 */
 }