Code-Create/src/pages/contact-us/index.vue

<template>
	<div class="contact-us">
		<img class="bg" src="@/assets/images/contact-us/bg.jpg" alt="" />
		<section class="header">
			<h1 v-custom-animation.once duration="1s" translate-y-s="-100%" opacity-s="0">
				{{ $t('MainHeader.ContactUs') }}
			</h1>
		</section>
		<section class="contact">
			<span class="iconfont icon-dingwei"></span>
			<h3 class="title">{{ $t('Contact') }}</h3>
			<a class="email" href="mailto:info@code-create.com.hk">info@code-create.com.hk</a>
		</section>
		<section class="contact-input">
			<EmailBox @submit="submit" :title="$t('GetInTouch')" :tip="$t('StayUpToDate')" />
		</section>
	</div>
</template>
<script setup lang="ts">
	import { ref } from 'vue'
	import EmailBox from '@/components/email-box.vue'

	const submit = (email: string) => {
		console.log(email)
	}
</script>

<style scoped lang="less">
	.contact-us {
		> * {
			position: relative;
			z-index: 1;
		}
		> .bg {
			height: 514px;
			width: 100%;
			object-fit: cover;
			position: fixed;
			top: 0;
			z-index: 0;
		}
		> .header {
			height: 514px;
			display: flex;
			align-items: center;
			justify-content: center;
			> h1 {
				font-size: 64px;
				font-weight: 600;
				letter-spacing: 2px;
				color: #fff;
				margin-bottom: 50px;
				text-transform: uppercase;
			}
		}
		> .contact {
			background-color: #fff;
			display: flex;
			flex-direction: column;
			align-items: center;
			padding: 40px;
			> .iconfont {
				font-size: 50px;
				color: #4f4f4f;
				margin-bottom: 20px;
			}
			> .title {
				font-weight: 600;
				line-height: 36px;
				color: #464f3b;
				font-size: 24px;
				margin-bottom: 15px;
			}
			> .email {
				font-size: 14px;
				color: #222;
				text-decoration: none;
			}
		}
		> .contact-input {
			padding: 100px;
			background-color: #faf8f8;
			> .email-box {
				max-width: 860px;
			}
		}
	}
</style>