style: 竞赛主页样式修改

src/views/AwardPage/components/TimeLine.vue

@@ -67,27 +67,35 @@
 
 	const points = ref([
 		{
-			label: 'Select Top 20',
-			time: 'May',
-			desc: 'Submit your design concept, mood board, and initial sketch.'
+			label: 'Application',
+			subLabel:'Deadline',
+			time: 'Jul 15',
+			desc: 'Application deadline and\nentry review process\nbegins.'
 		},
 		{
-			label: `Top 20`,
-			subLabel: 'Collections  Finalize',
-			time: 'June',
-			desc: 'Complete collections, physical garments, and AiDA process videos due.'
+			label: `20 Finallists`,
+			subLabel: 'Announced',
+			time: 'Aug 30',
+			desc: 'Announcement of 20\nfinalists entering final\nevaluation stage.'
 		},
 		{
-			label: `Top 3`,
-			subLabel: 'Finalists Select',
-			time: 'August',
-			desc: 'Complete collections, physical garments, and AiDA process videos due.'
+			label: `Finallist\nSubmission`,
+			subLabel: 'Deadline',
+			time: 'Sept 30',
+			desc: 'Finalists submit\ncompleted outfits for\nfinal assessment.'
 		},
 		{
-			label: 'Award  Ceremony',
-			time: 'November',
-			desc: 'Winners revealed with media coverage and live showcase.'
-		}
+			label: 'Receiving Outfits',
+			subLabel:'from Finallists',
+			time: 'October',
+			desc: 'AiDA receives physical\noutfits from all 20\nfinalists.'
+		},
+		{
+			label: 'Award',
+			subLabel:'Ceremony',
+			time: 'Nov 12',
+			desc: 'Award Ceremony &\nCommunity Gathering\n– Soho House.'
+		},
 	])
 
 	const playAnimation = () => {
@@ -98,17 +106,12 @@
 		const timeline = containerRef.value.querySelector('.timeline-point')
 
 		const tl = gsap.timeline()
-		if (title && subtitle) {
-			tl.from([title, subtitle], {
-				scaleX: 0,
-				autoAlpha: 0,
-				transformOrigin: '50% 50%',
-				duration: 0.6,
-				stagger: 0.1,
-				ease: 'power2.out'
-			})
-		}
 
+		// 我们使用一个统一的开始 label，使横线、timeline 裁剪与所有文字同时启动，
+		// 点图标在它们完成后立即开始。
+		tl.addLabel('start')
+
+		// 整体 timeline 的裁剪展开（与 start 同步）
 		if (timeline) {
 			tl.fromTo(
 				timeline,
@@ -119,10 +122,12 @@
 					clipPath: 'inset(0 0% 0 0)',
 					duration: 1.6,
 					ease: 'power1.out'
-				}
+				},
+				'start'
 			)
 		}
 
+		// 线条动画（与 start 同步）
 		if (line) {
 			tl.from(
 				line,
@@ -132,7 +137,56 @@
 					duration: 1.3,
 					ease: 'power1.out'
 				},
-				'-=1.1'
+				'start'
+			)
+		}
+
+		// 标题与副标题（与 start 同步）
+		if (title && subtitle) {
+			tl.from(
+				[title, subtitle],
+				{
+					scaleX: 0,
+					autoAlpha: 0.5,
+					transformOrigin: '50% 50%',
+					duration: 0.6,
+					stagger: 0.1,
+					ease: 'power2.out'
+				},
+				'start'
+			)
+		}
+
+		// 行内文字（标签、时间、描述）与 start 同步开始
+		const textItems = containerRef.value.querySelectorAll(
+			'.item-label, .item-time, .item-desc .txt'
+		)
+		if (textItems && textItems.length) {
+			tl.from(
+				textItems,
+				{
+					autoAlpha: 0.5,
+					duration: 0.6,
+					stagger: 0.08,
+					ease: 'power2.out'
+				},
+				'start'
+			)
+		}
+
+		// 所有文字与线条完成后，立即开始点图标动画（按顺序出现）
+		const icons = containerRef.value.querySelectorAll('.point-icon')
+		if (icons && icons.length) {
+			// 与 'start' 标签同步开始：改为纯淡入动画（移除缩放）
+			tl.from(
+				icons,
+				{
+					autoAlpha: 0,
+					duration: 2,
+					stagger: 0.12,
+					ease: 'power2.out'
+				},
+				'start+=0.3'
 			)
 		}
 
@@ -211,7 +265,7 @@
 					font-size: 2.8rem;
 					text-align: center;
 					white-space: pre-line;
-					height: 6rem;
+					// height: 6rem;
 					justify-content: center;
 				}
 			}
@@ -272,6 +326,7 @@
 						color: #e0e0e0;
 						width: 31.2rem;
 						height: 10.2rem;
+						white-space: pre-line;
 					}
 				}
 			}