forked from mns/mini-skamja
100 lines
4.3 KiB
Vue
100 lines
4.3 KiB
Vue
<script setup lang="ts">
|
||
const { fetchData } = useApiFetch()
|
||
const config = useRuntimeConfig()
|
||
const imgBase = config.public.imgBase
|
||
|
||
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 { data, status, error } = await fetchData<Menu[]>(`menu/`)
|
||
const pages = computed(() => {
|
||
const menu = data.value?.find(el => el.type == 1)
|
||
return (menu?.pages || []).sort((a, b) => a.order - b.order)
|
||
})
|
||
const { data: review } = await fetchData<Review[]>(`review/`)
|
||
|
||
const delivery = computed(() => pages.value.find(el => el.slug == 'delivery')?.content.split('[col]').map(el => marked.parse(el || '')))
|
||
</script>
|
||
<template>
|
||
<template v-for="page in pages">
|
||
<template v-if="page.slug == 'about'">
|
||
<div class="siteblock bg-white" :id="page.slug">
|
||
<div class="container">
|
||
<h1 class="siteblock-title">{{ page.title }}</h1>
|
||
<div class="siteblock-content">
|
||
<div class="siteblock-text">
|
||
<span v-html="marked.parse(page.content || '')"></span>
|
||
</div>
|
||
</div>
|
||
<div class="siteblock-image">
|
||
<NuxtImg :src="[imgBase, page.image].join('/')" alt="разные цвета забора" title=""
|
||
format="webp" />
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</template>
|
||
<template v-if="page.slug == 'review'">
|
||
<div class="siteblock siteblock_imgbg bg-slate-500"
|
||
:style="[{ backgroundImage: `url(${[imgBase, page.image].join('/')})` }]">
|
||
<NuxtImg :src="[imgBase, page.image].join('/')" class="invisible" alt="отзыв" title="" format="webp"
|
||
loading="lazy" />
|
||
</div>
|
||
<div class="container">
|
||
<template v-for="item in review?.slice(0, 3)">
|
||
<div class="review">
|
||
<div class="review-image">
|
||
<NuxtImg :src="[imgBase, item.image].join('/')" :alt="item.text" title="" format="webp"
|
||
loading="lazy" />
|
||
</div>
|
||
<div class="review-content">
|
||
{{ item.comment }}
|
||
</div>
|
||
<div class="review-title">
|
||
{{ item.text }}
|
||
</div>
|
||
</div>
|
||
</template>
|
||
</div>
|
||
</template>
|
||
<template v-if="page.slug == 'advantages'">
|
||
<div class="siteblock bg-white" :id="page.slug">
|
||
<div class="container gap-4">
|
||
<div class="col-span-full xl:col-span-8">
|
||
<!-- <ExpDiagram /> -->
|
||
ТУТ БУДЕТ КАРТИНКА
|
||
</div>
|
||
<div class="col-span-full xl:col-span-4 prose">
|
||
<span v-html="marked.parse(page.content || '')"></span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</template>
|
||
<template v-if="page.slug == 'delivery'">
|
||
<div class="siteblock siteblock_imgbg bg-slate-500 "
|
||
:style="[{ backgroundImage: `url(${[imgBase, page.image].join('/')})` }]">
|
||
<NuxtImg :src="[imgBase, page.image].join('/')" class="invisible" alt="коричневый забор" title=""
|
||
format="webp" loading="lazy" />
|
||
</div>
|
||
<div class="siteblock bg-white siteblock_content" :id="page.slug" v-if="delivery">
|
||
<div class="container">
|
||
<div class="prose col-span-12 xl:col-span-6">
|
||
<span v-html="delivery[0]"></span>
|
||
</div>
|
||
<div class="prose col-span-12 xl:col-span-6">
|
||
<span v-html="delivery[1]"></span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</template>
|
||
</template>
|
||
</template> |