188 lines
12 KiB
JavaScript
188 lines
12 KiB
JavaScript
import { defineComponent, ref, watch, reactive, useSSRContext } from 'file://D:/doc/workspace/web3/node_modules/vue/index.mjs';
|
|
import { ssrRenderTeleport, ssrRenderClass, ssrRenderStyle, ssrInterpolate, ssrRenderAttrs, ssrRenderComponent, ssrRenderList, ssrRenderAttr, ssrIncludeBooleanAttr, ssrLooseContain, ssrLooseEqual } from 'file://D:/doc/workspace/web3/node_modules/vue/server-renderer/index.mjs';
|
|
import { useI18n } from 'file://D:/doc/workspace/web3/node_modules/vue-i18n/dist/vue-i18n.mjs';
|
|
import { _ as _sfc_main$2 } from './HeroBanner.vue2.mjs';
|
|
|
|
const _sfc_main$1 = /* @__PURE__ */ defineComponent({
|
|
__name: "NotificationToast",
|
|
__ssrInlineRender: true,
|
|
props: {
|
|
message: { default: "" },
|
|
type: { default: "success" },
|
|
duration: { default: 3e3 }
|
|
},
|
|
emits: ["close"],
|
|
setup(__props, { emit: __emit }) {
|
|
const props = __props;
|
|
const show = ref(false);
|
|
const emit = __emit;
|
|
watch(() => props.message, (newVal) => {
|
|
if (newVal) {
|
|
show.value = true;
|
|
setTimeout(() => {
|
|
show.value = false;
|
|
setTimeout(() => {
|
|
emit("close");
|
|
}, 300);
|
|
}, props.duration);
|
|
}
|
|
}, { immediate: true });
|
|
return (_ctx, _push, _parent, _attrs) => {
|
|
ssrRenderTeleport(_push, (_push2) => {
|
|
if (_ctx.message) {
|
|
_push2(`<div class="${ssrRenderClass([
|
|
"fixed top-4 right-4 p-4 rounded-lg shadow-lg z-50 transform transition-all duration-300",
|
|
_ctx.type === "success" ? "bg-green-500" : "bg-red-500",
|
|
"text-white"
|
|
])}" style="${ssrRenderStyle({ transform: show.value ? "translateY(0)" : "translateY(-100%)" })}">${ssrInterpolate(_ctx.message)}</div>`);
|
|
} else {
|
|
_push2(`<!---->`);
|
|
}
|
|
}, "body", false, _parent);
|
|
};
|
|
}
|
|
});
|
|
|
|
const _sfc_main = /* @__PURE__ */ defineComponent({
|
|
__name: "contact",
|
|
__ssrInlineRender: true,
|
|
setup(__props) {
|
|
const { t } = useI18n();
|
|
const contactMethods = [
|
|
{
|
|
icon: "fas fa-phone",
|
|
titleKey: "contact.methods.phone.title",
|
|
subtitleKey: "contact.methods.phone.subtitle",
|
|
contentKey: "contact.methods.phone.content",
|
|
type: "phone"
|
|
},
|
|
{
|
|
icon: "fas fa-envelope",
|
|
titleKey: "contact.methods.email.title",
|
|
subtitleKey: "contact.methods.email.subtitle",
|
|
contentKey: "contact.methods.email.content",
|
|
type: "email"
|
|
},
|
|
{
|
|
icon: "fab fa-weixin",
|
|
titleKey: "contact.methods.wechat.title",
|
|
subtitleKey: "contact.methods.wechat.subtitle",
|
|
contentKey: "",
|
|
type: "wechat"
|
|
}
|
|
];
|
|
const companyInfo = [
|
|
{
|
|
icon: "fas fa-map-marker-alt",
|
|
titleKey: "contact.companyInfo.beijing.title",
|
|
contentKey: "contact.companyInfo.beijing.content"
|
|
},
|
|
{
|
|
icon: "fas fa-subway",
|
|
titleKey: "contact.companyInfo.transport.title",
|
|
contentKey: "contact.companyInfo.transport.content"
|
|
},
|
|
{
|
|
icon: "far fa-clock",
|
|
titleKey: "contact.companyInfo.hours.title",
|
|
contentKey: "contact.companyInfo.hours.content"
|
|
}
|
|
];
|
|
const services = [
|
|
{ value: "cloud", labelKey: "contact.form.serviceOptions.cloud" },
|
|
{ value: "migration", labelKey: "contact.form.serviceOptions.migration" },
|
|
{ value: "solution", labelKey: "contact.form.serviceOptions.solution" },
|
|
{ value: "price", labelKey: "contact.form.serviceOptions.price" },
|
|
{ value: "other", labelKey: "contact.form.serviceOptions.other" }
|
|
];
|
|
const faqs = [
|
|
{
|
|
questionKey: "contact.faq.items.q1.question",
|
|
answerKey: "contact.faq.items.q1.answer"
|
|
},
|
|
{
|
|
questionKey: "contact.faq.items.q2.question",
|
|
answerKey: "contact.faq.items.q2.answer"
|
|
},
|
|
{
|
|
questionKey: "contact.faq.items.q3.question",
|
|
answerKey: "contact.faq.items.q3.answer"
|
|
},
|
|
{
|
|
questionKey: "contact.faq.items.q4.question",
|
|
answerKey: "contact.faq.items.q4.answer"
|
|
}
|
|
];
|
|
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$2;
|
|
const _component_NotificationToast = _sfc_main$1;
|
|
_push(`<div${ssrRenderAttrs(_attrs)}>`);
|
|
_push(ssrRenderComponent(_component_HeroBanner, {
|
|
title: _ctx.$t("contact.hero.title"),
|
|
subtitle: _ctx.$t("contact.hero.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(_ctx.$t(contact.titleKey))}</h3><p class="text-gray-600 mb-2 text-center">${ssrInterpolate(_ctx.$t(contact.subtitleKey))}</p><p class="text-2xl font-semibold text-secondary text-center">${ssrInterpolate(_ctx.$t(contact.contentKey))}</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">${ssrInterpolate(_ctx.$t("contact.form.title"))}</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">${ssrInterpolate(_ctx.$t("contact.form.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">${ssrInterpolate(_ctx.$t("contact.form.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">${ssrInterpolate(_ctx.$t("contact.form.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">${ssrInterpolate(_ctx.$t("contact.form.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">${ssrInterpolate(_ctx.$t("contact.form.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" : ""}>${ssrInterpolate(_ctx.$t("contact.form.placeholders.selectService"))}</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(_ctx.$t(service.labelKey))}</option>`);
|
|
});
|
|
_push(`<!--]--></select></div><div><label class="block text-sm font-medium text-gray-700 mb-2" for="message">${ssrInterpolate(_ctx.$t("contact.form.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>${ssrInterpolate(_ctx.$t("contact.form.submitting"))}</span>`);
|
|
} else {
|
|
_push(`<span>${ssrInterpolate(_ctx.$t("contact.form.submit"))}</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">${ssrInterpolate(_ctx.$t("contact.companyInfo.title"))}</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(_ctx.$t(info.titleKey))}</h4><p class="text-gray-600">${ssrInterpolate(_ctx.$t(info.contentKey))}</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">${ssrInterpolate(_ctx.$t("contact.faq.title"))}</h2><p class="text-xl text-center text-gray-600 mb-12">${ssrInterpolate(_ctx.$t("contact.faq.subtitle"))}</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(_ctx.$t(faq.questionKey))}</h3><p class="text-gray-600 leading-relaxed">${ssrInterpolate(_ctx.$t(faq.answerKey))}</p></div>`);
|
|
});
|
|
_push(`<!--]--></div></div></section>`);
|
|
_push(ssrRenderComponent(_component_NotificationToast, {
|
|
message: notification.message,
|
|
type: notification.type,
|
|
onClose: ($event) => notification.message = ""
|
|
}, null, _parent));
|
|
_push(`</div>`);
|
|
};
|
|
}
|
|
});
|
|
|
|
const _sfc_setup = _sfc_main.setup;
|
|
_sfc_main.setup = (props, ctx) => {
|
|
const ssrContext = useSSRContext();
|
|
(ssrContext.modules || (ssrContext.modules = /* @__PURE__ */ new Set())).add("pages/contact.vue");
|
|
return _sfc_setup ? _sfc_setup(props, ctx) : void 0;
|
|
};
|
|
|
|
export { _sfc_main as default };
|
|
//# sourceMappingURL=contact.vue.mjs.map
|