add label

assets/main.scss

@@ -114,11 +114,11 @@ a[href^="#"] {
 }
 
 label {
-    @apply block mb-2 text-sm font-medium text-gray-900 dark:text-white;
+    @apply inline-block mb-2 text-sm font-medium text-gray-900 dark:text-white;
 }
 
 input {
-    @apply bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded focus:ring-blue-500 focus:border-blue-500 text-lg w-full p-2.5 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 bg-gray-50 border border-gray-300 text-gray-900 rounded focus:ring-blue-500 focus:border-blue-500 text-lg w-full p-2.5 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;
 }
 
 button {

components/calcModels.vue

@@ -16,6 +16,11 @@ const controlsState = reactive({
 // const { scene: primaryLight } = await useGLTF('/models_light/primary_light.glb')
 // const { scene: secondaryLight } = await useGLTF('/models_light/secondary_light.glb')
 // console.log({ backLight, primaryLight, secondaryLight })
+
+const { onLoop } = useRenderLoop()
+onLoop(({ elapsed }) => {
+    // console.log(elapsed)
+})
 </script>
 <template>
     <div class="container min-w-full">

components/calcValues.vue

@@ -13,7 +13,12 @@ const chanreParametres = () => {
 </script>
 <template>
     <div class="container">
-        <input type="number" :max="lamelles.max" :min="lamelles.min" v-model="lamelles.value"
+        <form class="form">
-            @change="chanreParametres" />
+            <div class="form-item">
+                <label for="lanelles_count">Количество ламелей</label>
+                <input id="lanelles_count" type="number" :max="lamelles.max" :min="lamelles.min"
+                    v-model="lamelles.value" @change="chanreParametres" />
+            </div>
+        </form>
     </div>
 </template>