111

src/pages/contact-us/index.vue

@@ -2,7 +2,7 @@
 	<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">
+			<h1 v-custom-animation.once duration="1s" translate-y-s="-100%" opacity-s="0">
 				{{ $t('MainHeader.ContactUs') }}
 			</h1>
 		</section>
@@ -12,40 +12,16 @@
 			<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">{{ $t('GetInTouch') }}</h3>
-				<div class="tip">{{ $t('StayUpToDate') }}</div>
-				<input
-					v-model="email"
-					@keydown.enter.prevent="submit"
-					type="email"
-					:placeholder="$t('EmailAddress')"
-				/>
-				<div v-show="error" class="error">{{ error }}</div>
-				<button custom @click="submit">{{ $t('Submit') }}</button>
-			</div>
+			<EmailBox @submit="submit" :title="$t('GetInTouch')" :tip="$t('StayUpToDate')" />
 		</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
+	import EmailBox from '@/components/email-box.vue'
+
+	const submit = (email: string) => {
+		console.log(email)
 	}
 </script>
 
@@ -104,44 +80,8 @@
 		> .contact-input {
 			padding: 100px;
 			background-color: #faf8f8;
-			> .box {
+			> .email-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;
-				}
 			}
 		}
 	}