aida_front/src/views/AwardPage/components/ApplySection.vue

<template>
	<div
		class="apply-container flex flex-col"
		id="apply"
		ref="applyRef"
	>
		<div
			class="title animation-element"
			ref="applyTitleRef"
		>
			How to Apply
		</div>
		<div
			class="sub-title animation-element"
			ref="applySubTitleRef"
		>
			Step by step
		</div>
		<div
			class="requirments-list flex flex-col"
			ref="reqListRef"
		>
			<div class="top flex">
				<div
					class="item-box animation-element"
					v-for="(item, index) in leftRequirment"
					:key="item.type"
					:ref="el => { if(el) itemRefs[index] = el }"
					:style="{ background: item.background || '#fff' }"
				>
					<div class="item-header flex flex-center">
						<div class="item-title">{{ item.type }}</div>
					</div>
					<div class="context-container flex flex-center">
						<div
							class="context"
							v-for="el in item.desc"
						>
							{{ el }}
						</div>
						<div
							class="list"
							v-if="item.listTitle"
						>
							<div class="list-title">{{ item.listTitle }}</div>
							<ul class="list-items">
								<li
									class="list-item"
									v-for="el in item.list"
								>
									{{ el }}
								</li>
							</ul>
						</div>
					</div>
				</div>
			</div>
			<div class="bottom flex">
				<div class="step-3 flex flex-col animation-element" ref="step3Ref">
					<div class="header">Step 3. Prepare Your Submission</div>
					<div class="content flex">
						<div class="content-left flex flex-col space-between">
							<div class="content-item">
								<div class="item-header flex align-center">
									<div class="point"></div>
									<div>Process Video</div>
								</div>
								<div class="desc-wrapper flex flex-col space-between">
									<div class="item-desc">
										Include a screen‑recorded video
										<br />
										your creative process
										<br />
										using AiDA.​
										<br />
									</div>
									<ul class="desc-lists">
										<div class="desc-lists-title">
											Video requirements:
										</div>
										<li>Format: MP4</li>
										<li>Resolution: 1080×1920 px</li>
										<li>Duration: Maximum 1 minute</li>
										<li>File size: Maximum 20MB</li>
									</ul>
								</div>
							</div>
							<div class="content-item">
								<div class="item-header flex align-center">
									<div class="point"></div>
									<div>File Name</div>
								</div>
								<div class="item-desc indent">
									AiDAGlobalDesignAward
									<br />
									2026_[Your Full Name]​
								</div>
							</div>
						</div>
						<div class="content-right">
							<div class="content-item flex flex-col">
								<div class="item-header flex align-center">
									<div class="point"></div>
									<div>Design Portfolio(PDF)</div>
								</div>
								<div
									class="desc-wrapper flex-1 flex flex-col space-between"
								>
									<ul class="desc-lists">
										<div class="desc-lists-title">
											<p>
												Submit one single PDF file that includes:
											</p>
											<p>Required structure:</p>
										</div>
										<li>Design title</li>
										<li>Moodboard</li>
										<li>Concept explanation</li>
										<div>(How to used AiDA to develop design)</div>
									</ul>
									<ul class="desc-lists">
										<div class="desc-lists-title">
											<p>PDF requirements:</p>
										</div>
										<li>Maximum 15 pages</li>
										<li>Maximum file size: 20MB</li>
										<li>
											Language: English or native language
											<br />
											with English translation
										</li>
									</ul>
								</div>
							</div>
						</div>
					</div>
				</div>
				<div class="step-4 animation-element" ref="step4Ref">
					<div class="header flex flex-col flex-center">
						<p>Step 4. Finalist Requirement</p>
						<p class="sub-title">(for top 20 Designers)</p>
					</div>
					<div class="content">
						<div class="content-item">
							<div class="desc-wrapper flex-1 flex flex-col space-between">
								<ul class="desc-lists">
									<div class="desc-lists-title">
										The 20 finalists will be required to
										<br />
										submit physical garments for final
										<br />
										evaluation
									</div>
									<li>Number of pieces: 1</li>
									<li>
										Garments must be produced
										<br />
										based on the submitted
										<br />
										AiDA-generated designs
									</li>
									<li>
										Shipping instructions will be provided by
										Code-create
									</li>
								</ul>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
