290 lines
11 KiB
Vue
290 lines
11 KiB
Vue
<template>
|
||
<div>
|
||
<!-- 页面标题 -->
|
||
<HeroBanner
|
||
title="联系我们"
|
||
subtitle="随时欢迎您的咨询，我们将为您提供专业的云服务解决方案"
|
||
/>
|
||
|
||
<!-- 联系方式 -->
|
||
<section class="section">
|
||
<div class="container">
|
||
<div class="grid md:grid-cols-3 gap-8 mb-16">
|
||
<div v-for="(contact, index) in contactMethods" :key="index" class="bg-white p-8 rounded-lg shadow-lg hover:shadow-xl transition-all duration-300 transform hover:-translate-y-1">
|
||
<div class="w-20 h-20 bg-gradient-to-br from-secondary/20 to-secondary/10 rounded-full flex items-center justify-center mx-auto mb-6">
|
||
<i :class="['text-secondary text-3xl', contact.icon]"></i>
|
||
</div>
|
||
<h3 class="text-2xl font-semibold mb-4 text-center">{{ contact.title }}</h3>
|
||
<p class="text-gray-600 mb-2 text-center">{{ contact.subtitle }}</p>
|
||
<p class="text-2xl font-semibold text-secondary text-center">{{ contact.content }}</p>
|
||
<div v-if="contact.type === 'wechat'" class="w-32 h-32 bg-gradient-to-br from-secondary/20 to-secondary/10 rounded-lg mx-auto flex items-center justify-center mt-4">
|
||
<i class="fas fa-qrcode text-6xl text-secondary"></i>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="grid md:grid-cols-2 gap-12">
|
||
<!-- 联系表单 -->
|
||
<div class="bg-white p-8 rounded-lg shadow-lg">
|
||
<h2 class="text-3xl font-bold mb-8 text-center">在线咨询</h2>
|
||
<form @submit.prevent="submitForm" class="space-y-6">
|
||
<div class="grid md:grid-cols-2 gap-6">
|
||
<div>
|
||
<label class="block text-sm font-medium text-gray-700 mb-2" for="name">
|
||
姓名 <span class="text-red-500">*</span>
|
||
</label>
|
||
<input
|
||
type="text"
|
||
id="name"
|
||
v-model="form.name"
|
||
required
|
||
class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-secondary focus:border-transparent transition-colors duration-300"
|
||
>
|
||
</div>
|
||
<div>
|
||
<label class="block text-sm font-medium text-gray-700 mb-2" for="company">
|
||
公司名称 <span class="text-red-500">*</span>
|
||
</label>
|
||
<input
|
||
type="text"
|
||
id="company"
|
||
v-model="form.company"
|
||
required
|
||
class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-secondary focus:border-transparent transition-colors duration-300"
|
||
>
|
||
</div>
|
||
</div>
|
||
<div class="grid md:grid-cols-2 gap-6">
|
||
<div>
|
||
<label class="block text-sm font-medium text-gray-700 mb-2" for="email">
|
||
邮箱 <span class="text-red-500">*</span>
|
||
</label>
|
||
<input
|
||
type="email"
|
||
id="email"
|
||
v-model="form.email"
|
||
required
|
||
class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-secondary focus:border-transparent transition-colors duration-300"
|
||
>
|
||
</div>
|
||
<div>
|
||
<label class="block text-sm font-medium text-gray-700 mb-2" for="phone">
|
||
电话 <span class="text-red-500">*</span>
|
||
</label>
|
||
<input
|
||
type="tel"
|
||
id="phone"
|
||
v-model="form.phone"
|
||
required
|
||
class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-secondary focus:border-transparent transition-colors duration-300"
|
||
>
|
||
</div>
|
||
</div>
|
||
<div>
|
||
<label class="block text-sm font-medium text-gray-700 mb-2" for="service">
|
||
咨询服务 <span class="text-red-500">*</span>
|
||
</label>
|
||
<select
|
||
id="service"
|
||
v-model="form.service"
|
||
required
|
||
class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-secondary focus:border-transparent transition-colors duration-300"
|
||
>
|
||
<option value="">请选择咨询服务</option>
|
||
<option v-for="(service, index) in services" :key="index" :value="service.value">
|
||
{{ service.label }}
|
||
</option>
|
||
</select>
|
||
</div>
|
||
<div>
|
||
<label class="block text-sm font-medium text-gray-700 mb-2" for="message">
|
||
咨询内容 <span class="text-red-500">*</span>
|
||
</label>
|
||
<textarea
|
||
id="message"
|
||
v-model="form.message"
|
||
rows="4"
|
||
required
|
||
class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-secondary focus:border-transparent transition-colors duration-300"
|
||
></textarea>
|
||
</div>
|
||
<button
|
||
type="submit"
|
||
:disabled="submitting"
|
||
:class="['w-full py-4 px-6 rounded-lg text-white text-lg font-semibold',
|
||
submitting ? 'bg-gray-400' : 'bg-secondary hover:bg-secondary/90 transition-colors duration-300']"
|
||
>
|
||
<span v-if="submitting">
|
||
<i class="fas fa-spinner fa-spin mr-2"></i>提交中...
|
||
</span>
|
||
<span v-else>提交咨询</span>
|
||
</button>
|
||
</form>
|
||
</div>
|
||
|
||
<!-- 公司地址 -->
|
||
<div>
|
||
<div class="bg-white p-8 rounded-lg shadow-lg mb-8">
|
||
<h2 class="text-3xl font-bold mb-8 text-center">公司地址</h2>
|
||
<div class="space-y-6">
|
||
<div v-for="(info, index) in companyInfo" :key="index" class="flex items-start">
|
||
<div class="w-12 h-12 bg-gradient-to-br from-secondary/20 to-secondary/10 rounded-full flex items-center justify-center mr-4">
|
||
<i :class="['text-secondary text-xl', info.icon]"></i>
|
||
</div>
|
||
<div>
|
||
<h4 class="text-xl font-semibold mb-2">{{ info.title }}</h4>
|
||
<p class="text-gray-600">{{ info.content }}</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<!-- 地图 -->
|
||
<div class="w-full h-96 rounded-lg shadow-lg overflow-hidden bg-gray-200 flex items-center justify-center">
|
||
<i class="fas fa-map-marked-alt text-6xl text-gray-400"></i>
|
||
<span class="ml-4 text-gray-500">地图加载位置</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- 常见问题 -->
|
||
<section class="section bg-gray-50">
|
||
<div class="container">
|
||
<h2 class="text-4xl font-bold text-center mb-6">常见问题</h2>
|
||
<p class="text-xl text-center text-gray-600 mb-12">解答您最关心的问题</p>
|
||
<div class="grid md:grid-cols-2 gap-8">
|
||
<div v-for="(faq, index) in faqs" :key="index" class="bg-white p-8 rounded-lg shadow-lg hover:shadow-xl transition-all duration-300 transform hover:-translate-y-1">
|
||
<h3 class="text-2xl font-semibold mb-4">{{ faq.question }}</h3>
|
||
<p class="text-gray-600 leading-relaxed">{{ faq.answer }}</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- 通知组件 -->
|
||
<NotificationToast
|
||
:message="notification.message"
|
||
:type="notification.type"
|
||
@close="notification.message = ''"
|
||
/>
|
||
</div>
|
||
</template>
|
||
|
||
<script setup lang="ts">
|
||
import { ref, reactive } from 'vue';
|
||
|
||
// 联系方式数据
|
||
const contactMethods = [
|
||
{
|
||
icon: 'fas fa-phone',
|
||
title: '电话咨询',
|
||
subtitle: '周一至周日 9:00-21:00',
|
||
content: '400-123-4567',
|
||
type: 'phone'
|
||
},
|
||
{
|
||
icon: 'fas fa-envelope',
|
||
title: '邮件咨询',
|
||
subtitle: '7*24小时邮件支持',
|
||
content: 'contact@example.com',
|
||
type: 'email'
|
||
},
|
||
{
|
||
icon: 'fab fa-weixin',
|
||
title: '微信咨询',
|
||
subtitle: '扫描下方二维码',
|
||
content: '',
|
||
type: 'wechat'
|
||
}
|
||
];
|
||
|
||
// 公司信息
|
||
const companyInfo = [
|
||
{
|
||
icon: 'fas fa-map-marker-alt',
|
||
title: '北京总部',
|
||
content: '北京市朝阳区某某大厦10层'
|
||
},
|
||
{
|
||
icon: 'fas fa-subway',
|
||
title: '交通方式',
|
||
content: '地铁6号线某某站A出口步行5分钟'
|
||
},
|
||
{
|
||
icon: 'far fa-clock',
|
||
title: '办公时间',
|
||
content: '周一至周五: 9:00-18:00'
|
||
}
|
||
];
|
||
|
||
// 服务选项
|
||
const services = [
|
||
{ value: 'cloud', label: '云服务咨询' },
|
||
{ value: 'migration', label: '上云迁移' },
|
||
{ value: 'solution', label: '解决方案咨询' },
|
||
{ value: 'price', label: '价格咨询' },
|
||
{ value: 'other', label: '其他' }
|
||
];
|
||
|
||
// 常见问题
|
||
const faqs = [
|
||
{
|
||
question: '如何开始使用AWS云服务？',
|
||
answer: '您可以通过我们的咨询服务，获取专业的AWS云服务解决方案建议。我们的团队将根据您的具体需求，为您提供最适合的云服务方案。'
|
||
},
|
||
{
|
||
question: '如何获取技术支持？',
|
||
answer: '我们提供7*24小时技术支持服务，您可以通过电话、邮件或在线咨询等方式联系我们的技术支持团队。'
|
||
},
|
||
{
|
||
question: '如何计算使用成本？',
|
||
answer: '我们提供详细的成本评估服务，可以根据您的具体使用场景和需求，为您提供准确的成本预估和优化建议。'
|
||
},
|
||
{
|
||
question: '如何申请试用服务？',
|
||
answer: '您可以通过在线咨询或直接联系我们的销售团队，申请AWS云服务的试用。我们将为您提供专业的试用方案和技术支持。'
|
||
}
|
||
];
|
||
|
||
// 表单数据
|
||
const form = reactive({
|
||
name: '',
|
||
company: '',
|
||
email: '',
|
||
phone: '',
|
||
service: '',
|
||
message: ''
|
||
});
|
||
|
||
const submitting = ref(false);
|
||
const notification = reactive({
|
||
message: '',
|
||
type: 'success'
|
||
});
|
||
|
||
// 提交表单方法
|
||
const submitForm = async () => {
|
||
submitting.value = true;
|
||
|
||
try {
|
||
// 模拟API请求
|
||
await new Promise(resolve => setTimeout(resolve, 1500));
|
||
|
||
// 显示成功消息
|
||
notification.message = '提交成功！我们会尽快与您联系。';
|
||
notification.type = 'success';
|
||
|
||
// 重置表单
|
||
Object.keys(form).forEach(key => {
|
||
form[key as keyof typeof form] = '';
|
||
});
|
||
} catch (error) {
|
||
// 显示错误消息
|
||
notification.message = '抱歉，提交失败，请稍后重试。';
|
||
notification.type = 'error';
|
||
} finally {
|
||
submitting.value = false;
|
||
}
|
||
};
|
||
</script> |