mns/mns-mini-zabor
mns
/
mns-mini-zabor
4
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

pillar color

This commit is contained in:
Kseninia Mikhaylova 2024-06-07 12:34:06 +03:00
parent 3e1ab89e55
commit e45c19124a
3 changed files with 57 additions and 15 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
assets/main.scss
View File

@ -121,7 +121,7 @@ label {
}
input {
@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;
@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 disabled:bg-neutral disabled:cursor-not-allowed;
}
button {
@ -133,5 +133,8 @@ button {
}
.form {
@apply col-span-full flex gap-4
@apply col-span-full flex flex-col gap-4;
&-row {
@apply flex flex-row gap-4;
}
}

63
components/calcValues.vue
View File

@ -21,33 +21,72 @@ const form_state = reactive({
length: fence_section.value * 1000,
height: lamelles_count.value * parametric.height.step
})
const changeParametres = () => {
const lamelles = Math.floor(form_state.height / parametric.height.step)
lamelles_count.value = lamelles
fence_section.value = form_state.length * 0.001
for (const key in form_state) {
if (parametric.hasOwnProperty(key) && parametric[key].max) {
if (form_state[key] > parametric[key].max) {
form_state[key] = parametric[key].max
}
}
if (parametric.hasOwnProperty(key) && parametric[key].min) {
if (form_state[key] < parametric[key].min) {
form_state[key] = parametric[key].min
}
}
}
}
const setLamelleColor = (color: string) => {
lamelle_color.value = color
}
const setPillarColor = (color: string) => {
pillar_color.value = color
}
watch(form_state, changeParametres, { deep: true })
</script>
<template>
<div class="container">
<form class="form">
<div class="form-item">
<label for="length">Длина секции, мм</label>
<input id="length" type="number" v-bind="parametric.length" v-model="form_state.length" />
<div class="form-row">
<div class="form-item">
<label for="length">Длина секции, мм</label>
<input id="length" type="number" v-bind="parametric.length" v-model="form_state.length" />
</div>
<div class="form-item">
<label for="height">Высота забора, мм</label>
<input id="height" type="number" v-bind="parametric.height" v-model="form_state.height" />
</div>
</div>
<div class="form-item">
<label for="height">Высота забора, мм</label>
<input id="height" type="number" v-bind="parametric.height" v-model="form_state.height" />
<div class="form-row">
<div class="form-item">
<label for="lamelle_color">Цвет ламелей</label>
<input id="lamelle_color" type="text" v-model="lamelle_color" disabled />
</div>
<div class="colors flex flex-wrap">
<template v-for="color in converter.hex">
<div class="color size-5" :class="[{ 'outline outline-primary': color == lamelle_color }]"
:style="[{ backgroundColor: color }]" @click="setLamelleColor(color)">
</div>
</template>
</div>
</div>
<div class="colors flex flex-wrap">
<template v-for="color in converter.hex">
<div class="color size-5" :class="[{ 'outline outline-primary': color == lamelle_color }]"
:style="[{ backgroundColor: color }]" @click="setLamelleColor(color)">
</div>
</template>
<div class="form-row">
<div class="form-item">
<label for="pillar_color">Цвет столба</label>
<input id="pillar_color" type="text" v-model="pillar_color" disabled />
</div>
<div class="colors flex flex-wrap">
<template v-for="color in converter.hex">
<div class="color size-5" :class="[{ 'outline outline-primary': color == pillar_color }]"
:style="[{ backgroundColor: color }]" @click="setPillarColor(color)">
</div>
</template>
</div>
</div>
</form>
</div>

2
components/model/parametric.vue
View File

@ -20,7 +20,7 @@ renderer.value.toneMapping = NeutralToneMapping
<Environment files='/hdrmaps/skukuza_golf_4k.hdr' :background="true" />
</Suspense>
<Suspense>
<TresGroup :scale="3" :rotate-y="-Math.PI * -0.5" :translate-y="-3">
<TresGroup :scale="3" :rotate-y="-Math.PI * -0.5" :translate-y="-3.25">
<ModelItem model-url="/models_one/bottom.glb"
:position="[-fence_section * 0.5 - pillar_size, -bSize, 0]" :remove-pos="true"
:color="pillar_color" />