873 lines
22 KiB
Vue
873 lines
22 KiB
Vue
<template>
|
|
<div class="award-page">
|
|
<div class="banner">
|
|
<div class="submit-btn flex flex-center" @click="handleSubmitApplication">
|
|
<div>Submit your Application</div>
|
|
<img src="@/assets/images/award/arrow_right.png" alt="" class="arrow" />
|
|
<div class="ddl">Application Deadline:15th March 2026</div>
|
|
</div>
|
|
</div>
|
|
<div class="blocks-list flex">
|
|
<div
|
|
class="block-item flex flex-col flex-center"
|
|
v-for="item in blocksList"
|
|
:key="item.number"
|
|
>
|
|
<div class="number">{{ item.number }}</div>
|
|
<div class="label">{{ item.label }}</div>
|
|
<div class="line"></div>
|
|
</div>
|
|
<div class="block-item flex flex-col flex-center">
|
|
<div class="number">
|
|
<img src="@/assets/images/award/∞.png" alt="" class="infinity" />
|
|
</div>
|
|
<div class="label">Possibilites</div>
|
|
</div>
|
|
</div>
|
|
<div class="bloom container flex flex-col align-center">
|
|
<div class="title">Bloom Your Creativity</div>
|
|
<img src="@/assets/images/award/bloom_logo.png" class="logo" />
|
|
<div class="season">Theme of 2026</div>
|
|
<div class="desc">
|
|
Where imagination meets innovation, creativity blooms. This theme celebrates AI as
|
|
a catalyst for fashion design, allowing your vision to flourish beyond traditional
|
|
boundaries. Let your ideas blossom into extraordinary designs that merge human
|
|
artistry with artificial intelligence.
|
|
</div>
|
|
</div>
|
|
<div class="design-container container">
|
|
<div class="design-title limit">Design Without Borders</div>
|
|
<div class="limit">
|
|
<img src="@/assets/images/award/bloom_logo.png" class="logo" />
|
|
</div>
|
|
<div class="global limit">Global Opportunity</div>
|
|
<div class="desc">
|
|
Open to visionary designers across the globe. From Seoul to Singapore, New York to
|
|
Shanghai, we're seeking the next generation of fashion innovators who dare to
|
|
reimagine the future of design.
|
|
</div>
|
|
</div>
|
|
<div class="timeline-container container flex flex-col align-center">
|
|
<div class="timeline-title">Competition Timeline</div>
|
|
<img src="@/assets/images/award/bloom_logo.png" alt="" class="logo" />
|
|
<div class="desc">Shaping the Future</div>
|
|
<div class="timeline-point">
|
|
<img src="@/assets/images/award/timeline_line.png" class="line-bg" />
|
|
<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>
|
|
<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 class="judges-container flex flex-col align-center">
|
|
<div class="title">Panel of Judges</div>
|
|
<img src="@/assets/images/award/bloom_logo.png" 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>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import { ref } from 'vue'
|
|
import { useRouter } from 'vue-router'
|
|
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'
|
|
|
|
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 handleSubmitApplication = () => {
|
|
router.push('/award/apply')
|
|
}
|
|
|
|
const blocksList = ref([
|
|
{
|
|
number: '100',
|
|
label: 'Semi-finalists'
|
|
},
|
|
{
|
|
number: '20',
|
|
label: 'Finalists'
|
|
},
|
|
{
|
|
number: '3',
|
|
label: 'Winners'
|
|
}
|
|
])
|
|
|
|
const points = ref([
|
|
{
|
|
label: 'Select Top 20',
|
|
time: 'May',
|
|
desc: 'Submit your design concept, mood board, and initial sketch.'
|
|
},
|
|
{
|
|
label: `Top 20`,
|
|
subLabel: 'Collections Finalize',
|
|
time: 'June',
|
|
desc: 'Complete collections, physical garments, and AiDA process videos due.'
|
|
},
|
|
{
|
|
label: `Top 3`,
|
|
subLabel: 'Finalists Select',
|
|
time: 'August',
|
|
desc: 'Complete collections, physical garments, and AiDA process videos due.'
|
|
},
|
|
{
|
|
label: 'Award Ceremony',
|
|
time: 'November',
|
|
desc: 'Winners revealed with media coverage and live showcase.'
|
|
}
|
|
])
|
|
|
|
const prizes = ref([
|
|
{
|
|
money: '$3000',
|
|
name: 'First Runner-Up',
|
|
desc: ['Cash Award', 'Award Ceritificate', 'Global Media Exposure']
|
|
},
|
|
{
|
|
money: '$2000',
|
|
name: 'Second Runner-Up',
|
|
desc: ['Cash Award', 'Award Ceritificate', 'Global Media Exposure']
|
|
},
|
|
{
|
|
money: '$5000',
|
|
name: 'Grand Prize',
|
|
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>
|
|
|
|
<style lang="less" scoped>
|
|
|
|
.container {
|
|
height: 97rem;
|
|
}
|
|
// .header {
|
|
// height: 8rem;
|
|
// background-color: #232323;
|
|
// padding-left: 21.5rem;
|
|
// padding-right: 8.6rem;
|
|
// .header-left {
|
|
// .logo {
|
|
// width: 13rem;
|
|
// height: 5rem;
|
|
// }
|
|
// }
|
|
// .header-right {
|
|
// column-gap: 1rem;
|
|
// .text {
|
|
// font-size: 1.6rem;
|
|
// color: #fff;
|
|
// }
|
|
// .arrow {
|
|
// width: 2.4rem;
|
|
// height: 2.4rem;
|
|
// }
|
|
// }
|
|
// }
|
|
.logo {
|
|
width: 2.4rem;
|
|
height: 2.4rem;
|
|
}
|
|
.banner {
|
|
height: 108rem;
|
|
background: url('@/assets/images/award/banner.png') no-repeat;
|
|
background-size: 100% 100%;
|
|
position: relative;
|
|
.submit-btn {
|
|
width: 41rem;
|
|
height: 6.394rem;
|
|
line-height: 6.394rem;
|
|
text-align: center;
|
|
border-radius: 3.2rem;
|
|
box-shadow: inset 0 0 1119px 0 rgba(255, 255, 255, 0.3),
|
|
inset -0.8px -2.4px 1.6px 0.4px rgba(255, 255, 255, 0.1),
|
|
inset 0.8px 2.4px 1.6px 0 rgba(255, 255, 255, 0.3);
|
|
color: #fff;
|
|
font-family: 'PoppinsBold';
|
|
font-weight: 600;
|
|
font-size: 2.4rem;
|
|
column-gap: 3.2rem;
|
|
position: absolute;
|
|
top: 23.88rem;
|
|
left: 51rem;
|
|
backdrop-filter: blur(5px);
|
|
cursor: pointer;
|
|
.arrow {
|
|
width: 3.83rem;
|
|
height: 3.83rem;
|
|
}
|
|
.ddl {
|
|
position: absolute;
|
|
bottom: -4rem;
|
|
left: 0;
|
|
text-align: center;
|
|
width: 41rem;
|
|
font-family: 'Arial';
|
|
font-weight: 400;
|
|
font-size: 2rem;
|
|
line-height: 2.2rem;
|
|
}
|
|
}
|
|
}
|
|
.blocks-list {
|
|
height: 31.4rem;
|
|
background: linear-gradient(98.55deg, #232323 18.22%, #898989 101.1%);
|
|
|
|
.block-item {
|
|
flex: 1;
|
|
height: 100%;
|
|
color: #fff;
|
|
position: relative;
|
|
.number {
|
|
font-size: 6rem;
|
|
font-family: 'Poppins';
|
|
}
|
|
.label {
|
|
font-size: 2.8rem;
|
|
font-family: 'Arial';
|
|
letter-spacing: 0.05em;
|
|
}
|
|
.line {
|
|
position: absolute;
|
|
bottom: 50%;
|
|
right: 0;
|
|
transform: translate(0, 50%);
|
|
width: 0.1rem;
|
|
height: 27.4rem;
|
|
background-color: #8d8d8d;
|
|
}
|
|
}
|
|
}
|
|
.bloom {
|
|
padding-top: 12.8rem;
|
|
font-family: 'Poppins';
|
|
background: url('@/assets/images/award/bloom_bg.png') no-repeat;
|
|
background-size: 100% 100%;
|
|
.title {
|
|
font-size: 4rem;
|
|
color: #232323;
|
|
margin-bottom: 2.4rem;
|
|
}
|
|
.logo {
|
|
margin-bottom: 2.2rem;
|
|
}
|
|
.season {
|
|
font-size: 3rem;
|
|
color: #c7342c;
|
|
margin-bottom: 6.6rem;
|
|
}
|
|
.desc {
|
|
font-family: 'Arial';
|
|
font-size: 2.8rem;
|
|
color: #585858;
|
|
text-align: center;
|
|
padding: 0 21.5rem;
|
|
line-height: 4.5rem;
|
|
margin-bottom: 12.3rem;
|
|
}
|
|
}
|
|
.design-container {
|
|
background: url('@/assets/images/award/design_bg.png') no-repeat;
|
|
background-size: 100% 100%;
|
|
padding-left: 21.5rem;
|
|
padding-top: 16rem;
|
|
.limit {
|
|
width: 48.4rem;
|
|
text-align: center;
|
|
}
|
|
.design-title {
|
|
color: #fff;
|
|
font-size: 4rem;
|
|
font-weight: 600;
|
|
font-family: 'Poppins';
|
|
font-style: SemiBold;
|
|
vertical-align: middle;
|
|
text-transform: capitalize;
|
|
}
|
|
.logo {
|
|
margin-top: 2.4rem;
|
|
margin-bottom: 2.1rem;
|
|
}
|
|
.global {
|
|
font-family: 'Poppins';
|
|
font-size: 3rem;
|
|
color: #f95750;
|
|
margin-bottom: 19.8rem;
|
|
}
|
|
.desc {
|
|
font-family: 'Arial';
|
|
font-weight: 400;
|
|
font-size: 2.8rem;
|
|
color: #e0e0e0;
|
|
width: 54rem;
|
|
}
|
|
}
|
|
.timeline-container {
|
|
background: url('@/assets/images/award/timeline_bg.png') no-repeat;
|
|
background-size: 100% 100%;
|
|
position: relative;
|
|
padding-top: 12.8rem;
|
|
width: 100%;
|
|
.line-bg {
|
|
position: absolute;
|
|
width: 148.7rem;
|
|
height: 27.58rem;
|
|
left: 24rem;
|
|
bottom: 22.8rem;
|
|
z-index: 0;
|
|
}
|
|
.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: #b10000;
|
|
}
|
|
.timeline-point {
|
|
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: #232323;
|
|
font-family: 'PoppinsBold';
|
|
font-weight: 600;
|
|
font-size: 2.8rem;
|
|
text-align: center;
|
|
white-space: pre-line;
|
|
height: 6rem;
|
|
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: #b10000;
|
|
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: #585858;
|
|
width: 31.2rem;
|
|
height: 10.2rem;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
.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/timeline_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 {
|
|
height: 10rem;
|
|
padding-left: 21.5rem;
|
|
padding-right: 22rem;
|
|
background-color: #232323;
|
|
.social-list {
|
|
column-gap: 2rem;
|
|
img {
|
|
width: 2rem;
|
|
height: 2rem;
|
|
}
|
|
}
|
|
.copyright {
|
|
color: #fff;
|
|
font-family: 'Arial';
|
|
font-weight: 400;
|
|
font-size: 1.2rem;
|
|
}
|
|
}
|
|
</style>
|