gloabl_award_front/src/views/AwardPage/components/TimeLine.vue

<template>
	<div
		ref="containerRef"
		class="timeline-container container flex flex-col align-center"
	>
		<div class="timeline-title">{{ $t('AwardsPage.competitionTimeline') }}</div>
		<div class="desc">{{ $t('AwardsPage.shapingTheFuture') }}</div>
		<div
			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"
				>
					<div class="main-label">{{ $t(item.label) }}</div>
					<div
						class="sub-label"
						v-if="item.subLabel"
					>
						{{ $t(item.subLabel) }}
					</div>
				</div>
			</div>
			<!-- 图标行 -->
			<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"
					/>
				</div>
			</div>
			<!-- 时间行 -->
			<div class="grid-row times-row">
				<div
					class="grid-cell time-cell"
					v-for="item in points"
					:key="'time-' + item.time"
				>
					{{ $t(item.time) }}
				</div>
			</div>

			<!-- 描述行 -->
			<div class="grid-row descs-row">
				<div
					class="grid-cell desc-cell"
					v-for="item in points"
					:key="'desc-' + item.time"
				>
					<div class="txt">
						{{ $t(item.desc) }}
					</div>
				</div>
			</div>
		</div>
	</div>
</template>

<script setup lang="ts">
	import { nextTick, onBeforeUnmount, onMounted, ref, computed } from 'vue'
	import { useI18n } from 'vue-i18n'
	import { gsap } from 'gsap'

	const { t } = useI18n()

	const containerRef = ref<HTMLElement | null>(null)
	const timelineRef = ref<HTMLElement | null>(null)
	const hasAnimated = ref(false)

	const points = ref([
		{
			label: 'AwardsPage.timelineApplicationLabel',
			subLabel: 'AwardsPage.timelineDeadlineLabel',
			time: 'AwardsPage.timeJul15',
			desc: 'AwardsPage.applicationDeadlineDesc'
		},
		{
			label: 'AwardsPage.twentyFinalistsAnnounced',
			subLabel: 'AwardsPage.announcedLabel',
			time: 'AwardsPage.timeAug30',
			desc: 'AwardsPage.twentyFinalistsDesc'
		},
		{
			label: 'AwardsPage.finalistSubmission',
			subLabel: 'AwardsPage.submissionLabel',
			time: 'AwardsPage.timeSept30',
			desc: 'AwardsPage.finalistSubmissionDesc'
		},
		{
			label: 'AwardsPage.receivingOutfits',
			subLabel: 'AwardsPage.fromFinalistsLabel',
			time: 'AwardsPage.timeOctober',
			desc: 'AwardsPage.receivingOutfitsDesc'
		},
		{
			label: 'AwardsPage.awardCeremony',
			subLabel: 'AwardsPage.ceremonyLabel',
			time: 'AwardsPage.timeNov12',
			desc: 'AwardsPage.awardCeremonyDesc'
		}
	])

	const playAnimation = () => {
		if (!containerRef.value || hasAnimated.value) return
		const title = containerRef.value.querySelector('.timeline-title')
		const subtitle = containerRef.value.querySelector('.desc')
		const line = containerRef.value.querySelector('.timeline-line')
		const timeline = containerRef.value.querySelector('.timeline-point')

		const tl = gsap.timeline()

		// 我们使用一个统一的开始 label，使横线、timeline 裁剪与所有文字同时启动，
		// 点图标在它们完成后立即开始。
		tl.addLabel('start')

		// 整体 timeline 的裁剪展开（与 start 同步）
		if (timeline) {
			tl.fromTo(
				timeline,
				{
					clipPath: 'inset(0 100% 0 0)'
				},
				{
					clipPath: 'inset(0 0% 0 0)',
					duration: 1.3,
					ease: 'power1.out'
				},
				'start'
			)
		}

		// 线条动画（与 start 同步）
		if (line) {
			tl.from(
				line,
				{
					scaleX: 0,
					transformOrigin: '0% 50%',
					duration: 1.3,
					ease: 'power1.out'
				},
				'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('.grid-cell')
		if (textItems && textItems.length) {
			tl.from(
				textItems,
				{
					// autoAlpha: 0.5,
					duration: 0.7,
					stagger: 0.08,
					ease: 'power2.out'
				},
				'start'
			)
		}

		hasAnimated.value = true
	}

	let observer: IntersectionObserver | null = null

	onMounted(async () => {
		await nextTick()
		if (!containerRef.value) return
		observer = new IntersectionObserver(
			entries => {
				entries.forEach(entry => {
					if (entry.isIntersecting) {
						playAnimation()
					}
				})
			},
			{ threshold: 0.3 }
		)
		observer.observe(containerRef.value)
	})

	onBeforeUnmount(() => {
		if (observer && containerRef.value) {
			observer.unobserve(containerRef.value)
		}
		observer = null
	})
</script>

<style scoped lang="less">
	.timeline-container {
		background: url('@/assets/images/award/timeline_bg.png') no-repeat;
		background-size: 100% 100%;
		position: relative;
		padding: 12.8rem 0 15.9rem;
		width: 100%;
		color: #fff;
		.timeline-title {
			font-family: 'PoppinsBold';
			font-weight: 600;
			font-size: 4rem;
			text-align: center;
			vertical-align: middle;
			margin-bottom: 2.4rem;
		}
		.logo {
			margin: 2.4rem 0 2.2rem 0;
		}
		.desc {
			font-family: 'Arial';
			font-size: 3rem;
			font-weight: 400;
			color: #f95750;
		}
		.timeline-point {
			overflow: hidden;
			will-change: clip-path;
			flex: 1;
			width: 100%;
			margin-top: 11rem;
			padding: 0 13.8rem;
			position: relative;
			z-index: 2;

			// 主网格布局：5列
			display: grid;
			grid-template-columns: repeat(5, 1fr);
			grid-template-rows: auto auto auto auto;
			grid-column-gap: 0;
			grid-row-gap: 0;

			// 所有 grid 子行的通用样式
			.grid-row {
				display: grid;
				grid-template-columns: repeat(5, 1fr);
				grid-column: 1 / -1;
			}

			.grid-cell {
				display: flex;
				justify-content: center;
				align-items: center;
				text-align: center;
			}

			// 图标行
			.icons-row {
				align-items: center;
				height: 6.4rem;
				position: relative;
				z-index: 2;
				margin-bottom: 1.6rem;

				.timeline-line {
					position: absolute;
					top: 50%;
					left: -22rem;
					right: -21.2rem;
					height: 0.15rem;
					background: linear-gradient(
						90deg,
						rgba(199, 52, 44, 0) 0%,
						rgba(199, 52, 44, 0.719626) 25.96%,
						#c7342c 51.44%,
						rgba(199, 52, 44, 0.762376) 75.96%,
						rgba(199, 52, 44, 0) 100%
					);
					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;
				.time-cell {
					color: #f95750;
					font-family: 'Arial';
					font-weight: 400;
					font-size: 2.8rem;
					line-height: 4.5rem;
				}
			}

			// 描述行
			.descs-row {
				.desc-cell {
					.txt {
						font-family: 'Arial';
						font-weight: 400;
						font-size: 2rem;
						text-align: center;
						color: #e0e0e0;
						width: 100%;
						max-width: 31.2rem;
						min-height: 10.2rem;
						white-space: pre-line;
						display: flex;
						align-items: center;
						justify-content: center;
					}
				}
			}
		}
	}
</style>