1 line
14 KiB
Plaintext
1 line
14 KiB
Plaintext
{"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;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"} |