142 lines
9.9 KiB
JavaScript
142 lines
9.9 KiB
JavaScript
import "../components/HeroBanner.vue.mjs";
|
||
import "../components/NotificationToast.vue.mjs";
|
||
import { defineComponent, reactive, ref } from "vue";
|
||
import { ssrRenderAttrs, ssrRenderComponent, ssrRenderList, ssrRenderClass, ssrInterpolate, ssrRenderAttr, ssrIncludeBooleanAttr, ssrLooseContain, ssrLooseEqual } from "vue/server-renderer";
|
||
import _sfc_main$1 from "../components/HeroBanner.vue2.mjs";
|
||
import _sfc_main$2 from "../components/NotificationToast.vue2.mjs";
|
||
const _sfc_main = /* @__PURE__ */ defineComponent({
|
||
__name: "contact",
|
||
__ssrInlineRender: true,
|
||
setup(__props) {
|
||
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"
|
||
});
|
||
return (_ctx, _push, _parent, _attrs) => {
|
||
const _component_HeroBanner = _sfc_main$1;
|
||
const _component_NotificationToast = _sfc_main$2;
|
||
_push(`<div${ssrRenderAttrs(_attrs)}>`);
|
||
_push(ssrRenderComponent(_component_HeroBanner, {
|
||
title: "联系我们",
|
||
subtitle: "随时欢迎您的咨询，我们将为您提供专业的云服务解决方案"
|
||
}, null, _parent));
|
||
_push(`<section class="section"><div class="container"><div class="grid md:grid-cols-3 gap-8 mb-16"><!--[-->`);
|
||
ssrRenderList(contactMethods, (contact, index) => {
|
||
_push(`<div 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="${ssrRenderClass(["text-secondary text-3xl", contact.icon])}"></i></div><h3 class="text-2xl font-semibold mb-4 text-center">${ssrInterpolate(contact.title)}</h3><p class="text-gray-600 mb-2 text-center">${ssrInterpolate(contact.subtitle)}</p><p class="text-2xl font-semibold text-secondary text-center">${ssrInterpolate(contact.content)}</p>`);
|
||
if (contact.type === "wechat") {
|
||
_push(`<div 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>`);
|
||
} else {
|
||
_push(`<!---->`);
|
||
}
|
||
_push(`</div>`);
|
||
});
|
||
_push(`<!--]--></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 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"${ssrRenderAttr("value", 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"${ssrRenderAttr("value", 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"${ssrRenderAttr("value", 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"${ssrRenderAttr("value", 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" 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=""${ssrIncludeBooleanAttr(Array.isArray(form.service) ? ssrLooseContain(form.service, "") : ssrLooseEqual(form.service, "")) ? " selected" : ""}>请选择咨询服务</option><!--[-->`);
|
||
ssrRenderList(services, (service, index) => {
|
||
_push(`<option${ssrRenderAttr("value", service.value)}${ssrIncludeBooleanAttr(Array.isArray(form.service) ? ssrLooseContain(form.service, service.value) : ssrLooseEqual(form.service, service.value)) ? " selected" : ""}>${ssrInterpolate(service.label)}</option>`);
|
||
});
|
||
_push(`<!--]--></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" 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">${ssrInterpolate(form.message)}</textarea></div><button type="submit"${ssrIncludeBooleanAttr(submitting.value) ? " disabled" : ""} class="${ssrRenderClass([
|
||
"w-full py-4 px-6 rounded-lg text-white text-lg font-semibold",
|
||
submitting.value ? "bg-gray-400" : "bg-secondary hover:bg-secondary/90 transition-colors duration-300"
|
||
])}">`);
|
||
if (submitting.value) {
|
||
_push(`<span><i class="fas fa-spinner fa-spin mr-2"></i>提交中... </span>`);
|
||
} else {
|
||
_push(`<span>提交咨询</span>`);
|
||
}
|
||
_push(`</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"><!--[-->`);
|
||
ssrRenderList(companyInfo, (info, index) => {
|
||
_push(`<div 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="${ssrRenderClass(["text-secondary text-xl", info.icon])}"></i></div><div><h4 class="text-xl font-semibold mb-2">${ssrInterpolate(info.title)}</h4><p class="text-gray-600">${ssrInterpolate(info.content)}</p></div></div>`);
|
||
});
|
||
_push(`<!--]--></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"><!--[-->`);
|
||
ssrRenderList(faqs, (faq, index) => {
|
||
_push(`<div 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">${ssrInterpolate(faq.question)}</h3><p class="text-gray-600 leading-relaxed">${ssrInterpolate(faq.answer)}</p></div>`);
|
||
});
|
||
_push(`<!--]--></div></div></section>`);
|
||
_push(ssrRenderComponent(_component_NotificationToast, {
|
||
message: notification.message,
|
||
type: notification.type,
|
||
onClose: ($event) => notification.message = ""
|
||
}, null, _parent));
|
||
_push(`</div>`);
|
||
};
|
||
}
|
||
});
|
||
export {
|
||
_sfc_main as default
|
||
};
|
||
//# sourceMappingURL=contact.vue2.mjs.map
|