aida_front/src/views/AwardPage/index.vue

<template>
	<div class="award-page">
		<div class="banner">
			<video
				src="@/assets/images/award/banner.mp4"
				autoplay
				muted
				loop
				class="banner-video"
				playsinline
				webkit-playsinline
				x5-playsinline
			></video>
			<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: cover;
		position: relative;
		.banner-video {
			width: 100%;
			height: 100%;
			object-fit: cover;
		}
		.submit-btn {
			width: 41rem;
			height: 6.394rem;
			line-height: 6.394rem;
			text-align: center;
			border-radius: 3.2rem;
			background-color: rgba(35, 35, 35, 0.7);
			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;
			left: 42.1rem;
			bottom: 15.7rem;
			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;
				color: #232323e5;
			}
		}
	}
</style>