修改旋转

src/views/wealth/goldenWheel.vue

@@ -18,22 +18,33 @@
     <!-- 主标题图片 -->
     <img :src="titleImg" class="title-img" alt="转动财富金轮 开启财富人生">
     
-    <!-- 转盘区域 -->
+    <!-- 转盘区域 - 完全重构 -->
     <div class="wheel-section">
       <div class="wheel-wrapper">
-        <!-- 转盘图片尺寸：333x333 - 初始旋转22.5度 -->
+        <!-- 转盘图片 -->
         <img 
           :src="wheelImg" 
           class="wheel-img" 
-          :class="{ spinning: isSpinning }" 
-          :style="{ transform: `rotate(${currentRotation}deg)` }"
           alt="财富金轮"
-          ref="wheel"
         >
-        <!-- 指针图片尺寸：137x137 - 初始旋转22.5度 -->
-        <img :src="pointerImg" class="pointer-img" alt="指针" style="transform: translate(-50%, -50%) rotate(-19deg);">
-        <!-- 指针盖图片尺寸：104x106 -->
-        <img :src="pointerCoverImg" class="pointer-cover-img" alt="指针盖" style="transform: translate(-50%, -50%) rotate(-25deg);">
+        
+        <!-- 指针系统 - 使用绝对精确的定位 -->
+        <div class="pointer-system">
+          <!-- 中心固定点 - 作为旋转参考 -->
+          <div class="rotation-center"></div>
+          
+          <!-- 指针图片 - 使用精确的transform-origin -->
+          <img 
+            src="../../assets/img/wealthGoldenWheel/pointer.png" 
+            class="pointer-img" 
+            :class="{ spinning: isSpinning }" 
+            :style="{ transform: `rotate(${pointerRotation}deg)` }" 
+            alt="指针"
+          >
+          
+          <!-- 指针中心盖 -->
+          <img :src="pointerCoverImg" class="pointer-cover-img" alt="指针盖">
+        </div>
       </div>
     </div>
     
@@ -70,7 +81,6 @@
           <div class="prize-amount-wrapper">
             <img :src="prizeAmountImg" class="prize-amount-bg" alt="奖品数量背景">
             <div class="prize-amount" :class="{ scrolling: shouldScroll }">
-              <!-- 关键修改：优化滚动实现 -->
               <span class="prize-text" v-if="shouldScroll">
                 {{ prizeAmount }}&nbsp;&nbsp;&nbsp;{{ prizeAmount }}
               </span>
