261 lines
7.5 KiB
Vue
261 lines
7.5 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">{{ store.tempApiData.luoyang_sales_hotline }}</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">{{ store.tempApiData.site_mail }}</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 v-for="(item, index) in store.serApiData" @click="shareToLink(item)" class="w-8 h-8 md:w-10 md:h-10 cursor-pointer hover:opacity-80 transition" :src="item.img_two" alt="Youtube">
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</template>
|
||
|
||
<script lang="ts" setup>
|
||
import { ref, reactive } from 'vue'
|
||
import { useI18n } from 'vue-i18n'
|
||
const { locale,t} = useI18n()
|
||
import { useStore } from '~/store'
|
||
import $api from '@/service/webRequest'
|
||
const store = useStore()
|
||
// 表单数据
|
||
const formData = reactive({
|
||
name: '',
|
||
mobile: '',
|
||
content: ''
|
||
})
|
||
// 社交分享功能
|
||
const shareToLink = (item) => {
|
||
// 实现Instagram分享
|
||
window.open(item.link, '_blank');
|
||
}
|
||
// 表单提交方法
|
||
const submitForm = () => {
|
||
console.log(formData);
|
||
|
||
// 这里可以添加表单验证逻辑
|
||
if (!formData.name) {
|
||
alert(t('contact_name_required'))
|
||
return
|
||
}
|
||
|
||
if (!formData.mobile) {
|
||
alert(t('contact_mobile_required'))
|
||
return
|
||
}
|
||
if (!formData.content) {
|
||
alert(t('contact_content_required'))
|
||
return
|
||
}
|
||
$api.post("/api/leave_word",formData)
|
||
.then((res: any) => {
|
||
console.log(res)
|
||
if(res.data.status==200){
|
||
alert(t('contact_success'))
|
||
}else{
|
||
alert(t('contact_error'))
|
||
}
|
||
formData.name = '';
|
||
formData.mobile = '';
|
||
formData.content = '';
|
||
})
|
||
.catch((err) => {
|
||
console.dir(err)
|
||
})
|
||
// 重置表单
|
||
// 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: #000;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: #000;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>
|