diff --git a/src/views/wealth/goldenWheel.vue b/src/views/wealth/goldenWheel.vue index 8b49c63..2fe976f 100644 --- a/src/views/wealth/goldenWheel.vue +++ b/src/views/wealth/goldenWheel.vue @@ -250,7 +250,7 @@ export default { remainingBgImg: 'https://d31zlh4on95l9h.cloudfront.net/images/a43f0c383d55fc56b34768f039a401a8.png', spinBtnImg: 'https://d31zlh4on95l9h.cloudfront.net/images/11b749e0fd4b08238980b74c6e80b2e6.png', disabledSpinBtnImg: 'https://d31zlh4on95l9h.cloudfront.net/images/9b7383c1f80bb32a279791879947791a.png', - modalBgImg: '../../assets/img/wealthGoldenWheel/bg.png', + modalBgImg: 'https://d31zlh4on95l9h.cloudfront.net/images/f75ce9ca2703662fd3176dd0493f6d7b.png', prizeAmountImg: 'https://d31zlh4on95l9h.cloudfront.net/images/878b8ea0c78bcafdaf4f6eb63a0b2eef.png', closeBtnImg: 'https://d31zlh4on95l9h.cloudfront.net/images/453475456dad8e6832e9904c901c1274.png', noTimesImg: 'https://d31zlh4on95l9h.cloudfront.net/images/a67e8b3de6e441af7bcb8fbbb2153ec2.png', @@ -503,7 +503,7 @@ async loadHistoryRecord() { // 计算需要旋转的总角度(确保多转几圈) // 从当前位置旋转到目标位置,加上多转的圈数(3-5圈) - const extraRotations = 4 + Math.floor(Math.random() * 3); // 4-5圈 + const extraRotations = 3 + Math.floor(Math.random() * 3); // 4-5圈 const extraDegrees = extraRotations * 360; // 计算最终旋转角度 @@ -544,6 +544,10 @@ async loadHistoryRecord() { // 计算随机停止位置 this.targetPointerRotation = this.calculateRandomStop(); + + // 设置CSS变量,用于动画 + document.documentElement.style.setProperty('--target-pointer-rotation', `${this.targetPointerRotation}deg`); + // 开始旋转动画 this.pointerRotation = this.targetPointerRotation; @@ -554,11 +558,10 @@ async loadHistoryRecord() { this.isSpinning = false; if (success) { - setTimeout(() => { + // 直接显示弹窗,无需额外延迟 this.showPrizeModal = true; - }, 1); - } - }, 30); + } + }, 4000); } catch (error) { console.error('查询剩余次数失败:', error); @@ -802,7 +805,7 @@ async loadHistoryRecord() { /* 旋转动画 - 使用requestAnimationFrame优化 */ .pointer-img.spinning { - animation: smooth-spin 4s cubic-bezier(0.2) forwards; + animation: smooth-spin 3s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards; /* 添加这些属性确保性能 */ backface-visibility: hidden; transform: translateZ(0); @@ -812,7 +815,7 @@ async loadHistoryRecord() { @keyframes smooth-spin { 0% { transform: rotate(-21.5deg); - animation-timing-function: cubic-bezier(0.1); + animation-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94); } 100% { transform: rotate(var(--target-pointer-rotation, 1440deg)); @@ -1447,4 +1450,4 @@ async loadHistoryRecord() { } } - + \ No newline at end of file