style: 页面动画效果
This commit is contained in:
209
src/views/AwardPage/components/ApplySection.vue
Normal file
209
src/views/AwardPage/components/ApplySection.vue
Normal file
@@ -0,0 +1,209 @@
|
|||||||
|
<template>
|
||||||
|
<div class="apply-container container flex flex-col" ref="applyRef">
|
||||||
|
<div class="title" ref="applyTitleRef">How to Apply</div>
|
||||||
|
<div class="sub-title" ref="applySubTitleRef">Requirments</div>
|
||||||
|
<div class="requirments-list flex" ref="reqListRef">
|
||||||
|
<div class="left flex flex-col space-between">
|
||||||
|
<div class="item-box" v-for="item in leftRequirment" :key="item.type">
|
||||||
|
<div class="item-header flex align-center">
|
||||||
|
<img src="@/assets/images/award/bloom_logo.png" class="logo" />
|
||||||
|
<div class="item-title">{{ item.type }}</div>
|
||||||
|
</div>
|
||||||
|
<div class="context" v-for="el in item.desc">
|
||||||
|
{{ el }}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="right">
|
||||||
|
<div class="item-box">
|
||||||
|
<div class="item-box">
|
||||||
|
<div class="item-header flex align-center">
|
||||||
|
<img src="@/assets/images/award/bloom_logo.png" class="logo" />
|
||||||
|
<div class="item-title">{{ rightRequirment.type }}</div>
|
||||||
|
</div>
|
||||||
|
<div class="context" v-for="el in rightRequirment.desc">
|
||||||
|
{{ el }}
|
||||||
|
</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: 'Video',
|
||||||
|
desc: ['The process of doing design']
|
||||||
|
},
|
||||||
|
{
|
||||||
|
type: 'Design',
|
||||||
|
desc: [
|
||||||
|
'Structure: design title, moodboard and elaboration (how will you use AiDA to design)',
|
||||||
|
'Design sketch: Maximum 4 outfit design with proposed materials'
|
||||||
|
]
|
||||||
|
}
|
||||||
|
])
|
||||||
|
|
||||||
|
const rightRequirment = ref({
|
||||||
|
type: 'Submission Format',
|
||||||
|
desc: [
|
||||||
|
'Naming as “AiDA global award 2026_applicantname”',
|
||||||
|
'Mp4\n(1080x1920pixels/20mb within 1min)',
|
||||||
|
'Single PDF file\n(within 15 pages, maximum 20mb)',
|
||||||
|
'English or native language\nwith English translation'
|
||||||
|
]
|
||||||
|
})
|
||||||
|
|
||||||
|
const applyRef = ref<HTMLElement | null>(null)
|
||||||
|
const applyTitleRef = ref<HTMLElement | null>(null)
|
||||||
|
const applySubTitleRef = ref<HTMLElement | null>(null)
|
||||||
|
const reqListRef = ref<HTMLElement | null>(null)
|
||||||
|
const hasPlayedApplyAnim = ref(false)
|
||||||
|
let applyObserver: 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 headers = reqListRef.value?.querySelectorAll<HTMLElement>('.item-header')
|
||||||
|
const contexts = reqListRef.value?.querySelectorAll<HTMLElement>('.context')
|
||||||
|
gsap.set([headers, contexts], { opacity: 0 })
|
||||||
|
}
|
||||||
|
|
||||||
|
const playApplyAnimation = () => {
|
||||||
|
if (hasPlayedApplyAnim.value) return
|
||||||
|
const titleEls = [applyTitleRef.value, applySubTitleRef.value].filter(
|
||||||
|
Boolean
|
||||||
|
) as HTMLElement[]
|
||||||
|
const headers = reqListRef.value?.querySelectorAll<HTMLElement>('.item-header')
|
||||||
|
const contexts = reqListRef.value?.querySelectorAll<HTMLElement>('.context')
|
||||||
|
if (!titleEls.length) return
|
||||||
|
|
||||||
|
const tl = gsap.timeline({ defaults: { ease: 'power2.out' } })
|
||||||
|
tl.to(titleEls, {
|
||||||
|
opacity: 1,
|
||||||
|
scale: 1,
|
||||||
|
duration: 0.6,
|
||||||
|
ease: 'back.out(1.6)',
|
||||||
|
stagger: 0.1
|
||||||
|
})
|
||||||
|
if (headers?.length) {
|
||||||
|
tl.to(
|
||||||
|
headers,
|
||||||
|
{
|
||||||
|
opacity: 1,
|
||||||
|
duration: 0.4,
|
||||||
|
stagger: 0.1
|
||||||
|
},
|
||||||
|
'-=0.1'
|
||||||
|
)
|
||||||
|
}
|
||||||
|
if (contexts?.length) {
|
||||||
|
tl.to(
|
||||||
|
contexts,
|
||||||
|
{
|
||||||
|
opacity: 1,
|
||||||
|
duration: 0.4,
|
||||||
|
stagger: 0.05
|
||||||
|
},
|
||||||
|
'-=0.05'
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
hasPlayedApplyAnim.value = true
|
||||||
|
applyObserver?.disconnect()
|
||||||
|
}
|
||||||
|
|
||||||
|
onMounted(() => {
|
||||||
|
nextTick(() => {
|
||||||
|
setupApplyInitialState()
|
||||||
|
if ('IntersectionObserver' in window) {
|
||||||
|
applyObserver = new IntersectionObserver(
|
||||||
|
(entries) => {
|
||||||
|
entries.forEach((entry) => {
|
||||||
|
if (entry.isIntersecting) {
|
||||||
|
playApplyAnimation()
|
||||||
|
}
|
||||||
|
})
|
||||||
|
},
|
||||||
|
{ threshold: 0.25 }
|
||||||
|
)
|
||||||
|
if (applyRef.value) applyObserver.observe(applyRef.value)
|
||||||
|
} else {
|
||||||
|
playApplyAnimation()
|
||||||
|
}
|
||||||
|
})
|
||||||
|
})
|
||||||
|
|
||||||
|
onBeforeUnmount(() => {
|
||||||
|
applyObserver?.disconnect()
|
||||||
|
})
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped lang="less">
|
||||||
|
.apply-container {
|
||||||
|
flex: 1;
|
||||||
|
background: url('@/assets/images/award/apply_bg.png') no-repeat;
|
||||||
|
background-size: 100% 100%;
|
||||||
|
padding: 12.7rem 0 16.9rem;
|
||||||
|
.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;
|
||||||
|
}
|
||||||
|
.requirments-list {
|
||||||
|
flex: 1;
|
||||||
|
padding-left: 41.4rem;
|
||||||
|
column-gap: 17.7rem;
|
||||||
|
margin-top: 12rem;
|
||||||
|
.left {
|
||||||
|
color: #232323;
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
|
.item-box {
|
||||||
|
.item-header {
|
||||||
|
column-gap: 3.2rem;
|
||||||
|
.item-title {
|
||||||
|
color: #232323;
|
||||||
|
font-family: 'PoppinsBold';
|
||||||
|
font-weight: 600;
|
||||||
|
font-size: 2.8rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.context {
|
||||||
|
margin-top: 4rem;
|
||||||
|
width: 46.8rem;
|
||||||
|
color: #585858;
|
||||||
|
font-family: 'Arial';
|
||||||
|
font-weight: 400;
|
||||||
|
line-height: 3rem;
|
||||||
|
font-size: 2.4rem;
|
||||||
|
padding-left: 5.6rem;
|
||||||
|
white-space: pre-line;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
227
src/views/AwardPage/components/JudgesSection.vue
Normal file
227
src/views/AwardPage/components/JudgesSection.vue
Normal file
@@ -0,0 +1,227 @@
|
|||||||
|
<template>
|
||||||
|
<div class="judges-container flex flex-col align-center">
|
||||||
|
<div class="title" ref="judgesTitleRef">Panel of Judges</div>
|
||||||
|
<!-- <img src="@/assets/images/award/bloom_logo.png" class="logo" /> -->
|
||||||
|
<div class="sub-title" ref="judgesSubTitleRef">Expertise</div>
|
||||||
|
<div class="judgement-list" ref="judgementListRef">
|
||||||
|
<div
|
||||||
|
class="judgement-item flex flex-col align-center"
|
||||||
|
v-for="item in judgements"
|
||||||
|
:key="item.name"
|
||||||
|
>
|
||||||
|
<img :src="item.picture" class="picture" />
|
||||||
|
<div class="name">{{ item.name }}</div>
|
||||||
|
<div class="desc">{{ item.desc }}</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup lang="ts">
|
||||||
|
import { onBeforeUnmount, onMounted, nextTick, ref } from 'vue'
|
||||||
|
import { gsap } from 'gsap'
|
||||||
|
import jae from '@/assets/images/award/jae.png'
|
||||||
|
import diego from '@/assets/images/award/diego.png'
|
||||||
|
import gregory from '@/assets/images/award/gregory.png'
|
||||||
|
import vincenzo from '@/assets/images/award/vincenzo.png'
|
||||||
|
import tim from '@/assets/images/award/tim.png'
|
||||||
|
import desmond from '@/assets/images/award/desmond.png'
|
||||||
|
|
||||||
|
const judgements = [
|
||||||
|
{
|
||||||
|
picture: jae,
|
||||||
|
name: 'Jae Hyuk Lim',
|
||||||
|
desc: 'Code-create\nKorea Branch Director\nBesfxxk creative director'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
picture: diego,
|
||||||
|
name: 'Diego Dultzin Lacoste',
|
||||||
|
desc: 'Co-founder & Chief Father\nOfficer of OnTheList\n(Hong Kong)'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
picture: gregory,
|
||||||
|
name: 'Gregory de la Hogue Moran',
|
||||||
|
desc: 'Senior Designer at\nGabriela Heasrst (Italy)'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
picture: vincenzo,
|
||||||
|
name: 'Vincenzo La Torre',
|
||||||
|
desc: 'Cheif Editor of SCMP Style\n(Hong Kong)'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
picture: tim,
|
||||||
|
name: 'Tim Lim',
|
||||||
|
desc: 'Group Fashion Direction of\n Modern Media Group\n(Shanghai)'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
picture: desmond,
|
||||||
|
name: 'Desmond Lim',
|
||||||
|
desc: 'Cheif Editor of Vogue\n(Singapore)'
|
||||||
|
}
|
||||||
|
]
|
||||||
|
|
||||||
|
const judgesTitleRef = ref<HTMLElement | null>(null)
|
||||||
|
const judgesSubTitleRef = ref<HTMLElement | null>(null)
|
||||||
|
const judgementListRef = ref<HTMLElement | null>(null)
|
||||||
|
const hasPlayedJudgementAnim = ref(false)
|
||||||
|
let judgementObserver: IntersectionObserver | null = null
|
||||||
|
|
||||||
|
const setupJudgementInitialState = () => {
|
||||||
|
const titleEls = [judgesTitleRef.value, judgesSubTitleRef.value].filter(
|
||||||
|
Boolean
|
||||||
|
) as HTMLElement[]
|
||||||
|
if (titleEls.length) {
|
||||||
|
gsap.set(titleEls, {
|
||||||
|
opacity: 0,
|
||||||
|
scale: 0,
|
||||||
|
transformOrigin: '50% 50%'
|
||||||
|
})
|
||||||
|
}
|
||||||
|
const items =
|
||||||
|
judgementListRef.value?.querySelectorAll<HTMLElement>('.judgement-item')
|
||||||
|
if (items?.length) {
|
||||||
|
gsap.set(items, {
|
||||||
|
opacity: 0,
|
||||||
|
clipPath: 'inset(0 0 100% 0)'
|
||||||
|
})
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
const playJudgementAnimation = () => {
|
||||||
|
if (hasPlayedJudgementAnim.value) return
|
||||||
|
const titleEls = [judgesTitleRef.value, judgesSubTitleRef.value].filter(
|
||||||
|
Boolean
|
||||||
|
) as HTMLElement[]
|
||||||
|
const listEl = judgementListRef.value
|
||||||
|
if (!titleEls.length || !listEl) return
|
||||||
|
|
||||||
|
const items = Array.from(
|
||||||
|
listEl.querySelectorAll<HTMLElement>('.judgement-item')
|
||||||
|
)
|
||||||
|
const tl = gsap.timeline({ defaults: { ease: 'power2.out' } })
|
||||||
|
|
||||||
|
tl.to(titleEls, {
|
||||||
|
opacity: 1,
|
||||||
|
scale: 1,
|
||||||
|
duration: 0.4,
|
||||||
|
ease: 'back.out(1.6)',
|
||||||
|
stagger: 0.1
|
||||||
|
})
|
||||||
|
if (items.length) {
|
||||||
|
const firstRow = items.slice(0, 3)
|
||||||
|
const secondRow = items.slice(3)
|
||||||
|
|
||||||
|
if (firstRow.length) {
|
||||||
|
tl.to(
|
||||||
|
firstRow,
|
||||||
|
{
|
||||||
|
opacity: 1,
|
||||||
|
clipPath: 'inset(0% 0% 0% 0%)',
|
||||||
|
duration: 0.45,
|
||||||
|
stagger: 0.05
|
||||||
|
},
|
||||||
|
'-=0.2'
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
if (secondRow.length) {
|
||||||
|
tl.to(
|
||||||
|
secondRow,
|
||||||
|
{
|
||||||
|
opacity: 1,
|
||||||
|
clipPath: 'inset(0% 0% 0% 0%)',
|
||||||
|
duration: 0.45,
|
||||||
|
stagger: 0.05
|
||||||
|
},
|
||||||
|
'+=0.1'
|
||||||
|
)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
hasPlayedJudgementAnim.value = true
|
||||||
|
judgementObserver?.disconnect()
|
||||||
|
}
|
||||||
|
|
||||||
|
onMounted(() => {
|
||||||
|
nextTick(() => {
|
||||||
|
setupJudgementInitialState()
|
||||||
|
if ('IntersectionObserver' in window) {
|
||||||
|
judgementObserver = new IntersectionObserver(
|
||||||
|
(entries) => {
|
||||||
|
entries.forEach((entry) => {
|
||||||
|
if (entry.isIntersecting) {
|
||||||
|
playJudgementAnimation()
|
||||||
|
}
|
||||||
|
})
|
||||||
|
},
|
||||||
|
{ threshold: 0.3 }
|
||||||
|
)
|
||||||
|
if (judgementListRef.value) {
|
||||||
|
judgementObserver.observe(judgementListRef.value)
|
||||||
|
}
|
||||||
|
} else {
|
||||||
|
// Fallback: play immediately if IntersectionObserver unsupported
|
||||||
|
playJudgementAnimation()
|
||||||
|
}
|
||||||
|
})
|
||||||
|
})
|
||||||
|
|
||||||
|
onBeforeUnmount(() => {
|
||||||
|
judgementObserver?.disconnect()
|
||||||
|
})
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped lang="less">
|
||||||
|
.judges-container {
|
||||||
|
height: 147.4rem;
|
||||||
|
background: url('@/assets/images/award/judges_bg.png') no-repeat;
|
||||||
|
background-size: 100% 100%;
|
||||||
|
padding-top: 12.8rem;
|
||||||
|
.title {
|
||||||
|
color: #232323;
|
||||||
|
font-family: 'PoppinsBold';
|
||||||
|
font-weight: 600;
|
||||||
|
font-size: 4rem;
|
||||||
|
}
|
||||||
|
.logo {
|
||||||
|
margin: 2.4rem 0 2.2rem;
|
||||||
|
}
|
||||||
|
.sub-title {
|
||||||
|
color: #b10000;
|
||||||
|
font-family: 'Arial';
|
||||||
|
font-weight: 400;
|
||||||
|
font-size: 3rem;
|
||||||
|
margin-bottom: 12rem;
|
||||||
|
}
|
||||||
|
.judgement-list {
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: repeat(3, 1fr);
|
||||||
|
column-gap: 23.22rem;
|
||||||
|
row-gap: 8rem;
|
||||||
|
padding: 0 25rem 0 26.6rem;
|
||||||
|
.judgement-item {
|
||||||
|
overflow: hidden;
|
||||||
|
.picture {
|
||||||
|
width: 20.2rem;
|
||||||
|
height: 26rem;
|
||||||
|
border-radius: 0.8rem;
|
||||||
|
}
|
||||||
|
.name {
|
||||||
|
margin: 3rem 0 2.4rem;
|
||||||
|
color: #232323;
|
||||||
|
font-family: 'PoppinsBold';
|
||||||
|
font-weight: 600;
|
||||||
|
font-size: 2.4rem;
|
||||||
|
}
|
||||||
|
.desc {
|
||||||
|
color: #585858;
|
||||||
|
font-family: 'Arial';
|
||||||
|
font-weight: 400;
|
||||||
|
font-size: 2rem;
|
||||||
|
white-space: pre-line;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
234
src/views/AwardPage/components/PrizesSection.vue
Normal file
234
src/views/AwardPage/components/PrizesSection.vue
Normal file
@@ -0,0 +1,234 @@
|
|||||||
|
<template>
|
||||||
|
<div
|
||||||
|
class="prizes-container container flex align-center space-between"
|
||||||
|
ref="prizesRef"
|
||||||
|
>
|
||||||
|
<div class="left flex flex-col flex-center">
|
||||||
|
<div
|
||||||
|
class="title"
|
||||||
|
ref="prizesTitleRef"
|
||||||
|
>
|
||||||
|
Award & Prizes
|
||||||
|
</div>
|
||||||
|
<!-- <img src="@/assets/images/award/bloom_logo.png" class="logo" /> -->
|
||||||
|
<div
|
||||||
|
class="desc"
|
||||||
|
ref="prizesSubTitleRef"
|
||||||
|
>
|
||||||
|
Recongnition
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div
|
||||||
|
class="right"
|
||||||
|
ref="prizesRightRef"
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
class="prize-item flex flex-col flex-center"
|
||||||
|
v-for="item in prizes"
|
||||||
|
:key="item.name"
|
||||||
|
>
|
||||||
|
<div class="prize-money">{{ item.money }}</div>
|
||||||
|
<div class="prize-name">{{ item.name }}</div>
|
||||||
|
<div class="prize-desc flex flex-col flex-center">
|
||||||
|
<div
|
||||||
|
class="desc-item"
|
||||||
|
v-for="el in item.desc"
|
||||||
|
>
|
||||||
|
{{ el }}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup lang="ts">
|
||||||
|
import { nextTick, onBeforeUnmount, onMounted, ref } from 'vue'
|
||||||
|
import { gsap } from 'gsap'
|
||||||
|
|
||||||
|
const prizes = [
|
||||||
|
{
|
||||||
|
money: 'US$5000',
|
||||||
|
name: 'Grand Prize',
|
||||||
|
desc: ['Cash Award', 'Award Ceritificate', 'Global Media Exposure']
|
||||||
|
},
|
||||||
|
{
|
||||||
|
money: 'US$3000',
|
||||||
|
name: 'First Runner-Up',
|
||||||
|
desc: ['Cash Award', 'Award Ceritificate', 'Global Media Exposure']
|
||||||
|
},
|
||||||
|
{
|
||||||
|
money: 'US$2000',
|
||||||
|
name: 'Second Runner-Up',
|
||||||
|
desc: ['Cash Award', 'Award Ceritificate', 'Global Media Exposure']
|
||||||
|
},
|
||||||
|
{
|
||||||
|
money: 'Certification',
|
||||||
|
name: 'Finalists',
|
||||||
|
desc: ['Award Ceritificate', 'Global Media Exposure']
|
||||||
|
}
|
||||||
|
]
|
||||||
|
|
||||||
|
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
|
||||||
|
})
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
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,
|
||||||
|
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: 4.2rem;
|
||||||
|
column-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%;
|
||||||
|
}
|
||||||
|
.prize-money {
|
||||||
|
font-family: 'PoppinsBold';
|
||||||
|
font-weight: bold;
|
||||||
|
font-size: 4rem;
|
||||||
|
}
|
||||||
|
.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;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
173
src/views/AwardPage/components/SelectionSection.vue
Normal file
173
src/views/AwardPage/components/SelectionSection.vue
Normal file
@@ -0,0 +1,173 @@
|
|||||||
|
<template>
|
||||||
|
<div
|
||||||
|
class="selection-container container flex flex-col align-center"
|
||||||
|
ref="selectionRef"
|
||||||
|
>
|
||||||
|
<div class="title">Selection Criteria</div>
|
||||||
|
<!-- <img src="@/assets/images/award/bloom_logo.png" class="logo" /> -->
|
||||||
|
<div class="sub-title">Evaluation</div>
|
||||||
|
<div class="criteria-list flex" ref="criteriaListRef">
|
||||||
|
<div
|
||||||
|
class="item flex flex-col align-center"
|
||||||
|
v-for="item in criteriaList"
|
||||||
|
:key="item.name"
|
||||||
|
>
|
||||||
|
<img :src="item.icon" class="icon" :style="item.style" />
|
||||||
|
<div class="name">{{ item.name }}</div>
|
||||||
|
<div class="desc">{{ item.desc }}</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup lang="ts">
|
||||||
|
import { nextTick, onBeforeUnmount, onMounted, ref } from 'vue'
|
||||||
|
import { gsap } from 'gsap'
|
||||||
|
import criteria1 from '@/assets/images/award/criteria_1.png'
|
||||||
|
import criteria2 from '@/assets/images/award/criteria_2.png'
|
||||||
|
import criteria3 from '@/assets/images/award/criteria_3.png'
|
||||||
|
import criteria4 from '@/assets/images/award/criteria_4.png'
|
||||||
|
|
||||||
|
const criteriaList = ref([
|
||||||
|
{
|
||||||
|
icon: criteria1,
|
||||||
|
name: 'Originality',
|
||||||
|
desc: 'Unique perspective and innovative approach to fashion design',
|
||||||
|
style: { width: '13rem', height: '17rem' }
|
||||||
|
},
|
||||||
|
{
|
||||||
|
icon: criteria2,
|
||||||
|
name: 'Creativity',
|
||||||
|
desc: 'Artistic vision and exceptional design excellence',
|
||||||
|
style: { width: '16rem', height: '18rem' }
|
||||||
|
},
|
||||||
|
{
|
||||||
|
icon: criteria3,
|
||||||
|
name: 'AiDA Integration',
|
||||||
|
desc: 'Effective application of AI design tools and functions',
|
||||||
|
style: { width: '16rem', height: '18rem' }
|
||||||
|
},
|
||||||
|
{
|
||||||
|
icon: criteria4,
|
||||||
|
name: 'Execution',
|
||||||
|
desc: 'Quality of presentation and technical craftsmanship',
|
||||||
|
style: { width: '18.8rem', height: '18rem' }
|
||||||
|
}
|
||||||
|
])
|
||||||
|
|
||||||
|
const selectionRef = ref<HTMLElement | null>(null)
|
||||||
|
const criteriaListRef = ref<HTMLElement | null>(null)
|
||||||
|
const hasPlayedSelectionAnim = ref(false)
|
||||||
|
let selectionObserver: IntersectionObserver | null = null
|
||||||
|
|
||||||
|
const setupSelectionInitialState = () => {
|
||||||
|
const items =
|
||||||
|
criteriaListRef.value?.querySelectorAll<HTMLElement>('.item') ?? []
|
||||||
|
if (items.length) {
|
||||||
|
gsap.set(items, {
|
||||||
|
opacity: 0,
|
||||||
|
scale: 0,
|
||||||
|
transformOrigin: '50% 50%'
|
||||||
|
})
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
const playSelectionAnimation = () => {
|
||||||
|
if (hasPlayedSelectionAnim.value) return
|
||||||
|
const items =
|
||||||
|
criteriaListRef.value?.querySelectorAll<HTMLElement>('.item') ?? []
|
||||||
|
if (!items.length) return
|
||||||
|
|
||||||
|
gsap.to(items, {
|
||||||
|
opacity: 1,
|
||||||
|
scale: 1,
|
||||||
|
duration: 0.6,
|
||||||
|
ease: 'back.out(1.6)',
|
||||||
|
stagger: 0.3
|
||||||
|
})
|
||||||
|
|
||||||
|
hasPlayedSelectionAnim.value = true
|
||||||
|
selectionObserver?.disconnect()
|
||||||
|
}
|
||||||
|
|
||||||
|
onMounted(() => {
|
||||||
|
nextTick(() => {
|
||||||
|
setupSelectionInitialState()
|
||||||
|
if ('IntersectionObserver' in window) {
|
||||||
|
selectionObserver = new IntersectionObserver(
|
||||||
|
(entries) => {
|
||||||
|
entries.forEach((entry) => {
|
||||||
|
if (entry.isIntersecting) {
|
||||||
|
playSelectionAnimation()
|
||||||
|
}
|
||||||
|
})
|
||||||
|
},
|
||||||
|
{ threshold: 0.25 }
|
||||||
|
)
|
||||||
|
if (selectionRef.value) {
|
||||||
|
selectionObserver.observe(selectionRef.value)
|
||||||
|
}
|
||||||
|
} else {
|
||||||
|
playSelectionAnimation()
|
||||||
|
}
|
||||||
|
})
|
||||||
|
})
|
||||||
|
|
||||||
|
onBeforeUnmount(() => {
|
||||||
|
selectionObserver?.disconnect()
|
||||||
|
})
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped lang="less">
|
||||||
|
.selection-container {
|
||||||
|
background: url('@/assets/images/award/selection_bg.png') no-repeat;
|
||||||
|
background-size: 100% 100%;
|
||||||
|
padding-top: 9.3rem;
|
||||||
|
.title {
|
||||||
|
color: #fff;
|
||||||
|
font-family: 'PoppinsBold';
|
||||||
|
font-weight: 600;
|
||||||
|
font-size: 4rem;
|
||||||
|
}
|
||||||
|
.logo {
|
||||||
|
margin: 2.3rem 0 2.3rem;
|
||||||
|
}
|
||||||
|
.sub-title {
|
||||||
|
color: #f95750;
|
||||||
|
font-family: 'Popins';
|
||||||
|
font-weight: 400;
|
||||||
|
font-size: 3rem;
|
||||||
|
margin-bottom: 11.8rem;
|
||||||
|
}
|
||||||
|
.criteria-list {
|
||||||
|
column-gap: 6rem;
|
||||||
|
.item {
|
||||||
|
height: 44rem;
|
||||||
|
width: 32.2rem;
|
||||||
|
box-sizing: border-box;
|
||||||
|
&:nth-of-type(3) {
|
||||||
|
background: url('@/assets/images/award/criteria_bg.png') no-repeat;
|
||||||
|
background-size: 100% 100%;
|
||||||
|
}
|
||||||
|
.icon {
|
||||||
|
width: 18.8rem;
|
||||||
|
height: 18rem;
|
||||||
|
}
|
||||||
|
.name {
|
||||||
|
font-family: 'PoppinsMedium';
|
||||||
|
font-weight: 500;
|
||||||
|
font-size: 2.8rem;
|
||||||
|
color: #fff;
|
||||||
|
margin: 2rem 0 5rem;
|
||||||
|
}
|
||||||
|
.desc {
|
||||||
|
font-family: 'Arial';
|
||||||
|
font-weight: 400;
|
||||||
|
font-size: 2.4rem;
|
||||||
|
color: #e0e0e0;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
@@ -114,142 +114,20 @@
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="judges-container flex flex-col align-center">
|
<JudgesSection />
|
||||||
<div class="title">Panel of Judges</div>
|
<PrizesSection />
|
||||||
<img
|
<ApplySection />
|
||||||
src="@/assets/images/award/bloom_logo.png"
|
<SelectionSection />
|
||||||
class="logo"
|
|
||||||
/>
|
|
||||||
<div class="sub-title">Expertise</div>
|
|
||||||
<div class="judgement-list">
|
|
||||||
<div
|
|
||||||
class="judgement-item flex flex-col align-center"
|
|
||||||
v-for="item in judgements"
|
|
||||||
:key="item.name"
|
|
||||||
>
|
|
||||||
<img
|
|
||||||
:src="item.picture"
|
|
||||||
class="picture"
|
|
||||||
/>
|
|
||||||
<div class="name">{{ item.name }}</div>
|
|
||||||
<div class="desc">{{ item.desc }}</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="prizes-container container flex align-center">
|
|
||||||
<div class="left flex flex-col flex-center">
|
|
||||||
<div class="title">Award & Prizes</div>
|
|
||||||
<!-- <img
|
|
||||||
src="@/assets/images/award/bloom_logo.png"
|
|
||||||
class="logo"
|
|
||||||
/> -->
|
|
||||||
<div class="desc">Recongnition</div>
|
|
||||||
</div>
|
|
||||||
<div class="right">
|
|
||||||
<div
|
|
||||||
class="prize-item flex flex-col flex-center"
|
|
||||||
v-for="item in prizes"
|
|
||||||
:key="item.name"
|
|
||||||
>
|
|
||||||
<div class="prize-money">{{ item.money }}</div>
|
|
||||||
<div class="prize-name">{{ item.name }}</div>
|
|
||||||
<div class="prize-desc flex flex-col flex-center">
|
|
||||||
<div
|
|
||||||
class="desc-item"
|
|
||||||
v-for="el in item.desc"
|
|
||||||
>
|
|
||||||
{{ el }}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="apply-container container flex flex-col">
|
|
||||||
<div class="title">How to Apply</div>
|
|
||||||
<div class="sub-title">Requirments</div>
|
|
||||||
<div class="requirments-list flex">
|
|
||||||
<div class="left flex flex-col space-between">
|
|
||||||
<div
|
|
||||||
class="item-box"
|
|
||||||
v-for="item in leftRequirment"
|
|
||||||
:key="item.type"
|
|
||||||
>
|
|
||||||
<div class="item-header flex align-center">
|
|
||||||
<img
|
|
||||||
src="@/assets/images/award/bloom_logo.png"
|
|
||||||
class="logo"
|
|
||||||
/>
|
|
||||||
<div class="item-title">{{ item.type }}</div>
|
|
||||||
</div>
|
|
||||||
<div
|
|
||||||
class="context"
|
|
||||||
v-for="el in item.desc"
|
|
||||||
>
|
|
||||||
{{ el }}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="right">
|
|
||||||
<div class="item-box">
|
|
||||||
<div class="item-box">
|
|
||||||
<div class="item-header flex align-center">
|
|
||||||
<img
|
|
||||||
src="@/assets/images/award/bloom_logo.png"
|
|
||||||
class="logo"
|
|
||||||
/>
|
|
||||||
<div class="item-title">{{ rightRequirment.type }}</div>
|
|
||||||
</div>
|
|
||||||
<div
|
|
||||||
class="context"
|
|
||||||
v-for="el in rightRequirment.desc"
|
|
||||||
>
|
|
||||||
{{ el }}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="selection-container container flex flex-col align-center">
|
|
||||||
<div class="title">Selection Criteria</div>
|
|
||||||
<img
|
|
||||||
src="@/assets/images/award/bloom_logo.png"
|
|
||||||
class="logo"
|
|
||||||
/>
|
|
||||||
<div class="sub-title">Evaluation</div>
|
|
||||||
<div class="criteria-list flex">
|
|
||||||
<div
|
|
||||||
class="item flex flex-col align-center"
|
|
||||||
v-for="item in criteriaList"
|
|
||||||
:key="item.name"
|
|
||||||
>
|
|
||||||
<img
|
|
||||||
:src="item.icon"
|
|
||||||
class="icon"
|
|
||||||
:style="item.style"
|
|
||||||
/>
|
|
||||||
<div class="name">{{ item.name }}</div>
|
|
||||||
<div class="desc">{{ item.desc }}</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script setup lang="ts">
|
<script setup lang="ts">
|
||||||
import { ref } from 'vue'
|
import { ref } from 'vue'
|
||||||
import { useRouter } from 'vue-router'
|
import { useRouter } from 'vue-router'
|
||||||
import criteria1 from '@/assets/images/award/criteria_1.png'
|
import JudgesSection from './components/JudgesSection.vue'
|
||||||
import criteria2 from '@/assets/images/award/criteria_2.png'
|
import SelectionSection from './components/SelectionSection.vue'
|
||||||
import criteria3 from '@/assets/images/award/criteria_3.png'
|
import ApplySection from './components/ApplySection.vue'
|
||||||
import criteria4 from '@/assets/images/award/criteria_4.png'
|
import PrizesSection from './components/PrizesSection.vue'
|
||||||
|
|
||||||
import jae from '@/assets/images/award/jae.png'
|
|
||||||
import diego from '@/assets/images/award/diego.png'
|
|
||||||
import gregory from '@/assets/images/award/gregory.png'
|
|
||||||
import vincenzo from '@/assets/images/award/vincenzo.png'
|
|
||||||
import tim from '@/assets/images/award/tim.png'
|
|
||||||
import desmond from '@/assets/images/award/desmond.png'
|
|
||||||
|
|
||||||
const router = useRouter()
|
const router = useRouter()
|
||||||
|
|
||||||
@@ -300,112 +178,6 @@
|
|||||||
desc: 'Winners revealed with media coverage and live showcase.'
|
desc: 'Winners revealed with media coverage and live showcase.'
|
||||||
}
|
}
|
||||||
])
|
])
|
||||||
|
|
||||||
const prizes = ref([
|
|
||||||
{
|
|
||||||
money: 'US$5000',
|
|
||||||
name: 'Grand Prize',
|
|
||||||
desc: ['Cash Award', 'Award Ceritificate', 'Global Media Exposure']
|
|
||||||
},
|
|
||||||
{
|
|
||||||
money: 'US$3000',
|
|
||||||
name: 'First Runner-Up',
|
|
||||||
desc: ['Cash Award', 'Award Ceritificate', 'Global Media Exposure']
|
|
||||||
},
|
|
||||||
{
|
|
||||||
money: 'US$2000',
|
|
||||||
name: 'Second Runner-Up',
|
|
||||||
desc: ['Cash Award', 'Award Ceritificate', 'Global Media Exposure']
|
|
||||||
},
|
|
||||||
{
|
|
||||||
money: 'Certification',
|
|
||||||
name: 'Finalists',
|
|
||||||
desc: ['Award Ceritificate', 'Global Media Exposure']
|
|
||||||
}
|
|
||||||
])
|
|
||||||
|
|
||||||
const leftRequirment = ref([
|
|
||||||
{
|
|
||||||
type: 'Video',
|
|
||||||
desc: ['The process of doing design']
|
|
||||||
},
|
|
||||||
{
|
|
||||||
type: 'Design',
|
|
||||||
desc: [
|
|
||||||
'Structure: design title, moodboard and elaboration (how will you use AiDA to design)',
|
|
||||||
'Design sketch: Maximum 4 outfit design with proposed materials'
|
|
||||||
]
|
|
||||||
}
|
|
||||||
])
|
|
||||||
const rightRequirment = ref({
|
|
||||||
type: 'Submission Format',
|
|
||||||
desc: [
|
|
||||||
'Naming as “AiDA global award 2026_applicantname”',
|
|
||||||
'Mp4\n(1080x1920pixels/20mb within 1min)',
|
|
||||||
'Single PDF file\n(within 15 pages, maximum 20mb)',
|
|
||||||
'English or native language\nwith English translation'
|
|
||||||
]
|
|
||||||
})
|
|
||||||
|
|
||||||
const criteriaList = ref([
|
|
||||||
{
|
|
||||||
icon: criteria1,
|
|
||||||
name: 'Originality',
|
|
||||||
desc: 'Unique perspective and innovative approach to fashion design',
|
|
||||||
style: { width: '13rem', height: '17rem' }
|
|
||||||
},
|
|
||||||
{
|
|
||||||
icon: criteria2,
|
|
||||||
name: 'Creativity',
|
|
||||||
desc: 'Artistic vision and exceptional design excellence',
|
|
||||||
style: { width: '16rem', height: '18rem' }
|
|
||||||
},
|
|
||||||
{
|
|
||||||
icon: criteria3,
|
|
||||||
name: 'AiDA Integration',
|
|
||||||
desc: 'Effective application of AI design tools and functions',
|
|
||||||
style: { width: '16rem', height: '18rem' }
|
|
||||||
},
|
|
||||||
{
|
|
||||||
icon: criteria4,
|
|
||||||
name: 'Execution',
|
|
||||||
desc: 'Quality of presentation and technical craftsmanship',
|
|
||||||
style: { width: '18.8rem', height: '18rem' }
|
|
||||||
}
|
|
||||||
])
|
|
||||||
|
|
||||||
const judgements = [
|
|
||||||
{
|
|
||||||
picture: jae,
|
|
||||||
name: 'Jae Hyuk Lim',
|
|
||||||
desc: 'Code-create\nKorea Branch Director\nBesfxxk creative director'
|
|
||||||
},
|
|
||||||
{
|
|
||||||
picture: diego,
|
|
||||||
name: 'Diego Dultzin Lacoste',
|
|
||||||
desc: 'Co-founder & Chief Father\nOfficer of OnTheList\n(Hong Kong)'
|
|
||||||
},
|
|
||||||
{
|
|
||||||
picture: gregory,
|
|
||||||
name: 'Gregory de la Hogue Moran',
|
|
||||||
desc: 'Senior Designer at\nGabriela Heasrst (Italy)'
|
|
||||||
},
|
|
||||||
{
|
|
||||||
picture: vincenzo,
|
|
||||||
name: 'Vincenzo La Torre',
|
|
||||||
desc: 'Cheif Editor of SCMP Style\n(Hong Kong)'
|
|
||||||
},
|
|
||||||
{
|
|
||||||
picture: tim,
|
|
||||||
name: 'Tim Lim',
|
|
||||||
desc: 'Group Fashion Direction of\n Modern Media Group\n(Shanghai)'
|
|
||||||
},
|
|
||||||
{
|
|
||||||
picture: desmond,
|
|
||||||
name: 'Desmond Lim',
|
|
||||||
desc: 'Cheif Editor of Vogue\n(Singapore)'
|
|
||||||
}
|
|
||||||
]
|
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style lang="less" scoped>
|
<style lang="less" scoped>
|
||||||
@@ -665,232 +437,7 @@
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
.prizes-container {
|
|
||||||
background: url('@/assets/images/award/prizes_bg.png') no-repeat;
|
|
||||||
background-size: 100% 100%;
|
|
||||||
padding: 0 21.4rem 0 33.4rem;
|
|
||||||
|
|
||||||
.left {
|
|
||||||
width: 36.2rem;
|
|
||||||
row-gap: 2.3rem;
|
|
||||||
margin-right: 27rem;
|
|
||||||
.title {
|
|
||||||
font-family: 'PoppinsBold';
|
|
||||||
font-weight: 600;
|
|
||||||
font-size: 4rem;
|
|
||||||
text-align: center;
|
|
||||||
color: #fff;
|
|
||||||
}
|
|
||||||
.desc {
|
|
||||||
font-family: 'Poppins';
|
|
||||||
font-weight: 400;
|
|
||||||
font-size: 3rem;
|
|
||||||
text-align: center;
|
|
||||||
color: #f95750;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
.right {
|
|
||||||
display: grid;
|
|
||||||
grid-template-columns: repeat(2, 35.5rem);
|
|
||||||
grid-template-rows: repeat(2, 32.8rem);
|
|
||||||
gap: 4.2rem;
|
|
||||||
.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%;
|
|
||||||
}
|
|
||||||
.prize-money {
|
|
||||||
font-family: 'PoppinsBold';
|
|
||||||
font-weight: bold;
|
|
||||||
font-size: 4rem;
|
|
||||||
}
|
|
||||||
.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;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
.apply-container {
|
|
||||||
flex: 1;
|
|
||||||
background: url('@/assets/images/award/apply_bg.png') no-repeat;
|
|
||||||
background-size: 100% 100%;
|
|
||||||
padding: 12.7rem 0 16.9rem;
|
|
||||||
.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;
|
|
||||||
}
|
|
||||||
.requirments-list {
|
|
||||||
flex: 1;
|
|
||||||
padding-left: 41.4rem;
|
|
||||||
column-gap: 17.7rem;
|
|
||||||
margin-top: 12rem;
|
|
||||||
.left {
|
|
||||||
color: #232323;
|
|
||||||
height: 100%;
|
|
||||||
}
|
|
||||||
.item-box {
|
|
||||||
.item-header {
|
|
||||||
column-gap: 3.2rem;
|
|
||||||
.item-title {
|
|
||||||
color: #232323;
|
|
||||||
font-family: 'PoppinsBold';
|
|
||||||
font-weight: 600;
|
|
||||||
font-size: 2.8rem;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
.context {
|
|
||||||
margin-top: 4rem;
|
|
||||||
width: 46.8rem;
|
|
||||||
color: #585858;
|
|
||||||
font-family: 'Arial';
|
|
||||||
font-weight: 400;
|
|
||||||
line-height: 3rem;
|
|
||||||
font-size: 2.4rem;
|
|
||||||
padding-left: 5.6rem;
|
|
||||||
white-space: pre-line;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
.selection-container {
|
|
||||||
background: url('@/assets/images/award/selection_bg.png') no-repeat;
|
|
||||||
background-size: 100% 100%;
|
|
||||||
padding-top: 9.3rem;
|
|
||||||
.title {
|
|
||||||
color: #fff;
|
|
||||||
font-family: 'PoppinsBold';
|
|
||||||
font-weight: 600;
|
|
||||||
font-size: 4rem;
|
|
||||||
}
|
|
||||||
.logo {
|
|
||||||
margin: 2.3rem 0 2.3rem;
|
|
||||||
}
|
|
||||||
.sub-title {
|
|
||||||
color: #f95750;
|
|
||||||
font-family: 'Popins';
|
|
||||||
font-weight: 400;
|
|
||||||
font-size: 3rem;
|
|
||||||
margin-bottom: 11.8rem;
|
|
||||||
}
|
|
||||||
.criteria-list {
|
|
||||||
column-gap: 6rem;
|
|
||||||
.item {
|
|
||||||
height: 44rem;
|
|
||||||
width: 32.2rem;
|
|
||||||
box-sizing: border-box;
|
|
||||||
&:nth-of-type(3) {
|
|
||||||
background: url('@/assets/images/award/criteria_bg.png') no-repeat;
|
|
||||||
background-size: 100% 100%;
|
|
||||||
}
|
|
||||||
.icon {
|
|
||||||
width: 18.8rem;
|
|
||||||
height: 18rem;
|
|
||||||
}
|
|
||||||
.name {
|
|
||||||
font-family: 'PoppinsMedium';
|
|
||||||
font-weight: 500;
|
|
||||||
font-size: 2.8rem;
|
|
||||||
color: #fff;
|
|
||||||
margin: 2rem 0 5rem;
|
|
||||||
}
|
|
||||||
.desc {
|
|
||||||
font-family: 'Arial';
|
|
||||||
font-weight: 400;
|
|
||||||
font-size: 2.4rem;
|
|
||||||
color: #e0e0e0;
|
|
||||||
text-align: center;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
.judges-container {
|
|
||||||
height: 147.4rem;
|
|
||||||
background: url('@/assets/images/award/judges_bg.png') no-repeat;
|
|
||||||
background-size: 100% 100%;
|
|
||||||
padding-top: 12.8rem;
|
|
||||||
.title {
|
|
||||||
color: #232323;
|
|
||||||
font-family: 'PoppinsBold';
|
|
||||||
font-weight: 600;
|
|
||||||
font-size: 4rem;
|
|
||||||
}
|
|
||||||
.logo {
|
|
||||||
margin: 2.4rem 0 2.2rem;
|
|
||||||
}
|
|
||||||
.sub-title {
|
|
||||||
color: #b10000;
|
|
||||||
font-family: 'Arial';
|
|
||||||
font-weight: 400;
|
|
||||||
font-size: 3rem;
|
|
||||||
margin-bottom: 12rem;
|
|
||||||
}
|
|
||||||
.judgement-list {
|
|
||||||
display: grid;
|
|
||||||
grid-template-columns: repeat(3, 1fr);
|
|
||||||
column-gap: 23.22rem;
|
|
||||||
row-gap: 8rem;
|
|
||||||
padding: 0 25rem 0 26.6rem;
|
|
||||||
.judgement-item {
|
|
||||||
.picture {
|
|
||||||
width: 20.2rem;
|
|
||||||
height: 26rem;
|
|
||||||
border-radius: 0.8rem;
|
|
||||||
}
|
|
||||||
.name {
|
|
||||||
margin: 3rem 0 2.4rem;
|
|
||||||
color: #232323;
|
|
||||||
font-family: 'PoppinsBold';
|
|
||||||
font-weight: 600;
|
|
||||||
font-size: 2.4rem;
|
|
||||||
}
|
|
||||||
.desc {
|
|
||||||
color: #585858;
|
|
||||||
font-family: 'Arial';
|
|
||||||
font-weight: 400;
|
|
||||||
font-size: 2rem;
|
|
||||||
white-space: pre-line;
|
|
||||||
text-align: center;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
.footer {
|
.footer {
|
||||||
height: 10rem;
|
height: 10rem;
|
||||||
padding-left: 21.5rem;
|
padding-left: 21.5rem;
|
||||||
|
|||||||
Reference in New Issue
Block a user