弹窗

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
+    { 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([{
@@ -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 = () => {
@@ -108,10 +108,13 @@ const animateScoreChange = () => {
         <div class="wheel-base">
         </div>
         <transition name="popup-fade">
-         <div v-if="showPopup" class="score-popup"
-         :class="{'boom-effect':showPopup}">
+            <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>
@@ -124,49 +127,61 @@ const animateScoreChange = () => {
         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定位 */
+    /* 基础样式同上 */
+
+
+    position: fixed;
     left: 50%;
-  top: 50%;
+    top: 45%;
     transform: translate(-50%, -50%);
 
+    z-index: 1000;
 
-  /* 爆炸动画参数 */
-  animation: boom 0.6s cubic-bezier(0.25, 0.46, 0.45, 2.5) forwards;
+    /* 背景图配置 */
+    background:
+        url('tanchaung.png') center/contain no-repeat;
+    padding: 240px 160px;
+    /* 根据图片留出边距 */
+
+    /* 尺寸控制 */
+    width: 800px;
+    height: 1000px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+}
 
-  /* 增强的立体效果 */
-  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);
+.score-popup::before {
+    background: rgba(255, 215, 0, 0.1);
 }
 
-/* 保持原有过渡效果 */
-.popup-fade-enter-active,
-.popup-fade-leave-active {
-  transition: opacity 3s;
+.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%);
     /* 变化时的橙色 */
 }