400 lines
14 KiB
Vue
400 lines
14 KiB
Vue
<script lang="ts" setup>
|
||
/**
|
||
* 联系我们页面
|
||
* 基于玉犀科技官网的联系我们内容
|
||
*/
|
||
|
||
import { ref } from 'vue'
|
||
|
||
// 页面SEO配置
|
||
useSeoMeta({
|
||
title: '联系我们 - 玉犀科技',
|
||
description: '联系玉犀科技，获取专业的共享软件开发和物联网解决方案服务',
|
||
keywords: '联系我们,玉犀科技,商务合作,技术支持,客户服务',
|
||
robots: 'index, follow'
|
||
})
|
||
|
||
// 联系信息
|
||
const contactInfo = ref({
|
||
company: '深圳市玉犀科技有限公司',
|
||
address: '深圳市龙华新区1970文化创意产业园A栋206',
|
||
phone: '18123752516',
|
||
servicePhone: '0755-85225123',
|
||
email: 'yuxi@yuxiit.com',
|
||
website: 'https://www.yuxiit.com',
|
||
workingHours: '周一至周五 9:00-18:00',
|
||
icp: '粤ICP备14055703号-1'
|
||
})
|
||
|
||
// 联系表单数据
|
||
const contactForm = ref({
|
||
name: '',
|
||
company: '',
|
||
phone: '',
|
||
email: '',
|
||
subject: '',
|
||
message: ''
|
||
})
|
||
|
||
// 业务类型
|
||
const businessTypes = ref([
|
||
{ value: 'shared-solutions', label: '共享解决方案' },
|
||
{ value: 'industry-solutions', label: '行业解决方案' },
|
||
{ value: 'software-development', label: '软件应用开发' },
|
||
{ value: 'iot-solutions', label: '物联网解决方案' },
|
||
{ value: 'other', label: '其他业务' }
|
||
])
|
||
|
||
// 联系方式
|
||
const contactMethods = ref([
|
||
{
|
||
title: '客服电话',
|
||
value: contactInfo.value.servicePhone,
|
||
description: '工作日 9:00-18:00',
|
||
icon: 'i-lucide-phone',
|
||
color: 'bg-blue-100 text-blue-600'
|
||
},
|
||
{
|
||
title: '商务合作',
|
||
value: contactInfo.value.phone,
|
||
description: '24小时在线',
|
||
icon: 'i-lucide-handshake',
|
||
color: 'bg-green-100 text-green-600'
|
||
},
|
||
{
|
||
title: '技术支持',
|
||
value: contactInfo.value.email,
|
||
description: '技术问题咨询',
|
||
icon: 'i-lucide-headphones',
|
||
color: 'bg-purple-100 text-purple-600'
|
||
},
|
||
{
|
||
title: '公司地址',
|
||
value: contactInfo.value.address,
|
||
description: '欢迎实地考察',
|
||
icon: 'i-lucide-map-pin',
|
||
color: 'bg-orange-100 text-orange-600'
|
||
}
|
||
])
|
||
|
||
// 服务优势
|
||
const serviceAdvantages = ref([
|
||
{
|
||
title: '专业团队',
|
||
description: '拥有丰富的项目经验和技术实力',
|
||
icon: 'i-lucide-users'
|
||
},
|
||
{
|
||
title: '快速响应',
|
||
description: '24小时内响应客户需求',
|
||
icon: 'i-lucide-zap'
|
||
},
|
||
{
|
||
title: '定制服务',
|
||
description: '根据客户需求提供定制化解决方案',
|
||
icon: 'i-lucide-settings'
|
||
},
|
||
{
|
||
title: '持续支持',
|
||
description: '提供长期的技术支持和维护服务',
|
||
icon: 'i-lucide-shield-check'
|
||
}
|
||
])
|
||
|
||
// 提交联系表单
|
||
const submitContactForm = () => {
|
||
if (!contactForm.value.name || !contactForm.value.phone || !contactForm.value.message) {
|
||
alert('请填写必填字段')
|
||
return
|
||
}
|
||
|
||
// 这里可以添加表单提交逻辑
|
||
console.log('提交联系表单:', contactForm.value)
|
||
alert('感谢您的咨询，我们会尽快与您联系！')
|
||
|
||
// 重置表单
|
||
contactForm.value = {
|
||
name: '',
|
||
company: '',
|
||
phone: '',
|
||
email: '',
|
||
subject: '',
|
||
message: ''
|
||
}
|
||
}
|
||
|
||
// 复制联系信息
|
||
const copyContactInfo = (text: string, type: string) => {
|
||
navigator.clipboard.writeText(text).then(() => {
|
||
alert(`${type}已复制到剪贴板`)
|
||
}).catch(() => {
|
||
alert('复制失败，请手动复制')
|
||
})
|
||
}
|
||
</script>
|
||
|
||
<template>
|
||
<div class="min-h-screen bg-gray-50">
|
||
<!-- 页面头部 -->
|
||
<section class="bg-gradient-to-br from-blue-600 to-indigo-700 text-white py-20">
|
||
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 text-center">
|
||
<h1 class="text-4xl md:text-6xl font-bold mb-6">联系我们</h1>
|
||
<p class="text-xl md:text-2xl text-blue-100 max-w-3xl mx-auto">
|
||
专业团队为您提供优质的共享软件开发和物联网解决方案服务
|
||
</p>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- 联系方式 -->
|
||
<section class="py-20">
|
||
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
||
<div class="text-center mb-16">
|
||
<h2 class="text-4xl font-bold text-gray-900 mb-4">联系方式</h2>
|
||
<p class="text-xl text-gray-600 max-w-3xl mx-auto">
|
||
多种联系方式，为您提供便捷的沟通渠道
|
||
</p>
|
||
</div>
|
||
|
||
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8">
|
||
<div
|
||
v-for="method in contactMethods"
|
||
:key="method.title"
|
||
class="bg-white rounded-xl p-6 shadow-lg hover:shadow-xl transition-shadow text-center group"
|
||
>
|
||
<div class="w-16 h-16 rounded-full flex items-center justify-center mx-auto mb-4 group-hover:scale-110 transition-transform"
|
||
:class="method.color">
|
||
<UIcon :name="method.icon" class="w-8 h-8" />
|
||
</div>
|
||
<h3 class="text-xl font-semibold text-gray-900 mb-2">{{ method.title }}</h3>
|
||
<p class="text-lg font-medium text-gray-700 mb-2">{{ method.value }}</p>
|
||
<p class="text-gray-500 text-sm mb-4">{{ method.description }}</p>
|
||
<button
|
||
@click="copyContactInfo(method.value, method.title)"
|
||
class="text-blue-600 hover:text-blue-700 text-sm font-medium"
|
||
>
|
||
复制信息
|
||
</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- 联系表单 -->
|
||
<section class="py-20 bg-white">
|
||
<div class="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8">
|
||
<div class="text-center mb-12">
|
||
<h2 class="text-3xl font-bold text-gray-900 mb-4">在线咨询</h2>
|
||
<p class="text-xl text-gray-600">
|
||
填写以下信息，我们会尽快与您联系
|
||
</p>
|
||
</div>
|
||
|
||
<form @submit.prevent="submitContactForm" class="space-y-6">
|
||
<div class="grid grid-cols-1 md:grid-cols-2 gap-6">
|
||
<div>
|
||
<label class="block text-gray-700 font-medium mb-2">姓名 *</label>
|
||
<input
|
||
type="text"
|
||
v-model="contactForm.name"
|
||
required
|
||
placeholder="请输入您的姓名"
|
||
class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent"
|
||
/>
|
||
</div>
|
||
<div>
|
||
<label class="block text-gray-700 font-medium mb-2">公司名称</label>
|
||
<input
|
||
type="text"
|
||
v-model="contactForm.company"
|
||
placeholder="请输入公司名称"
|
||
class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent"
|
||
/>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="grid grid-cols-1 md:grid-cols-2 gap-6">
|
||
<div>
|
||
<label class="block text-gray-700 font-medium mb-2">联系电话 *</label>
|
||
<input
|
||
type="tel"
|
||
v-model="contactForm.phone"
|
||
required
|
||
placeholder="请输入联系电话"
|
||
class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent"
|
||
/>
|
||
</div>
|
||
<div>
|
||
<label class="block text-gray-700 font-medium mb-2">邮箱地址</label>
|
||
<input
|
||
type="email"
|
||
v-model="contactForm.email"
|
||
placeholder="请输入邮箱地址"
|
||
class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent"
|
||
/>
|
||
</div>
|
||
</div>
|
||
|
||
<div>
|
||
<label class="block text-gray-700 font-medium mb-2">业务类型</label>
|
||
<select
|
||
v-model="contactForm.subject"
|
||
class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent"
|
||
>
|
||
<option value="">请选择业务类型</option>
|
||
<option
|
||
v-for="type in businessTypes"
|
||
:key="type.value"
|
||
:value="type.value"
|
||
>
|
||
{{ type.label }}
|
||
</option>
|
||
</select>
|
||
</div>
|
||
|
||
<div>
|
||
<label class="block text-gray-700 font-medium mb-2">详细需求 *</label>
|
||
<textarea
|
||
v-model="contactForm.message"
|
||
required
|
||
rows="6"
|
||
placeholder="请详细描述您的需求..."
|
||
class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent resize-none"
|
||
></textarea>
|
||
</div>
|
||
|
||
<div class="text-center">
|
||
<button
|
||
type="submit"
|
||
class="px-8 py-4 bg-blue-600 hover:bg-blue-700 text-white font-semibold rounded-lg transition-colors"
|
||
>
|
||
提交咨询
|
||
</button>
|
||
</div>
|
||
</form>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- 服务优势 -->
|
||
<section class="py-20 bg-gray-50">
|
||
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
||
<div class="text-center mb-16">
|
||
<h2 class="text-4xl font-bold text-gray-900 mb-4">服务优势</h2>
|
||
<p class="text-xl text-gray-600 max-w-3xl mx-auto">
|
||
专业的服务团队，为您提供优质的技术支持
|
||
</p>
|
||
</div>
|
||
|
||
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8">
|
||
<div
|
||
v-for="advantage in serviceAdvantages"
|
||
:key="advantage.title"
|
||
class="text-center group"
|
||
>
|
||
<div class="w-20 h-20 bg-blue-100 rounded-full flex items-center justify-center mx-auto mb-4 group-hover:bg-blue-200 transition-colors">
|
||
<UIcon :name="advantage.icon" class="w-10 h-10 text-blue-600" />
|
||
</div>
|
||
<h3 class="text-xl font-semibold text-gray-900 mb-3">{{ advantage.title }}</h3>
|
||
<p class="text-gray-600">{{ advantage.description }}</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- 地图位置 -->
|
||
<section class="py-20 bg-white">
|
||
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
||
<div class="text-center mb-12">
|
||
<h2 class="text-3xl font-bold text-gray-900 mb-4">公司位置</h2>
|
||
<p class="text-xl text-gray-600">
|
||
欢迎您到公司实地考察，了解我们的技术实力
|
||
</p>
|
||
</div>
|
||
|
||
<div class="grid grid-cols-1 lg:grid-cols-2 gap-12 items-center">
|
||
<div>
|
||
<h3 class="text-2xl font-bold text-gray-900 mb-4">{{ contactInfo.company }}</h3>
|
||
<div class="space-y-4">
|
||
<div class="flex items-start space-x-3">
|
||
<UIcon name="i-lucide-map-pin" class="w-6 h-6 text-blue-600 mt-1 flex-shrink-0" />
|
||
<div>
|
||
<p class="font-medium text-gray-900">公司地址</p>
|
||
<p class="text-gray-600">{{ contactInfo.address }}</p>
|
||
</div>
|
||
</div>
|
||
<div class="flex items-start space-x-3">
|
||
<UIcon name="i-lucide-clock" class="w-6 h-6 text-blue-600 mt-1 flex-shrink-0" />
|
||
<div>
|
||
<p class="font-medium text-gray-900">工作时间</p>
|
||
<p class="text-gray-600">{{ contactInfo.workingHours }}</p>
|
||
</div>
|
||
</div>
|
||
<div class="flex items-start space-x-3">
|
||
<UIcon name="i-lucide-phone" class="w-6 h-6 text-blue-600 mt-1 flex-shrink-0" />
|
||
<div>
|
||
<p class="font-medium text-gray-900">联系电话</p>
|
||
<p class="text-gray-600">{{ contactInfo.phone }}</p>
|
||
</div>
|
||
</div>
|
||
<div class="flex items-start space-x-3">
|
||
<UIcon name="i-lucide-mail" class="w-6 h-6 text-blue-600 mt-1 flex-shrink-0" />
|
||
<div>
|
||
<p class="font-medium text-gray-900">邮箱地址</p>
|
||
<p class="text-gray-600">{{ contactInfo.email }}</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="bg-gray-200 rounded-xl h-96 flex items-center justify-center">
|
||
<div class="text-center text-gray-500">
|
||
<UIcon name="i-lucide-map" class="w-16 h-16 mx-auto mb-4" />
|
||
<p>地图位置</p>
|
||
<p class="text-sm">{{ contactInfo.address }}</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- 快速联系 -->
|
||
<section class="py-20 bg-blue-600 text-white">
|
||
<div class="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 text-center">
|
||
<h2 class="text-3xl font-bold mb-6">快速联系</h2>
|
||
<p class="text-xl text-blue-100 mb-8">
|
||
多种联系方式，选择最适合您的沟通方式
|
||
</p>
|
||
<div class="flex flex-col sm:flex-row gap-4 justify-center">
|
||
<a
|
||
:href="`tel:${contactInfo.phone}`"
|
||
class="inline-flex items-center px-8 py-4 bg-white hover:bg-gray-100 text-blue-600 font-semibold rounded-lg transition-colors"
|
||
>
|
||
<UIcon name="i-lucide-phone" class="w-5 h-5 mr-2" />
|
||
电话咨询
|
||
</a>
|
||
<a
|
||
:href="`mailto:${contactInfo.email}`"
|
||
class="inline-flex items-center px-8 py-4 bg-blue-500 hover:bg-blue-400 text-white font-semibold rounded-lg transition-colors"
|
||
>
|
||
<UIcon name="i-lucide-mail" class="w-5 h-5 mr-2" />
|
||
邮件咨询
|
||
</a>
|
||
<NuxtLink
|
||
to="/yuxi/about"
|
||
class="inline-flex items-center px-8 py-4 bg-transparent hover:bg-white/10 text-white font-semibold rounded-lg border border-white transition-colors"
|
||
>
|
||
<UIcon name="i-lucide-info" class="w-5 h-5 mr-2" />
|
||
了解更多
|
||
</NuxtLink>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
</div>
|
||
</template>
|
||
|
||
<style scoped>
|
||
/* 自定义样式 */
|
||
.group:hover .group-hover\:scale-110 {
|
||
transform: scale(1.1);
|
||
}
|
||
</style>
|
||
|