base

components/header.vue

@@ -4,9 +4,10 @@ import k_logo from '@/assets/LOGO.svg'
 const { fetchData } = useApiFetch()
 const route = useRoute()
 
-const { data, status, error } = await fetchData<Menu>(`menu/`)
+const { data, status, error } = await fetchData<Menu[]>(`menu/`)
-const menu = computed(()=>{
+const menu = computed(() => {
-    return (data.value?.pages || []).sort((a, b) => a.order - b.order)
+    const menu = data.value?.find(el => el.type == 1)
+    return (menu?.pages || []).sort((a, b) => a.order - b.order)
 })
 
 const menu_visible = ref(false)

compose.yaml

@@ -18,5 +18,5 @@ networks:
     driver: bridge
     ipam:
       config:
-        - subnet: 10.68.0.0/30
+        - subnet: 10.68.0.0/28
           gateway: 10.68.0.1

index.d.ts

@@ -16,7 +16,7 @@ type ApiKpType = {
 
 type Menu = {
     id: number
-    type: string
+    type: number
     pages: MenuPage[]
 }
 
@@ -31,7 +31,7 @@ type MenuPage = {
     image: string
 }
 
-type ApiReviewsType = {
+type Review = {
     id: number
     image: string
     text: string

pages/index.vue

@@ -1,4 +1,5 @@
 <script setup lang="ts">
+const { fetchData } = useApiFetch()
 const config = useRuntimeConfig()
 const imgBase = config.public.imgBase
 
@@ -15,7 +16,85 @@ import og_img from '/og_img.png'
 //     ogImage: config.public.baseUrl + og_img,
 //     // twitterCard: 'summary_large_image',
 // })
+const { data, status, error } = await fetchData<Menu[]>(`menu/`)
+const pages = computed(() => {
+    const menu = data.value?.find(el => el.type == 1)
+    return (menu?.pages || []).sort((a, b) => a.order - b.order)
+})
+const { data: review } = await fetchData<Review[]>(`review/`)
+
+const delivery = computed(() => pages.value.find(el => el.slug == 'delivery')?.content.split('[col]').map(el => marked.parse(el || '')))
 </script>
 <template>
-1234
+    <template v-for="page in pages">
+        <template v-if="page.slug == 'about'">
+            <div class="siteblock bg-white" :id="page.slug">
+                <div class="container">
+                    <h1 class="siteblock-title">{{ page.title }}</h1>
+                    <div class="siteblock-content">
+                        <div class="siteblock-text">
+                            <span v-html="marked.parse(page.content || '')"></span>
+                        </div>
+                    </div>
+                    <div class="siteblock-image">
+                        <NuxtImg :src="[imgBase, page.image].join('/')" alt="разные цвета забора" title=""
+                            format="webp" />
+                    </div>
+                </div>
+            </div>
+        </template>
+        <template v-if="page.slug == 'review'">
+            <div class="siteblock siteblock_imgbg bg-slate-500"
+                :style="[{ backgroundImage: `url(${[imgBase, page.image].join('/')})` }]">
+                <NuxtImg :src="[imgBase, page.image].join('/')" class="invisible" alt="отзыв" title="" format="webp"
+                    loading="lazy" />
+            </div>
+            <div class="container">
+                <template v-for="item in review?.slice(0, 3)">
+                    <div class="review">
+                        <div class="review-image">
+                            <NuxtImg :src="[imgBase, item.image].join('/')" :alt="item.text" title="" format="webp"
+                                loading="lazy" />
+                        </div>
+                        <div class="review-content">
+                            {{ item.comment }}
+                        </div>
+                        <div class="review-title">
+                            {{ item.text }}
+                        </div>
+                    </div>
+                </template>
+            </div>
+        </template>
+        <template v-if="page.slug == 'advantages'">
+            <div class="siteblock bg-white" :id="page.slug">
+                <div class="container gap-4">
+                    <div class="col-span-full xl:col-span-8">
+                        <!-- <ExpDiagram /> -->
+                        ТУТ БУДЕТ КАРТИНКА
+                    </div>
+                    <div class="col-span-full xl:col-span-4 prose">
+                        <span v-html="marked.parse(page.content || '')"></span>
+                    </div>
+                </div>
+            </div>
+        </template>
+        <template v-if="page.slug == 'delivery'">
+            <div class="siteblock siteblock_imgbg bg-slate-500 "
+                :style="[{ backgroundImage: `url(${[imgBase, page.image].join('/')})` }]">
+                <NuxtImg :src="[imgBase, page.image].join('/')" class="invisible" alt="коричневый забор" title=""
+                    format="webp" loading="lazy" />
+            </div>
+            <div class="siteblock bg-white siteblock_content" :id="page.slug" v-if="delivery">
+                <div class="container">
+                    <div class="prose col-span-12 xl:col-span-6">
+                        <span v-html="delivery[0]"></span>
+                    </div>
+                    <div class="prose col-span-12 xl:col-span-6">
+                        <span v-html="delivery[1]"></span>
+                    </div>
+                </div>
+            </div>
+        </template>
+    </template>
 </template>