媒体报道&联系我们

src/pages/contact-us/index.vue

@@ -0,0 +1,147 @@
+<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">
+				CONTACT US
+			</h1>
+		</section>
+		<section class="contact">
+			<span class="iconfont icon-dingwei"></span>
+			<h3 class="title">Contact</h3>
+			<a class="email" href="mailto:info@code-create.com.hk">info@code-create.com.hk</a>
+		</section>
+		<section class="contact-input">
+			<div class="box">
+				<h3 class="title">Get In Touch</h3>
+				<div class="tip">Stay up to date with our e-newsletter</div>
+				<input
+					v-model="email"
+					@keydown.enter.prevent="submit"
+					type="email"
+					placeholder="Email Address"
+				/>
+				<div v-show="error" class="error">{{ error }}</div>
+				<button custom @click="submit">SUBMIT</button>
+			</div>
+		</section>
+	</div>
+</template>
+<script setup lang="ts">
+	import { ref } from 'vue'
+	const email = ref('')
+	const error = ref('')
+	const submit = () => {
+		if (!validateEmail(email.value)) return
+		console.log(email.value)
+	}
+	// 验证邮箱
+	const validateEmail = (email: string) => {
+		if (email === '') {
+			error.value = 'Please fill out this field.'
+			return false
+		} else if (!/^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/.test(email)) {
+			error.value = 'Please enter a valid email address.'
+			return false
+		}
+		error.value = ''
+		return true
+	}
+</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;
+			}
+		}
+		> .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;
+			> .box {
+				max-width: 860px;
+				width: 100%;
+				padding: 80px;
+				margin: 0 auto;
+				background-color: #fff;
+				box-shadow: 0px 0px 40px 0px rgba(0, 0, 0, 0.2);
+				border-radius: 40px;
+				> .title {
+					font-size: 40px;
+					color: #222;
+					margin-bottom: 10px;
+				}
+				> .tip {
+					color: #4d4d4d;
+					margin-bottom: 20px;
+				}
+				> input {
+					width: 100%;
+					border-radius: 40px;
+					height: 40px;
+					padding: 0 20px;
+					border: 1px solid #e1e1e1;
+					outline: none;
+					color: #222;
+				}
+				> .error {
+					font-size: 14px;
+					color: #dc3232;
+				}
+				> button {
+					margin-top: 10px;
+					width: 100%;
+					border-radius: 50px;
+					height: 50px;
+					font-weight: bold;
+					--hover-backcolor: #000;
+				}
+			}
+		}
+	}
+</style>