66666

components/qiandao/SignedTips.less

@@ -54,13 +54,73 @@
 		}
 	}
 
-	.signedbg_icon {
-		position: absolute;
-		width: 122rpx;
-		height: 122rpx;
-		left: 50%;
+	.signedbg_icon_container {
+		position: fixed;
 		top: 50%;
-		transform: translate(-50%, -50%);
-		z-index: 2;
+		left: 50%;
+		width: 100%;
+		height: 100%;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		pointer-events: none;
+		z-index: 10;
+
+		.signedbg_icon {
+			position: fixed;
+			width: 122rpx;
+			height: 122rpx;
+			left: 50%;
+			top: 50%;
+			transform: translate(-50%, -50%);
+		}
+
+		.signedbg_icon_animating {
+			animation: signedIconFly 1.5s linear 1;
+			z-index: 5;
+		}
+	}
+}
+
+/* 金币飞向右下角动画 - 适配不同屏幕 */
+@keyframes signedIconFly {
+	0% {
+		transform: translate(-50%, -50%) scale(1.3) rotate(0deg);
+		opacity: 1;
+	}
+
+	15% {
+		transform: translate(calc(-50% + 80rpx), calc(-50% + 100rpx)) scale(1.25) rotate(8deg);
+		opacity: 1;
+	}
+
+	30% {
+		transform: translate(calc(-50% + 140rpx), calc(-50% + 220rpx)) scale(1.2) rotate(14deg);
+		opacity: 1;
+	}
+
+	45% {
+		transform: translate(calc(-50% + 180rpx), calc(-50% + 340rpx)) scale(1.1) rotate(15deg);
+		opacity: 0.95;
+	}
+
+	60% {
+		transform: translate(calc(-50% + 205rpx), calc(-50% + 420rpx)) scale(0.95) rotate(20deg);
+		opacity: 0.85;
+	}
+
+	75% {
+		transform: translate(calc(-50% + 215rpx), calc(-50% + 480rpx)) scale(0.6) rotate(30deg);
+		opacity: 0.7;
+	}
+
+	90% {
+		transform: translate(calc(-50% + 220rpx), calc(-50% + 530rpx)) scale(0.25) rotate(40deg);
+		opacity: 0.4;
+	}
+
+	100% {
+		transform: translate(calc(-50% + 225rpx), calc(-50% + 580rpx)) scale(0) rotate(45deg);
+		opacity: 0;
 	}
 }

components/qiandao/SignedTips.vue

@@ -8,12 +8,14 @@
             <image class="tips_title" :src="$baseUrl + `integral/1023/signedTitle.png`" mode="aspectFit" />
 			<text class="points_text">获得{{ points }}积分</text>
 		</view>
-        <image class="signedbg_icon" :src="$baseUrl + `integral/1023/jifenIcon1.png`" mode="aspectFit" />
+        <view class="signedbg_icon_container">
+			<image class="signedbg_icon" :class="{ 'signedbg_icon_animating': isAnimating }" :src="$baseUrl + `integral/1023/jifenIcon1.png`" mode="aspectFit" />
+		</view>
 	</view>
 </template>
 
 <script setup>
-import { defineProps, defineEmits } from 'vue';
+import { defineProps, defineEmits, ref, watch } from 'vue';
 
 // Props 定义
 const props = defineProps({
@@ -30,9 +32,22 @@ const props = defineProps({
 // Emits 定义
 const emit = defineEmits(['close']);
 
-// 关闭弹窗
+// 是否正在播放动画
+const isAnimating = ref(false);
+
+// 关闭弹窗 - 点击时播放动画，动画结束后关闭
 const handleClose = () => {
-	emit('close');
+	// 如果正在播放动画，则不重复触发
+	if (isAnimating.value) return;
+	
+	// 开始播放动画
+	isAnimating.value = true;
+	
+	// 动画播放完毕后（1.5秒）关闭弹窗
+	setTimeout(() => {
+		isAnimating.value = false;
+		emit('close');
+	}, 1500);
 };
 </script>
 

views/Integral.vue

@@ -1813,7 +1813,6 @@ onShow(async () => {
 onMounted(async () => {
 	showLoading();
 
-	showSignedTips.value = true;
 	// maxVal.value = getHuangjinMaxVal();
 
 	mdMap.value = [];