{"version":3,"file":"contact.vue2.mjs","sources":["../../../../pages/contact.vue"],"sourcesContent":["<template>\r\n  <div>\r\n    <!-- 页面标题 -->\r\n    <HeroBanner \r\n      :title=\"$t('contact.hero.title')\" \r\n      :subtitle=\"$t('contact.hero.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\">{{ $t(contact.titleKey) }}</h3>\r\n            <p class=\"text-gray-600 mb-2 text-center\">{{ $t(contact.subtitleKey) }}</p>\r\n            <p class=\"text-2xl font-semibold text-secondary text-center\">{{ $t(contact.contentKey) }}</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\">{{ $t('contact.form.title') }}</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                    {{ $t('contact.form.name') }} <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                    {{ $t('contact.form.company') }} <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                    {{ $t('contact.form.email') }} <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                    {{ $t('contact.form.phone') }} <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                  {{ $t('contact.form.service') }} <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=\"\">{{ $t('contact.form.placeholders.selectService') }}</option>\r\n                  <option v-for=\"(service, index) in services\" :key=\"index\" :value=\"service.value\">\r\n                    {{ $t(service.labelKey) }}\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                  {{ $t('contact.form.message') }} <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>{{ $t('contact.form.submitting') }}\r\n                </span>\r\n                <span v-else>{{ $t('contact.form.submit') }}</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\">{{ $t('contact.companyInfo.title') }}</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\">{{ $t(info.titleKey) }}</h4>\r\n                    <p class=\"text-gray-600\">{{ $t(info.contentKey) }}</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\">{{ $t('contact.faq.title') }}</h2>\r\n        <p class=\"text-xl text-center text-gray-600 mb-12\">{{ $t('contact.faq.subtitle') }}</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\">{{ $t(faq.questionKey) }}</h3>\r\n            <p class=\"text-gray-600 leading-relaxed\">{{ $t(faq.answerKey) }}</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\nimport { useI18n } from 'vue-i18n';\r\n\r\nconst { t } = useI18n();\r\n\r\n// 联系方式数据\r\nconst contactMethods = [\r\n  {\r\n    icon: 'fas fa-phone',\r\n    titleKey: 'contact.methods.phone.title',\r\n    subtitleKey: 'contact.methods.phone.subtitle',\r\n    contentKey: 'contact.methods.phone.content',\r\n    type: 'phone'\r\n  },\r\n  {\r\n    icon: 'fas fa-envelope',\r\n    titleKey: 'contact.methods.email.title',\r\n    subtitleKey: 'contact.methods.email.subtitle',\r\n    contentKey: 'contact.methods.email.content',\r\n    type: 'email'\r\n  },\r\n  {\r\n    icon: 'fab fa-weixin',\r\n    titleKey: 'contact.methods.wechat.title',\r\n    subtitleKey: 'contact.methods.wechat.subtitle',\r\n    contentKey: '',\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    titleKey: 'contact.companyInfo.beijing.title',\r\n    contentKey: 'contact.companyInfo.beijing.content'\r\n  },\r\n  {\r\n    icon: 'fas fa-subway',\r\n    titleKey: 'contact.companyInfo.transport.title',\r\n    contentKey: 'contact.companyInfo.transport.content'\r\n  },\r\n  {\r\n    icon: 'far fa-clock',\r\n    titleKey: 'contact.companyInfo.hours.title',\r\n    contentKey: 'contact.companyInfo.hours.content'\r\n  }\r\n];\r\n\r\n// 服务选项\r\nconst services = [\r\n  { value: 'cloud', labelKey: 'contact.form.serviceOptions.cloud' },\r\n  { value: 'migration', labelKey: 'contact.form.serviceOptions.migration' },\r\n  { value: 'solution', labelKey: 'contact.form.serviceOptions.solution' },\r\n  { value: 'price', labelKey: 'contact.form.serviceOptions.price' },\r\n  { value: 'other', labelKey: 'contact.form.serviceOptions.other' }\r\n];\r\n\r\n// 常见问题\r\nconst faqs = [\r\n  {\r\n    questionKey: 'contact.faq.items.q1.question',\r\n    answerKey: 'contact.faq.items.q1.answer'\r\n  },\r\n  {\r\n    questionKey: 'contact.faq.items.q2.question',\r\n    answerKey: 'contact.faq.items.q2.answer'\r\n  },\r\n  {\r\n    questionKey: 'contact.faq.items.q3.question',\r\n    answerKey: 'contact.faq.items.q3.answer'\r\n  },\r\n  {\r\n    questionKey: 'contact.faq.items.q4.question',\r\n    answerKey: 'contact.faq.items.q4.answer'\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> "],"names":[],"mappings":";;;;;;;;;;;AAiLM,UAAA,EAAE,EAAE,IAAI,QAAQ;AAGtB,UAAM,iBAAiB;AAAA,MACrB;AAAA,QACE,MAAM;AAAA,QACN,UAAU;AAAA,QACV,aAAa;AAAA,QACb,YAAY;AAAA,QACZ,MAAM;AAAA,MACR;AAAA,MACA;AAAA,QACE,MAAM;AAAA,QACN,UAAU;AAAA,QACV,aAAa;AAAA,QACb,YAAY;AAAA,QACZ,MAAM;AAAA,MACR;AAAA,MACA;AAAA,QACE,MAAM;AAAA,QACN,UAAU;AAAA,QACV,aAAa;AAAA,QACb,YAAY;AAAA,QACZ,MAAM;AAAA,MAAA;AAAA,IAEV;AAGA,UAAM,cAAc;AAAA,MAClB;AAAA,QACE,MAAM;AAAA,QACN,UAAU;AAAA,QACV,YAAY;AAAA,MACd;AAAA,MACA;AAAA,QACE,MAAM;AAAA,QACN,UAAU;AAAA,QACV,YAAY;AAAA,MACd;AAAA,MACA;AAAA,QACE,MAAM;AAAA,QACN,UAAU;AAAA,QACV,YAAY;AAAA,MAAA;AAAA,IAEhB;AAGA,UAAM,WAAW;AAAA,MACf,EAAE,OAAO,SAAS,UAAU,oCAAoC;AAAA,MAChE,EAAE,OAAO,aAAa,UAAU,wCAAwC;AAAA,MACxE,EAAE,OAAO,YAAY,UAAU,uCAAuC;AAAA,MACtE,EAAE,OAAO,SAAS,UAAU,oCAAoC;AAAA,MAChE,EAAE,OAAO,SAAS,UAAU,oCAAoC;AAAA,IAClE;AAGA,UAAM,OAAO;AAAA,MACX;AAAA,QACE,aAAa;AAAA,QACb,WAAW;AAAA,MACb;AAAA,MACA;AAAA,QACE,aAAa;AAAA,QACb,WAAW;AAAA,MACb;AAAA,MACA;AAAA,QACE,aAAa;AAAA,QACb,WAAW;AAAA,MACb;AAAA,MACA;AAAA,QACE,aAAa;AAAA,QACb,WAAW;AAAA,MAAA;AAAA,IAEf;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;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}