add picker

assets/main.scss

@@ -74,11 +74,7 @@ a[href^="#"] {
     @apply py-10;
 
     &_imgbg {
-        @apply py-0 bg-no-repeat bg-cover bg-bottom;
-
-        img {
-            max-height: 50vh;
-        }
+        @apply py-0 bg-no-repeat bg-cover bg-bottom h-[50vh];
     }
 
     &_calc {

components/calcModels.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { RepeatWrapping, FrontSide, } from 'three';
+import { FrontSide, RepeatWrapping } from 'three';
 import { TresCanvas, useTexture } from '@tresjs/core'
 import { OrbitControls, Environment, useGLTF } from '@tresjs/cientos'
 
@@ -61,12 +61,12 @@ const loadAll = async () => {
     })
 }
 onMounted(() => {
-    cameraStat.aspect = window.innerWidth / 600
+    cameraStat.aspect = window.innerWidth / (window.innerHeight * 0.5)
     loadAll()
 })
 </script>
 <template>
-    <div class="container min-w-full relative">
+    <div class="container min-w-full relative h-[50vh]">
         <ClientOnly fallback-tag="div" fallback="Загрузка 3D модели">
             <Loader />
             <TresCanvas shadows>
@@ -94,10 +94,3 @@ onMounted(() => {
         </ClientOnly>
     </div>
 </template>
-
-<style scoped>
-.container {
-    height: 600px;
-    display: block;
-}
-</style>

components/calcValues.vue

@@ -121,7 +121,7 @@ const toggleModal = () => {
 }
 const plurals = {
     lamelle: { one: 'ламель', few: 'ламели', many: 'ламелей' },
-    fence: { one: 'cстолб', few: 'столба', many: 'столбов' },
+    fence: { one: 'cтолб', few: 'столба', many: 'столбов' },
     section: { one: 'секция', few: 'секции', many: 'секций' },
 }
 </script>
@@ -165,25 +165,25 @@ const plurals = {
                             <label for="lamelle_color">Цвет ламелей</label>
                             <input id="lamelle_color" type="text" :value="getColorNameFromRal(lamelle_color)"
                                 class="w-60" disabled />
+                            <ColorPicker :cb="setLamelleColor" />
                         </div>
                         <div class="form-item">
                             <template v-for="item in predefLamelleColors">
                                 <ColorPicker :color="item" :cb="setLamelleColor" :open="false"
                                     :active="lamelle_color == item" />
                             </template>
-                            <ColorPicker :cb="setLamelleColor" />
                         </div>
                         <div class="form-item">
                             <label for="pillar_color">Цвет столба</label>
                             <input id="pillar_color" type="text" :value="getColorNameFromRal(pillar_color)" class="w-60"
                                 disabled />
+                            <ColorPicker :cb="setPillarColor" />
                         </div>
                         <div class="form-item">
                             <template v-for="item in predefPillarColors">
                                 <ColorPicker :color="item" :cb="setPillarColor" :open="false"
                                     :active="pillar_color == item" />
                             </template>
-                            <ColorPicker :cb="setPillarColor" />
                         </div>
                     </div>
                 </div>