From 44158f729fdbdc9c61f43e0988e6770e002eed2a Mon Sep 17 00:00:00 2001
From: Kseninia Mikhaylova <k.mikhailova@svs-tech.pro>
Date: Wed, 5 Jun 2024 11:41:14 +0300
Subject: [PATCH] add bg img

---
 app.vue          | 17 ++++++++++-------
 assets/main.scss | 14 +++++++++-----
 2 files changed, 19 insertions(+), 12 deletions(-)

diff --git a/app.vue b/app.vue
index 45cb004..7a5d6a6 100644
--- a/app.vue
+++ b/app.vue
@@ -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">
diff --git a/assets/main.scss b/assets/main.scss
index 2f47fe3..c47a792 100644
--- a/assets/main.scss
+++ b/assets/main.scss
@@ -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 text-9xl text-orange-400;
 
         svg {
             @apply my-0 mx-auto;
@@ -40,7 +40,7 @@ a[href^="/#"]:not([class*="btn"]) {
     }
 
     &-text {
-        @apply col-span-4  prose prose-p:text-sm;
+        @apply col-span-4 prose prose-p:text-sm;
 
         &-small {
             @apply col-span-8 col-start-3 prose prose-p:text-xs;
@@ -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;
     }