完成闪烁

src/views/choujiang/lottery/Lottery3D.vue

@@ -18,6 +18,7 @@
 </template>
 
 <script setup>
+
 import { ref, onMounted, onBeforeUnmount, defineExpose, watch } from "vue";
 import * as THREE from "three";
 import {
@@ -30,6 +31,8 @@ import { NUMBER_MATRIX } from "../../../utils/config.js";
 import CardItem from "./CardItem.vue";
 import { createApp } from "vue";
 import { getUserList } from "../../../api/API";
+const swapInterval = ref(null);
+const swapIntervalTime = ref(200)
 const threeContainer = ref(null);
 let renderer, scene, camera, animationId;
 // let controls; // 移除controls
@@ -49,7 +52,39 @@ const targets = {
   table: [],
   sphere: [],
 };
+function swapCardContents() {
+  // 确保有足够卡片且不在抽奖状态
+  if (threeDCards.length < 2 || globalCardIndexes.length > 0) return;
+
+  // 随机选择两张不同的卡片
+  let indexA = Math.floor(Math.random() * threeDCards.length);
+  let indexB = Math.floor(Math.random() * threeDCards.length);
+  while (indexA === indexB) {
+    indexB = Math.floor(Math.random() * threeDCards.length);
+  }
+
+  const cardA = threeDCards[indexA].element;
+  const cardB = threeDCards[indexB].element;
+
+  // 保存原始内容(如果尚未保存)
+  if (!cardA.dataset.originalContent) {
+    cardA.dataset.originalContent = cardA.innerHTML;
+  }
+  if (!cardB.dataset.originalContent) {
+    cardB.dataset.originalContent = cardB.innerHTML;
+  }
 
+  // 交换内容并添加动画效果
+  [cardA.innerHTML, cardB.innerHTML] = [cardB.innerHTML, cardA.innerHTML];
+  cardA.classList.add('swap-animation');
+  cardB.classList.add('swap-animation');
+
+  // 动画结束后移除动画类
+  setTimeout(() => {
+    cardA.classList.remove('swap-animation');
+    cardB.classList.remove('swap-animation');
+  }, 500);
+}
 function createElement(css = "", text = "") {
   const dom = document.createElement("div");
   dom.className = css;
@@ -768,6 +803,7 @@ function getTotalCards() {
   }, 500);
 
   window.addEventListener("resize", onWindowResize);
+ swapInterval.value = setInterval(swapCardContents, swapIntervalTime.value);
 });
 
 onBeforeUnmount(() => {
@@ -778,6 +814,10 @@ onBeforeUnmount(() => {
     clearTimeout(highlightTimeout);
     highlightTimeout = null;
   }
+  if (swapInterval.value) {
+    clearInterval(swapInterval.value);
+    swapInterval.value = null;
+  }
 });
 
 function render() {

src/views/choujiang/lottery/PrizePanel.vue

@@ -36,6 +36,9 @@
                   <span class="progress-bar-text">
                     {{ getLeftCount(prize) }}/{{ prize.count }}
                   </span>
+
+
+                  
                 </div>
               </div>
             </div>
@@ -482,7 +485,7 @@ function getProgressPercent(prize) {
 .arrow-down {
  position: fixed;
   top: 120px;
-  left: 165px;
+  left: 181px;
   width: 36px;
   height: 38px;
   margin-bottom: 4px;
@@ -494,7 +497,7 @@ function getProgressPercent(prize) {
 }
 .winner-btn {
   background: rgba(255, 210, 131, 0.8);
-  color: #fff;
+  color: #da1616;
   border: #fff;
   border-radius: 8px;
   padding: 15px 79px;
@@ -506,7 +509,7 @@ function getProgressPercent(prize) {
 .winner-modal-mask {
   position: fixed;
   top: 155px;
-  left:10px;
+  left:33px;
   width: 100vw;
   height: 100vh;
   background: rgba(0, 0, 0, 0.01);