From 636413e98cb78cb5f079000a3ce02cdcdb566600 Mon Sep 17 00:00:00 2001
From: Kseninia Mikhaylova <k.mikhailova@svs-tech.pro>
Date: Fri, 14 Jun 2024 16:16:02 +0300
Subject: [PATCH] add picker

---
 assets/main.scss          |  6 +-----
 components/calcModels.vue | 15 ++++-----------
 components/calcValues.vue |  6 +++---
 3 files changed, 8 insertions(+), 19 deletions(-)

diff --git a/assets/main.scss b/assets/main.scss
index 5f000f7..b48076b 100644
--- a/assets/main.scss
+++ b/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 {
diff --git a/components/calcModels.vue b/components/calcModels.vue
index bc21ce4..856a6a9 100644
--- a/components/calcModels.vue
+++ b/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>
@@ -93,11 +93,4 @@ onMounted(() => {
             </TresCanvas>
         </ClientOnly>
     </div>
-</template>
-
-<style scoped>
-.container {
-    height: 600px;
-    display: block;
-}
-</style>
\ No newline at end of file
+</template>
\ No newline at end of file
diff --git a/components/calcValues.vue b/components/calcValues.vue
index 0b46798..066a7ef 100644
--- a/components/calcValues.vue
+++ b/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>