245 lines
7.4 KiB
Vue
245 lines
7.4 KiB
Vue
|
<template>
|
|||
|
|
<div class="bg-white">
|
|||
|
|
<!-- Contact section -->
|
|||
|
|
<div class="box2">
|
|||
|
|
<div class="flex flex-wrap justify-center items-center pb-[50px] md:pb-[50px] px-4 md:px-0">
|
|||
|
|
<div class="w-full md:w-[45%] mb-6 md:mb-0">
|
|||
|
|
<img src="/images/contact1.png" class="w-full h-full object-cover" alt="Contact Image">
|
|||
|
|
</div>
|
|||
|
|
<div class="w-full md:w-[55%] px-4 md:px-[115px] pt-6 md:pt-[115px]">
|
|||
|
|
<div class="contactTit">
|
|||
|
|
<h2 class="text-[28px] md:text-[40px] font-bold">{{ $t('contact_b1') }}</h2>
|
|||
|
|
<div class="contactBox5zd w-[50px] h-[3px] bg-blue-600 mb-4 md:mb-8"></div>
|
|||
|
|
|
|||
|
|
<!-- 重新结构化联系信息区域 -->
|
|||
|
|
<div class="flex flex-col md:flex-row md:items-center mb-3 md:mb-10">
|
|||
|
|
<div class="flex items-center mb-3 md:mb-0 md:mr-6">
|
|||
|
|
<img src="/images/contact6.png" class="w-[30px] h-[30px] md:w-[35px] md:h-[35px] mr-2" alt="Phone">
|
|||
|
|
<span class="text-base md:text-lg break-all">+86-186-379-00319</span>
|
|||
|
|
</div>
|
|||
|
|
<div class="flex items-center">
|
|||
|
|
<img src="/images/contact5.png" class="w-[30px] h-[30px] md:w-[35px] md:h-[35px] mr-2" alt="Email">
|
|||
|
|
<span class="text-base md:text-lg break-all">hwang@joker019.com</span>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<form class="contactForm mt-6 md:mt-12 w-full md:w-[700px]" @submit.prevent="submitForm">
|
|||
|
|
<input
|
|||
|
|
v-model="formData.name"
|
|||
|
|
class="contactInput w-full md:w-[700px]"
|
|||
|
|
type="text"
|
|||
|
|
:placeholder="$t('contact_b2')"
|
|||
|
|
/>
|
|||
|
|
<input
|
|||
|
|
v-model="formData.mobile"
|
|||
|
|
class="contactInput mt-[15px] md:mt-[30px] w-full md:w-[700px]"
|
|||
|
|
type="text"
|
|||
|
|
:placeholder="$t('contact_b3')"
|
|||
|
|
/>
|
|||
|
|
<div class="relative mt-4 md:mt-8 w-full md:w-[700px]">
|
|||
|
|
<textarea
|
|||
|
|
v-model="formData.content"
|
|||
|
|
id="myTextarea"
|
|||
|
|
:placeholder="$t('contact_b4')"
|
|||
|
|
rows="6"
|
|||
|
|
maxlength="100"
|
|||
|
|
class="w-full md:w-[700px]"
|
|||
|
|
></textarea>
|
|||
|
|
<div class="char-count">{{ formData.content.length }}/100</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div class="flex justify-end mt-4 md:mt-6">
|
|||
|
|
<button
|
|||
|
|
type="submit"
|
|||
|
|
class="contactBut"
|
|||
|
|
>
|
|||
|
|
{{ $t('contact_b5') }}
|
|||
|
|
</button>
|
|||
|
|
</div>
|
|||
|
|
</form>
|
|||
|
|
|
|||
|
|
<h8 class="text-[22px] md:text-[30px] block mt-6 md:mt-8">{{ $t('contact_b6') }}</h8>
|
|||
|
|
<div class="contactdx8"></div>
|
|||
|
|
|
|||
|
|
<div class="contactImg1 flex space-x-4 md:space-x-6 mt-4 md:mt-8">
|
|||
|
|
<img @click="shareToYoutube" class="w-8 h-8 md:w-10 md:h-10 cursor-pointer hover:opacity-80 transition" src="/images/contact2.png" alt="Youtube">
|
|||
|
|
<img @click="shareToFacebook" class="w-8 h-8 md:w-10 md:h-10 cursor-pointer hover:opacity-80 transition" src="/images/contact7.png" alt="Facebook">
|
|||
|
|
<img @click="shareToInstagram" class="w-8 h-8 md:w-10 md:h-10 cursor-pointer hover:opacity-80 transition" src="/images/contact8.png" alt="Instagram">
|
|||
|
|
<img @click="shareToX" class="w-8 h-8 md:w-10 md:h-10 cursor-pointer hover:opacity-80 transition" src="/images/contact9.png" alt="Twitter">
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</template>
|
|||
|
|
|
|||
|
|
<script lang="ts" setup>
|
|||
|
|
import { ref, reactive } from 'vue'
|
|||
|
|
import { useI18n } from 'vue-i18n'
|
|||
|
|
|
|||
|
|
const { t } = useI18n()
|
|||
|
|
|
|||
|
|
// 表单数据
|
|||
|
|
const formData = reactive({
|
|||
|
|
name: '',
|
|||
|
|
mobile: '',
|
|||
|
|
content: ''
|
|||
|
|
})
|
|||
|
|
|
|||
|
|
// 表单提交方法
|
|||
|
|
const submitForm = () => {
|
|||
|
|
// 这里可以添加表单验证逻辑
|
|||
|
|
if (!formData.name) {
|
|||
|
|
alert(t('contact_name_required'))
|
|||
|
|
return
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
if (!formData.mobile) {
|
|||
|
|
alert(t('contact_mobile_required'))
|
|||
|
|
return
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 在实际应用中，这里应该调用API提交表单数据
|
|||
|
|
console.log('提交表单数据:', formData)
|
|||
|
|
|
|||
|
|
// 模拟提交成功
|
|||
|
|
alert(t('contact_submit_success'))
|
|||
|
|
|
|||
|
|
// 重置表单
|
|||
|
|
formData.name = ''
|
|||
|
|
formData.mobile = ''
|
|||
|
|
formData.content = ''
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 社交媒体分享方法
|
|||
|
|
const shareToYoutube = () => {
|
|||
|
|
window.open('https://www.youtube.com/channel/YOUR_CHANNEL_ID', '_blank')
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
const shareToFacebook = () => {
|
|||
|
|
window.open('https://www.facebook.com/YOUR_PAGE', '_blank')
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
const shareToInstagram = () => {
|
|||
|
|
window.open('https://www.instagram.com/YOUR_ACCOUNT', '_blank')
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
const shareToX = () => {
|
|||
|
|
window.open('https://twitter.com/YOUR_ACCOUNT', '_blank')
|
|||
|
|
}
|
|||
|
|
</script>
|
|||
|
|
|
|||
|
|
<style scoped>
|
|||
|
|
/* 可以添加一些特定的样式，但大部分已经通过Tailwind实现 */
|
|||
|
|
.animated {
|
|||
|
|
animation-duration: 1s;
|
|||
|
|
animation-fill-mode: both;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.fadeInLeft {
|
|||
|
|
animation-name: fadeInLeft;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
@keyframes fadeInLeft {
|
|||
|
|
from {
|
|||
|
|
opacity: 0;
|
|||
|
|
transform: translate3d(-100%, 0, 0);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
to {
|
|||
|
|
opacity: 1;
|
|||
|
|
transform: none;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
.contactTit h2::after {
|
|||
|
|
content: '';
|
|||
|
|
margin-top: -25px;
|
|||
|
|
width: 229px;
|
|||
|
|
height: 24px;
|
|||
|
|
background: #A8CBFF;
|
|||
|
|
display: block;
|
|||
|
|
}
|
|||
|
|
@media (max-width: 768px) {
|
|||
|
|
.contactTit h2::after {
|
|||
|
|
margin-top: -15px;
|
|||
|
|
width: 160px;
|
|||
|
|
height: 18px;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
.contactBox5zd {
|
|||
|
|
width: 100%;
|
|||
|
|
margin-bottom: 14px;
|
|||
|
|
border-top: 2px solid #175FCB;
|
|||
|
|
}
|
|||
|
|
.contactTit h3 span {
|
|||
|
|
font-weight: 400;
|
|||
|
|
font-size: 22px;
|
|||
|
|
color: #1C1C1C;
|
|||
|
|
line-height: 26px;
|
|||
|
|
text-align: left;
|
|||
|
|
margin-left: 4px;
|
|||
|
|
}
|
|||
|
|
@media (max-width: 768px) {
|
|||
|
|
.contactTit h3 span {
|
|||
|
|
font-size: 16px;
|
|||
|
|
line-height: 20px;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
.contactInput{border: 0px solid;border-bottom:1px solid #A8CBFF;font-size: 24px;color: #A8CBFF;height: 50px;}
|
|||
|
|
.contactInput::placeholder {color: #A8CBFF;}
|
|||
|
|
.contactInput:focus {outline: none;}
|
|||
|
|
@media (max-width: 768px) {
|
|||
|
|
.contactInput {
|
|||
|
|
font-size: 18px;
|
|||
|
|
height: 40px;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
#myTextarea {padding: 10px;border-radius: 10px;margin-top: 32px;border: 1px solid #A8CBFF;font-weight: 400;font-size: 22px;color: #A8CBFF;line-height: 22px;resize: none; /* 禁止用户调整文本域大小 */}
|
|||
|
|
#myTextarea::placeholder {color: #A8CBFF;}
|
|||
|
|
#myTextarea:focus {outline: none;}
|
|||
|
|
@media (max-width: 768px) {
|
|||
|
|
#myTextarea {
|
|||
|
|
font-size: 16px;
|
|||
|
|
line-height: 18px;
|
|||
|
|
margin-top: 16px;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
.char-count {position: absolute;bottom: 5px; /* 根据需要调整距离底部的位置 */right: 10px; /* 根据需要调整距离右侧的位置 */font-size: 12px; /* 根据需要调整字体大小 */color: #A8CBFF;}
|
|||
|
|
.text-area-container {position: relative;width: 100%;}
|
|||
|
|
.contactBut{ background-color: #ffffff; border: none; font-weight: bold;font-size: 22px;line-height: 28px;color: #175FCB;}
|
|||
|
|
.contactBut::after {
|
|||
|
|
content: '';margin-top: -10px;width: 123px;height:14px;background: #A8CBFF;display: block;margin-left: 2px;margin-bottom: 40px;
|
|||
|
|
}
|
|||
|
|
@media (max-width: 768px) {
|
|||
|
|
.contactBut {
|
|||
|
|
font-size: 18px;
|
|||
|
|
line-height: 22px;
|
|||
|
|
}
|
|||
|
|
.contactBut::after {
|
|||
|
|
width: 100px;
|
|||
|
|
height: 10px;
|
|||
|
|
margin-bottom: 20px;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
.contactForm{width: 100%;}
|
|||
|
|
.contactTit h8 {
|
|||
|
|
font-weight: bold;
|
|||
|
|
font-size: 24px;
|
|||
|
|
color: #175FCB;
|
|||
|
|
line-height: 28px;
|
|||
|
|
text-align: left;
|
|||
|
|
}
|
|||
|
|
@media (max-width: 768px) {
|
|||
|
|
.contactTit h8 {
|
|||
|
|
font-size: 20px;
|
|||
|
|
line-height: 24px;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
.contactdx8{
|
|||
|
|
width: 100%;
|
|||
|
|
margin-top: 5px;
|
|||
|
|
border-top: 2px solid #175FCB;
|
|||
|
|
}
|
|||
|
|
</style>
|