style:页面动画

src/views/AwardPage/components/PrizesSection.vue

@@ -89,9 +89,11 @@
 		}
 		if (prizesRightRef.value) {
 			gsap.set(prizesRightRef.value, {
-				opacity: 0,
-				y: 40,
-				scale: 1.08
+				'opacity': 0,
+				'y': 40,
+				'scale': 1.08,
+				'--prize-row-gap': '2rem',
+				'--prize-col-gap': '2rem'
 			})
 		}
 	}
@@ -116,11 +118,13 @@
 			tl.to(
 				prizesRightRef.value,
 				{
-					opacity: 1,
-					y: 0,
-					scale: 1,
-					duration: 0.55,
-					ease: 'back.out(1.4)'
+					'opacity': 1,
+					'y': 0,
+					'scale': 1,
+					'--prize-row-gap': '4.2rem',
+					'--prize-col-gap': '4.4rem',
+					'duration': 0.55,
+					'ease': 'back.out(1.4)'
 				},
 				titleEls.length ? '-=0.15' : 0
 			)
@@ -186,8 +190,8 @@
 			display: grid;
 			grid-template-columns: repeat(2, 1fr);
 			grid-template-rows: repeat(2, 1fr);
-			row-gap: 4.2rem;
-			column-gap: 4.4rem;
+			row-gap: var(--prize-row-gap, 4.2rem);
+			column-gap: var(--prize-col-gap, 4.4rem);
 			// flex: 1;
 			.prize-item {
 				width: 35.5rem;