style: timeline布局修改

src/views/AwardPage/apply.vue

@@ -1228,6 +1228,7 @@
 					height: 4rem;
 					box-sizing: border-box;
 					border-left: 0.1rem solid #d5d5d5;
+					pointer-events: none;
 				}
 			}
 

src/views/AwardPage/components/TimeLine.vue

@@ -5,10 +5,14 @@
 	>
 		<div class="timeline-title">Competition Timeline</div>
 		<div class="desc">Shaping the Future</div>
-		<div class="timeline-point">
-			<div class="labels-row flex align-center">
 		<div
-					class="item-label flex flex-col"
+			class="timeline-point"
+			ref="timelineRef"
+		>
+			<!-- 顶部标签行 -->
+			<div class="grid-row labels-row">
+				<div
+					class="grid-cell label-cell"
 					v-for="item in points"
 					:key="'label-' + item.time"
 				>
@@ -21,31 +25,35 @@
 					</div>
 				</div>
 			</div>
-			<!-- Icons row -->
+			<!-- 图标行 -->
-			<div class="icons-row flex align-center">
+			<div class="grid-row icons-row">
 				<div class="timeline-line"></div>
+				<div
+					class="grid-cell icon-cell"
+					v-for="item in points"
+					:key="'icon-' + item.time"
+				>
 					<img
 						src="@/assets/images/award/point.png"
 						class="point-icon"
-					v-for="item in points"
-					:key="'icon-' + item.time"
 					/>
 				</div>
-
+			</div>
-			<!-- Times row -->
+			<!-- 时间行 -->
-			<div class="times-row flex align-center">
+			<div class="grid-row times-row">
 				<div
-					class="item-time"
+					class="grid-cell time-cell"
 					v-for="item in points"
 					:key="'time-' + item.time"
 				>
 					{{ item.time }}
 				</div>
 			</div>
-			<!-- Descriptions row -->
+
-			<div class="descs-row flex align-center">
+			<!-- 描述行 -->
+			<div class="grid-row descs-row">
 				<div
-					class="item-desc flex justify-center"
+					class="grid-cell desc-cell"
 					v-for="item in points"
 					:key="'desc-' + item.time"
 				>
@@ -63,12 +71,13 @@
 	import { gsap } from 'gsap'
 
 	const containerRef = ref<HTMLElement | null>(null)
+	const timelineRef = ref<HTMLElement | null>(null)
 	const hasAnimated = ref(false)
 
 	const points = ref([
 		{
 			label: 'Application',
-			subLabel:'Deadline',
+			subLabel: 'Deadline',
 			time: 'Jul 15',
 			desc: 'Application deadline and\nentry review process\nbegins.'
 		},
@@ -86,16 +95,16 @@
 		},
 		{
 			label: 'Receiving Outfits',
-			subLabel:'from Finallists',
+			subLabel: 'from Finallists',
 			time: 'October',
 			desc: 'AiDA receives physical\noutfits from all 20\nfinalists.'
 		},
 		{
 			label: 'Award',
-			subLabel:'Ceremony',
+			subLabel: 'Ceremony',
 			time: 'Nov 12',
 			desc: 'Award Ceremony &\nCommunity Gathering\n– Soho House.'
-		},
+		}
 	])
 
 	const playAnimation = () => {
@@ -120,7 +129,7 @@
 				},
 				{
 					clipPath: 'inset(0 0% 0 0)',
-					duration: 1.6,
+					duration: 1.3,
 					ease: 'power1.out'
 				},
 				'start'
@@ -157,16 +166,14 @@
 			)
 		}
 
-		// 行内文字（标签、时间、描述）与 start 同步开始
+		// 行内文字（标签、时间、描述、图标）与 start 同步开始
-		const textItems = containerRef.value.querySelectorAll(
+		const textItems = containerRef.value.querySelectorAll('.grid-cell')
-			'.item-label, .item-time, .item-desc .txt'
-		)
 		if (textItems && textItems.length) {
 			tl.from(
 				textItems,
 				{
-					autoAlpha: 0.5,
+					// autoAlpha: 0.5,
-					duration: 0.6,
+					duration: 0.7,
 					stagger: 0.08,
 					ease: 'power2.out'
 				},
@@ -174,22 +181,6 @@
 			)
 		}
 
-		// 所有文字与线条完成后，立即开始点图标动画（按顺序出现）
-		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'
-			)
-		}
-
 		hasAnimated.value = true
 	}
 