</template>

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

	const leftRequirment = ref([
		{
			type: 'Step 1. Become an\nAiDA Subscriber​',
			desc: [
				'All applicants must be active\nAiDA subscribers at the time of\nsubmission.​ You may subscribe\nunder either a monthly or yearly plan.​'
			]
		},
		{
			type: 'Step 2. Create Your Design Using AiDA',
			desc: [
				'Applicants must create their\ndesigns exclusively using the\nAiDA platform.​ '
			],
			listTitle: 'Your work shold clearly demonstrate:',
			list: [
				'· How AiDA is used as a creative tool',
				'· Your design concept and creative direction',
				'· The intergration of AI and human creativity'
			],
			background: '#F9F9F9'
		}
	])

	const applyRef = ref()
	const applyTitleRef = ref()
	const applySubTitleRef = ref()
	const reqListRef = ref()
	const itemRefs = ref<HTMLElement[]>([])
	const step3Ref = ref()
	const step4Ref = ref()

	const hasPlayedAnim = ref(false)
	let timeline: gsap.core.Timeline | null = null

	let observer: IntersectionObserver | null = null

	const setupApplyInitialState = () => {
		// 设置标题和副标题的初始状态
		const titleEls = [applyTitleRef.value, applySubTitleRef.value].filter(
			Boolean
		) as HTMLElement[]
		if (titleEls.length) {
			gsap.set(titleEls, {
				opacity: 0,
				scale: 0,
				transformOrigin: '50% 50%'
			})
		}

		// 设置步骤元素的初始状态
		const allStepElements: HTMLElement[] = []
		if (itemRefs.value && itemRefs.value.length > 0) {
			allStepElements.push(...itemRefs.value)
		}
		if (step3Ref.value) {
			allStepElements.push(step3Ref.value as HTMLElement)
		}
		if (step4Ref.value) {
			allStepElements.push(step4Ref.value as HTMLElement)
		}

		if (allStepElements.length > 0) {
			gsap.set(allStepElements, {
				opacity: 0,
				y: 50
			})
		}
	}

	const initAnimations = () => {
		if (hasPlayedAnim.value) return

		timeline = gsap.timeline({
			defaults: { ease: 'back.out(1.7)' }
		})

		if (applyTitleRef.value && applySubTitleRef.value) {
			timeline.to([applyTitleRef.value, applySubTitleRef.value], {
				scale: 1,
				opacity: 1,
				duration: 0.6,
				stagger: 0.1
			})
		}

		const allStepElements: HTMLElement[] = []
		if (itemRefs.value && itemRefs.value.length > 0) {
			allStepElements.push(...itemRefs.value)
		}
		if (step3Ref.value) {
			allStepElements.push(step3Ref.value as HTMLElement)
		}
		if (step4Ref.value) {
			allStepElements.push(step4Ref.value as HTMLElement)
		}

		if (allStepElements.length > 0) {
			timeline.to(allStepElements, {
				opacity: 1,
				y: 0,
				duration: 0.6,
				stagger: 0.2
			}, '>')
		}

		hasPlayedAnim.value = true
	}

	onMounted(() => {
		nextTick(() => {
			setupApplyInitialState()
			observer = new IntersectionObserver(
				(entries) => {
					entries.forEach((entry) => {
						if (entry.isIntersecting) {
							initAnimations()
							observer?.disconnect()
						}
					})
				},
				{
					threshold: 0.3,
					rootMargin: '0px 0px -100px 0px'
				}
			)

			// Start observing the component root element
			if (applyRef.value) {
				observer.observe(applyRef.value)
			}
		})
	})

	onBeforeUnmount(() => {
		// Cleanup animation timeline
		if (timeline) {
			timeline.kill()
		}
		// Cleanup IntersectionObserver
		if (observer) {
			observer.disconnect()
		}
	})
</script>

