aidlab/gloabl_award_front
7
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

style: bloom&slogan&timeline移动端

Browse Source
This commit is contained in:
zhangyahui
2026-03-18 13:26:18 +08:00
parent ec4ba64030
commit 1b5d2bf762
10 changed files with 688 additions and 532 deletions
Download Patch File Download Diff File Expand all files Collapse all files

BIN
src/assets/images/mobile_version_background/Background4.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.8 MiB

BIN
src/assets/images/mobile_version_background/Background6.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 816 KiB

BIN
src/assets/images/mobile_version_background/background3.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 89 KiB

BIN
src/assets/images/mobile_version_background/background5.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 98 KiB

BIN
src/assets/images/mobile_version_background/bloom_bg.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 486 KiB

BIN
src/assets/images/mobile_version_background/timeline_bg.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.2 MiB

372
src/views/AwardPage/components/Bloom.vue
View File

@@ -1,203 +1,211 @@
<template> <template>
<div class="bloom flex flex-col align-center"> <div class="bloom flex flex-col align-center" :class="{ mobile: isMobile }">
<div <div class="title" ref="titleRef">
class="title" {{ $t('AwardsPage.bloomYourCreativity') }}
ref="titleRef" </div>
>
{{ $t('AwardsPage.bloomYourCreativity') }}
</div>
<div <div class="season" ref="subtitleRef">
class="season" {{ $t('AwardsPage.themeOf2026') }}
ref="subtitleRef" </div>
> <div class="desc" ref="textRef">
{{ $t('AwardsPage.themeOf2026') }} <p class="section-1">
</div> {{ $t('AwardsPage.bloomText.desc1.regular1') }}
<div <span class="arial-bold">
class="desc" {{ $t('AwardsPage.bloomText.desc1.bold1') }}
ref="textRef" </span>
> {{ $t('AwardsPage.bloomText.desc1.regular2') }}
<p class="section-1"> <span class="arial-bold">
{{ $t('AwardsPage.bloomText.desc1.regular1') }} {{ $t('AwardsPage.bloomText.desc1.bold2') }}
<span class="arial-bold"> </span>
{{ $t('AwardsPage.bloomText.desc1.bold1') }} {{ $t('AwardsPage.bloomText.desc1.regular3') }}
</span> <span class="arial-bold">
{{ $t('AwardsPage.bloomText.desc1.regular2') }} {{ $t('AwardsPage.bloomText.desc1.bold3') }}
<span class="arial-bold"> </span>
{{ $t('AwardsPage.bloomText.desc1.bold2') }} {{ $t('AwardsPage.bloomText.desc1.regular4') }}
</span> <span class="arial-bold">
{{ $t('AwardsPage.bloomText.desc1.regular3') }} {{ $t('AwardsPage.bloomText.desc1.bold4') }}
<span class="arial-bold"> </span>
{{ $t('AwardsPage.bloomText.desc1.bold3') }} {{ $t('AwardsPage.bloomText.desc1.regular5') }}
</span> </p>
{{ $t('AwardsPage.bloomText.desc1.regular4') }} <p class="section-2">
<span class="arial-bold"> {{ $t('AwardsPage.bloomText.desc2.regular1') }}
{{ $t('AwardsPage.bloomText.desc1.bold4') }} <span class="arial-bold">
</span> {{ $t('AwardsPage.bloomText.desc2.bold1') }}
{{ $t('AwardsPage.bloomText.desc1.regular5') }} </span>
</p> {{ $t('AwardsPage.bloomText.desc2.regular2') }}
<p class="section-2"> </p>
{{ $t('AwardsPage.bloomText.desc2.regular1') }} </div>
<span class="arial-bold"> </div>
{{ $t('AwardsPage.bloomText.desc2.bold1') }}
</span>
{{ $t('AwardsPage.bloomText.desc2.regular2') }}
</p>
</div>
</div>
</template> </template>
<script setup lang="ts"> <script setup lang="ts">
import { ref, onMounted, onBeforeUnmount, nextTick } from 'vue' import { ref, onMounted, onBeforeUnmount, nextTick, inject } from 'vue'
import { useI18n } from 'vue-i18n' import { useI18n } from 'vue-i18n'
import { gsap } from 'gsap' import { gsap } from 'gsap'
const { t } = useI18n() const { t } = useI18n()
const isMobile = inject<boolean>('isMobile')
const titleRef = ref<HTMLElement | null>(null) const titleRef = ref<HTMLElement | null>(null)
const subtitleRef = ref<HTMLElement | null>(null) const subtitleRef = ref<HTMLElement | null>(null)
const textRef = ref<HTMLElement | null>(null) const textRef = ref<HTMLElement | null>(null)
const hasPlayedBloomAnim = ref(false) const hasPlayedBloomAnim = ref(false)
let bloomObserver: IntersectionObserver | null = null let bloomObserver: IntersectionObserver | null = null
const setupBloomInitialState = () => { const setupBloomInitialState = () => {
const titleEls = [titleRef.value, subtitleRef.value].filter( const titleEls = [titleRef.value, subtitleRef.value].filter(Boolean) as HTMLElement[]
Boolean if (titleEls.length) {
) as HTMLElement[] gsap.set(titleEls, {
if (titleEls.length) { opacity: 0,
gsap.set(titleEls, { // start larger than final size, then animate down to scale:1
opacity: 0, scale: 1.6,
// start larger than final size, then animate down to scale:1 transformOrigin: '50% 50%'
scale: 1.6, })
transformOrigin: '50% 50%' }
})
}
if (textRef.value) { if (textRef.value) {
// start below and hidden // start below and hidden
gsap.set(textRef.value, { gsap.set(textRef.value, {
opacity: 0, opacity: 0,
y: 60 y: 60
}) })
} }
} }
const playBloomAnimation = () => { const playBloomAnimation = () => {
if (hasPlayedBloomAnim.value) return if (hasPlayedBloomAnim.value) return
const titleEls = [titleRef.value, subtitleRef.value].filter( const titleEls = [titleRef.value, subtitleRef.value].filter(Boolean) as HTMLElement[]
Boolean const textEl = textRef.value
) as HTMLElement[] if (!titleEls.length || !textEl) return
const textEl = textRef.value
if (!titleEls.length || !textEl) return
const tl = gsap.timeline({ defaults: { ease: 'power2.out' } }) const tl = gsap.timeline({ defaults: { ease: 'power2.out' } })
tl.to(titleEls, { tl.to(titleEls, {
opacity: 1, opacity: 1,
scale: 1, scale: 1,
duration: 0.9, duration: 0.9,
ease: 'back.out(1.6)', ease: 'back.out(1.6)',
stagger: 0.12 stagger: 0.12
}) })
tl.to( tl.to(
textEl, textEl,
{ {
opacity: 1, opacity: 1,
y: -12, y: -12,
scale: 1.05, scale: 1.05,
duration: 0.3, duration: 0.3,
ease: 'power2.out' ease: 'power2.out'
}, },
'-=0.3' '-=0.3'
) )
tl.to( tl.to(
textEl, textEl,
{ {
y: 0, y: 0,
scale: 1, scale: 1,
duration: 0.18, duration: 0.18,
ease: 'bounce.out' ease: 'bounce.out'
}, },
'+=0.08' '+=0.08'
) )
hasPlayedBloomAnim.value = true hasPlayedBloomAnim.value = true
bloomObserver?.disconnect() bloomObserver?.disconnect()
} }
onMounted(() => { onMounted(() => {
nextTick(() => { nextTick(() => {
setupBloomInitialState() setupBloomInitialState()
if ('IntersectionObserver' in window) { if ('IntersectionObserver' in window) {
bloomObserver = new IntersectionObserver( bloomObserver = new IntersectionObserver(
entries => { (entries) => {
entries.forEach(entry => { entries.forEach((entry) => {
if (entry.isIntersecting) { if (entry.isIntersecting) {
playBloomAnimation() playBloomAnimation()
} }
}) })
}, },
{ threshold: 0.3 } { threshold: 0.3 }
) )
if (titleRef.value) { if (titleRef.value) {
bloomObserver.observe(titleRef.value) bloomObserver.observe(titleRef.value)
} }
} else { } else {
// fallback // fallback
playBloomAnimation() playBloomAnimation()
} }
}) })
}) })
onBeforeUnmount(() => { onBeforeUnmount(() => {
bloomObserver?.disconnect() bloomObserver?.disconnect()
}) })
</script> </script>
<style scoped lang="less"> <style scoped lang="less">
p { p {
margin: 0; margin: 0;
padding: 0; padding: 0;
} }
.arial-bold { .arial-bold {
font-family: 'ArialBold'; font-family: 'ArialBold';
font-weight: 700; font-weight: 700;
} }
.bloom { .bloom {
height: 108rem; height: 108rem;
padding-top: 12.8rem; padding-top: 12.8rem;
font-family: 'Poppins'; font-family: 'PoppinsBold';
background: url('@/assets/images/award/bloom_bg.png') no-repeat; background: url('@/assets/images/award/bloom_bg.png') no-repeat;
background-size: 100% 100%; background-size: 100% 100%;
.title { .title {
font-size: 4rem; font-size: 4rem;
font-weight: 600; font-weight: 600;
color: #232323; color: #232323;
margin-bottom: 2.4rem; margin-bottom: 2.4rem;
} }
.logo { .logo {
margin-bottom: 2.2rem; margin-bottom: 2.2rem;
} }
.season { .season {
font-size: 3rem; font-size: 3rem;
color: #c7342c; color: #c7342c;
margin-bottom: 6.6rem; font-family: 'PoppinsMedium';
} margin-bottom: 6.6rem;
.desc { }
font-family: 'Arial'; .desc {
font-weight: 400; font-family: 'Arial';
font-size: 2.4rem; font-weight: 400;
color: #585858; font-size: 2.4rem;
text-align: center; color: #585858;
padding: 0 21.5rem; text-align: center;
line-height: 4.5rem; padding: 0 21.5rem;
margin-bottom: 12.3rem; line-height: 4.5rem;
white-space: pre-line; margin-bottom: 12.3rem;
.section-2 { white-space: pre-line;
margin-top: 4rem; .section-2 {
} margin-top: 4rem;
} }
} }
&.mobile {
background: url('@/assets/images/mobile_version_background/bloom_bg.png') no-repeat;
background-size: 100% 100%;
height: 83.1rem;
padding-top: 6rem;
.title {
font-size: 3.2rem;
margin-bottom: 0.8rem;
}
.season {
font-size: 2.4rem;
margin-bottom: 6.2rem;
}
.desc {
padding: 0 6.5rem 0 6.7rem;
font-size: 2rem;
line-height: 3rem;
}
}
}
</style> </style>

