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

14
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 text-9xl text-orange-400;
svg { svg {
@apply my-0 mx-auto; @apply my-0 mx-auto;
@ -40,7 +40,7 @@ a[href^="/#"]:not([class*="btn"]) {
} }
&-text { &-text {
@apply col-span-4 prose prose-p:text-sm; @apply col-span-4 prose prose-p:text-sm;
&-small { &-small {
@apply col-span-8 col-start-3 prose prose-p:text-xs; @apply col-span-8 col-start-3 prose prose-p:text-xs;
@ -51,8 +51,12 @@ a[href^="/#"]:not([class*="btn"]) {
.block { .block {
@apply py-10; @apply py-10;
&-img { &_imgbg {
@apply py-0; @apply py-0 bg-no-repeat bg-cover bg-bottom;
img {
max-height: 50vh;
}
} }
&-content { &-content {
@ -68,7 +72,7 @@ a[href^="/#"]:not([class*="btn"]) {
} }
&-image { &-image {
@apply col-span-6 bg-slate-400; @apply col-span-6 flex justify-center items-center;
min-height: 50vh; min-height: 50vh;
} }