2026-01-20 16:41:37 +08:00
|
|
|
|
<template>
|
|
|
|
|
|
<div
|
|
|
|
|
|
ref="containerRef"
|
|
|
|
|
|
class="timeline-container container flex flex-col align-center"
|
|
|
|
|
|
>
|
|
|
|
|
|
<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"
|
|
|
|
|
|
v-for="item in points"
|
|
|
|
|
|
:key="'label-' + item.time"
|
|
|
|
|
|
>
|
|
|
|
|
|
<div class="main-label">{{ item.label }}</div>
|
|
|
|
|
|
<div
|
|
|
|
|
|
class="sub-label"
|
|
|
|
|
|
v-if="item.subLabel"
|
|
|
|
|
|
>
|
|
|
|
|
|
{{ item.subLabel }}
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
<!-- Icons row -->
|
|
|
|
|
|
<div class="icons-row flex align-center">
|
|
|
|
|
|
<div class="timeline-line"></div>
|
|
|
|
|
|
<img
|
|
|
|
|
|
src="@/assets/images/award/point.png"
|
|
|
|
|
|
class="point-icon"
|
|
|
|
|
|
v-for="item in points"
|
|
|
|
|
|
:key="'icon-' + item.time"
|
|
|
|
|
|
/>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
|
|
<!-- Times row -->
|
|
|
|
|
|
<div class="times-row flex align-center">
|
|
|
|
|
|
<div
|
|
|
|
|
|
class="item-time"
|
|
|
|
|
|
v-for="item in points"
|
|
|
|
|
|
:key="'time-' + item.time"
|
|
|
|
|
|
>
|
|
|
|
|
|
{{ item.time }}
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
<!-- Descriptions row -->
|
|
|
|
|
|
<div class="descs-row flex align-center">
|
|
|
|
|
|
<div
|
|
|
|
|
|
class="item-desc flex justify-center"
|
|
|
|
|
|
v-for="item in points"
|
|
|
|
|
|
:key="'desc-' + item.time"
|
|
|
|
|
|
>
|
|
|
|
|
|
<div class="txt">
|
|
|
|
|
|
{{ item.desc }}
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</template>
|
|
|
|
|
|
|
|
|
|
|
|
<script setup lang="ts">
|
|
|
|
|
|
import { nextTick, onBeforeUnmount, onMounted, ref } from 'vue'
|
|
|
|
|
|
import { gsap } from 'gsap'
|
|
|
|
|
|
|
|
|
|
|
|
const containerRef = ref<HTMLElement | null>(null)
|
|
|
|
|
|
const hasAnimated = ref(false)
|
|
|
|
|
|
|
|
|
|
|
|
const points = ref([
|
|
|
|
|
|
{
|
2026-01-30 17:21:11 +08:00
|
|
|
|
label: 'Application',
|
|
|
|
|
|
subLabel:'Deadline',
|
|
|
|
|
|
time: 'Jul 15',
|
|
|
|
|
|
desc: 'Application deadline and\nentry review process\nbegins.'
|
2026-01-20 16:41:37 +08:00
|
|
|
|
},
|
|
|
|
|
|
{
|
2026-01-30 17:21:11 +08:00
|
|
|
|
label: `20 Finallists`,
|
|
|
|
|
|
subLabel: 'Announced',
|
|
|
|
|
|
time: 'Aug 30',
|
|
|
|
|
|
desc: 'Announcement of 20\nfinalists entering final\nevaluation stage.'
|
2026-01-20 16:41:37 +08:00
|
|
|
|
},
|
|
|
|
|
|
{
|
2026-01-30 17:21:11 +08:00
|
|
|
|
label: `Finallist\nSubmission`,
|
|
|
|
|
|
subLabel: 'Deadline',
|
|
|
|
|
|
time: 'Sept 30',
|
|
|
|
|
|
desc: 'Finalists submit\ncompleted outfits for\nfinal assessment.'
|
2026-01-20 16:41:37 +08:00
|
|
|
|
},
|
|
|
|
|
|
{
|
2026-01-30 17:21:11 +08:00
|
|
|
|
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.'
|
|
|
|
|
|
},
|
2026-01-20 16:41:37 +08:00
|
|
|
|
])
|
|
|
|
|
|
|
|
|
|
|
|
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()
|
|
|
|
|
|
|
2026-01-30 17:21:11 +08:00
|
|
|
|
// 我们使用一个统一的开始 label，使横线、timeline 裁剪与所有文字同时启动，
|
|
|
|
|
|
// 点图标在它们完成后立即开始。
|
|
|
|
|
|
tl.addLabel('start')
|
|
|
|
|
|
|
|
|
|
|
|
// 整体 timeline 的裁剪展开（与 start 同步）
|
2026-01-20 16:41:37 +08:00
|
|
|
|
if (timeline) {
|
|
|
|
|
|
tl.fromTo(
|
|
|
|
|
|
timeline,
|
|
|
|
|
|
{
|
|
|
|
|
|
clipPath: 'inset(0 100% 0 0)'
|
|
|
|
|
|
},
|
|
|
|
|
|
{
|
|
|
|
|
|
clipPath: 'inset(0 0% 0 0)',
|
|
|
|
|
|
duration: 1.6,
|
|
|
|
|
|
ease: 'power1.out'
|
2026-01-30 17:21:11 +08:00
|
|
|
|
},
|
|
|
|
|
|
'start'
|
2026-01-20 16:41:37 +08:00
|
|
|
|
)
|
|
|
|
|
|
}
|
|
|
|
|
|
|
2026-01-30 17:21:11 +08:00
|
|
|
|
// 线条动画（与 start 同步）
|
2026-01-20 16:41:37 +08:00
|
|
|
|
if (line) {
|
|
|
|
|
|
tl.from(
|
|
|
|
|
|
line,
|
|
|
|
|
|
{
|
|
|
|
|
|
scaleX: 0,
|
|
|
|
|
|
transformOrigin: '0% 50%',
|
|
|
|
|
|
duration: 1.3,
|
|
|
|
|
|
ease: 'power1.out'
|
|
|
|
|
|
},
|
2026-01-30 17:21:11 +08:00
|
|
|
|
'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'
|
2026-01-20 16:41:37 +08:00
|
|
|
|
)
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
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-top: 12.8rem;
|
|
|
|
|
|
width: 100%;
|
|
|
|
|
|
color: #fff;
|
|
|
|
|
|
.timeline-title {
|
|
|
|
|
|
font-family: 'PoppinsBold';
|
|
|
|
|
|
font-weight: 600;
|
|
|
|
|
|
font-size: 4rem;
|
|
|
|
|
|
text-align: center;
|
|
|
|
|
|
vertical-align: middle;
|
|
|
|
|
|
}
|
|
|
|
|
|
.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: 12rem;
|
|
|
|
|
|
padding: 0 21.2rem 0 22rem;
|
|
|
|
|
|
position: relative;
|
|
|
|
|
|
z-index: 2;
|
|
|
|
|
|
|
|
|
|
|
|
.labels-row {
|
|
|
|
|
|
position: relative;
|
|
|
|
|
|
z-index: 2;
|
|
|
|
|
|
margin-bottom: 8rem;
|
|
|
|
|
|
.item-label {
|
|
|
|
|
|
flex: 1;
|
|
|
|
|
|
color: #fff;
|
|
|
|
|
|
font-family: 'PoppinsBold';
|
|
|
|
|
|
font-weight: 600;
|
|
|
|
|
|
font-size: 2.8rem;
|
|
|
|
|
|
text-align: center;
|
|
|
|
|
|
white-space: pre-line;
|
2026-01-30 17:21:11 +08:00
|
|
|
|
// height: 6rem;
|
2026-01-20 16:41:37 +08:00
|
|
|
|
justify-content: center;
|
|
|
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
.icons-row {
|
|
|
|
|
|
margin-bottom: 1.6rem;
|
|
|
|
|
|
position: relative;
|
|
|
|
|
|
z-index: 2;
|
|
|
|
|
|
.point-icon {
|
|
|
|
|
|
width: 6.4rem;
|
|
|
|
|
|
height: 6.4rem;
|
|
|
|
|
|
display: block;
|
|
|
|
|
|
margin: 0 auto;
|
|
|
|
|
|
z-index: 2;
|
|
|
|
|
|
}
|
|
|
|
|
|
.timeline-line {
|
|
|
|
|
|
width: calc(100% + 22rem + 21.2rem);
|
|
|
|
|
|
left: -22rem;
|
|
|
|
|
|
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%
|
|
|
|
|
|
);
|
|
|
|
|
|
position: absolute;
|
|
|
|
|
|
bottom: 50%;
|
|
|
|
|
|
transform: translateY(-50%);
|
|
|
|
|
|
z-index: 1;
|
|
|
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
.times-row {
|
|
|
|
|
|
margin-bottom: 6rem;
|
|
|
|
|
|
z-index: 2;
|
|
|
|
|
|
position: relative;
|
|
|
|
|
|
.item-time {
|
|
|
|
|
|
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 {
|
|
|
|
|
|
flex: 1;
|
|
|
|
|
|
.txt {
|
|
|
|
|
|
font-family: 'Arial';
|
|
|
|
|
|
font-weight: 400;
|
|
|
|
|
|
font-size: 2rem;
|
|
|
|
|
|
text-align: center;
|
|
|
|
|
|
color: #e0e0e0;
|
|
|
|
|
|
width: 31.2rem;
|
|
|
|
|
|
height: 10.2rem;
|
2026-01-30 17:21:11 +08:00
|
|
|
|
white-space: pre-line;
|
2026-01-20 16:41:37 +08:00
|
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
</style>
|
