125 lines
4.5 KiB
Vue
125 lines
4.5 KiB
Vue
<script setup lang="ts">
|
|
const config = useRuntimeConfig()
|
|
const apiBase = config.public.apiBase
|
|
|
|
import k_logo from '@/assets/icons/logo.svg'
|
|
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/?ordering=order`)
|
|
|
|
const { data: reviewsData } = await useFetch<ApiReviewsType[]>(`${apiBase}/review/`)
|
|
|
|
const about = (pagesData.value as ApiPagesType[]).find(el => el.slug == 'about')
|
|
const reviews = (pagesData.value as ApiPagesType[]).find(el => el.slug == 'clients')
|
|
const delivery = (pagesData.value as ApiPagesType[]).find(el => el.slug == 'delivery')
|
|
|
|
const { data: footerData } = await useFetch<ApiFooterType[]>(`${apiBase}/footer/?ordering=small_text`)
|
|
const { data: social_networkData } = await useFetch<ApiSocial_networkType[]>(`${apiBase}/social_network/?ordering=small_text`)
|
|
|
|
const isModalOpen = useState('modal_open', () => false)
|
|
const toggleModal = () => {
|
|
isModalOpen.value = !isModalOpen.value
|
|
}
|
|
</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.external_link || `#${item.slug}`" :target="item.external_link ? '_blank' : '_self'">
|
|
{{ item.menu_title }}
|
|
</NuxtLink>
|
|
</template>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="siteblock bg-white" :id="about?.slug">
|
|
<div class="container">
|
|
<div class="siteblock-content">
|
|
<h2 class="siteblock-title">{{ about?.title }}</h2>
|
|
<div class="siteblock-text">
|
|
{{ about?.content }}
|
|
<p>
|
|
<button class="not-prose" @click="toggleModal">Купить прямо сейчас</button>
|
|
</p>
|
|
<div class="features">
|
|
<div class="feature-item">Сталь от 3 мм</div>
|
|
<div class="feature-item">Размер любой</div>
|
|
<div class="feature-item">Цвет на выбор</div>
|
|
<div class="feature-item">Цена адекватная</div>
|
|
<div class="feature-item">Всем нравится</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="siteblock-image">
|
|
<NuxtImg :src="[apiBase, about?.image].join('/')" />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="siteblock siteblock_imgbg bg-slate-500"
|
|
:style="[{ backgroundImage: `url(${[apiBase, reviews?.image].join('/')})` }]" :id="reviews?.slug">
|
|
<NuxtImg :src="[apiBase, reviews?.image].join('/')" class="invisible" />
|
|
</div>
|
|
<div class="siteblock 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="[apiBase, item.image].join('/')" />
|
|
</div>
|
|
<div class="review-content">
|
|
{{ item.comment }}
|
|
</div>
|
|
<div class="review-title">
|
|
{{ item.text }}
|
|
</div>
|
|
</div>
|
|
</template>
|
|
</div>
|
|
</div>
|
|
<div class="siteblock bg-white">
|
|
<ExpDiagram />
|
|
</div>
|
|
<div class="siteblock siteblock_imgbg bg-slate-500"
|
|
:style="[{ backgroundImage: `url(${[apiBase, delivery?.image].join('/')})` }]">
|
|
<NuxtImg :src="[apiBase, delivery?.image].join('/')" class="invisible" />
|
|
</div>
|
|
<div class="siteblock siteblock_calc bg-white">
|
|
<CalcValues />
|
|
<CalcModels />
|
|
</div>
|
|
<div class="footer">
|
|
<div class="container">
|
|
<div class="k-logo">
|
|
<k_logo />
|
|
</div>
|
|
<template v-for="item in footerData">
|
|
<div class="footer-text" :class="[{ 'footer-text-small': item.small_text }]">{{ item.text }}</div>
|
|
</template>
|
|
<div class="footer-text footer-text-social">
|
|
<template v-for="item in social_networkData">
|
|
<a :href="item.link" target="_blank">
|
|
<Icon :name="item.icon" /> {{ item.name }}
|
|
</a>
|
|
</template>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<Modal />
|
|
</div>
|
|
</template>
|