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

add bg img

This commit is contained in:
Kseninia Mikhaylova 2024-06-05 11:41:14 +03:00
parent 61284260aa
commit 44158f729f
2 changed files with 19 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

17
app.vue
View File

@ -21,6 +21,7 @@ type ApiPagesType = {
menu_title: string
slug: string
content: string
image: string
}
type ApiReviewsType = {
@ -43,10 +44,12 @@ useSeoMeta({
})
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/`)
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')
</script>
<template>
<div>
@ -76,12 +79,12 @@ const { data: reviewsData } = await useFetch<ApiReviewsType[]>(`${apiBase}/revie
</div>
</div>
<div class="block-image">
<NuxtImg src="https://picsum.photos/800?grayscale" />
<NuxtImg :src="[apiBase, about?.image].join('/')" />
</div>
</div>
</div>
<div class="block block-img bg-slate-500">
<NuxtImg src="https://picsum.photos/1920/550?grayscale" />
<div class="block block_imgbg bg-slate-500" :style="[{ backgroundImage: `url(${[apiBase, reviews?.image].join('/')})` }]">
<NuxtImg :src="[apiBase, reviews?.image].join('/')" class="invisible" />
</div>
<div class="block bg-white" :id="reviews?.slug">
<div class="container">
@ -100,8 +103,8 @@ const { data: reviewsData } = await useFetch<ApiReviewsType[]>(`${apiBase}/revie
</template>
</div>
</div>
<div class="block block-img bg-slate-500">
<NuxtImg src="https://picsum.photos/1920/600?grayscale" />
<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">
<div class="container">

10
assets/main.scss
View File

@ -51,8 +51,12 @@ a[href^="/#"]:not([class*="btn"]) {
.block {
@apply py-10;
&-img {
@apply py-0;
&_imgbg {
@apply py-0 bg-no-repeat bg-cover bg-bottom;
img {
max-height: 50vh;
}
}
&-content {
@ -68,7 +72,7 @@ a[href^="/#"]:not([class*="btn"]) {
}
&-image {
@apply col-span-6 bg-slate-400;
@apply col-span-6 flex justify-center items-center;
min-height: 50vh;
}