@@ -236,7 +246,6 @@ export default {
       ruleImg: 'https://d31zlh4on95l9h.cloudfront.net/images/9a3f7680b29e31b60151cf562c0d43cb.png',
       titleImg: 'https://d31zlh4on95l9h.cloudfront.net/images/a87d19806fed47b7fdf18d4b5dd70e65.png',
       wheelImg: 'https://d31zlh4on95l9h.cloudfront.net/images/caaf77a490be46c56ae824d2d9aa72f4.png',
-      pointerImg: 'https://d31zlh4on95l9h.cloudfront.net/images/72cda5c3b13823aa6ca87a3065fe2197.png',
       pointerCoverImg: 'https://d31zlh4on95l9h.cloudfront.net/images/19f2ea90e2560330089214e88eff04b5.png',
       remainingBgImg: 'https://d31zlh4on95l9h.cloudfront.net/images/a43f0c383d55fc56b34768f039a401a8.png',
       spinBtnImg: 'https://d31zlh4on95l9h.cloudfront.net/images/11b749e0fd4b08238980b74c6e80b2e6.png',
@@ -257,12 +266,12 @@ export default {
       showNoTimesModal: false,
       showRuleModal: false,
       isFirstVisit: true,
-      currentRotation: -22.5, // 初始旋转-22.5度
+      pointerRotation: -21.5, // 指针初始旋转角度
       noTimesTimer: null,
       prizeMessage: '',
       prizeAmount: '',
       textWidth: 0,
-      targetRotation: 0, // 新增：目标旋转角度,
+      targetPointerRotation: 0, // 指针目标旋转角度
       
       historyRecordListVisible: false,
       nowMonths: [],
@@ -370,7 +379,7 @@ async loadHistoryRecord() {
     preloadImages() {
       const images = [
         this.historyImg, this.ruleImg, this.titleImg, this.wheelImg,
-        this.pointerImg, this.pointerCoverImg, this.remainingBgImg,
+        this.pointerCoverImg, this.remainingBgImg,
         this.spinBtnImg, this.disabledSpinBtnImg, this.modalBgImg,
         this.prizeAmountImg, this.closeBtnImg, this.noTimesImg,
         this.ruleBgImg, this.closeRuleBtnImg
@@ -488,19 +497,19 @@ async loadHistoryRecord() {
       // 随机选择一个区域 (0-7)
       const randomSector = Math.floor(Math.random() * 8);
       
-      // 计算目标角度：从初始位置(-22.5度)到选中区域的中心
+      // 计算目标角度：从初始位置(-21.5度)到选中区域的中心
       // 每个区域中心的角度 = 区域索引 * 45度 - 22.5度
-      const targetAngle = randomSector * sectorDegrees - 22.5;
+      const targetAngle = randomSector * sectorDegrees - 21.5;
       
       // 计算需要旋转的总角度（确保多转几圈）
       // 从当前位置旋转到目标位置，加上多转的圈数（3-5圈）
-      const extraRotations = 5 + Math.floor(Math.random() * 3); // 3-5圈
+      const extraRotations = 3 + Math.floor(Math.random() * 3); // 4-5圈
       const extraDegrees = extraRotations * 360;
       
       // 计算最终旋转角度
       // 从当前角度旋转到目标角度，加上额外的圈数
       // 注意：需要确保旋转方向正确
-      let rotationNeeded = targetAngle - this.currentRotation;
+      let rotationNeeded = targetAngle - this.pointerRotation;
       
       // 如果旋转角度为负，加上360度使其为正
       if (rotationNeeded < 0) {
@@ -508,7 +517,7 @@ async loadHistoryRecord() {
       }
       
       // 加上额外的圈数
-      return this.currentRotation + rotationNeeded + extraDegrees;
+      return this.pointerRotation + rotationNeeded + extraDegrees;
     },
     
     // 处理转动
@@ -534,13 +543,13 @@ async loadHistoryRecord() {
         this.isSpinning = true;
         
         // 计算随机停止位置
-        this.targetRotation = this.calculateRandomStop();
+        this.targetPointerRotation = this.calculateRandomStop();
         
         // 设置CSS变量，用于动画
-        document.documentElement.style.setProperty('--target-rotation', `${this.targetRotation}deg`);
+        document.documentElement.style.setProperty('--target-pointer-rotation', `${this.targetPointerRotation}deg`);
         
         // 开始旋转动画
-        this.currentRotation = this.targetRotation;
+        this.pointerRotation = this.targetPointerRotation;
         
         // 调用抽奖API获取奖品信息
         const success = await this.fetchPrizeInfo();
@@ -553,7 +562,7 @@ async loadHistoryRecord() {
               this.showPrizeModal = true;
             }, 500);
           }
-        }, 3000);
+        }, 5000);
         
       } catch (error) {
         console.error('查询剩余次数失败:', error);
@@ -660,7 +669,7 @@ async loadHistoryRecord() {
 <style scoped>
 .wheel-container {
   min-height: 100vh;
-  background-image: url('https://d31zlh4on95l9h.cloudfront.net/images/ec8f801bf97306aa16155498f831fa68.png');
+  background-image: url('../../assets/img/wealthGoldenWheel/bg.png');
   background-size: cover;
   background-position: bottom center;
   padding: 15px;
@@ -726,6 +735,7 @@ async loadHistoryRecord() {
   flex-direction: column;
   align-items: center;
   margin-bottom: 15px;
+  position: relative;
 }
 
 .wheel-wrapper {
@@ -737,54 +747,92 @@ async loadHistoryRecord() {
 .wheel-img {
   width: 100%;
   height: 100%;
-  transform-origin: center;
-  will-change: transform;
-  transition: transform 0.3s ease-out;
+  transform: rotate(-22.5deg);
+}
+
+/* 指针系统 - 完全重构 */
+.pointer-system {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  width: 137px;
+  height: 137px;
+  transform: translate(-50%, -50%);
+  z-index: 2;
+}
+
+/* 中心固定点 - 用于调试和参考 */
+.rotation-center {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  width: 4px;
+  height: 4px;
+  background: red;
+  border-radius: 50%;
+  transform: translate(-50%, -50%);
+  z-index: 4;
+  opacity: 0; /* 调试时可设置为1查看中心点 */
+}
+
+/* 指针底座 - 提供固定参考点 */
+.pointer-base {
+  position: relative;
+  width: 137px;
+  height: 137px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  transform: translateZ(0); /* 启用GPU加速 */
+}
+
+/* 指针图片 - 关键优化 */
+.pointer-img {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 137px;
+  height: 137px;
+  /* 精确计算旋转中心点 */
+  transform-origin: 68.5px 68.5px; /* 137px / 2 = 68.5px */
+  transform: rotate(-21.5deg);
+  transition: transform 0.1s linear;
+  image-rendering: crisp-edges;
+  -webkit-font-smoothing: subpixel-antialiased;
   backface-visibility: hidden;
-  transform: translateZ(0) rotate(-22.5deg); /* 初始旋转-22.5度 */
+  perspective: 1000px;
+  will-change: transform;
 }
 
-.wheel-img.spinning {
-  animation: optimal-spin 3s cubic-bezier(0.47, 0.57, 0.45, 0.15) forwards;
+/* 旋转动画 - 使用requestAnimationFrame优化 */
+.pointer-img.spinning {
+  animation: smooth-spin 3s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
+  /* 添加这些属性确保性能 */
   backface-visibility: hidden;
   transform: translateZ(0);
+  will-change: transform;
 }
 
-@keyframes optimal-spin {
+@keyframes smooth-spin {
   0% {
-    transform: rotate(-22.5deg); /* 从-22.5度开始旋转 */
-  }
-  20% {
-    transform: rotate(calc(-22.5deg + (var(--target-rotation, 1440deg) + 22.5deg) * 0.2)); /* 加速阶段 */
-  }
-  80% {
-    transform: rotate(calc(-22.5deg + (var(--target-rotation, 1440deg) + 22.5deg) * 0.8)); /* 减速阶段 */
+    transform: rotate(-21.5deg);
+    animation-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94);
   }
   100% {
-    transform: rotate(var(--target-rotation, 1417.5deg)); /* 使用CSS变量控制最终旋转角度 */
+    transform: rotate(var(--target-pointer-rotation, 1440deg));
   }
 }
 
-/* 指针样式 - 初始旋转-22.5度 */
-.pointer-img {
-  position: absolute;
-  top: 50%;
-  left: 50%;
-  width: 137px;
-  height: 137px;
-  transform: translate(-50%, -50%) rotate(-22.5deg);
-  z-index: 2;
-}
-
 /* 指针盖样式 */
 .pointer-cover-img {
   position: absolute;
   top: 50%;
   left: 50%;
   width: 104px;
-  height: 106px;
+  height: 104px;
   transform: translate(-50%, -50%);
   z-index: 3;
+  pointer-events: none;
 }
 
 /* 剩余次数样式 */
@@ -992,6 +1040,7 @@ async loadHistoryRecord() {
   text-align: left;
 }
 
+
 /* 滚动文本容器 */
 .prize-amount.scrolling .prize-text {
   will-change: transform;
@@ -1098,14 +1147,24 @@ async loadHistoryRecord() {
     height: 280px;
   }
   
-  .pointer-img {
+  .pointer-container {
+    width: 115px;
+    height: 115px;
+  }
+
+  .pointer-system {
+    width: 115px;
+    height: 115px;
+  }
+  
+  .pointer-system {
     width: 115px;
     height: 115px;
   }
   
   .pointer-cover-img {
-    width: 87px;
-    height: 89px;
+    width: 70px;
+    height: 70px;
   }
   
   .spin-btn-img {
@@ -1385,4 +1444,5 @@ async loadHistoryRecord() {
   margin-left: 5px;
 }
 }
+
 </style>