small exp diagram

app.vue

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

components/expDiagram.vue

@@ -9,19 +9,6 @@ const controlsState = reactive({
     // enableZoom: false,
     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 k = 1.5
     return {
@@ -35,15 +22,9 @@ const targetExplosion = useState('targetExplosion', () => {
 })
 </script>
 <template>
-    <div class="container min-w-full" ref="container">
+    <div class="h-96">
         <ClientOnly fallback-tag="div" fallback="Загрузка 3D модели">
-            <template v-for="(value, key) in targetExplosion" v-if="false">
-                <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">
+            <TresCanvas preset="realistic" heoght="600">
                 <TresPerspectiveCamera :position="[-7, 2, 4]" />
                 <OrbitControls v-bind="controlsState" make-default />
                 <Suspense>