more page

components/model/bench-table.vue

@@ -0,0 +1,14 @@
+<script setup lang="ts">
+//@ts-ignore
+import { useGLTF } from '@tresjs/cientos'
+import { Vector3 } from 'three';
+
+const { scene: bench1 } = await useGLTF('/models/bench2_export-v1.glb')
+</script>
+<template>
+  <Suspense>
+    <TresGroup :position-y="0" :scale="new Vector3(2, 2, 2)">
+      <ModelItem :model="bench1" :target="[0, 0, 0]" />
+    </TresGroup>
+  </Suspense>
+</template>

components/model/scene.vue

@@ -2,14 +2,15 @@
 import { Vector3 } from 'three'
 
 const types = {
-  small: defineAsyncComponent(() => import('./small.vue')) 
+  bench: defineAsyncComponent(() => import('./bench.vue')),
+  table: defineAsyncComponent(() => import('./bench-table.vue'))
 }
 
 const props = defineProps({
   type: {
     type: String as PropType<keyof typeof types>,
-    default: 'small',
+    default: 'bench',
-    required: true,
+    required: true
   }
 })
 
@@ -20,7 +21,7 @@ const controlsState = reactive({
   minDistance: 2,
   maxDistance: 10,
   enablePan: false,
-  // enableZoom: false,
+  enableZoom: false,
   maxPolarAngle: Math.PI / 2 - 0.2
 })
 </script>

pages/index.vue

@@ -3,7 +3,7 @@ const { fetchData } = useApiFetch()
 const config = useRuntimeConfig()
 const imgBase = config.public.imgBase
 
-import { marked } from 'marked';
+import { marked } from 'marked'
 
 import og_img from '/og_img.png'
 
@@ -16,7 +16,7 @@ useSeoMeta({
   ogTitle: seo.value && seo.value[0].title,
   description: seo.value && seo.value[0].content,
   ogDescription: seo.value && seo.value[0].content,
-    ogImage: config.public.baseUrl + og_img,
+  ogImage: config.public.baseUrl + og_img
 })
 
 const pages = computed(() => {
@@ -24,7 +24,12 @@ const pages = computed(() => {
   return (menu?.pages || []).sort((a, b) => a.order - b.order)
 })
 
-const delivery = computed(() => pages.value.find(el => el.slug == 'delivery')?.content.split('[col]').map(el => marked.parse(el || '')))
+const delivery = computed(() =>
+  pages.value
+    .find(el => el.slug == 'delivery')
+    ?.content.split('[col]')
+    .map(el => marked.parse(el || ''))
+)
 </script>
 <template>
   <div>
@@ -39,24 +44,43 @@ const delivery = computed(() => pages.value.find(el => el.slug == 'delivery')?.c
               </div>
             </div>
             <div class="siteblock-image">
-                            <NuxtImg :src="[imgBase, page.image].join('/')" alt="разные цвета забора" title=""
+              <NuxtImg
-                                format="webp" />
+                :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"
+        <div
-                    :style="[{ backgroundImage: `url(${[imgBase, page.image].join('/')})` }]">
+          class="siteblock siteblock_imgbg bg-slate-500"
-                    <NuxtImg :src="[imgBase, page.image].join('/')" class="invisible" alt="отзыв" title="" format="webp"
+          :style="[
-                        loading="lazy" />
+            { backgroundImage: `url(${[imgBase, page.image].join('/')})` }
+          ]"
+        >
+          <NuxtImg
+            :src="[imgBase, page.image].join('/')"
+            class="invisible"
+            alt="отзыв"
+            title=""
+            format="webp"
+            loading="lazy"
+          />
         </div>
         <div class="container" :id="page.slug">
           <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"
+                <NuxtImg
-                                    loading="lazy" />
+                  :src="[imgBase, item.image].join('/')"
+                  :alt="item.text"
+                  title=""
+                  format="webp"
+                  loading="lazy"
+                />
               </div>
               <div class="review-content">
                 {{ item.comment }}
@@ -80,13 +104,54 @@ const delivery = computed(() => pages.value.find(el => el.slug == 'delivery')?.c
           </div>
         </div>
       </template>
-            <template v-if="page.slug == 'delivery'">
+      <template v-if="page.slug == 'more'">
-                <div class="siteblock siteblock_imgbg bg-slate-500 "
+        <div
-                    :style="[{ backgroundImage: `url(${[imgBase, page.image].join('/')})` }]">
+          class="siteblock siteblock_imgbg bg-slate-500"
-                    <NuxtImg :src="[imgBase, page.image].join('/')" class="invisible" alt="коричневый забор" title=""
+          :style="[
-                        format="webp" loading="lazy" />
+            { 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="siteblock bg-white" :id="page.slug">
+          <div class="container gap-4">
+            <div class="col-span-full xl:col-span-8">
+              <span v-html="marked.parse(page.content || '')"></span>
+            </div>
+            <div class="col-span-full xl:col-span-4 prose">
+              <ModelScene type="table" />
+            </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>