119 lines
3.3 KiB
Vue
119 lines
3.3 KiB
Vue
<script setup lang="ts">
|
|
const config = useRuntimeConfig()
|
|
const apiBase = config.public.apiBase
|
|
|
|
import k_logo from '@/assets/logo.svg'
|
|
|
|
type ApiKpType = {
|
|
id: number
|
|
title: string
|
|
content: string
|
|
url: string
|
|
meta_title: any
|
|
meta_description: string
|
|
keywords: any
|
|
is_indexed: boolean
|
|
}
|
|
|
|
type ApiPagesType = {
|
|
id: number
|
|
title: string
|
|
slug: string
|
|
content: string
|
|
}
|
|
|
|
type ApiReviewsType = {
|
|
id: number
|
|
image: string
|
|
text: string
|
|
comment: string
|
|
}
|
|
|
|
import '@/assets/main.scss'
|
|
|
|
const { data: seoData } = await useFetch<ApiKpType>(`${apiBase}/kp/1`)
|
|
useSeoMeta({
|
|
title: seoData.value?.title,
|
|
ogTitle: seoData.value?.title,
|
|
description: seoData.value?.content,
|
|
ogDescription: seoData.value?.content,
|
|
// ogImage: 'https://example.com/image.png',
|
|
// twitterCard: 'summary_large_image',
|
|
})
|
|
|
|
const { data: pagesData } = await useFetch<ApiPagesType[]>(`${apiBase}/pages/`)
|
|
const about = (pagesData.value as ApiPagesType[]).find(el => el.slug == 'about')
|
|
|
|
const reviews = (pagesData.value as ApiPagesType[]).find(el => el.slug == 'clients')
|
|
const { data: reviewsData } = await useFetch<ApiReviewsType[]>(`${apiBase}/review/`)
|
|
|
|
|
|
</script>
|
|
<template>
|
|
<div>
|
|
<div class="header">
|
|
<div class="container">
|
|
<div class="logo">
|
|
Купи забор
|
|
</div>
|
|
<div class="menu">
|
|
<template v-for="item in pagesData">
|
|
<NuxtLink :to="`#${item.slug}`">
|
|
{{ item.title }}
|
|
</NuxtLink>
|
|
</template>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="block bg-white" :id="about?.slug">
|
|
<div class="container">
|
|
<div class="block-content">
|
|
<h2 class="block-title">{{ about?.title }}</h2>
|
|
<div class="block-text">
|
|
{{ about?.content }}
|
|
<p>
|
|
<NuxtLink to="#buy" class="block-btn not-prose">Купить прямо сейчас</NuxtLink>
|
|
</p>
|
|
</div>
|
|
</div>
|
|
<div class="block-image">
|
|
<NuxtImg src="https://picsum.photos/800?grayscale" />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="block block-img bg-slate-500">
|
|
<NuxtImg src="https://picsum.photos/1920/550?grayscale" />
|
|
</div>
|
|
<div class="block bg-white" :id="reviews?.slug">
|
|
<div class="container">
|
|
<template v-for="item in reviewsData?.slice(0, 3)">
|
|
<div class="review">
|
|
<div class="review-image">
|
|
<NuxtImg :src="item.image" />
|
|
</div>
|
|
<div class="review-content">
|
|
{{ item.comment }}
|
|
</div>
|
|
<div class="review-title">
|
|
{{ item.text }}
|
|
</div>
|
|
</div>
|
|
</template>
|
|
</div>
|
|
</div>
|
|
<div class="block block-img bg-slate-500">
|
|
<NuxtImg src="https://picsum.photos/1920/600?grayscale" />
|
|
</div>
|
|
<div class="footer">
|
|
<div class="container">
|
|
<div class="k-logo">
|
|
<k_logo />
|
|
</div>
|
|
<div class="footer-text">{{ pagesData?.find(el => el.slug == 'delivery')?.content }}</div>
|
|
<div class="footer-text">{{ pagesData?.find(el => el.slug == 'products')?.content }}</div>
|
|
<div class="footer-text footer-text-small">{{ pagesData?.find(el => el.slug == 'contacts')?.content }}</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|