添加助力成功动画

src/views/zhongchou/index.vue

@@ -66,6 +66,13 @@
                 </div>
             </div>
 
+            <!-- 助力成功提示 -->
+            <transition name="fade" appear>
+                <div class="boost-success-container" v-if="showBoostSuccess">
+                    <img src="@/assets/img/zhongchou/助力成功.png" alt="助力成功" />
+                </div>
+            </transition>
+
             <!-- 右侧港股区域 -->
             <!-- <div class="stock-area right-area" @click="handleAreaClick('hk')"
                 :class="{ active: activeArea === 'hk', 'side': activeArea === 'us' }">
@@ -251,7 +258,8 @@ const activeArea = ref(null)
 const usBoostStatus = ref(false)
 // const hkBoostStatus = ref(false)
 const showRulesModal = ref(false)
-
+// 添加助力成功提示状态
+const showBoostSuccess = ref(true)
 // 剩余时间数据 - 从接口获取marketTwoCount计算
 const usRemainingTime = ref(15) // 美股剩余分钟，初始值15分钟
 // const hkRemainingTime = ref(6)  // 港股剩余分钟
@@ -367,6 +375,14 @@ const handleBoostClick = async (area) => {
 
             if (response.code === 200) {
                 console.log('美股助力成功：', response.message)
+
+                // 显示助力成功提示
+                showBoostSuccess.value = true
+                //助力成功动画2s
+                setTimeout(() => {
+                    showBoostSuccess.value = false
+                }, 2000)
+
                 // 重新获取活动数据以更新按钮状态和进度
                 await fetchActivity()
                 console.log('美股已助力状态：', usBoostStatus.value, '剩余时间：', usRemainingTime.value)
@@ -377,7 +393,7 @@ const handleBoostClick = async (area) => {
             console.error('美股助力请求失败：', error)
         }
     }
-    // ... existing code ...
+
 }
 
 const showRulesFunc = () => {
@@ -1285,4 +1301,68 @@ const hideRules = () => {
 .close-btn:hover {
     transform: scale(1.05);
 }
+
+/* 助力成功提示样式 */
+.boost-success-container {
+    position: fixed;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    z-index: 1000;
+    /* 确保显示在最上层 */
+    pointer-events: none;
+    /* 允许点击穿透 */
+}
+
+.boost-success-container img {
+    max-width: 300px;
+    height: auto;
+    filter: drop-shadow(0 0 10px rgba(255, 255, 255, 0.5));
+}
+
+/* 增强的淡入淡出动画 */
+.fade-enter-active {
+    animation: bounce-in 0.6s ease-out;
+}
+
+.fade-leave-active {
+    animation: bounce-out 0.5s ease-in;
+}
+
+@keyframes bounce-in {
+    0% {
+        opacity: 0;
+        transform: translate(-50%, -50%) scale(0.5);
+    }
+
+    50% {
+        opacity: 1;
+        transform: translate(-50%, -50%) scale(1.05);
+    }
+
+    70% {
+        transform: translate(-50%, -50%) scale(0.95);
+    }
+
+    100% {
+        transform: translate(-50%, -50%) scale(1);
+    }
+}
+
+@keyframes bounce-out {
+    0% {
+        opacity: 1;
+        transform: translate(-50%, -50%) scale(1);
+    }
+
+    20% {
+        opacity: 1;
+        transform: translate(-50%, -50%) scale(1.05);
+    }
+
+    100% {
+        opacity: 0;
+        transform: translate(-50%, -50%) scale(0.5);
+    }
+}
 </style>