{"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}