mns/mns-mini-zabor
mns
/
mns-mini-zabor
4
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

small exp diagram

This commit is contained in:
Kseninia Mikhaylova 2024-06-14 12:54:51 +03:00
parent 3eaf085b80
commit a309089dcc
2 changed files with 14 additions and 39 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

30
app.vue
View File

@ -34,16 +34,13 @@ const roubleSign = new Intl.NumberFormat('ru-RU', {
const aboutText = computed(() => marked.parse(about?.content || '')) const aboutText = computed(() => marked.parse(about?.content || ''))
const deliveryText = computed(() => delivery?.content.split('[col]').map(el => marked.parse(el || ''))) const deliveryText = computed(() => delivery?.content.split('[col]').map(el => marked.parse(el || '')))
const advantagesText = computed(() => const advantagesText = computed(() => {
advantages?.content.split('[col]').map(el => { let c = advantages?.content || ''
let c = el || '' Object.entries(calculatorData.value || {}).map(item => {
Object.entries(calculatorData.value || {}).map(item => { c = c.replaceAll(`[${item[0]}]`, roubleSign.format(item[1]))
c = c.replaceAll(`[${item[0]}]`, roubleSign.format(item[1])) })
}) return marked.parse(c)
return marked.parse(c) })
}
)
)
const { data: footerData } = await useFetch<ApiFooterType[]>(`${apiBase}/footer/?ordering=small_text`) const { data: footerData } = await useFetch<ApiFooterType[]>(`${apiBase}/footer/?ordering=small_text`)
const { data: social_networkData } = await useFetch<ApiSocial_networkType[]>(`${apiBase}/social_network/`) const { data: social_networkData } = await useFetch<ApiSocial_networkType[]>(`${apiBase}/social_network/`)
@ -117,15 +114,12 @@ const { scrollToAnchor, scrollToTop } = useAnchorScroll({
</div> </div>
</div> </div>
<div class="siteblock bg-white"> <div class="siteblock bg-white">
<ExpDiagram /> <div class="container gap-4">
</div> <div class="col-span-full xl:col-span-8">
<div class="siteblock bg-white" :id="advantages?.slug" v-if="advantagesText"> <ExpDiagram />
<div class="container">
<div class="prose col-span-12 xl:col-span-6">
<span v-html="advantagesText[0]"></span>
</div> </div>
<div class="prose col-span-12 xl:col-span-6"> <div class="col-span-full xl:col-span-4 prose">
<span v-html="advantagesText[1]"></span> <span v-html="advantagesText"></span>
</div> </div>
</div> </div>
</div> </div>

23
components/expDiagram.vue
View File

@ -9,19 +9,6 @@ const controlsState = reactive({
// enableZoom: false, // enableZoom: false,
maxPolarAngle: (Math.PI / 2) - 0.2, maxPolarAngle: (Math.PI / 2) - 0.2,
}) })
const container = ref()
const koef = ref()
const scrollBlock = (e: Event) => {
const { top, bottom, height } = container.value.getBoundingClientRect();
const { innerHeight } = window;
const partiallyVisible = (top > 0 && top < innerHeight) ||
(bottom > 0 && bottom < innerHeight)
const visibleHeight = innerHeight - top
const h = height * 1.5
if (partiallyVisible && visibleHeight < h) {
koef.value = visibleHeight / h
}
}
const targetExplosion = useState('targetExplosion', () => { const targetExplosion = useState('targetExplosion', () => {
const k = 1.5 const k = 1.5
return { return {
@ -35,15 +22,9 @@ const targetExplosion = useState('targetExplosion', () => {
}) })
</script> </script>
<template> <template>
<div class="container min-w-full" ref="container"> <div class="h-96">
<ClientOnly fallback-tag="div" fallback="Загрузка 3D модели"> <ClientOnly fallback-tag="div" fallback="Загрузка 3D модели">
<template v-for="(value, key) in targetExplosion" v-if="false"> <TresCanvas preset="realistic" heoght="600">
<div>
<label for="key">{{ key }}</label>
<input type="number" v-for="(item, n) in value" v-model="targetExplosion[key][n]" step="0.25">
</div>
</template>
<TresCanvas preset="realistic">
<TresPerspectiveCamera :position="[-7, 2, 4]" /> <TresPerspectiveCamera :position="[-7, 2, 4]" />
<OrbitControls v-bind="controlsState" make-default /> <OrbitControls v-bind="controlsState" make-default />
<Suspense> <Suspense>