From 442867840f971cade5b86b1ce6db94a2ed2c5bc9 Mon Sep 17 00:00:00 2001
From: pangluotong <123456@163.com>
Date: Sat, 19 Jul 2025 15:22:56 +0800
Subject: [PATCH] =?UTF-8?q?=E5=AE=8C=E6=88=90=E9=97=AA=E7=83=81?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/choujiang/lottery/Lottery3D.vue  | 40 ++++++++++++++++++++++++++++++
 src/views/choujiang/lottery/PrizePanel.vue |  9 ++++---
 2 files changed, 46 insertions(+), 3 deletions(-)

diff --git a/src/views/choujiang/lottery/Lottery3D.vue b/src/views/choujiang/lottery/Lottery3D.vue
index 4de26e2..74c4295 100644
--- a/src/views/choujiang/lottery/Lottery3D.vue
+++ b/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() {
diff --git a/src/views/choujiang/lottery/PrizePanel.vue b/src/views/choujiang/lottery/PrizePanel.vue
index 641751f..fb2b726 100644
--- a/src/views/choujiang/lottery/PrizePanel.vue
+++ b/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);