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

bx-1480-constructor #70

Merged
ksenia_mikhailova merged 2 commits from bx-1480-constructor into dev 2024-09-24 12:15:12 +03:00
Conversation 0 Commits 2 Files Changed 3 +34 -25
2 changed files with 34 additions and 25 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files
Showing only changes of commit 02549e1993 - Show all commits

2
assets/main.scss
View File

@ -281,7 +281,7 @@ label {
}
input {
@apply bg-white border border-gray-300 text-gray-900 text-lg p-2.5 rounded focus:ring-blue-500 focus:border-blue-500 focus-visible:border-blue-500 disabled:cursor-not-allowed disabled:text-black disabled:bg-neutral-300;
@apply bg-white border border-gray-300 text-gray-900 text-lg p-2.5 rounded focus:ring-blue-500 focus:border-blue-500 focus-visible:border-blue-500 disabled:cursor-not-allowed disabled:text-black
}
input[type=checkbox] {

57
components/calcValues.vue
View File

@ -148,6 +148,28 @@ const goal = (target: string, params: object) => {
(nuxtApp.$metrika as any).reachGoal(target, params || {})
}
}
const show_extra = ref(false)
const calc_table = computed(() => {
return [
{
name: 'Секции',
value: section_count,
extra: 1,
extra_name: 'Дополнительная секция'
},
{
name:
`Ламели, RAL ${lamelle_color.value}, ${getColorNameFromRal(lamelle_color.value)?.toLowerCase()}`,
value: section_count.value * lamelles_count.value,
extra: 1 * lamelles_count.value
},
{
name: `Столбы, RAL ${pillar_color.value}, ${getColorNameFromRal(pillar_color.value)?.toLowerCase()}`,
value: !form_state.remove_pillar ? section_count.value + ~~(!!form_state.extra_section) + 1 : `—`,
extra: `—`
},
]
})
</script>
<template>
<div class="container relative py-4">
@ -155,7 +177,7 @@ const goal = (target: string, params: object) => {
<div class="form-row">
<div class="form-item w-full">
<label for="length">Длина ламельного блока, мм</label>
<input :value.input="`${form_state.length.toFixed(0)} мм`" :disabled="form_state.auto_length"
<input :value.input="`${form_state.length.toFixed(0)} мм`" :disabled
class="w-full" />
<input id="length" type="range" class="xl:w-full" v-bind="parametric.length"
v-model="form_state.length" :disabled="form_state.auto_length" :ref="form_refs.length" />
@ -179,7 +201,7 @@ const goal = (target: string, params: object) => {
</p>
<p v-if="form_state.extra_section" class="text-ioprim">
Внимание! Дополнительная секция приводит к увеличению стоимости.
Рекомендуем вам изменить длину забора или длину секции!
Рекомендуем вам включить автоподбор длины секции!
</p>
</div>
<div class="form-item form-item_checkbox">
@ -210,29 +232,16 @@ const goal = (target: string, params: object) => {
</div>
<template v-if="(form_state.total_length * 1000) >= parametric.length.min">
<div class="col-span-12 xl:col-span-6 xl:col-start-4 grid calc_table">
<div class="grid grid-cols-4">
<div class="col-span-3 calc_table-maincell">Секции</div>
<div class="col-span-1 calc_table-maincell">{{ section_count }}</div>
<div class="col-span-3">
Ламели, RAL {{ lamelle_color }}, {{ getColorNameFromRal(lamelle_color)?.toLowerCase() }}
</div>
<div class="col-span-1">{{ section_count * lamelles_count }}</div>
<template v-if="!form_state.remove_pillar">
<div class="col-span-3">Столбы, RAL {{ pillar_color }}, {{
getColorNameFromRal(pillar_color)?.toLowerCase() }}</div>
<div class="col-span-1">
{{ section_count + ~~(!!form_state.extra_section) + 1 }}
</div>
</template>
<template v-if="form_state.extra_section">
<div class="col-span-3 calc_table-maincell">Дополнительная секция</div>
<div class="col-span-1 calc_table-maincell">1</div>
<div class="col-span-3">
Ламели, RAL {{ lamelle_color }}, {{ getColorNameFromRal(lamelle_color)?.toLowerCase() }}
</div>
<div class="col-span-1">
{{ 1 * lamelles_count }}</div>
<div class="grid grid-cols-4 relative">
<template v-for="item in calc_table">
<div class="col-span-3 calc_table-maincell">{{ show_extra && item.extra_name ? item.extra_name : item.name }}</div>
<div class="col-span-1 calc_table-maincell">{{ show_extra ? item.extra : item.value }}</div>
</template>
<span class="text-ioprim absolute top-0 right-0 text-2xl cursor-pointer" v-if="form_state.extra_section"
title="Дополнительная секция" @click="() => show_extra = !show_extra">
<Icon name="mdi:page-first" v-if="show_extra" />
<Icon name="mdi:page-last" v-else />
</span>
</div>
<button @click.prevent="toggleModal">Рассчитать</button>
</div>