@@ -199,8 +190,8 @@
 		await nextTick()
 		if (!containerRef.value) return
 		observer = new IntersectionObserver(
-			(entries) => {
+			entries => {
-				entries.forEach((entry) => {
+				entries.forEach(entry => {
 					if (entry.isIntersecting) {
 						playAnimation()
 					}
@@ -224,7 +215,7 @@
 		background: url('@/assets/images/award/timeline_bg.png') no-repeat;
 		background-size: 100% 100%;
 		position: relative;
-		padding-top: 12.8rem;
+		padding: 12.8rem 0 15.9rem;
 		width: 100%;
 		color: #fff;
 		.timeline-title {
@@ -248,42 +239,45 @@
 			will-change: clip-path;
 			flex: 1;
 			width: 100%;
-			margin-top: 12rem;
+			margin-top: 11rem;
-			padding: 0 21.2rem 0 22rem;
+			padding: 0 13.8rem;
 			position: relative;
 			z-index: 2;
 
-			.labels-row {
+			// 主网格布局：5列
-				position: relative;
+			display: grid;
-				z-index: 2;
+			grid-template-columns: repeat(5, 1fr);
-				margin-bottom: 8rem;
+			grid-template-rows: auto auto auto auto;
-				.item-label {
+			grid-column-gap: 0;
-					flex: 1;
+			grid-row-gap: 0;
-					color: #fff;
+
-					font-family: 'PoppinsBold';
+			// 所有 grid 子行的通用样式
-					font-weight: 600;
+			.grid-row {
-					font-size: 2.8rem;
+				display: grid;
-					text-align: center;
+				grid-template-columns: repeat(5, 1fr);
-					white-space: pre-line;
+				grid-column: 1 / -1;
-					// height: 6rem;
+			}
+
+			.grid-cell {
+				display: flex;
 				justify-content: center;
-				}
+				align-items: center;
+				text-align: center;
 			}
 
+			// 图标行
 			.icons-row {
-				margin-bottom: 1.6rem;
+				align-items: center;
+				height: 6.4rem;
 				position: relative;
 				z-index: 2;
-				.point-icon {
+				margin-bottom: 1.6rem;
-					width: 6.4rem;
+
-					height: 6.4rem;
-					display: block;
-					margin: 0 auto;
-					z-index: 2;
-				}
 				.timeline-line {
-					width: calc(100% + 22rem + 21.2rem);
+					position: absolute;
+					top: 50%;
 					left: -22rem;
+					right: -21.2rem;
 					height: 0.15rem;
 					background: linear-gradient(
 						90deg,
@@ -293,40 +287,78 @@
 						rgba(199, 52, 44, 0.762376) 75.96%,
 						rgba(199, 52, 44, 0) 100%
 					);
-					position: absolute;
-					bottom: 50%;
 					transform: translateY(-50%);
 					z-index: 1;
+					pointer-events: none;
+				}
+
+				.icon-cell {
+					position: relative;
+					.point-icon {
+						width: 6.4rem;
+						height: 6.4rem;
+						display: block;
+						position: relative;
+						z-index: 2;
+					}
 				}
 			}
 
+			// 标签行
+			.labels-row {
+				margin-bottom: 8rem;
+				position: relative;
+				z-index: 2;
+				.label-cell {
+					flex-direction: column;
+					color: #fff;
+					font-family: 'PoppinsBold';
+					font-weight: 600;
+					font-size: 2.8rem;
+					white-space: pre-line;
+					justify-content: center;
+					min-height: 6rem;
+				
+					// .sub-label {
+					// 	font-family: 'Arial';
+					// 	font-weight: 400;
+					// 	font-size: 1.4rem;
+					// 	color: rgba(255, 255, 255, 0.8);
+					// 	margin-top: 0.4rem;
+					// }
+				}
+			}
+
+			// 时间行
 			.times-row {
 				margin-bottom: 6rem;
 				z-index: 2;
 				position: relative;
-				.item-time {
+				.time-cell {
-					flex: 1;
 					color: #f95750;
 					font-family: 'Arial';
 					font-weight: 400;
 					font-size: 2.8rem;
 					line-height: 4.5rem;
-					text-align: center;
 				}
 			}
 
+			// 描述行
 			.descs-row {
-				.item-desc {
+				.desc-cell {
-					flex: 1;
 					.txt {
 						font-family: 'Arial';
 						font-weight: 400;
 						font-size: 2rem;
 						text-align: center;
 						color: #e0e0e0;
-						width: 31.2rem;
+						width: 100%;
-						height: 10.2rem;
+						max-width: 31.2rem;
+						min-height: 10.2rem;
 						white-space: pre-line;
+						display: flex;
+						align-items: center;
+						justify-content: center;
 					}
 				}
 			}

src/views/AwardPage/index.vue

@@ -63,7 +63,7 @@
 		height: 2.4rem;
 	}
 	.banner {
-		height: 108rem;
+		height: 100rem;
 		// background: url('@/assets/images/award/banner.png') no-repeat;
 		// background-size: cover;
 		position: relative;