assets/main.scss

@@ -12,6 +12,9 @@ html {
 
 body {
     @apply select-none min-w-80 font-sans;
+    &.modal-opened {
+        @apply overflow-hidden;
+    }
 }
 
 .container {
@@ -247,6 +250,10 @@ a[href^="#"] {
         }
     }
 
+    &-content {
+        @apply max-h-[66vh] overflow-auto;
+    }
+
     h2 {
         @apply px-6 text-2xl text-center;
     }

components/calcValues.vue

@@ -51,12 +51,7 @@ const form_refs = {
 }
 
 const changeParametres = () => {
-    console.log(form_state.total_length * 1000, copy_form_state.total_length * 1000)
-
-    if ((form_state.total_length * 1000) <= (parametric.length.min + parametric.height.step)) {
-        form_state.total_length = (parametric.length.min + parametric.height.step) / 1000
-        // return
-    }
+    // console.log(form_state.total_length * 1000, copy_form_state.total_length * 1000)
 
     const lamelles = Math.floor(form_state.height / parametric.height.step)
 
@@ -79,6 +74,7 @@ const changeParametres = () => {
 
     let { fence_length, total_length_mm, auto_length, length, full_sections } = form_state
     length = parseFloat(length.toString())
+    if (total_length_mm < parametric.length.min) total_length_mm = parametric.length.min
 
     if (auto_length) {
         let w = parametric.length.min
@@ -137,6 +133,11 @@ watch(() => form_state, changeParametres, { deep: true })
 const isModalOpen = useState('modal_open', () => false)
 const toggleModal = () => {
     isModalOpen.value = !isModalOpen.value
+    if(isModalOpen.value == true) {
+        document.body.classList.add('modal-opened')
+    } else {
+        document.body.classList.remove('modal-opened')
+    }
 }
 const goal = (target: string, params: object) => {
     const nuxtApp = useNuxtApp()
@@ -152,13 +153,13 @@ const goal = (target: string, params: object) => {
                 <div class="form-row">
                     <div class="form-item w-full">
                         <label for="length">Длина ламельного блока, мм</label>
-                        <input disabled :value="`${form_state.length} мм`" class="w-28" />
+                        <input disabled :value.input="`${form_state.length.toFixed(0)} мм`" class="w-28" />
                         <input id="length" type="range" class="xl:w-full" v-bind="parametric.length"
                             v-model="form_state.length" :disabled="form_state.auto_length" :ref="form_refs.length" />
                     </div>
                     <div class="form-item w-full">
                         <label for="height">Высота забора, мм</label>
-                        <input disabled :value="`${form_state.height} мм`" class="w-28" />
+                        <input disabled :value="`${form_state.height.toFixed(0)} мм`" class="w-28" />
                         <input id="height" type="range" class="xl:w-full" v-bind="parametric.height"
                             v-model="form_state.height" :ref="form_refs.height" />
                     </div>
@@ -188,6 +189,9 @@ const goal = (target: string, params: object) => {
                             v-model="form_state.total_length" :ref="form_refs.total_length" />
                     </div>
                     <div class="form-item xl:w-2/4 text-sm xl:text-base">
+                        <p v-if="form_state.total_length_mm < parametric.length.min" class="text-ioprim">
+                            Выбранный размер забора слишком мал для расчета стоимости. Пожалуйста, выберите больший размер, чтобы продолжить.
+                        </p>
                         <p v-if="form_state.extra_section" class="text-ioprim">
                             Внимание! Дополнительная секция приводит к увеличению стоимости.
                             Рекомендуем вам изменить длину забора или длину секции!

components/modal.vue

@@ -208,7 +208,7 @@ const policy = () => {
             </div>
             <template v-else-if="modal_state.show_form">
                 <h2>Оставьте контакты для связи </h2>
-                <form @submit.prevent="submit" ref="form">
+                <form @submit.prevent="submit" ref="form" class="modal-content">
                     <input type="text" placeholder="Ваше имя" v-model="modal_data.name" />
                     <input type="phone" placeholder="Ваш номер телефона" v-model="modal_data.phone"
                         @keypress="validateInput" />
@@ -229,7 +229,7 @@ const policy = () => {
             </template>
             <template v-else>
                 <h2>данные расчета</h2>
-                <div class="flex gap-4 flex-col mb-4">
+                <div class="flex gap-4 flex-col mb-4 modal-content">
                     <p>Общая длина: {{ total_length }}<br />
                         Ламелей: {{ lamelles_count }}<br />
                         Длина секции: {{ (fence_section * 1000).toFixed(0) }}<br />

composables/useCalc.ts

@@ -15,5 +15,5 @@ export const use_section_count = () => useState('section_count', () => n)
 export const use_extra_section = () => useState('extra_section', () => 0)
 export const use_total_length = () => useState('total_length', () => (((min + 104) * n) + 104) * 0.001)
 export const use_min_length = () => useState('min_length', () => 700)
-export const use_max_size = () => useState<number>('max_size', () => 13)
+export const use_max_size = () => useState<number>('max_size', () => 40)
 export const use_explosion_state = () => useState<boolean>('explosion_state', () => false)