From 92535f6f171431fcc9123964a6043bed24e2d991 Mon Sep 17 00:00:00 2001
From: Kseninia Mikhaylova <k.mikhailova@svs-tech.pro>
Date: Wed, 12 Mar 2025 09:41:22 +0300
Subject: [PATCH] radiobtn style

---
 components/model/diagram.vue | 24 ++++++++++++++++--------
 components/model/env.vue     |  2 +-
 pages/index.vue              | 21 +++++++++++++--------
 3 files changed, 30 insertions(+), 17 deletions(-)

diff --git a/components/model/diagram.vue b/components/model/diagram.vue
index 6c93592..eff23ed 100644
--- a/components/model/diagram.vue
+++ b/components/model/diagram.vue
@@ -29,14 +29,15 @@ const { scene: aristo_planki } = await useGLTF('/models_aristo_exp/planki.glb')
 const { scene: aristo_stolb } = await useGLTF('/models_aristo_exp/stolb.glb')
 const { scene: aristo_verh } = await useGLTF('/models_aristo_exp/verh.glb')
 
-const kosynka = ref(standart_kosynka)
-const krepleniye_planok = ref(standart_krepleniye_planok)
-const osnova_stolba = ref(standart_osnova_stolba)
-const planki = ref(standart_planki)
-const stolb = ref(standart_stolb)
-const verh = ref(standart_verh)
+const kosynka = ref()
+const krepleniye_planok = ref()
+const osnova_stolba = ref()
+const planki = ref()
+const stolb = ref()
+const verh = ref()
 
-watch(() => globalFenceType.value?.type, (t) => {
+const setModels = () => {
+    const t = globalFenceType.value?.type || 'aristo'
     if (t == 'aristo') {
         kosynka.value = aristo_kosynka
         krepleniye_planok.value = aristo_krepleniye_planok
@@ -53,6 +54,12 @@ watch(() => globalFenceType.value?.type, (t) => {
         stolb.value = standart_stolb
         verh.value = standart_verh
     }
+}
+
+setModels()
+
+watch(() => globalFenceType.value?.type, (t) => {
+    setModels()
     set_material(planki.value, getColorHexFromRal(lamelle_color.value));
     [stolb, verh, krepleniye_planok].map(el => set_material(el.value, getColorHexFromRal(pillar_color.value)))
 })
@@ -67,7 +74,8 @@ set_material(planki.value, getColorHexFromRal(lamelle_color.value));
 </script>
 <template>
     <Suspense>
-        <TresGroup :position-y="-3.5" :scale="2" :key="globalFenceType?.type">
+        <TresGroup :position-y="globalFenceType && globalFenceType.type == 'aristo' ? -2 : -3.5" :scale="2"
+            :key="globalFenceType?.type">
             <ModelItem :model="kosynka" :target="explosion_state ? targetExplosion.kosynka : [0, 0, 0]" />
             <ModelItem :model="krepleniye_planok"
                 :target="explosion_state ? targetExplosion.krepleniye_planok : [0, 0, 0]" />
diff --git a/components/model/env.vue b/components/model/env.vue
index 435fdaf..cba9fc1 100644
--- a/components/model/env.vue
+++ b/components/model/env.vue
@@ -32,7 +32,7 @@ onMounted(async () => {
     const newEnvMap = exrCubeRenderTarget ? exrCubeRenderTarget.texture : null;
 
     scene.value.environment = newEnvMap
-    scene.value.environmentIntensity = 0.7
+    scene.value.environmentIntensity = 1.25
     scene.value.environmentRotation.z = 0.25
     result.renderTarget.texture.dispose();
 })
diff --git a/pages/index.vue b/pages/index.vue
index 2c2263d..3dab788 100644
--- a/pages/index.vue
+++ b/pages/index.vue
@@ -50,9 +50,6 @@ const advantagesText = computed(() => {
 
 const { data: advData } = await apiFetch<ApiAdvantageType[]>(`advantage/`)
 
-const setCalcData = (id: number) => {
-    openTab.value = id
-}
 watch(openTab, () => {
     if (!openTab.value) return
     if (!calculators.value) return
@@ -62,7 +59,7 @@ watch(openTab, () => {
     }
     const v = {
         id: openTab.value as number,
-        type: type as "standart"|"aristo",
+        type: type as "standart" | "aristo",
         calc: calculators.value.find(el => el.id == openTab.value) as ApiCalcType,
     }
     globalFenceType.value = v
@@ -70,7 +67,7 @@ watch(openTab, () => {
 </script>
 <template>
     <div>
-        <Modal :calcData="calculators.find(el => el.id == openTab)" />
+        <Modal :calcData="(calculators || []).find(el => el.id == openTab)" />
         <div class="siteblock bg-white" :id="about?.slug" v-if="about">
             <div class="container">
                 <h1 class="siteblock-title">{{ about?.title }}</h1>
@@ -119,9 +116,17 @@ watch(openTab, () => {
             <div class="flex col-span-full gap-2 justify-center">
                 <template v-for="item in calculators">
                     <div class="flex items-center gap-2">
-                        <label class="rounded p-2 cursor-pointe peer-checked:bg-ioprim-100">
-                            <input type="radio" :value="item.id" v-model="openTab">
-                            {{ item.title }}
+                        <label class="rounded p-2 cursor-pointer flex gap-2" :for="item.id.toString()">
+                            <input type="radio" :id="item.id.toString()" :value="item.id" v-model="openTab"
+                                :checked="openTab == item.id">
+                            <span :class="[
+                                'text-2xl font-bold bg-clip-text text-transparent drop-shadow-xs',
+                                openTab == item.id
+                                    ? 'bg-gradient-to-r from-yellow-400 via-orange-500 to-red-600'
+                                    : 'bg-gradient-to-r from-slate-400 to-slate-600'
+                            ]">
+                                {{ item.title }}
+                            </span>
                         </label>
                     </div>
                 </template>