aida_front/src/views/AwardPage/container.vue

<template>
	<div class="award-container">
		<div class="header flex align-center space-between">
			<div class="header-left">
				<img
					src="@/assets/images/award/code_create_logo.png"
					class="logo"
				/>
			</div>
			<div
				class="header-right flex align-center"
				@click="handleBtnClick"
			>
				<div class="text">{{ btnText }}</div>
				<img
					src="@/assets/images/award/arrow.png"
					alt=""
					class="arrow"
				/>
			</div>
		</div>
		<router-view />
		<div class="footer flex space-between align-center">
			<div class="social-list flex">
				<a
					href="https://xhslink.com/m/5Ony2FapizV"
					target="_blank"
				>
					<img
						src="@/assets/images/award/xiaohongshu.svg"
						alt=""
					/>
				</a>
				<a
					href="https://www.linkedin.com/company/code-create-limited"
					target="_blank"
				>
					<img
						src="@/assets/images/award/linkdin.svg"
						alt=""
					/>
				</a>
				<a
					href="https://www.facebook.com/CodeCreateAI"
					target="_blank"
				>
					<img
						src="@/assets/images/award/facebook.svg"
						alt=""
					/>
				</a>
				<a
					href="https://www.tiktok.com/@aida_codecreate"
					target="_blank"
				>
					<img
						src="@/assets/images/award/tiktok.svg"
						alt=""
					/>
				</a>
				<a
					href="javascript:void(0)"
					@click="showQRcode = true"
				>
					<img
						src="@/assets/images/award/weichat.svg"
						alt=""
					/>
				</a>
			</div>
			<div class="copyright">© Code-Create 2026</div>
		</div>
		<div
			class="qrcode-mask flex flex-center"
			v-if="showQRcode"
		>
			<div class="code-wrapper flex flex-col align-center">
				<img
					src="@/assets/images/award/close.svg"
					class="close-icon"
					@click="handleCloseQRcode"
				/>
				<div class="code-title">WeChat Official Account</div>
				<img
					src="@/assets/images/award/qrcode.jpg"
					class="qrcode"
				/>
				<div class="tips">Scan the QR code in WeChat</div>
			</div>
		</div>
	</div>
</template>

<script setup lang="ts">
	import { ref, computed, watch } from 'vue'
	import { useRoute, useRouter } from 'vue-router'

	const route = useRoute()
	const router = useRouter()

	const showQRcode = ref(false)
	const handleCloseQRcode = () => {
		showQRcode.value = false
	}

	type BtnType = 'index' | 'form'
	const btnType = ref<BtnType>('index')
	const btnText = computed(() => {
		if (btnType.value === 'index') {
			return 'Submit your Application'
		}
		if (btnType.value === 'form') {
			return 'Back to Introduction'
		}
	})

	watch(
		() => route.path,
		val => {
			if (val.includes('contestants')) {
				btnType.value = 'form'
			} else {
				btnType.value = 'index'
			}
		},
		{
			immediate: true
		}
	)
	const handleBtnClick = () => {
		if (btnType.value === 'index') {
			router.push('/award/contestants')
		} else {
			router.push('/award/index')
		}
	}
</script>

<style lang="less" scoped>
	.award-container {
		overflow: auto;
		height: 100vh;
		// 隐藏滚动条箭头，只显示滚动条本体
		box-sizing: border-box;
		&::-webkit-scrollbar {
			display: none;
			width: 0;
			height: 0;
		}
		scrollbar-width: none;
		-ms-overflow-style: none;
	}
	.header {
		height: 8rem;
		background-color: #232323;
		padding-left: 21.5rem;
		padding-right: 8.6rem;
		box-sizing: border-box;
		.header-left {
			.logo {
				width: 13rem;
				height: 5rem;
			}
		}
		.header-right {
			column-gap: 1rem;
			cursor: pointer;
			.text {
				font-size: 1.6rem;
				color: #fff;
			}
			.arrow {
				width: 2.4rem;
				height: 2.4rem;
			}
		}
	}
	.footer {
		height: 10rem;
		padding-left: 21.5rem;
		box-sizing: border-box;
		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;
		}
	}
	.qrcode-mask {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		background-color: rgba(0, 0, 0, 0.45);
		.code-wrapper {
			width: 60rem;
			height: 49.4rem;
			background-color: #fff;
			position: relative;
			border-radius: 0.8rem;
			padding-top: 6rem;
			.close-icon {
				width: 2.4rem;
				height: 2.4rem;
				position: absolute;
				top: 2rem;
				right: 2rem;
				cursor: pointer;
			}
			.code-title {
				font-family: 'PoppinsBold';
				font-weight: 600;
				font-size: 3rem;
				color: #232323;
			}
			.qrcode {
				width: 25.8rem;
				height: 25.8rem;
				margin: 3rem 0 1rem;
			}
			.tips {
				font-family: Arial;
				font-weight: 400;
				font-size: 1.4rem;
				color: #585858;
			}
		}
	}
</style>