replace text

app.vue

@@ -29,7 +29,16 @@ const advantages = (pagesData.value as ApiPagesType[]).find(el => el.slug == 'ad
 
 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 => 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]}]`, 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/`)

components/calcModels.vue

@@ -49,13 +49,15 @@ const point = reactive({
                 <input :id="key" :type="key == 'color' ? 'text' : 'number'" v-model="point[key]" style="width: 100px" />
             </template>
         </div>
+    </div>
+    <div class="container min-w-full relative">
         <ClientOnly fallback-tag="div" fallback="Загрузка 3D модели">
             <Loader />
             <TresCanvas shadows>
                 <TresPerspectiveCamera v-bind="cameraStat" />
                 <OrbitControls v-bind="controlsState" make-default />
-                <Suspense>
+                <Suspense v-if="false">
-                    <!-- <Environment files='/hdrmaps/kloppenheim_06_4k.hdr' :background="true" /> -->
+                    <Environment files='/hdrmaps/kloppenheim_06_4k.hdr' :background="true" />
                 </Suspense>
                 <Suspense>
                     <ModelParametric />