generated from liutk/owl-admin-base
169 lines
11 KiB
JavaScript
169 lines
11 KiB
JavaScript
import { _ as __nuxt_component_0 } from './HeaderImage-92nFA80c.mjs';
|
|
import { _ as __nuxt_component_1 } from './TabsHeader-C0yMA2hS.mjs';
|
|
import { _ as __nuxt_component_1$1 } from './CustomTitle-2eWUrzRV.mjs';
|
|
import { defineComponent, computed, withAsyncContext, mergeProps, isRef, unref, useSSRContext } from 'vue';
|
|
import { ssrRenderAttrs, ssrRenderComponent, ssrInterpolate, ssrRenderList, ssrRenderAttr } from 'vue/server-renderer';
|
|
import { u as useRequest } from './useRequest-pSRZvR3u.mjs';
|
|
import { u as useRoute, n as navigateTo } from './server.mjs';
|
|
import { u as useAsyncData } from './asyncData-D5wEK86T.mjs';
|
|
import { u as useSeoMeta } from './composables-2BFBRDmB.mjs';
|
|
import './virtual_public-Ch4_18y6.mjs';
|
|
import '../routes/renderer.mjs';
|
|
import 'vue-bundle-renderer/runtime';
|
|
import '../nitro/nitro.mjs';
|
|
import 'node:http';
|
|
import 'node:https';
|
|
import 'node:events';
|
|
import 'node:buffer';
|
|
import 'node:fs';
|
|
import 'node:path';
|
|
import 'node:crypto';
|
|
import 'node:url';
|
|
import 'unhead/server';
|
|
import 'devalue';
|
|
import 'unhead/plugins';
|
|
import 'unhead/utils';
|
|
import 'vue-router';
|
|
import 'axios';
|
|
import 'perfect-debounce';
|
|
|
|
const _sfc_main = /* @__PURE__ */ defineComponent({
|
|
__name: "[id]",
|
|
__ssrInlineRender: true,
|
|
async setup(__props) {
|
|
let __temp, __restore;
|
|
const route = useRoute();
|
|
const request = useRequest();
|
|
const cateId = computed(() => String(route.params.id || ""));
|
|
const { data: tabsRes } = ([__temp, __restore] = withAsyncContext(async () => useAsyncData(
|
|
"business-tabs",
|
|
async () => await request.get("/api/project_cates")
|
|
)), __temp = await __temp, __restore(), __temp);
|
|
const tabList = computed(() => {
|
|
const res = tabsRes.value;
|
|
if (!res || res.code !== 200 || !Array.isArray(res.data)) return [];
|
|
return res.data.map((item) => ({ id: String(item.id), name: item.title }));
|
|
});
|
|
const activeTabModel = computed({
|
|
get: () => cateId.value,
|
|
set: (val) => {
|
|
const next = String(val || "");
|
|
if (!next || next === cateId.value) return;
|
|
navigateTo(`/business/${next}`);
|
|
}
|
|
});
|
|
const { data: detailRes } = ([__temp, __restore] = withAsyncContext(async () => useAsyncData(
|
|
() => `business-detail-${cateId.value}`,
|
|
async () => await request.get(
|
|
`/api/project_cates/${cateId.value}`
|
|
),
|
|
{ watch: [cateId] }
|
|
)), __temp = await __temp, __restore(), __temp);
|
|
const currentTabInfoData = computed(() => {
|
|
const res = detailRes.value;
|
|
if (!res || res.code !== 200 || !res.data) return null;
|
|
const d = res.data;
|
|
return {
|
|
name: d.title,
|
|
description: d.description,
|
|
dataList: (d.children || []).map((c) => ({
|
|
title: c.title,
|
|
content: c.description || "",
|
|
url: c.cover
|
|
})),
|
|
serviceProcess: d.flows?.cover || "",
|
|
professionalEquipments: (d.photos || []).map((p) => p.cover),
|
|
coreAdvantages: (d.advances || []).map((a) => ({
|
|
title: a.title,
|
|
content: a.description || "",
|
|
url: a.cover
|
|
}))
|
|
};
|
|
});
|
|
useSeoMeta({
|
|
title: () => currentTabInfoData.value?.name ? `${currentTabInfoData.value.name} - 业务范围` : "业务范围",
|
|
description: () => {
|
|
const first = currentTabInfoData.value?.dataList?.[0]?.content;
|
|
return first ? first : "业务范围";
|
|
},
|
|
ogTitle: () => currentTabInfoData.value?.name ? `${currentTabInfoData.value.name} - 业务范围` : "业务范围",
|
|
ogDescription: () => {
|
|
const first = currentTabInfoData.value?.dataList?.[0]?.content;
|
|
return first ? first : "业务范围";
|
|
},
|
|
ogImage: () => {
|
|
const first = currentTabInfoData.value?.professionalEquipments?.[0] || currentTabInfoData.value?.serviceProcess || "";
|
|
return first || void 0;
|
|
}
|
|
});
|
|
return (_ctx, _push, _parent, _attrs) => {
|
|
const _component_HeaderImage = __nuxt_component_0;
|
|
const _component_TabsHeader = __nuxt_component_1;
|
|
const _component_CustomTitle = __nuxt_component_1$1;
|
|
_push(`<div${ssrRenderAttrs(mergeProps({ class: "w-full" }, _attrs))}>`);
|
|
_push(ssrRenderComponent(_component_HeaderImage, {
|
|
title: "业务范围",
|
|
img: "/images/业务范围/业务范围.png"
|
|
}, null, _parent));
|
|
_push(ssrRenderComponent(_component_TabsHeader, {
|
|
tabs: unref(tabList),
|
|
activeTab: unref(activeTabModel),
|
|
"onUpdate:activeTab": ($event) => isRef(activeTabModel) ? activeTabModel.value = $event : null,
|
|
title: "业务范围"
|
|
}, null, _parent));
|
|
_push(`<div class="space-y-[28px] sm:space-y-[32px] md:space-y-[36px] lg:space-y-[40px] xl:space-y-[48px] pt-[28px] sm:pt-[32px] md:pt-[36px] lg:pt-[40px] xl:pt-[48px]">`);
|
|
if ((unref(currentTabInfoData)?.dataList || []).length > 0) {
|
|
_push(`<div class="w-full px-[18px] sm:px-[15px]"><div class="w-full"><div class="flex flex-col items-center w-full">`);
|
|
_push(ssrRenderComponent(_component_CustomTitle, {
|
|
title: unref(currentTabInfoData)?.name || ""
|
|
}, null, _parent));
|
|
if (unref(currentTabInfoData)?.description) {
|
|
_push(`<p class="mt-[18px] sm:mt-[18px] md:mt-[20px] lg:mt-[22px] xl:mt-[24px] mb-[20px] lg:mb-[60px] text-center text-[12px] sm:text-[14px] md:text-[16px] lg:text-[18px] xl:text-[20px] text-[#333333] leading-relaxed">${ssrInterpolate(unref(currentTabInfoData)?.description || "")}</p>`);
|
|
} else {
|
|
_push(`<!---->`);
|
|
}
|
|
_push(`<div class="w-full overflow-x-auto overflow-y-visible flex flex-row items-stretch justify-start sm:justify-center gap-[18px] sm:gap-[12px] md:gap-[18px] lg:gap-[24px] xl:gap-[30px] pb-[15px]"><!--[-->`);
|
|
ssrRenderList(unref(currentTabInfoData)?.dataList || [], (data) => {
|
|
_push(`<div class="group flex-shrink-0 w-[140px] h-[183px] sm:w-[170px] sm:h-[200px] md:w-[210px] md:h-[260px] lg:w-[240px] lg:h-[310px] xl:w-[280px] xl:h-[365px] relative overflow-hidden shadow-[0_4px_12px_rgba(0,0,0,0.12)] transition-all duration-300 ease-out hover:-translate-y-1 hover:shadow-[0_12px_24px_rgba(0,0,0,0.18)]"><img class="object-cover w-full h-full transition-transform duration-300 ease-out transform group-hover:scale-105"${ssrRenderAttr("src", data.url)}${ssrRenderAttr("alt", data.title)} draggable="false"><div class="absolute inset-0 cursor-pointer flex flex-col items-center justify-center bg-[#3A7DB9] bg-opacity-[0.7] group-hover:bg-opacity-[0.15] transition-all duration-300 ease-out"><span class="text-[12px] sm:text-[14px] md:text-[18px] lg:text-[20px] xl:text-[22px] text-[#FFFFFF] font-bold transform transition-transform duration-300 ease-out group-hover:-translate-y-[4px]">${ssrInterpolate(data.title)}</span><div class="w-[30px] h-[2px] sm:w-[26px] sm:h-[1px] bg-[#FEFEFE] my-[12px] sm:my-[8px] opacity-90 group-hover:opacity-100 transition-opacity duration-300"></div><p class="px-[18px] sm:px-[12px] text-center text-[12px] sm:text-[10px] md:text-[12px] lg:text-[13px] xl:text-[14px] text-[#FFFFFF] leading-relaxed transform transition-transform duration-300 ease-out group-hover:-translate-y-[2px]">${ssrInterpolate(data.content)}</p></div></div>`);
|
|
});
|
|
_push(`<!--]--></div></div></div></div>`);
|
|
} else {
|
|
_push(`<!---->`);
|
|
}
|
|
if (unref(currentTabInfoData)?.serviceProcess) {
|
|
_push(`<div class="w-full"><div class="flex flex-col items-center"><h1 class="text-[17px] sm:text-[20px] md:text-[24px] lg:text-[28px] xl:text-[34px] text-[#333333]"> 服务流程 </h1><div class="mt-[20px] sm:mt-[24px] md:mt-[28px] lg:mt-[34px] xl:mt-[40px] w-full px-[18px] sm:px-[20px] md:px-[24px] lg:px-[28px] xl:px-[30px] max-w-full sm:max-w-[400px] md:max-w-[560px] lg:max-w-[720px] xl:max-w-[920px] xl:mx-auto"><img class="w-full h-auto"${ssrRenderAttr("src", unref(currentTabInfoData)?.serviceProcess)} alt="" draggable="false"></div></div></div>`);
|
|
} else {
|
|
_push(`<!---->`);
|
|
}
|
|
if ((unref(currentTabInfoData)?.professionalEquipments || []).length > 0) {
|
|
_push(`<div class="w-full"><div class="flex flex-col items-center"><h1 class="text-[17px] sm:text-[20px] md:text-[24px] lg:text-[28px] xl:text-[34px] text-[#333333]"> 专业设备 </h1><div class="mt-[20px] sm:mt-[24px] md:mt-[28px] lg:mt-[34px] xl:mt-[40px] max-w-full overflow-x-auto overflow-y-hidden"><div class="inline-grid grid-rows-2 grid-flow-col mx-auto"><!--[-->`);
|
|
ssrRenderList(unref(currentTabInfoData)?.professionalEquipments, (cur) => {
|
|
_push(`<div class="overflow-hidden shadow-md group w-[190px] h-[115px] sm:w-[240px] sm:h-[145px] md:w-[320px] md:h-[193px] lg:w-[400px] lg:h-[242px] xl:w-[480px] xl:h-[290px] flex-shrink-0"><img class="object-cover w-full h-full transition-all duration-300 ease-in-out group-hover:scale-110 group-hover:-translate-y-2"${ssrRenderAttr("src", cur)} alt="" draggable="false"></div>`);
|
|
});
|
|
_push(`<!--]--></div></div></div></div>`);
|
|
} else {
|
|
_push(`<!---->`);
|
|
}
|
|
if ((unref(currentTabInfoData)?.coreAdvantages || []).length > 0) {
|
|
_push(`<div class="!mt-0"><div class="w-full bg-[url('/images/业务范围/核心优势背景.png')] bg-cover bg-center bg-no-repeat py-[20px] sm:py-[24px] md:py-[28px] lg:py-[34px] xl:py-[40px] pt-[28px] sm:pt-[32px] md:pt-[36px] lg:pt-[40px] xl:pt-[48px]"><div class="flex flex-col items-center"><h1 class="text-[17px] sm:text-[20px] md:text-[24px] lg:text-[28px] xl:text-[34px] text-[#333333]"> 核心优势 </h1><div class="mt-[56px] sm:mt-[72px] md:mt-[96px] lg:mt-[120px] xl:mt-[144px] grid grid-cols-2 sm:grid-cols-4 gap-x-[12px] gap-y-[16px] sm:gap-x-[16px] sm:gap-y-[20px] lg:gap-x-[20px] lg:gap-y-[24px]"><!--[-->`);
|
|
ssrRenderList(unref(currentTabInfoData)?.coreAdvantages || [], (coreAdvantage) => {
|
|
_push(`<div class="bg-[#FFFFFF] flex flex-col items-center justify-start transition-all duration-300 ease-in-out hover:shadow-lg w-[175px] h-[211px] sm:w-[200px] sm:h-[240px] md:w-[260px] md:h-[300px] lg:w-[310px] lg:h-[340px] xl:w-[350px] xl:h-[369px]"><div class="-translate-y-[44px] sm:-translate-y-[52px] md:-translate-y-[64px] lg:-translate-y-[76px] xl:-translate-y-[88px]"><img class="w-[88px] h-[88px] sm:w-[104px] sm:h-[104px] md:w-[128px] md:h-[128px] lg:w-[152px] lg:h-[152px] xl:w-[176px] xl:h-[176px] mx-auto"${ssrRenderAttr("src", coreAdvantage.url)} alt="" draggable="false"><h1 class="text-[#333333] text-[14px] sm:text-[16px] md:text-[20px] lg:text-[24px] xl:text-[28px] text-center">${ssrInterpolate(coreAdvantage.title)}</h1><p class="mt-[8px] px-[12px] sm:px-[14px] md:px-[16px] lg:px-[18px] xl:px-[20px] text-center text-[#999999] text-[12px] sm:text-[13px] md:text-[15px] lg:text-[16px] xl:text-[18px]">${ssrInterpolate(coreAdvantage.content)}</p></div></div>`);
|
|
});
|
|
_push(`<!--]--></div></div></div></div>`);
|
|
} else {
|
|
_push(`<!---->`);
|
|
}
|
|
_push(`</div></div>`);
|
|
};
|
|
}
|
|
});
|
|
const _sfc_setup = _sfc_main.setup;
|
|
_sfc_main.setup = (props, ctx) => {
|
|
const ssrContext = useSSRContext();
|
|
(ssrContext.modules || (ssrContext.modules = /* @__PURE__ */ new Set())).add("pages/business/[id].vue");
|
|
return _sfc_setup ? _sfc_setup(props, ctx) : void 0;
|
|
};
|
|
|
|
export { _sfc_main as default };
|
|
//# sourceMappingURL=_id_-Drbm_L59.mjs.map
|