advantages styles

app.vue

@@ -58,17 +58,18 @@ const toggleModal = () => {
             <p>
               <button class="not-prose" @click="toggleModal">Купить прямо сейчас</button>
             </p>
-            <div class="features">
-              <template v-for="item in advData">
-              <div class="feature-item">{{item.title}} {{item.content}}</div>
-                
-              </template>
-            </div>
           </div>
         </div>
         <div class="siteblock-image">
           <NuxtImg :src="[apiBase, about?.image].join('/')" />
         </div>
+        <div class="feature">
+          <template v-for="item in advData">
+            <div class="feature-item">
+              <div class="feature-name">{{ item.title }}</div> {{ item.content }}
+            </div>
+          </template>
+        </div>
       </div>
     </div>
     <div class="siteblock siteblock_imgbg bg-slate-500"
@@ -103,6 +104,11 @@ const toggleModal = () => {
       <CalcValues />
       <CalcModels />
     </div>
+    <div class="siteblock bg-white">
+      <div class="container">
+        {{ delivery?.content }}
+      </div>
+    </div>
     <div class="footer">
       <div class="container">
         <div class="k-logo">

assets/main.scss

@@ -126,7 +126,7 @@ input {
 }
 
 textarea {
-    @apply block p-2.5 w-full text-sm text-gray-900 bg-gray-50 rounded-lg border border-gray-300 focus:ring-blue-500 focus:border-blue-500 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500
+    @apply block p-2.5 w-full text-sm text-gray-900 bg-gray-50 rounded-lg border border-gray-300 focus:ring-blue-500 focus:border-blue-500 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500 max-w-full min-h-10 max-h-40;
 }
 
 button {
@@ -173,16 +173,12 @@ button {
     }
 }
 
-.features {
+.feature {
-    display: flex;
+    @apply col-span-full flex gap-10 mt-4 justify-between;
-    gap: 10px;
+    &-item {
-    margin-top: 20px;
+        @apply rounded bg-neutral-200 p-4 min-w-36 flex justify-center flex-wrap flex-col;
-}
+    }
-
+    &-name {
-.feature-item {
+        @apply text-orange-400 font-bold w-20 text-xl leading-4 col-span-2;
-    background-color: #f5f5f5;
+    }
-    padding: 10px;
-    border-radius: 5px;
-    text-align: center;
-
 }

components/calcValues.vue

@@ -62,7 +62,11 @@ const changeParametres = () => {
         form_state.length = form_state.total_length_mm
     }
     form_state.full_sections = Math.ceil(form_state.total_length_mm / form_state.length)
-    form_state.extra_section = form_state.total_length_mm % form_state.length
+    if (form_state.total_length_mm % form_state.length) {
+        form_state.extra_section = (form_state.total_length_mm % form_state.length).toFixed(0)
+    } else {
+        form_state.extra_section = 0
+    }
 
     if (form_state.extra_section < parametric.length.min) {
         console.log('eh')
@@ -149,16 +153,14 @@ const calc_text = computed(() => {
             <div class="form-row">
                 <div class="form-item">
                     <label for="total_length">Общая длина забора, м</label>
-                     <Icon type="button" @click="increment('height', -1)" name="mdi:minus-circle-outline" />
+                    <Icon type="button" @click="increment('total_length', -1)" name="mdi:minus-circle-outline" />
                     <input type="number" id="total_length" v-bind="parametric.total_length"
                         v-model="form_state.total_length" />
-                    <Icon type="button" @click="increment('height', 1)" name="mdi:plus-circle-outline" />
+                    <Icon type="button" @click="increment('total_length', 1)" name="mdi:plus-circle-outline" />
                 </div>
                 <div class="form-item grow">
                     <label for="calculation">Приблизительный расчет забора</label>
-                    <Icon type="button" @click="increment('height', -1)" name="mdi:minus-circle-outline" />
                     <textarea id="calculation" disabled class="w-full">{{ calc_text }}</textarea>
-                    <Icon type="button" @click="increment('height', 1)" name="mdi:plus-circle-outline" />
                 </div>
             </div>
         </form>

components/model/diagram.vue

@@ -3,9 +3,9 @@ const props = defineProps(['koef'])
 import Item from './item.vue';
 const k = ref(props.koef || 1)
 watch(props, () => {
+    if (k.value !== props.koef) {
         k.value = props.koef || 1
-    console.log(k)
+    }
-
 }, { deep: true })
 </script>
 <template>
@@ -14,7 +14,7 @@ watch(props, () => {
         <TresMeshStandardMaterial color="pink" />
     </TresMesh>
     <Suspense>
-        <TresGroup :translate-y="-2">
+        <TresGroup :translate-y="-2" :scale="1.25">
             <Item model-url="/models/kosynka.glb" :position="[0.5 * k, 0.25 * k, 0.5 * k]" />
             <Item model-url="/models/kreplaniye_planok.glb" :position="[1 * k, 0.5 * k, 1 * k]" />
             <Item model-url="/models/planki.glb" :position="[1.5 * k, 1 * k, 1.5 * k]" />