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