20
src/views/AwardPage/components/Slogan.vue
View File

@@ -183,6 +183,7 @@ onUnmounted(() => {
content: ''; content: '';
position: absolute; position: absolute;
background-color: #8d8d8d; background-color: #8d8d8d;
transform: scaleX(0);
} }
/* 第一行的两个item底部需要分隔线 */ /* 第一行的两个item底部需要分隔线 */
&:nth-child(1)::after, &:nth-child(1)::after,
@@ -202,6 +203,7 @@ onUnmounted(() => {
height: 100%; height: 100%;
width: 0.1rem; width: 0.1rem;
background-color: #8d8d8d; background-color: #8d8d8d;
transform: scaleY(0);
} }
&:nth-child(4)::before { &:nth-child(4)::before {
@@ -212,7 +214,7 @@ onUnmounted(() => {
width: 0.1rem; width: 0.1rem;
height: 100%; height: 100%;
background-color: #8d8d8d; background-color: #8d8d8d;
transform: translateX(-100%); transform: translateX(-100%) scaleY(0);
} }
} }
} }
@@ -221,26 +223,26 @@ onUnmounted(() => {
&:nth-child(1)::before { &:nth-child(1)::before {
transform-origin: bottom; transform-origin: bottom;
transform: scaleY(0); transform: scaleY(0);
animation: growUp 2s cubic-bezier(0.4, 0, 0.2, 1) forwards; animation: growUp 1s cubic-bezier(0.4, 0, 0.2, 1) forwards;
animation-delay: calc(var(--delay) + 0.5s); // animation-delay: calc(var(--delay) + 0.5s);
} }
&:nth-child(1)::after { &:nth-child(1)::after {
transform-origin: right; transform-origin: right;
transform: scaleX(0); transform: scaleX(0);
animation: growRight 2s cubic-bezier(0.4, 0, 0.2, 1) forwards; animation: growRight 1s cubic-bezier(0.4, 0, 0.2, 1) forwards;
animation-delay: calc(var(--delay) + 0.5s); // animation-delay: calc(var(--delay) + 0.5s);
} }
&:nth-child(2)::after { &:nth-child(2)::after {
transform-origin: left; transform-origin: left;
transform: scaleX(0); transform: scaleX(0);
animation: growLeft 2s cubic-bezier(0.4, 0, 0.2, 1) forwards; animation: growLeft 1s cubic-bezier(0.4, 0, 0.2, 1) forwards;
animation-delay: calc(var(--delay) + 0.5s); // animation-delay: calc(var(--delay) + 0.5s);
} }
&:nth-child(4)::before { &:nth-child(4)::before {
transform: translateX(-100%) scaleY(0); transform: translateX(-100%) scaleY(0);
transform-origin: top; transform-origin: top;
animation: growDown 2s cubic-bezier(0.4, 0, 0.2, 1) forwards; animation: growDown 1s cubic-bezier(0.4, 0, 0.2, 1) forwards;
animation-delay: calc(var(--delay) + 0.5s); // animation-delay: calc(var(--delay) + 0.5s);
} }
} }
} }

