Изменила сетки форм

This commit is contained in:
Daria Golova
2023-09-26 17:54:47 +03:00
parent 615200f4ca
commit 019c8c0459
5 changed files with 45 additions and 58 deletions

View File

@@ -8,15 +8,15 @@
:open-edit="openEdit",
:save="saveChange"
)
q-form.form-wrap.gap-24.w-full(ref="documentForm", :no-error-focus="true")
.data-section.flex.flex-col.gap-4(v-for="data in configData", :key="data.dataLabel")
q-form.form-wrap.gap-6.w-full(ref="documentForm", :no-error-focus="true")
.data-section.flex.flex-col.gap-2(v-for="data in configData", :key="data.dataLabel")
.font-semibold.text-sm.whitespace-nowrap {{data.dataLabel}}
.flex.w-full.justify-between.items-center.gap-4(
.flex.w-full.items-center.gap-4(
v-for="field in data.fields",
:key="field.label"
)
.label-field.font-sm.text-sm.whitespace-nowrap {{`${field.label} :`}}
.photo-field.flex.gap-3.items-center(v-if="field.type === 'photo'")
.flex.gap-3.items-center.h-10(v-if="field.type === 'photo'")
q-avatar(
rounded,
size="40px",
@@ -49,7 +49,7 @@
:name="data.dataKey + ':' + field.key",
@update:model-value="checkChangeDocData",
:readonly="!isEdit",
:width="302",
width="100%",
:mask="field?.inputMask",
:rule="(val) => !personDataField.includes(data.dataKey + ':' + field.key) ? checkPassportFields(val, field.rules) : field.rules(val)",
size="M",
@@ -61,7 +61,7 @@
@update:model-value="checkChangeDocData",
:readonly="!isEdit",
:type="field.type",
:width="302",
width="100%",
:mask="field?.inputMask",
:rule="[(val) => !personDataField.includes(data.dataKey + ':' + field.key) ? checkPassportFields(val, field.rules) : field.rules(val, initialDocData?.[data.dataKey]?.id)]",
size="M"
@@ -315,13 +315,11 @@ export default {
display: grid
grid-template-columns: repeat(3, 1fr)
grid-template-rows: repeat(1, 1fr)
@media(max-width: 1900px)
@media(max-width: 1440px)
grid-template-columns: repeat(2, 1fr)
grid-template-rows: 2.5fr 0.5fr
@media(max-width: 1320px)
grid-template-columns: repeat(1, 1fr)
grid-template-rows: 2.5fr 0.5fr 0.5fr
grid-template-rows: 3fr 1fr
.label-field
min-width: 110px
color: var(--font-grey-color)
.replace-photo
color: var(--btn-blue-color)