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
menu_title: string
slug: string
external_link: string
content: string
image: string
}
@ -31,6 +32,12 @@ type ApiReviewsType = {
comment: string
}
type ApiFooterType = {
id: number
text: string
small_text: boolean
}
import '@/assets/main.scss'
const { data: seoData } = await useFetch<ApiKpType>(`${apiBase}/kp/1`)
@ -43,13 +50,16 @@ useSeoMeta({
// 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 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/`)
</script>
<template>
<div>
@ -60,7 +70,7 @@ const delivery = (pagesData.value as ApiPagesType[]).find(el => el.slug == 'deli
</div>
<div class="menu">
<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 }}
</NuxtLink>
</template>
@ -83,7 +93,8 @@ const delivery = (pagesData.value as ApiPagesType[]).find(el => el.slug == 'deli
</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" />
</div>
<div class="block bg-white" :id="reviews?.slug">
@ -103,7 +114,8 @@ const delivery = (pagesData.value as ApiPagesType[]).find(el => el.slug == 'deli
</template>
</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" />
</div>
<div class="footer">
@ -111,9 +123,9 @@ const delivery = (pagesData.value as ApiPagesType[]).find(el => el.slug == 'deli
<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>
<template v-for="item in footerData">
<div class="footer-text" :class="[{ 'footer-text-small': item.small_text }]">{{ item.text }}</div>
</template>
</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;
.k-logo {
@apply col-span-2 text-9xl text-orange-400;
@apply col-span-2 row-span-2 text-9xl text-orange-400;
svg {
@apply my-0 mx-auto;
@ -40,10 +40,10 @@ a[href^="/#"]:not([class*="btn"]) {
}
&-text {
@apply col-span-4 prose prose-p:text-sm;
@apply col-span-5 text-sm prose;
&-small {
@apply col-span-8 col-start-3 prose prose-p:text-xs;
@apply col-span-10 col-start-3 text-xs prose;
}
}
}