btn calc #28
|
@ -350,16 +350,16 @@ button {
|
|||
}
|
||||
|
||||
.calc_table {
|
||||
@apply flex flex-col gap-4 max-w-4xl;
|
||||
@apply flex flex-col gap-2 mb-4;
|
||||
|
||||
>.grid {
|
||||
@apply gap-4 border-solid border-b items-center last:border-b-0;
|
||||
@apply gap-2 items-center;
|
||||
|
||||
>[class*=col] {
|
||||
@apply p-2;
|
||||
@apply p-1 border-solid border-b;
|
||||
}
|
||||
|
||||
>[class*=row-span]+[class*=col-span] {
|
||||
>.col-span-4:not(.calc_table-maincell) {
|
||||
@apply pl-4;
|
||||
}
|
||||
}
|
||||
|
|
|
@ -203,39 +203,43 @@ const goal = (target: string, params: object) => {
|
|||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-span-12 grid calc_table">
|
||||
<template v-if="(form_state.total_length * 1000) >= parametric.length.min">
|
||||
<template v-if="(form_state.total_length * 1000) >= parametric.length.min">
|
||||
<div class="col-span-12 xl:col-span-8 xl:col-start-3 grid calc_table">
|
||||
<div class="grid grid-cols-6">
|
||||
<div class="col-span-4">Секции</div>
|
||||
<div class="col-span-1">{{ section_count }}</div>
|
||||
<div class="col-span-1 row-span-2">{{
|
||||
`${parseFloat(form_state.length.toString()).toFixed(2)}\xa0мм` }}
|
||||
<div class="col-span-4 calc_table-maincell">Секции</div>
|
||||
<div class="col-span-2 calc_table-maincell">{{ section_count }}</div>
|
||||
<div class="col-span-4">
|
||||
Ламели, RAL {{ lamelle_color }}, {{ getColorNameFromRal(lamelle_color)?.toLowerCase() }}
|
||||
</div>
|
||||
<div class="col-span-4">Ламели, RAL {{ lamelle_color }}, {{
|
||||
getColorNameFromRal(lamelle_color)?.toLowerCase() }}</div>
|
||||
<div class="col-span-1"> {{ section_count * lamelles_count }}</div>
|
||||
</div>
|
||||
<div class="grid grid-cols-6" v-if="form_state.extra_section">
|
||||
<div class="col-span-4">Дополнительная секция</div>
|
||||
<div class="col-span-1">1</div>
|
||||
<div class="col-span-1 row-span-2">{{
|
||||
`${parseFloat(form_state.extra_section.toString()).toFixed(2)}\xa0мм` }}</div>
|
||||
<div class="col-span-4">Ламели, RAL {{ lamelle_color }}, {{
|
||||
getColorNameFromRal(lamelle_color)?.toLowerCase() }}</div>
|
||||
<div class="col-span-1"> {{ 1 * lamelles_count }}</div>
|
||||
</div>
|
||||
<div class="grid grid-cols-6" v-if="!form_state.remove_pillar">
|
||||
<div class="col-span-4">Столбы, RAL {{ pillar_color }}, {{
|
||||
getColorNameFromRal(pillar_color)?.toLowerCase() }}</div>
|
||||
<div class="col-span-1">{{ section_count * lamelles_count }}</div>
|
||||
<div class="col-span-1">
|
||||
{{ section_count + ~~(!!form_state.extra_section) + 1 }}
|
||||
</div>
|
||||
<div class="col-span-1">
|
||||
{{ `${parseFloat(form_state.fence_length.toString()).toFixed(2)}\xa0мм` }}
|
||||
</div>
|
||||
{{ `${parseFloat(form_state.length.toString()).toFixed(2)}\xa0мм` }}</div>
|
||||
<template v-if="!form_state.remove_pillar">
|
||||
<div class="col-span-4">Столбы, RAL {{ pillar_color }}, {{
|
||||
getColorNameFromRal(pillar_color)?.toLowerCase() }}</div>
|
||||
<div class="col-span-1">
|
||||
{{ section_count + ~~(!!form_state.extra_section) + 1 }}
|
||||
</div>
|
||||
<div class="col-span-1">
|
||||
{{ `${parseFloat(form_state.fence_length.toString()).toFixed(2)}\xa0мм` }}
|
||||
</div>
|
||||
</template>
|
||||
<template v-if="form_state.extra_section">
|
||||
<div class="col-span-4 calc_table-maincell">Секции</div>
|
||||
<div class="col-span-2 calc_table-maincell">1</div>
|
||||
<div class="col-span-4">
|
||||
Ламели, RAL {{ lamelle_color }}, {{ getColorNameFromRal(lamelle_color)?.toLowerCase() }}
|
||||
</div>
|
||||
<div class="col-span-1">{{ 1 * lamelles_count }}</div>
|
||||
<div class="col-span-1">{{
|
||||
`${parseFloat(form_state.extra_section.toString()).toFixed(2)}\xa0мм` }}</div>
|
||||
</template>
|
||||
</div>
|
||||
</template>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-span-12 text-center mb-4">
|
||||
<button @click.prevent="toggleModal">Рассчитать</button>
|
||||
</div>
|
||||
</template>
|
||||
</form>
|
||||
</div>
|
||||
</template>
|
Loading…
Reference in New Issue