820
src/views/AwardPage/components/TimeLine.vue
View File

@@ -1,371 +1,515 @@
<template> <template>
<div <div
ref="containerRef" ref="containerRef"
class="timeline-container container flex flex-col align-center" class="timeline-container container flex flex-col align-center"
> :class="{ mobile: isMobileOrNarrow, vertical: showVertical }"
<div class="timeline-title">{{ $t('AwardsPage.competitionTimeline') }}</div> >
<div class="desc">{{ $t('AwardsPage.shapingTheFuture') }}</div> <div class="timeline-title">{{ $t('AwardsPage.competitionTimeline') }}</div>
<div <div class="desc">{{ $t('AwardsPage.shapingTheFuture') }}</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>
<!-- 描述行 --> <!-- 纵向时间线：移动端或宽度 <= 1200px -->
<div class="grid-row descs-row"> <div
<div v-if="showVertical"
class="grid-cell desc-cell" class="timeline-point timeline-vertical flex flex-col"
v-for="item in points" ref="timelineRef"
:key="'desc-' + item.time" >
> <div class="vertical-line"></div>
<div class="txt"> <div v-for="(item, index) in points" :key="'vertical-' + item.time" class="vertical-item">
{{ $t(item.desc) }} <div class="vertical-node">
</div> <img src="@/assets/images/award/point.png" class="point-icon" alt="" />
</div> </div>
</div> <div class="vertical-content">
</div> <div class="vertical-time">{{ $t(item.time) }}</div>
</div> <div class="vertical-label">{{ $t(item.label) }}</div>
<div class="vertical-desc">{{ $t(item.desc) }}</div>
</div>
</div>
</div>
<!-- 横向时间线：桌面端 -->
<div v-else 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" alt="" />
</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> </template>
<script setup lang="ts"> <script setup lang="ts">
import { nextTick, onBeforeUnmount, onMounted, ref, computed } from 'vue' import { nextTick, onBeforeUnmount, onMounted, ref, computed, inject } from 'vue'
import { useI18n } from 'vue-i18n' import { useI18n } from 'vue-i18n'
import { gsap } from 'gsap' import { gsap } from 'gsap'
const { t } = useI18n() const { t } = useI18n()
const containerRef = ref<HTMLElement | null>(null) const isMobile = inject<boolean>('isMobile')
const timelineRef = ref<HTMLElement | null>(null) const windowWidth = ref(typeof window !== 'undefined' ? window.innerWidth : 1201)
const hasAnimated = ref(false)
const points = ref([ const showVertical = computed(() => !!isMobile || windowWidth.value <= 1200)
{ const isMobileOrNarrow = computed(() => showVertical.value)
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 = () => { const updateWindowWidth = () => {
if (!containerRef.value || hasAnimated.value) return windowWidth.value = window.innerWidth
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() const containerRef = ref<HTMLElement | null>(null)
const timelineRef = ref<HTMLElement | null>(null)
const hasAnimated = ref(false)
// 我们使用一个统一的开始 label，使横线、timeline 裁剪与所有文字同时启动， const points = ref([
// 点图标在它们完成后立即开始。 {
tl.addLabel('start') 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'
}
])
// 整体 timeline 的裁剪展开（与 start 同步） const playAnimation = () => {
if (timeline) { if (!containerRef.value || hasAnimated.value) return
tl.fromTo( const title = containerRef.value.querySelector('.timeline-title')
timeline, const subtitle = containerRef.value.querySelector('.desc')
{ const timeline = containerRef.value.querySelector('.timeline-point')
clipPath: 'inset(0 100% 0 0)' const line = containerRef.value.querySelector(
}, showVertical.value ? '.vertical-line' : '.timeline-line'
{ )
clipPath: 'inset(0 0% 0 0)',
duration: 1.3,
ease: 'power1.out'
},
'start'
)
}
// 线条动画（与 start 同步） const tl = gsap.timeline()
if (line) { tl.addLabel('start')
tl.from(
line,
{
scaleX: 0,
transformOrigin: '0% 50%',
duration: 1.3,
ease: 'power1.out'
},
'start'
)
}
// 标题与副标题（与 start 同步） // 整体 timeline 的裁剪展开（仅横向使用）
if (title && subtitle) { // 纵向时跳过裁剪动画，改用每个 item 从上方落下的动画
tl.from( if (timeline && !showVertical.value) {
[title, subtitle], tl.fromTo(
{ timeline,
scaleX: 0, {
autoAlpha: 0.5, clipPath: 'inset(0 100% 0 0)'
transformOrigin: '50% 50%', },
duration: 0.6, {
stagger: 0.1, clipPath: 'inset(0 0% 0 0)',
ease: 'power2.out' duration: 1.3,
}, ease: 'power1.out'
'start' },
) 'start'
} )
}
// 行内文字（标签、时间、描述、图标）与 start 同步开始 // 线条动画：横向 scaleX，纵向 scaleY
const textItems = containerRef.value.querySelectorAll('.grid-cell') // 纵向时线条与 item 动画同步进行
if (textItems && textItems.length) { if (line) {
tl.from( if (showVertical.value) {
textItems, tl.from(
{ line,
// autoAlpha: 0.5, {
duration: 0.7, scaleY: 0,
stagger: 0.08, transformOrigin: '0% 0%',
ease: 'power2.out' duration: 1.0,
}, ease: 'power1.out'
'start' },
) 'start'
} )
} else {
tl.from(
line,
{
scaleX: 0,
transformOrigin: '0% 50%',
duration: 1.3,
ease: 'power1.out'
},
'start'
)
}
}
hasAnimated.value = true // 标题与副标题（与 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'
)
}
let observer: IntersectionObserver | null = null // 行内内容：桌面端用 .grid-cell，纵向用 .vertical-item
// 纵向时，每个 item 从上方落下 + 渐显
const textItems = showVertical.value
? containerRef.value.querySelectorAll('.vertical-item')
: containerRef.value.querySelectorAll('.grid-cell')
if (textItems && textItems.length) {
if (showVertical.value) {
// 纵向：每个 item 从上方落下 + 渐显
tl.from(
textItems,
{
y: -60,
opacity: 0,
duration: 0.6,
stagger: 0.15,
ease: 'power2.out'
},
'start+=0.2'
)
} else {
// 横向：保持原有动画
tl.from(
textItems,
{
duration: 0.7,
stagger: 0.08,
ease: 'power2.out'
},
'start'
)
}
}
onMounted(async () => { hasAnimated.value = true
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(() => { let observer: IntersectionObserver | null = null
if (observer && containerRef.value) {
observer.unobserve(containerRef.value) onMounted(async () => {
} if (typeof window !== 'undefined') {
observer = null windowWidth.value = window.innerWidth
}) window.addEventListener('resize', updateWindowWidth)
}
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 (typeof window !== 'undefined') {
window.removeEventListener('resize', updateWindowWidth)
}
if (observer && containerRef.value) {
observer.unobserve(containerRef.value)
}
observer = null
})
</script> </script>
<style scoped lang="less"> <style scoped lang="less">
.timeline-container { .timeline-container {
background: url('@/assets/images/award/timeline_bg.png') no-repeat; background: url('@/assets/images/award/timeline_bg.png') no-repeat;
background-size: 100% 100%; background-size: 100% 100%;
position: relative; position: relative;
padding: 12.8rem 0 15.9rem; padding: 12.8rem 0 15.9rem;
width: 100%; width: 100%;
color: #fff; color: #fff;
.timeline-title { .timeline-title {
font-family: 'PoppinsBold'; font-family: 'PoppinsBold';
font-weight: 600; font-weight: 600;
font-size: 4rem; font-size: 4rem;
text-align: center; text-align: center;
vertical-align: middle; vertical-align: middle;
margin-bottom: 2.4rem; margin-bottom: 2.4rem;
} }
.logo { .logo {
margin: 2.4rem 0 2.2rem 0; margin: 2.4rem 0 2.2rem 0;
} }
.desc { .desc {
font-family: 'Arial'; font-family: 'Arial';
font-size: 3rem; font-size: 3rem;
font-weight: 400; font-weight: 400;
color: #f95750; color: #f95750;
} }
.timeline-point { .timeline-point {
overflow: hidden; overflow: hidden;
will-change: clip-path; will-change: clip-path;
flex: 1; flex: 1;
width: 100%; width: 100%;
margin-top: 11rem; margin-top: 11rem;
padding: 0 13.8rem; padding: 0 13.8rem;
position: relative; position: relative;
z-index: 2; z-index: 2;
// 主网格布局：5列 // 主网格布局：5列
display: grid; display: grid;
grid-template-columns: repeat(5, 1fr); grid-template-columns: repeat(5, 1fr);
grid-template-rows: auto auto auto auto; grid-template-rows: auto auto auto auto;
grid-column-gap: 0; grid-column-gap: 0;
grid-row-gap: 0; grid-row-gap: 0;
// 所有 grid 子行的通用样式 // 所有 grid 子行的通用样式
.grid-row { .grid-row {
display: grid; display: grid;
grid-template-columns: repeat(5, 1fr); grid-template-columns: repeat(5, 1fr);
grid-column: 1 / -1; grid-column: 1 / -1;
} }
.grid-cell { .grid-cell {
display: flex; display: flex;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
text-align: center; text-align: center;
} }
// 图标行 // 图标行
.icons-row { .icons-row {
align-items: center; align-items: center;
height: 6.4rem; height: 6.4rem;
position: relative; position: relative;
z-index: 2; z-index: 2;
margin-bottom: 1.6rem; margin-bottom: 1.6rem;
.timeline-line { .timeline-line {
position: absolute; position: absolute;
top: 50%; top: 50%;
left: -22rem; left: -22rem;
right: -21.2rem; right: -21.2rem;
height: 0.15rem; height: 0.15rem;
background: linear-gradient( background: linear-gradient(
90deg, 90deg,
rgba(199, 52, 44, 0) 0%, rgba(199, 52, 44, 0) 0%,
rgba(199, 52, 44, 0.719626) 25.96%, rgba(199, 52, 44, 0.719626) 25.96%,
#c7342c 51.44%, #c7342c 51.44%,
rgba(199, 52, 44, 0.762376) 75.96%, rgba(199, 52, 44, 0.762376) 75.96%,
rgba(199, 52, 44, 0) 100% rgba(199, 52, 44, 0) 100%
); );
transform: translateY(-50%); transform: translateY(-50%);
z-index: 1; z-index: 1;
pointer-events: none; pointer-events: none;
} }
.icon-cell { .icon-cell {
position: relative; position: relative;
.point-icon { .point-icon {
width: 6.4rem; width: 6.4rem;
height: 6.4rem; height: 6.4rem;
display: block; display: block;
position: relative; position: relative;
z-index: 2; z-index: 2;
} }
} }
} }
// 标签行 // 标签行
.labels-row { .labels-row {
margin-bottom: 8rem; margin-bottom: 8rem;
position: relative; position: relative;
z-index: 2; z-index: 2;
.label-cell { .label-cell {
flex-direction: column; flex-direction: column;
color: #fff; color: #fff;
font-family: 'PoppinsBold'; font-family: 'PoppinsBold';
font-weight: 600; font-weight: 600;
font-size: 2.8rem; font-size: 2.8rem;
white-space: pre-line; white-space: pre-line;
justify-content: center; justify-content: center;
min-height: 6rem; min-height: 6rem;
// .sub-label { // .sub-label {
// font-family: 'Arial'; // font-family: 'Arial';
// font-weight: 400; // font-weight: 400;
// font-size: 1.4rem; // font-size: 1.4rem;
// color: rgba(255, 255, 255, 0.8); // color: rgba(255, 255, 255, 0.8);
// margin-top: 0.4rem; // margin-top: 0.4rem;
// } // }
} }
} }
// 时间行 // 时间行
.times-row { .times-row {
margin-bottom: 6rem; margin-bottom: 6rem;
z-index: 2; z-index: 2;
position: relative; position: relative;
.time-cell { .time-cell {
color: #f95750; color: #f95750;
font-family: 'Arial'; font-family: 'Arial';
font-weight: 400; font-weight: 400;
font-size: 2.8rem; font-size: 2.8rem;
line-height: 4.5rem; line-height: 4.5rem;
} }
} }
// 描述行 // 描述行
.descs-row { .descs-row {
.desc-cell { .desc-cell {
.txt { .txt {
font-family: 'Arial'; font-family: 'Arial';
font-weight: 400; font-weight: 400;
font-size: 2rem; font-size: 2rem;
text-align: center; text-align: center;
color: #e0e0e0; color: #e0e0e0;
width: 100%; width: 100%;
max-width: 31.2rem; max-width: 31.2rem;
min-height: 10.2rem; min-height: 10.2rem;
white-space: pre-line; white-space: pre-line;
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
} }
} }
} }
} }
} &.mobile {
height: auto;
min-height: 127.4rem;
padding: 6rem 7rem 6.6rem;
background: url('@/assets/images/mobile_version_background/timeline_bg.png') no-repeat;
background-size: 100% 100%;
.timeline-vertical {
display: flex;
width: 100%;
margin-top: 4rem;
padding: 0;
position: relative;
overflow: hidden;
will-change: clip-path;
justify-content: center;
row-gap: 6rem;
.vertical-line {
position: absolute;
left: 1.5rem; // 与节点中心对齐 (3.2rem/2 - 0.1rem)
top: 2.4rem;
bottom: 2.4rem;
width: 0.2rem;
background: linear-gradient(
180deg,
rgba(199, 52, 44, 0) 0%,
rgba(199, 52, 44, 0.72) 20%,
#c7342c 50%,
rgba(199, 52, 44, 0.76) 80%,
rgba(199, 52, 44, 0) 100%
);
z-index: 1;
transform-origin: 0% 0%;
}
.vertical-item {
position: relative;
display: flex;
align-items: flex-start;
gap: 2rem;
padding-bottom: 3.2rem;
z-index: 2;
will-change: transform, opacity;
&:last-child {
padding-bottom: 0;
}
}
.vertical-node {
flex-shrink: 0;
width: 3.2rem;
height: 3.2rem;
margin-left: 0;
margin-top: 0.4rem;
position: relative;
z-index: 2;
.point-icon {
width: 100%;
height: 100%;
display: block;
object-fit: contain;
}
}
.vertical-content {
flex: 1;
text-align: left;
min-width: 0;
}
.vertical-time {
font-family: 'Arial';
font-size: 2rem;
font-weight: 400;
color: #f95750;
line-height: 1.4;
margin-bottom: 0.4rem;
}
.vertical-label {
font-family: 'PoppinsBold';
font-weight: 600;
font-size: 2.2rem;
color: #fff;
line-height: 1.35;
margin-bottom: 0.8rem;
}
.vertical-desc {
font-family: 'Arial';
font-size: 2rem;
font-weight: 400;
color: #e0e0e0;
line-height: 1.5;
}
}
}
}
</style> </style>

6
src/views/AwardPage/index.vue
View File

@@ -29,7 +29,7 @@
</template> </template>
<script setup lang="ts"> <script setup lang="ts">
import { ref, computed, onMounted } from 'vue' import { ref, computed, onMounted, provide } from 'vue'
import { useI18n } from 'vue-i18n' import { useI18n } from 'vue-i18n'
import { useRouter } from 'vue-router' import { useRouter } from 'vue-router'
import JudgesSection from './components/JudgesSection.vue' import JudgesSection from './components/JudgesSection.vue'
@@ -48,6 +48,8 @@ const { isMobile } = useIsMobile()
const router = useRouter() const router = useRouter()
const { locale } = useI18n() const { locale } = useI18n()
provide('isMobile', isMobile)
onMounted(() => { onMounted(() => {
router.replace('/') router.replace('/')
}) })
@@ -141,7 +143,7 @@ const handleSubmitApplication = () => {
height: 123.4rem; height: 123.4rem;
.submit-btn { .submit-btn {
bottom: 57rem; bottom: 57rem;
left: 6.6rem; left: 6.6rem;
} }
} }
} }