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

bx-1047-main #35

Merged
ksenia_mikhailova merged 4 commits from bx-1047-main into dev 2024-07-23 13:58:56 +03:00
Conversation 0 Commits 4 Files Changed 2 +23 -19
2 changed files with 23 additions and 19 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

16
assets/main.scss
View File

@ -31,7 +31,7 @@ body {
} }
.logo { .logo {
@apply w-full py-4 col-span-4 xl:col-span-2; @apply w-full py-4 col-span-8 xl:col-span-2;
a { a {
@apply flex items-center gap-2; @apply flex items-center gap-2;
@ -86,7 +86,7 @@ body {
} }
&-toggle { &-toggle {
@apply flex xl:hidden col-span-8 justify-end; @apply flex xl:hidden col-span-4 justify-end;
>span { >span {
@apply cursor-pointer text-zinc-600 hover:text-ioprim-900 transition-colors; @apply cursor-pointer text-zinc-600 hover:text-ioprim-900 transition-colors;
@ -208,11 +208,15 @@ a[href^="#"] {
@apply col-span-12 md:col-span-6 xl:col-span-4 grid grid-cols-4 items-center px-4; @apply col-span-12 md:col-span-6 xl:col-span-4 grid grid-cols-4 items-center px-4;
&-image { &-image {
@apply rounded-full size-20 bg-slate-300 overflow-hidden col-span-1; @apply max-w-full max-h-full aspect-square overflow-hidden col-span-1 pr-4;
img{
@apply rounded-full bg-slate-300
}
} }
&-content { &-content {
@apply col-span-3 text-end italic; @apply col-span-3 text-end italic text-sm lg:text-base;
} }
&-title { &-title {
@ -228,7 +232,7 @@ a[href^="#"] {
} }
&-close { &-close {
@apply absolute right-4 top-4 text-4xl opacity-50; @apply absolute right-3 top-3 text-4xl opacity-50;
} }
&-status { &-status {
@ -244,7 +248,7 @@ a[href^="#"] {
} }
h2 { h2 {
@apply px-4; @apply px-6 text-2xl text-center;
} }
form { form {

26
components/calcValues.vue
View File

@ -146,7 +146,7 @@ const goal = (target: string, params: object) => {
<template> <template>
<div class="container relative py-4"> <div class="container relative py-4">
<form class="form"> <form class="form">
<div class="col-span-12 lg:col-span-6"> <div class="col-span-12 sm:col-span-6">
<div class="form-row"> <div class="form-row">
<div class="form-item w-full"> <div class="form-item w-full">
<label for="length">Длина ламельного блока, мм</label> <label for="length">Длина ламельного блока, мм</label>
@ -162,7 +162,7 @@ const goal = (target: string, params: object) => {
</div> </div>
</div> </div>
</div> </div>
<div class="col-span-12 lg:col-span-6"> <div class="col-span-12 sm:col-span-6">
<div class="form-row"> <div class="form-row">
<div class="form-item"> <div class="form-item">
<label for="lamelle_color">Цвет ламелей</label> <label for="lamelle_color">Цвет ламелей</label>
@ -185,14 +185,14 @@ const goal = (target: string, params: object) => {
<input type="number" id="total_length" v-bind="parametric.total_length" <input type="number" id="total_length" v-bind="parametric.total_length"
v-model="form_state.total_length" :ref="form_refs.total_length" /> v-model="form_state.total_length" :ref="form_refs.total_length" />
</div> </div>
<div class="form-item w-full lg:w-2/4"> <div class="form-item xl:w-2/4 text-sm xl:text-base">
<p v-if="form_state.extra_section" class="text-ioprim"> <p v-if="form_state.extra_section" class="text-ioprim">
Внимание! Дополнительная секция приводит к увеличению стоимости. Внимание! Дополнительная секция приводит к увеличению стоимости.
Рекомендуем вам изменить длину забора или длину секции! Рекомендуем вам изменить длину забора или длину секции!
</p> </p>
</div> </div>
</div> </div>
<div class="form-row min-h-12"> <div class="form-row min-h-12 mt-2 xl:mt-0">
<div class="form-item form-item_checkbox"> <div class="form-item form-item_checkbox">
<input id="auto_length" type="checkbox" v-model="form_state.auto_length" /> <input id="auto_length" type="checkbox" v-model="form_state.auto_length" />
<label for="auto_length">Автоматический подбор секции</label> <label for="auto_length">Автоматический подбор секции</label>
@ -208,30 +208,30 @@ const goal = (target: string, params: object) => {
<div class="grid grid-cols-6"> <div class="grid grid-cols-6">
<div class="col-span-4 calc_table-maincell">Секции</div> <div class="col-span-4 calc_table-maincell">Секции</div>
<div class="col-span-2 calc_table-maincell">{{ section_count }}</div> <div class="col-span-2 calc_table-maincell">{{ section_count }}</div>
<div class="col-span-6 xl:col-span-4"> <div class="col-span-6 sm:col-span-4">
Ламели, RAL {{ lamelle_color }}, {{ getColorNameFromRal(lamelle_color)?.toLowerCase() }} Ламели, RAL {{ lamelle_color }}, {{ getColorNameFromRal(lamelle_color)?.toLowerCase() }}
</div> </div>
<div class="col-span-3 xl:col-span-1">{{ section_count * lamelles_count }}</div> <div class="col-span-3 sm:col-span-1">{{ section_count * lamelles_count }}</div>
<div class="col-span-3 xl:col-span-1"> <div class="col-span-3 sm:col-span-1">
{{ `${parseFloat(form_state.length.toString()).toFixed(2)}\xa0мм` }}</div> {{ `${parseFloat(form_state.length.toString()).toFixed(2)}\xa0мм` }}</div>
<template v-if="!form_state.remove_pillar"> <template v-if="!form_state.remove_pillar">
<div class="col-span-6 xl:col-span-4">Столбы, RAL {{ pillar_color }}, {{ <div class="col-span-6 sm:col-span-4">Столбы, RAL {{ pillar_color }}, {{
getColorNameFromRal(pillar_color)?.toLowerCase() }}</div> getColorNameFromRal(pillar_color)?.toLowerCase() }}</div>
<div class="col-span-3 xl:col-span-1"> <div class="col-span-3 sm:col-span-1">
{{ section_count + ~~(!!form_state.extra_section) + 1 }} {{ section_count + ~~(!!form_state.extra_section) + 1 }}
</div> </div>
<div class="col-span-3 xl:col-span-1"> <div class="col-span-3 sm:col-span-1">
{{ `${parseFloat(form_state.fence_length.toString()).toFixed(2)}\xa0мм` }} {{ `${parseFloat(form_state.fence_length.toString()).toFixed(2)}\xa0мм` }}
</div> </div>
</template> </template>
<template v-if="form_state.extra_section"> <template v-if="form_state.extra_section">
<div class="col-span-4 calc_table-maincell">Секции</div> <div class="col-span-4 calc_table-maincell">Секции</div>
<div class="col-span-2 calc_table-maincell">1</div> <div class="col-span-2 calc_table-maincell">1</div>
<div class="col-span-6 xl:col-span-4"> <div class="col-span-6 sm:col-span-4">
Ламели, RAL {{ lamelle_color }}, {{ getColorNameFromRal(lamelle_color)?.toLowerCase() }} Ламели, RAL {{ lamelle_color }}, {{ getColorNameFromRal(lamelle_color)?.toLowerCase() }}
</div> </div>
<div class="col-span-3 xl:col-span-1">{{ 1 * lamelles_count }}</div> <div class="col-span-3 sm:col-span-1">{{ 1 * lamelles_count }}</div>
<div class="col-span-3 xl:col-span-1">{{ <div class="col-span-3 sm:col-span-1">{{
`${parseFloat(form_state.extra_section.toString()).toFixed(2)}\xa0мм` }}</div> `${parseFloat(form_state.extra_section.toString()).toFixed(2)}\xa0мм` }}</div>
</template> </template>
</div> </div>