mns-mini-zabor/pages/[slug].vue

52 lines
1.7 KiB
Vue

<script setup lang="ts">
const config = useRuntimeConfig()
const imgBase = config.public.imgBase
import { apiFetch } from '~/utils/apiFetch';
import { marked } from 'marked';
import og_img from '/og_img.png'
const { data: seoData } = await apiFetch<ApiKpType>(`kp/1/`)
useSeoMeta({
title: seoData.value?.title,
ogTitle: seoData.value?.title,
description: seoData.value?.content,
ogDescription: seoData.value?.content,
ogImage: config.public.baseUrl + og_img,
// twitterCard: 'summary_large_image',
})
const route = useRoute()
const { data } = await apiFetch<ApiPagesType>(`pages/${route.params.slug}/`)
if (!data.value) {
throw createError({
statusCode: 404,
})
}
const policyText = computed(() => {
if (!data?.value) return ''
let c = data?.value.content || ''
return marked.parse(c)
})
</script>
<template>
<div>
<div class="siteblock bg-white">
<div class="container">
<h1 class="siteblock-title">{{ data?.title || '404' }}</h1>
<div class="col-span-full prose max-w-full" v-html="policyText" />
</div>
</div>
<div class="siteblock siteblock_imgbg bg-slate-500" v-if="data?.image"
:style="[{ backgroundImage: `url(${[imgBase, data?.image].join('/')})` }]">
<NuxtImg :src="[imgBase, data?.image].join('/')" class="invisible" alt="data.title || 'фоновая картинка'" title="" format="webp"
loading="lazy" />
</div>
<div class="siteblock siteblock_calc bg-white" v-else>
<Suspense>
<CalcModels />
</Suspense>
</div>
</div>
</template>