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

base table #25

Merged
ksenia_mikhailova merged 1 commits from bx-1047-icon into dev 2024-07-12 13:01:49 +03:00
Conversation 0 Commits 1 Files Changed 2 +46 -33
2 changed files with 46 additions and 33 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

18
assets/main.scss
View File

@ -79,7 +79,7 @@ body {
}
a:before {
@media screen and (max-width: 1280px) {
@media screen and (max-width: 1280px) {
content: none;
}
}
@ -347,4 +347,20 @@ button {
@apply cursor-not-allowed opacity-50 pointer-events-none;
}
}
}
.calc_table {
@apply flex flex-col gap-4 max-w-4xl;
>.grid {
@apply gap-4 border-solid border-b items-center last:border-b-0;
>[class*=col] {
@apply p-2;
}
>[class*=row-span]+[class*=col-span] {
@apply pl-4;
}
}
}

61
components/calcValues.vue
View File

@ -203,42 +203,39 @@ const goal = (target: string, params: object) => {
</div>
</div>
</div>
<div class="col-span-12 lg:col-span-6 prose min-w-full">
<div class="col-span-12 grid calc_table">
<template v-if="(form_state.total_length * 1000) >= parametric.length.min">
<p>
Забор общей длиной {{ form_state.total_length }}{{ '\xa0' }}м,
{{ section_count }}
<Plural :n="section_count" :forms="plurals.section" /> по
{{ `${parseFloat(form_state.length.toString()).toFixed(2)}\xa0мм` }}{{
form_state.extra_section ? ` и 1 дополнительная секция
длиной ${form_state.extra_section.toFixed(2)}\xa0мм` : '' }}.
</p>
<p v-if="parametric.length.min <= form_state.total_length * 1000">
Всего <template v-if="!form_state.remove_pillar">
<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>
<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 + ~~(!!form_state.extra_section) + 1 }}
<Plural :forms="plurals.fence" :n="section_count + ~~(!!form_state.extra_section) + 1" />,
</template>
{{ section_count * lamelles_count }}
<Plural :n="section_count * lamelles_count" :forms="plurals.lamelle" />
{{ `длиной ${parseFloat(form_state.length.toString()).toFixed(2)}\xa0мм` }}<template
v-if="form_state.extra_section">
{{ ` и ${~~(!!form_state.extra_section.toFixed(2)) * lamelles_count}` }}
<Plural :n="~~(!!form_state.extra_section) * lamelles_count" :forms="plurals.lamelle" />
{{ `длиной ${form_state.extra_section}\xa0мм` }}
</template>.
</p>
</div>
<div class="col-span-1">
{{ `${parseFloat(form_state.fence_length.toString()).toFixed(2)}\xa0мм` }}
</div>
</div>
</template>
</div>
<div class="prose col-span-12 lg:col-span-6">
<p>
Окрашивается по технологии порошковой окраски: <br />
ламели: {{ getColorNameFromRal(lamelle_color)?.toLowerCase() }};
столбы: {{ getColorNameFromRal(pillar_color)?.toLowerCase() }}.
</p>
</div>
<div class="form-row justify-center">
<button @click.prevent="toggleModal">Рассчитать прямо сейчас</button>
</div>
</form>
</div>
</template>