97 lines
2.1 KiB
Vue
97 lines
2.1 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>
|
|
|
|
<Slogan />
|
|
<Bloom />
|
|
<TimeLine />
|
|
<JudgesSection />
|
|
<PrizesSection />
|
|
<ApplySection />
|
|
<SelectionSection />
|
|
</div>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import { ref } from 'vue'
|
|
import { useRouter } from 'vue-router'
|
|
import JudgesSection from './components/JudgesSection.vue'
|
|
import SelectionSection from './components/SelectionSection.vue'
|
|
import ApplySection from './components/ApplySection.vue'
|
|
import PrizesSection from './components/PrizesSection.vue'
|
|
import TimeLine from './components/TimeLine.vue'
|
|
import Bloom from './components/Bloom.vue'
|
|
import Slogan from './components/Slogan.vue'
|
|
|
|
const router = useRouter()
|
|
|
|
const handleSubmitApplication = () => {
|
|
router.push('/award/contestants')
|
|
}
|
|
</script>
|
|
|
|
<style lang="less" scoped>
|
|
.container {
|
|
height: 97rem;
|
|
}
|
|
|
|
.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;
|
|
}
|
|
}
|
|
}
|
|
</style>
|