<style scoped lang="less">
	p {
		margin: 0;
		padding: 0;
	}
	ul {
		margin: 0;
		padding: 0;
	}
	.animation-element{
		will-change: opacity transform;
	}
	.apply-container {
		flex: 1;
		height: 143.3rem;
		background: url('@/assets/images/award/apply_bg.png') no-repeat;
		background-size: 100% 100%;
		padding: 12.7rem 21.4rem 12rem;
		.title {
			text-align: center;
			color: #232323;
			font-family: 'PoppinsBold';
			font-weight: 600;
			font-size: 4rem;
			margin-bottom: 3rem;
		}
		.sub-title {
			text-align: center;
			color: #b10000;
			font-size: 3rem;
			font-family: 'Arial';
			font-weight: 400;
			margin-bottom: 8.2rem;
		}
		.requirments-list {
			flex: 1;
			row-gap: 8.2rem;
			.top {
				height: 27.4rem;
				color: #585858;
				column-gap: 4.6rem;
				.item-box {
					height: 27.4rem;
				}
			}
			.item-box {
				border-radius: 0.8rem;
				&:nth-of-type(1) {
					width: 47rem;
					flex-grow: initial;
				}
				&:nth-of-type(2) {
					flex: 1;
				}
				.item-header {
					background-color: #424242;
					border-radius: 0.8rem;
					height: 7.8rem;
					.item-title {
						color: #fff;
						font-family: 'PoppinsBold';
						font-weight: 600;
						font-size: 2.4rem;
						text-align: center;
						white-space: pre-line;
					}
				}
				.context-container {
					margin-top: 4rem;
					column-gap: 7rem;
					.list {
						font-family: 'Instrument';
						font-weight: 400;
						font-size: 2.4rem;
						line-height: 3rem;
					}
				}
				.context {
					// margin-top: 4rem;
					// width: 46.8rem;
					text-align: center;
					color: #585858;
					font-family: 'Arial';
					font-weight: 400;
					line-height: 3rem;
					font-size: 2.4rem;
					// padding-left: 5.6rem;
					white-space: pre-line;
				}
			}
			.bottom {
				column-gap: 4.6rem;
				height: 63.4rem;
				.step-3 {
					flex: 1;
				}
				.step-3,
				.step-4 {
					.header {
						font-family: 'PoppinsBold';
						font-weight: 600;
						font-size: 2.4rem;
						text-align: center;
						height: 7.4rem;
						line-height: 7.4rem;
						color: #fff;
						background-color: #b10000;
						border-radius: 0.8rem;
					}
					.content {
						padding: 4rem;
						border-radius: 0.8rem;
						column-gap: 6.4rem;
						background: linear-gradient(
							180deg,
							#ffe8e8 0%,
							#feefef 25%,
							#f9f9f9 100%
						);
						flex: 1;
						.content-left {
							flex: 1;
						}

						.content-item {
							.item-header {
								column-gap: 2rem;
								color: #585858;
								font-family: 'InstrumentBold';
								font-weight: 700;
								font-size: 2.4rem;
								line-height: 3rem;
								.point {
									width: 1.2rem;
									height: 1.2rem;
									background-color: #b10000;
									border-radius: 50%;
								}
							}
							.item-desc {
								font-family: 'Instrument';
								font-weight: 400;
								font-size: 24px;
								color: #585858;
								&.indent {
									padding-left: 3.8rem;
									line-height: 3rem;
									padding-top: 2rem;
								}
							}
							.desc-wrapper {
								margin-top: 3rem;
								/* 基线行高变量，供子元素计算方块垂直偏移以对齐首行 */
								--desc-line-height: 3rem;
								font-family: 'Instrument';
								font-weight: 400;
								color: #585858;
								font-size: 2.4rem;
								line-height: 3rem;
								row-gap: 3rem;
								.desc-lists {
									/* 使用自定义方块代替浏览器 marker，保证大小为 1rem 并与文字垂直居中 */
									padding-left: 0;
									list-style: none;
									li {
										list-style: none;
										/* 使内容对齐到首行顶部，方块通过 margin-top 调整到首行中间 */
										display: flex;
										align-items: flex-start;
										gap: 1rem;
										padding: 0;
										margin: 0.4rem 0;
										&::before {
											content: '';
											/* 固定为 1rem 方块 */
											width: 0.5rem;
											height: 0.5rem;
											background-color: #585858;
											flex: 0 0 0.5rem;
											border-radius: 0;
											/* 让方块垂直居中于第一行文字：(line-height - square)/2 */
											margin-top: calc(
												(var(--desc-line-height, 3rem) - 1rem) / 2
											);
										}
									}
								}
							}
						}
						.content-right {
							.content-item {
								height: 100%;
							}
						}
					}
				}
				.step-4 {
					width: 45.1rem;
					.header {
						color: #fff;
						text-align: center;
						background-color: #424242;
						border-radius: 0.8rem;
						height: 7.8rem;
						white-space: pre-line;
						font-family: 'PoppinsBold';
						font-weight: 600;
						font-size: 2.4rem;
						line-height: 1.5;
						.sub-title {
							font-family: 'Poppins';
							font-weight: 400;
							font-size: 1.8rem;
							color: #fff;
							margin: 0;
						}
					}
					.content {
						background: #fff;
					}
				}
			}
		}
	}
</style>