forked from mns/mini-skamja
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'
|
import { Vector3 } from 'three'
|
||||||
|
|
||||||
const types = {
|
const types = {
|
||||||
small: defineAsyncComponent(() => import('./small.vue'))
|
bench: defineAsyncComponent(() => import('./bench.vue')),
|
||||||
|
table: defineAsyncComponent(() => import('./bench-table.vue'))
|
||||||
}
|
}
|
||||||
|
|
||||||
const props = defineProps({
|
const props = defineProps({
|
||||||
type: {
|
type: {
|
||||||
type: String as PropType<keyof typeof types>,
|
type: String as PropType<keyof typeof types>,
|
||||||
default: 'small',
|
default: 'bench',
|
||||||
required: true,
|
required: true
|
||||||
}
|
}
|
||||||
})
|
})
|
||||||
|
|
||||||
|
|
@ -20,7 +21,7 @@ const controlsState = reactive({
|
||||||
minDistance: 2,
|
minDistance: 2,
|
||||||
maxDistance: 10,
|
maxDistance: 10,
|
||||||
enablePan: false,
|
enablePan: false,
|
||||||
// enableZoom: false,
|
enableZoom: false,
|
||||||
maxPolarAngle: Math.PI / 2 - 0.2
|
maxPolarAngle: Math.PI / 2 - 0.2
|
||||||
})
|
})
|
||||||
</script>
|
</script>
|
||||||
|
|
|
||||||
227
pages/index.vue
227
pages/index.vue
|
|
@ -3,7 +3,7 @@ const { fetchData } = useApiFetch()
|
||||||
const config = useRuntimeConfig()
|
const config = useRuntimeConfig()
|
||||||
const imgBase = config.public.imgBase
|
const imgBase = config.public.imgBase
|
||||||
|
|
||||||
import { marked } from 'marked';
|
import { marked } from 'marked'
|
||||||
|
|
||||||
import og_img from '/og_img.png'
|
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/`)
|
const { data: review } = await fetchData<Review[]>(`review/`)
|
||||||
|
|
||||||
useSeoMeta({
|
useSeoMeta({
|
||||||
title: seo.value && seo.value[0].title,
|
title: seo.value && seo.value[0].title,
|
||||||
ogTitle: seo.value && seo.value[0].title,
|
ogTitle: seo.value && seo.value[0].title,
|
||||||
description: seo.value && seo.value[0].content,
|
description: seo.value && seo.value[0].content,
|
||||||
ogDescription: 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(() => {
|
const pages = computed(() => {
|
||||||
const menu = menu_raw.value?.find(el => el.type == 1)
|
const menu = menu_raw.value?.find(el => el.type == 1)
|
||||||
return (menu?.pages || []).sort((a, b) => a.order - b.order)
|
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>
|
</script>
|
||||||
<template>
|
<template>
|
||||||
<div>
|
<div>
|
||||||
<template v-for="page in pages" :key="page.slug">
|
<template v-for="page in pages" :key="page.slug">
|
||||||
<template v-if="page.slug == 'about'">
|
<template v-if="page.slug == 'about'">
|
||||||
<div class="siteblock bg-white" :id="page.slug">
|
<div class="siteblock bg-white" :id="page.slug">
|
||||||
<div class="container">
|
<div class="container">
|
||||||
<h1 class="siteblock-title">{{ page.title }}</h1>
|
<h1 class="siteblock-title">{{ page.title }}</h1>
|
||||||
<div class="siteblock-content">
|
<div class="siteblock-content">
|
||||||
<div class="siteblock-text">
|
<div class="siteblock-text">
|
||||||
<span v-html="marked.parse(page.content || '')"></span>
|
<span v-html="marked.parse(page.content || '')"></span>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="siteblock-image">
|
<div class="siteblock-image">
|
||||||
<NuxtImg :src="[imgBase, page.image].join('/')" alt="разные цвета забора" title=""
|
<NuxtImg
|
||||||
format="webp" />
|
:src="[imgBase, page.image].join('/')"
|
||||||
</div>
|
alt="разные цвета забора"
|
||||||
</div>
|
title=""
|
||||||
</div>
|
format="webp"
|
||||||
</template>
|
/>
|
||||||
<template v-if="page.slug == 'review'">
|
</div>
|
||||||
<div class="siteblock siteblock_imgbg bg-slate-500"
|
</div>
|
||||||
:style="[{ backgroundImage: `url(${[imgBase, page.image].join('/')})` }]">
|
</div>
|
||||||
<NuxtImg :src="[imgBase, page.image].join('/')" class="invisible" alt="отзыв" title="" format="webp"
|
</template>
|
||||||
loading="lazy" />
|
<template v-if="page.slug == 'review'">
|
||||||
</div>
|
<div
|
||||||
<div class="container" :id="page.slug">
|
class="siteblock siteblock_imgbg bg-slate-500"
|
||||||
<template v-for="item in review?.slice(0, 3)">
|
:style="[
|
||||||
<div class="review">
|
{ backgroundImage: `url(${[imgBase, page.image].join('/')})` }
|
||||||
<div class="review-image">
|
]"
|
||||||
<NuxtImg :src="[imgBase, item.image].join('/')" :alt="item.text" title="" format="webp"
|
>
|
||||||
loading="lazy" />
|
<NuxtImg
|
||||||
</div>
|
:src="[imgBase, page.image].join('/')"
|
||||||
<div class="review-content">
|
class="invisible"
|
||||||
{{ item.comment }}
|
alt="отзыв"
|
||||||
</div>
|
title=""
|
||||||
<div class="review-title">
|
format="webp"
|
||||||
{{ item.text }}
|
loading="lazy"
|
||||||
</div>
|
/>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
<div class="container" :id="page.slug">
|
||||||
</div>
|
<template v-for="item in review?.slice(0, 3)">
|
||||||
</template>
|
<div class="review">
|
||||||
<template v-if="page.slug == 'advantages'">
|
<div class="review-image">
|
||||||
<div class="siteblock bg-white" :id="page.slug">
|
<NuxtImg
|
||||||
<div class="container gap-4">
|
:src="[imgBase, item.image].join('/')"
|
||||||
<div class="col-span-full xl:col-span-8">
|
:alt="item.text"
|
||||||
<ModelScene />
|
title=""
|
||||||
</div>
|
format="webp"
|
||||||
<div class="col-span-full xl:col-span-4 prose">
|
loading="lazy"
|
||||||
<span v-html="marked.parse(page.content || '')"></span>
|
/>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
<div class="review-content">
|
||||||
</div>
|
{{ item.comment }}
|
||||||
</template>
|
</div>
|
||||||
<template v-if="page.slug == 'delivery'">
|
<div class="review-title">
|
||||||
<div class="siteblock siteblock_imgbg bg-slate-500 "
|
{{ item.text }}
|
||||||
:style="[{ backgroundImage: `url(${[imgBase, page.image].join('/')})` }]">
|
</div>
|
||||||
<NuxtImg :src="[imgBase, page.image].join('/')" class="invisible" alt="коричневый забор" title=""
|
</div>
|
||||||
format="webp" loading="lazy" />
|
</template>
|
||||||
</div>
|
</div>
|
||||||
<div class="siteblock bg-white siteblock_content" :id="page.slug" v-if="delivery">
|
</template>
|
||||||
<div class="container">
|
<template v-if="page.slug == 'advantages'">
|
||||||
<div class="prose col-span-12 xl:col-span-6">
|
<div class="siteblock bg-white" :id="page.slug">
|
||||||
<span v-html="delivery[0]"></span>
|
<div class="container gap-4">
|
||||||
</div>
|
<div class="col-span-full xl:col-span-8">
|
||||||
<div class="prose col-span-12 xl:col-span-6">
|
<ModelScene />
|
||||||
<span v-html="delivery[1]"></span>
|
</div>
|
||||||
</div>
|
<div class="col-span-full xl:col-span-4 prose">
|
||||||
</div>
|
<span v-html="marked.parse(page.content || '')"></span>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</div>
|
||||||
</template>
|
</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>
|
</template>
|
||||||
Loading…
Reference in New Issue