148 lines
3.1 KiB
Vue
148 lines
3.1 KiB
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">
|
||
|
|
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>
|