naweigete-web/pages/index_contact.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>