代码优化

vedio/pages/loading.vue

@@ -4,7 +4,7 @@
 		<view style="color: black;margin-top: 30rpx;font-size: 40rpx;font-size: 50rpx;">{{appName}}</view>
 		<view style="color: #FECF02;margin-top: 10rpx;font-size: 40rpx;font-size: 40rpx;">欢迎使用</view>
 		<view style="bottom: 0;position: absolute;">
-			<image style="width: 540rpx;height: 644rpx;display: flex;align-items: center;margin-bottom: 30%;"
+			<image style="width: 540rpx;height: 644rpx;margin-bottom: 30%;"
 				src="https://mints-pkg.oss-cn-beijing.aliyuncs.com/pkg/img/book_bg_splash.png" mode="scaleToFill">
 			</image>
 		</view>
@@ -17,9 +17,13 @@
 	</view>
 
 	<view v-else class="show-mask flex-v" @click="getVipParams">
-		<view class="body2">
-			<text @click="getVipParams" style="font-size: 46rpx;color: black;">发起支付</text>
-		</view>
+		<image style="width: 100%;margin-top: 200rpx;margin-bottom: 150rpx;" mode="widthFix"
+			src="https://mints-pkg.oss-cn-beijing.aliyuncs.com/pkg/img/bg_book_redpkg.png">
+		</image>
+
+		<image class="heart" src="https://mints-pkg.oss-cn-beijing.aliyuncs.com/pkg/img/bg_book_vedio_next.png"
+			mode="widthFix">
+		</image>
 	</view>
 </template>
 
@@ -203,16 +207,6 @@
 		flex-direction: column;
 		align-items: center;
 	}
-	.body2 {
-		width: 90%;
-		height: 90%;
-		background-color: white;
-		display: flex;
-		flex-direction: column;
-		align-items: center;
-		margin: 30rpx;
-		border-radius: 20rpx;
-	}
 
 	.text-box {
 		word-break: break-all;
@@ -284,7 +278,37 @@
 		width: 100%;
 		height: 100%;
 		background: rgba(0, 0, 0, 0.6);
-		color: white;
 		align-items: center;
 	}
+
+	/* 应用动画到心形图案 */
+	.heart {
+		position: relative;
+		width: 70%;
+		// height: 66px;
+		animation: heartbeat 1s infinite;
+	}
+
+	/* 定义心跳的关键帧 */
+	@keyframes heartbeat {
+		0% {
+			transform: scale(1);
+		}
+
+		25% {
+			transform: scale(1.1);
+		}
+
+		50% {
+			transform: scale(1);
+		}
+
+		75% {
+			transform: scale(1.1);
+		}
+
+		100% {
+			transform: scale(1);
+		}
+	}
 </style>
\ No newline at end of file