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

Merge branch 'bx-696-startproject' of https://git.svs-tech.pro/ksenia_mikhailova/mns-mini-zabor into bx-696-startproject

This commit is contained in:
Зеленская Анастасия Николаевна 2024-06-07 16:03:42 +03:00
parent 119d90fa14 b650c395b3
commit f5e1818047
2 changed files with 23 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
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 disabled:bg-neutral disabled:cursor-not-allowed;
@apply bg-gray-50 border border-gray-300 text-gray-900 rounded focus:ring-blue-500 focus:border-blue-500 text-lg 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 {
@ -139,6 +139,10 @@ button {
}
&-item {
@apply flex flex-row gap-4 items-center justify-center;
.icon {
@apply hover:text-primary cursor-pointer transition-colors text-2xl;
}
}
}

23
components/calcValues.vue
View File

@ -45,7 +45,20 @@ const setLamelleColor = (color: string) => {
const setPillarColor = (color: string) => {
pillar_color.value = color
}
const increment = (field: keyof typeof form_state, value: number) => {
if (form_state.hasOwnProperty(field)) {
let v = form_state[field] + value * parametric[field].step ?? 1
if (parametric.hasOwnProperty(field)) {
if (v > parametric[field].max) {
v = parametric[field].max
}
if (v < parametric[field].min) {
v = parametric[field].min
}
}
form_state[field] = v
}
}
watch(form_state, changeParametres, { deep: true })
</script>
<template>
@ -54,15 +67,15 @@ watch(form_state, changeParametres, { deep: true })
<div class="form-row">
<div class="form-item">
<label for="length">Длина секции, мм</label>
<Icon type="button" @click="increment('length')">-</Icon>
<Icon type="button" @click="increment('length', -1)" name="mdi:minus-circle-outline" />
<input id="length" type="number" v-bind="parametric.length" v-model="form_state.length" />
<Icon type="button" @click="increment('length')">+</Icon>
<Icon type="button" @click="increment('length', 1)" name="mdi:plus-circle-outline" />
</div>
<div class="form-item">
<label for="height">Высота забора, мм</label>
<Icon type="button" @click="increment('length')">-</Icon>
<Icon type="button" @click="increment('height', -1)" name="mdi:minus-circle-outline" />
<input id="height" type="number" v-bind="parametric.height" v-model="form_state.height" />
<Icon type="button" @click="increment('length')">+</Icon>
<Icon type="button" @click="increment('height', 1)" name="mdi:plus-circle-outline" />
</div>
</div>
<div class="form-row">