more page
This commit is contained in:
parent
32f04bce96
commit
3ba9649952
|
|
@ -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>
|
||||
|
|
@ -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',
|
||||
required: true,
|
||||
default: 'bench',
|
||||
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>
|
||||
|
|
|
|||
229
pages/index.vue
229
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'
|
||||
|
||||
|
|
@ -12,91 +12,156 @@ const { data: menu_raw, status: menu_status } = await fetchData<Menu[]>(`menu/`)
|
|||
const { data: review } = await fetchData<Review[]>(`review/`)
|
||||
|
||||
useSeoMeta({
|
||||
title: seo.value && seo.value[0].title,
|
||||
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,
|
||||
title: seo.value && seo.value[0].title,
|
||||
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
|
||||
})
|
||||
|
||||
const pages = computed(() => {
|
||||
const menu = menu_raw.value?.find(el => el.type == 1)
|
||||
return (menu?.pages || []).sort((a, b) => a.order - b.order)
|
||||
const menu = menu_raw.value?.find(el => el.type == 1)
|
||||
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>
|
||||
<template v-for="page in pages" :key="page.slug">
|
||||
<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" :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"
|
||||
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">
|
||||
<ModelScene />
|
||||
</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>
|
||||
</div>
|
||||
</template>
|
||||
<div>
|
||||
<template v-for="page in pages" :key="page.slug">
|
||||
<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" :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"
|
||||
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">
|
||||
<ModelScene />
|
||||
</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 == 'more'">
|
||||
<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" :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>
|
||||
</div>
|
||||
<div class="prose col-span-12 xl:col-span-6">
|
||||
<span v-html="delivery[1]"></span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
</template>
|
||||
</div>
|
||||
</template>
|
||||
|
|
|
|||
Loading…
Reference in New Issue