From 4383ffaf27b7979227f18a6e418e6f928d0ee1d4 Mon Sep 17 00:00:00 2001
From: xy <271556543@qq.com>
Date: Mon, 2 Sep 2024 09:29:24 +0800
Subject: [PATCH] =?UTF-8?q?=E6=AD=A6=E6=B1=89=E5=A4=A7=E5=AD=A6=E6=8A=BD?=
 =?UTF-8?q?=E5=A5=96?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/page/xhxcelshDraw.vue | 69 ++++++++++++++++++---------------
 1 file changed, 38 insertions(+), 31 deletions(-)

diff --git a/src/views/page/xhxcelshDraw.vue b/src/views/page/xhxcelshDraw.vue
index 131292f..ef0b394 100644
--- a/src/views/page/xhxcelshDraw.vue
+++ b/src/views/page/xhxcelshDraw.vue
@@ -35,47 +35,51 @@
       </div>
 
 
-      <div class="start-container" v-show="!start && !isResult">
-        <div class="mask"></div>
-        <div style="display: flex;flex-direction: column;justify-content: center;align-items: center;">
-          <div class="start-container__title">
-            三等奖{{ product.total }}名
-          </div>
+      <transition name="fade">
+        <div class="start-container" v-show="!start && !isResult">
+          <div class="mask"></div>
+          <div style="display: flex;flex-direction: column;justify-content: center;align-items: center;">
+            <div class="start-container__title">
+              {{ product.price_item }}{{ product.total }}名
+            </div>
 
-          <img class="start-container__shop" :src="product.image_file ? product.image_file.url : ''" alt="">
+            <img class="start-container__shop" :src="product.image_file ? product.image_file.url : ''" alt="">
 
-          <div class="start-container__name">
-            奖品：{{ product.name }}
-          </div>
+            <div class="start-container__name">
+              奖品：{{ product.name }}
+            </div>
 
-          <div class="start-container__support">
-            赞助商 : {{ product.apply }}
-          </div>
+            <div class="start-container__support">
+              赞助商 : {{ product.apply }}
+            </div>
 
-          <img class="start-container__start" src="~@/assets/xhxcelsh/btn-start.png" alt="" @click="startDraw">
+            <img class="start-container__start" src="~@/assets/xhxcelsh/btn-start.png" alt="" @click="startDraw">
+          </div>
         </div>
-      </div>
+      </transition>
 
-      <div class="end-container" v-show="!start && isResult">
-        <div class="mask"></div>
+      <transition name="fade">
+        <div class="end-container" v-show="!start && isResult">
+          <div class="mask"></div>
 
-        <div class="body">
-          <div class="close">
-            <i class="el-icon-close"></i>
-          </div>
+          <div class="body">
+            <div class="close">
+              <i class="el-icon-close"></i>
+            </div>
 
-          <div class="title">
-            三等奖{{ product.total }}名
-          </div>
+            <div class="title">
+              {{ product.price_item }}{{ product.total }}名
+            </div>
 
-          <div class="result-users">
-            <div class="result-users-item" v-for="i in 10">
-              <img class="result-users-item__avatar" src="https://thirdwx.qlogo.cn/mmopen/vi_32/Q0j4TwGTfTIIMRcKFGZTZCqa5TZlKYogFOHrDQUe1iacWUJYcS3fjrwib2K5lG52Cd1y93UUd7Ynnvvw1tTYR2lw/132" alt="">
-              <div class="result-users-item__name">abc</div>
+            <div class="result-users">
+              <div class="result-users-item" v-for="i in 10">
+                <img class="result-users-item__avatar" src="https://thirdwx.qlogo.cn/mmopen/vi_32/Q0j4TwGTfTIIMRcKFGZTZCqa5TZlKYogFOHrDQUe1iacWUJYcS3fjrwib2K5lG52Cd1y93UUd7Ynnvvw1tTYR2lw/132" alt="">
+                <div class="result-users-item__name">abc</div>
+              </div>
             </div>
           </div>
         </div>
-      </div>
+      </transition>
     </div>
   </div>
 </template>
@@ -149,6 +153,7 @@ export default {
       this.avatars.forEach(item => {
         gsap.to(this.$refs[`column${item.key}`],{
           translateX: (this.columnIndex >= 19 && item.key < 19) ? ((19 - (this.columnIndex - 19) - 1) * 100 + '%') : ((this.columnIndex + 1) * -100 + '%'),
+          duration: 0.2,
           // rotateY: -9 + ((item.key)+1) + 'deg',
           // scale: item.key < 11 ? (0.82 + (item.key-1) * 0.02) : (1 - ((item.key-1) - 10) * 0.02)
           onComplete: () => {
@@ -174,7 +179,8 @@ export default {
       for(let i = 1;i <= 20;i++) {
         gsap.to(this.$refs[`column${(this.columnIndex+i)%(19*2)}`],{
           rotateY: -9 + ((i)+1) + 'deg',
-          scale: i < 10 ? (0.82 + i * 0.02) : (1 - (i - 10) * 0.02)
+          scale: i < 10 ? (0.82 + i * 0.02) : (1 - (i - 10) * 0.02),
+          duration: 0.2,
         })
       }
       this.columnIndex = (this.columnIndex+1) % (19*2)
@@ -200,7 +206,7 @@ export default {
     setTimer() {
       this.timer = setInterval(() => {
         this.animate()
-      },600)
+      },400)
     }
   },
   computed: {},
@@ -260,6 +266,7 @@ export default {
 
       .box {
         display: flex;
+        perspective: 1200px;
         justify-content: space-between;
         width: 100%;
         height: 100%;