296 lines
7.4 KiB
Vue
296 lines
7.4 KiB
Vue
<template>
|
|
<div
|
|
class="prizes-container container flex align-center space-between"
|
|
ref="prizesRef"
|
|
:class="{ mobile: isMobile && !isPad, 'flex-col': isMobile && !isPad, 'is-pad': isPad }"
|
|
>
|
|
<div class="left flex flex-col flex-center">
|
|
<div class="title" ref="prizesTitleRef">
|
|
{{ $t('AwardsPage.awardPrizes') }}
|
|
</div>
|
|
<!-- <img src="@/assets/images/award/bloom_logo.png" class="logo" /> -->
|
|
<div class="desc" ref="prizesSubTitleRef">
|
|
{{ $t('AwardsPage.recognition') }}
|
|
</div>
|
|
</div>
|
|
<div class="right" ref="prizesRightRef">
|
|
<div
|
|
class="prize-item flex flex-col flex-center"
|
|
:class="{ smaller: item.smaller }"
|
|
v-for="item in prizes"
|
|
:key="item.name"
|
|
>
|
|
<div class="prize-money">
|
|
{{ $t(item.money) }}
|
|
</div>
|
|
<div class="prize-name">{{ $t(item.name) }}</div>
|
|
<div class="prize-desc flex flex-col flex-center">
|
|
<div class="desc-item" v-for="el in item.desc">
|
|
{{ $t(el) }}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import { nextTick, onBeforeUnmount, onMounted, ref, inject } from 'vue'
|
|
import { useI18n } from 'vue-i18n'
|
|
import { gsap } from 'gsap'
|
|
|
|
const { t } = useI18n()
|
|
const isMobile = inject<boolean>('isMobile')
|
|
const isPad = inject<boolean>('isPad')
|
|
|
|
const props = defineProps({
|
|
isZh: {
|
|
type: Boolean,
|
|
default: false
|
|
}
|
|
})
|
|
|
|
const prizes = [
|
|
{
|
|
money: 'AwardsPage.grandMoney',
|
|
name: 'AwardsPage.grandAwards',
|
|
desc: ['AwardsPage.cashAward', 'AwardsPage.awardCertificate', 'AwardsPage.globalMediaExposure']
|
|
},
|
|
{
|
|
money: 'AwardsPage.goldMoney',
|
|
name: 'AwardsPage.goldAwards',
|
|
desc: ['AwardsPage.cashAward', 'AwardsPage.awardCertificate', 'AwardsPage.globalMediaExposure']
|
|
},
|
|
{
|
|
money: 'AwardsPage.silverMoney',
|
|
name: 'AwardsPage.silverAwards',
|
|
desc: ['AwardsPage.cashAward', 'AwardsPage.awardCertificate', 'AwardsPage.globalMediaExposure']
|
|
},
|
|
{
|
|
money: 'AwardsPage.awardCertification',
|
|
name: 'AwardsPage.finalists',
|
|
desc: ['AwardsPage.TravelAllowance', 'AwardsPage.globalMediaExposure'],
|
|
smaller: !props.isZh
|
|
}
|
|
]
|
|
|
|
const prizesRef = ref<HTMLElement | null>(null)
|
|
const prizesTitleRef = ref<HTMLElement | null>(null)
|
|
const prizesSubTitleRef = ref<HTMLElement | null>(null)
|
|
const prizesRightRef = ref<HTMLElement | null>(null)
|
|
const hasPlayedPrizesAnim = ref(false)
|
|
let prizesObserver: IntersectionObserver | null = null
|
|
|
|
const setupPrizesInitialState = () => {
|
|
const titleEls = [prizesTitleRef.value, prizesSubTitleRef.value].filter(Boolean) as HTMLElement[]
|
|
if (titleEls.length) {
|
|
gsap.set(titleEls, {
|
|
opacity: 0,
|
|
scale: 0,
|
|
transformOrigin: '50% 50%'
|
|
})
|
|
}
|
|
if (prizesRightRef.value) {
|
|
gsap.set(prizesRightRef.value, {
|
|
opacity: 0,
|
|
y: 40,
|
|
scale: 1.08,
|
|
'--prize-row-gap': '2rem',
|
|
'--prize-col-gap': '2rem'
|
|
})
|
|
}
|
|
}
|
|
|
|
const playPrizesAnimation = () => {
|
|
if (hasPlayedPrizesAnim.value) return
|
|
const titleEls = [prizesTitleRef.value, prizesSubTitleRef.value].filter(Boolean) as HTMLElement[]
|
|
|
|
const tl = gsap.timeline({ defaults: { ease: 'power2.out' } })
|
|
if (titleEls.length) {
|
|
tl.to(titleEls, {
|
|
opacity: 1,
|
|
scale: 1,
|
|
duration: 0.6,
|
|
ease: 'back.out(1.6)',
|
|
stagger: 0.1
|
|
})
|
|
}
|
|
if (prizesRightRef.value) {
|
|
tl.to(
|
|
prizesRightRef.value,
|
|
{
|
|
opacity: 1,
|
|
y: 0,
|
|
scale: 1,
|
|
'--prize-row-gap': '4.2rem',
|
|
'--prize-col-gap': '4.4rem',
|
|
duration: 0.55,
|
|
ease: 'back.out(1.4)'
|
|
},
|
|
titleEls.length ? '-=0.15' : 0
|
|
)
|
|
}
|
|
|
|
hasPlayedPrizesAnim.value = true
|
|
prizesObserver?.disconnect()
|
|
}
|
|
|
|
onMounted(() => {
|
|
nextTick(() => {
|
|
setupPrizesInitialState()
|
|
if ('IntersectionObserver' in window) {
|
|
prizesObserver = new IntersectionObserver(
|
|
(entries) => {
|
|
entries.forEach((entry) => {
|
|
if (entry.isIntersecting) {
|
|
playPrizesAnimation()
|
|
}
|
|
})
|
|
},
|
|
{ threshold: 0.25 }
|
|
)
|
|
if (prizesRef.value) prizesObserver.observe(prizesRef.value)
|
|
} else {
|
|
playPrizesAnimation()
|
|
}
|
|
})
|
|
})
|
|
|
|
onBeforeUnmount(() => {
|
|
prizesObserver?.disconnect()
|
|
})
|
|
</script>
|
|
|
|
<style scoped lang="less">
|
|
.prizes-container {
|
|
background: url('@/assets/images/award/prizes_bg.png') no-repeat;
|
|
background-size: 100% 100%;
|
|
padding: 0 21.4rem 0 34.2rem;
|
|
box-sizing: border-box;
|
|
.left {
|
|
row-gap: 3.6rem;
|
|
.title {
|
|
text-align: center;
|
|
font-family: 'PoppinsBold';
|
|
font-weight: 600;
|
|
font-size: 4rem;
|
|
color: #fff;
|
|
}
|
|
.desc {
|
|
text-align: center;
|
|
color: #f95750;
|
|
font-family: 'Poppins';
|
|
font-weight: 400;
|
|
font-size: 3rem;
|
|
}
|
|
}
|
|
.right {
|
|
// height: 45.4rem;
|
|
// padding: 4.6rem 6.1rem 4.6rem 0;
|
|
box-sizing: border-box;
|
|
display: grid;
|
|
grid-template-columns: repeat(2, 1fr);
|
|
grid-template-rows: repeat(2, 1fr);
|
|
row-gap: var(--prize-row-gap, 4.2rem);
|
|
column-gap: var(--prize-col-gap, 4.4rem);
|
|
// flex: 1;
|
|
.prize-item {
|
|
width: 35.5rem;
|
|
height: 32.8rem;
|
|
color: #fff;
|
|
padding: 4.5rem 0 4.8rem 0;
|
|
justify-content: space-between;
|
|
background: url('@/assets/images/award/first_bg.png') no-repeat;
|
|
background-size: 100% 100%;
|
|
&:nth-of-type(2) {
|
|
background: url('@/assets/images/award/second_bg.png') no-repeat;
|
|
background-size: 100% 100%;
|
|
}
|
|
&:nth-of-type(3) {
|
|
background: url('@/assets/images/award/grand_bg.png') no-repeat;
|
|
background-size: 100% 100%;
|
|
}
|
|
&:nth-of-type(4) {
|
|
background: url('@/assets/images/award/certification_bg.png') no-repeat;
|
|
background-size: 100% 100%;
|
|
}
|
|
&.smaller {
|
|
.prize-money {
|
|
font-size: 3.6rem;
|
|
line-height: 3.8rem;
|
|
}
|
|
}
|
|
.prize-money {
|
|
font-family: 'PoppinsBold';
|
|
font-weight: bold;
|
|
font-size: 4rem;
|
|
white-space: pre-line;
|
|
text-align: center;
|
|
line-height: 7.6rem;
|
|
&.smaller {
|
|
font-size: 3.6rem;
|
|
}
|
|
}
|
|
.prize-name {
|
|
font-family: 'PoppinsMedium';
|
|
font-weight: 500;
|
|
font-size: 2.8rem;
|
|
}
|
|
.prize-desc {
|
|
color: #e0e0e0;
|
|
font-family: 'Arial';
|
|
font-weight: 400;
|
|
font-size: 2rem;
|
|
line-height: 3rem;
|
|
height: 8.9rem;
|
|
}
|
|
}
|
|
}
|
|
&.mobile {
|
|
height: 102.8rem;
|
|
padding: 6rem 6.6rem 0;
|
|
background: url('@/assets/images/mobile_version_background/prizes_bg.png') no-repeat;
|
|
background-size: 100% 100%;
|
|
justify-content: flex-start;
|
|
row-gap: 6rem;
|
|
.left {
|
|
row-gap: 0.8rem;
|
|
.title {
|
|
font-size: 3.2rem;
|
|
}
|
|
.desc {
|
|
font-size: 2.4rem;
|
|
}
|
|
}
|
|
.right {
|
|
.prize-item {
|
|
width: 29.2rem;
|
|
height: 27rem;
|
|
padding: 5rem 3rem;
|
|
row-gap: 1.8rem;
|
|
&,
|
|
&.smaller .prize-money {
|
|
font-size: 2.8rem;
|
|
line-height: 1;
|
|
}
|
|
|
|
.prize-name {
|
|
font-size: 2.4rem;
|
|
}
|
|
.prize-desc {
|
|
font-size: 2rem;
|
|
line-height: 2.6rem;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
&.is-pad {
|
|
background: url('@/assets/images/pad_version/prizes-bg.png') no-repeat;
|
|
background-size: 100% 100%;
|
|
padding: 0 6rem;
|
|
justify-content: center;
|
|
column-gap: 10rem;
|
|
}
|
|
}
|
|
</style>
|