549 lines
13 KiB
Vue
549 lines
13 KiB
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>
|