mns/mns-mini-zabor
mns
/
mns-mini-zabor
4
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

add footer

This commit is contained in:
Kseninia Mikhaylova 2024-06-05 12:52:22 +03:00
parent 44158f729f
commit 37c39e1edd
2 changed files with 22 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

26
app.vue
View File

@ -20,6 +20,7 @@ type ApiPagesType = {
title: string title: string
menu_title: string menu_title: string
slug: string slug: string
external_link: string
content: string content: string
image: string image: string
} }
@ -31,6 +32,12 @@ type ApiReviewsType = {
comment: string comment: string
} }
type ApiFooterType = {
id: number
text: string
small_text: boolean
}
import '@/assets/main.scss' import '@/assets/main.scss'
const { data: seoData } = await useFetch<ApiKpType>(`${apiBase}/kp/1`) const { data: seoData } = await useFetch<ApiKpType>(`${apiBase}/kp/1`)
@ -43,13 +50,16 @@ useSeoMeta({
// twitterCard: 'summary_large_image', // twitterCard: 'summary_large_image',
}) })
const { data: pagesData } = await useFetch<ApiPagesType[]>(`${apiBase}/pages/`) const { data: pagesData } = await useFetch<ApiPagesType[]>(`${apiBase}/pages/?ordering=order`)
const { data: reviewsData } = await useFetch<ApiReviewsType[]>(`${apiBase}/review/`) const { data: reviewsData } = await useFetch<ApiReviewsType[]>(`${apiBase}/review/`)
const about = (pagesData.value as ApiPagesType[]).find(el => el.slug == 'about') const about = (pagesData.value as ApiPagesType[]).find(el => el.slug == 'about')
const reviews = (pagesData.value as ApiPagesType[]).find(el => el.slug == 'clients') const reviews = (pagesData.value as ApiPagesType[]).find(el => el.slug == 'clients')
const delivery = (pagesData.value as ApiPagesType[]).find(el => el.slug == 'delivery') const delivery = (pagesData.value as ApiPagesType[]).find(el => el.slug == 'delivery')
const { data: footerData } = await useFetch<ApiFooterType[]>(`${apiBase}/footer/`)
</script> </script>
<template> <template>
<div> <div>
@ -60,7 +70,7 @@ const delivery = (pagesData.value as ApiPagesType[]).find(el => el.slug == 'deli
</div> </div>
<div class="menu"> <div class="menu">
<template v-for="item in pagesData"> <template v-for="item in pagesData">
<NuxtLink :to="`#${item.slug}`"> <NuxtLink :to="item.external_link || `#${item.slug}`" :target="item.external_link ? '_blank' : '_self'">
{{ item.menu_title }} {{ item.menu_title }}
</NuxtLink> </NuxtLink>
</template> </template>
@ -83,7 +93,8 @@ const delivery = (pagesData.value as ApiPagesType[]).find(el => el.slug == 'deli
</div> </div>
</div> </div>
</div> </div>
<div class="block block_imgbg bg-slate-500" :style="[{ backgroundImage: `url(${[apiBase, reviews?.image].join('/')})` }]"> <div class="block block_imgbg bg-slate-500"
:style="[{ backgroundImage: `url(${[apiBase, reviews?.image].join('/')})` }]" :id="reviews?.slug">
<NuxtImg :src="[apiBase, reviews?.image].join('/')" class="invisible" /> <NuxtImg :src="[apiBase, reviews?.image].join('/')" class="invisible" />
</div> </div>
<div class="block bg-white" :id="reviews?.slug"> <div class="block bg-white" :id="reviews?.slug">
@ -103,7 +114,8 @@ const delivery = (pagesData.value as ApiPagesType[]).find(el => el.slug == 'deli
</template> </template>
</div> </div>
</div> </div>
<div class="block block_imgbg bg-slate-500" :style="[{ backgroundImage: `url(${[apiBase, delivery?.image].join('/')})` }]"> <div class="block block_imgbg bg-slate-500"
:style="[{ backgroundImage: `url(${[apiBase, delivery?.image].join('/')})` }]">
<NuxtImg :src="[apiBase, delivery?.image].join('/')" class="invisible" /> <NuxtImg :src="[apiBase, delivery?.image].join('/')" class="invisible" />
</div> </div>
<div class="footer"> <div class="footer">
@ -111,9 +123,9 @@ const delivery = (pagesData.value as ApiPagesType[]).find(el => el.slug == 'deli
<div class="k-logo"> <div class="k-logo">
<k_logo /> <k_logo />
</div> </div>
<div class="footer-text">{{ pagesData?.find(el => el.slug == 'delivery')?.content }}</div> <template v-for="item in footerData">
<div class="footer-text">{{ pagesData?.find(el => el.slug == 'products')?.content }}</div> <div class="footer-text" :class="[{ 'footer-text-small': item.small_text }]">{{ item.text }}</div>
<div class="footer-text footer-text-small">{{ pagesData?.find(el => el.slug == 'contacts')?.content }}</div> </template>
</div> </div>
</div> </div>
</div> </div>

6
assets/main.scss
View File

@ -32,7 +32,7 @@ a[href^="/#"]:not([class*="btn"]) {
@apply px-2 py-4 bg-slate-200; @apply px-2 py-4 bg-slate-200;
.k-logo { .k-logo {
@apply col-span-2 text-9xl text-orange-400; @apply col-span-2 row-span-2 text-9xl text-orange-400;
svg { svg {
@apply my-0 mx-auto; @apply my-0 mx-auto;
@ -40,10 +40,10 @@ a[href^="/#"]:not([class*="btn"]) {
} }
&-text { &-text {
@apply col-span-4 prose prose-p:text-sm; @apply col-span-5 text-sm prose;
&-small { &-small {
@apply col-span-8 col-start-3 prose prose-p:text-xs; @apply col-span-10 col-start-3 text-xs prose;
} }
} }
} }