admin/astra-frontend
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

[WIP] Отредактировал стили на модальном окне создания льгот, согласно дизайну

Browse Source
This commit is contained in:
megavrilinvv
2023-07-12 18:07:47 +03:00
parent 861efe63fa
commit 3ad3fda76f
4 changed files with 108 additions and 71 deletions
Download Patch File Download Diff File Expand all files Collapse all files

173
src/components/base/BaseCategorySelection.vue
View File

@@ -1,36 +1,37 @@
<template lang="pug">
.selection-wrapper.flex
.left-side.flex.flex-col.gap-y-4
.flex.font-bold.text-xl Категории
base-input(
placeholder="Поиск",
@keyup.enter="searchCategory",
@input="searchCategory",
v-model="searchBenefit",
debounce="10",
outlined,
:width="300",
iconLeft
)
q-icon(
name="app:icon-search",
size="20px",
style="color: var(--font-grey-color)"
)
.field.flex.flex-col.overflow-y-scroll
.flex.items-center(
v-for="benefit in benefitData",
:key="benefit.id",
:style="{alignItems: benefit.name.length > 28 ? 'start' : 'center'}"
)
q-checkbox(
v-model="selected",
:val="benefit",
:style="{border: 'none', width: '36px'}",
size="32px"
.left-side.flex.flex-col
.flex.flex-col.gap-y-4.h-full
.flex.flex-col.gap-y-6
.flex.font-bold.text-xl Категории
base-input.input(
placeholder="Поиск",
@keyup.enter="searchCategory",
@input="searchCategory",
v-model="searchBenefit",
debounce="10",
outlined,
:width="300",
iconLeft
)
.name.flex.items-center.font-medium.text-xm {{benefit.name}}
.buttons-group.flex.py-4.px-8.justify-center
q-icon(
name="app:icon-search",
size="20px",
style="color: var(--font-grey-color)"
)
.field.flex.flex-col.overflow-y-scroll(:class="{'filed-category': findSelected(selected?.id)}")
.flex.items-center(v-for="benefit in benefitData", :key="benefit.id")
q-item(tag="label", :style="{alignItems: benefit.name.length > 28 ? 'start' : 'center'}")
q-item-section(top)
q-radio(
v-model="selected",
:val="benefit",
:style="{border: 'none', width: '36px'}",
size="32px",
)
q-item-label
.name.flex.items-center.font-medium.text-xm {{benefit.name}}
.buttons-group.flex.py-4.px-8.justify-center(v-if="!findSelected(selected?.id)")
base-button(
type="secondary",
label="Сбросить",
@@ -38,27 +39,24 @@
@click="closeModalCategories"
)
base-button(
v-if="selected[0]?.id",
label="Сохранить",
width="146px",
@click="saveCategories(selected[0])"
)
.right-side.flex.px-14.font-bold.relative
.right-side.flex.px-10.font-bold.relative
q-icon(name="app:icon-cancel").text-sm.absolute.top-4.right-4.cursor-pointer(@click="closeModalCategories")
.flex.py-10.gap-y-6.flex-col(v-if="selected[0]?.id && selected[0]?.name !== 'Без льготы'")
.flex.text-6xl {{selected[0]?.name}}
.flex.text-xm.flex-col.gap-y-3 Критерии:
.flex.gap-y-6.flex-col.w-full(v-if="selected?.id && selected?.name !== 'Без льготы'")
.right-header.flex
span.text-6xl {{selected?.name}}
.flex.text-xm.flex-col.gap-y-3.mt-1 Критерии:
.flex.flex-col.gap-y-2
.flex.font-medium.text-smm(v-for="item in choiceCriteria", :key="item.id")
span {{"- " + item}}
.grey-color.flex.font-medium.text-smm(v-for="item in choiceCriteria", :key="item.id") {{"- " + item}}
.flex.text-xm.flex-col.gap-y-3 Документы для подтверждения:
.flex.flex-col.gap-y-2
.flex.font-medium.text-smm(v-for="item in choiceDocumentation", :key="item.id")
span {{"- " + item}}
.grey-color.flex.font-medium.text-smm(v-for="item in choiceDocumentation", :key="item.id") {{"- " + item}}
.flex.text-xm.flex-col.gap-y-3 Льготы:
.flex.flex-col.gap-y-2
.flex.font-medium.text-smm(v-for="item in choicePrivileges", :key="item.id")
span {{"- " + item}}
.grey-color.flex.font-medium.text-smm(v-for="item in choicePrivileges", :key="item.id") {{"- " + item}}
.flex.items-center.h-full.w-full.justify-center.font-medium.text-6xl(
v-else,
:style="{color: 'var(--font-grey-color)'}"
@@ -68,6 +66,7 @@
<script>
import BaseInput from "@/components/base/BaseInput.vue";
import BaseButton from "@/components/base/BaseButton.vue";
export default {
name: "BaseCategorySelection",
components: { BaseInput, BaseButton },
@@ -81,43 +80,37 @@ export default {
},
data() {
return {
selected: [],
selected: {},
searchBenefit: "",
};
},
computed: {
choiceCriteria() {
return this.selected[0]?.criteria.split(",");
return this.selected?.criteria.split(",");
},
choiceDocumentation() {
return this.selected[0]?.documentation.split(",");
return this.selected?.documentation.split(",");
},
choicePrivileges() {
return this.selected[0]?.privileges.split(",");
return this.selected?.privileges.split(",");
},
},
methods: {
findSelected(id) {
return this.basic?.id === id ? true : false;
},
searchCategory() {
this.$emit("search", this.searchBenefit);
},
},
watch: {
selected: {
immediate: true,
deep: true,
handler() {
if (this.selected.length >= 2) this.selected.shift();
},
},
showModal: {
immediate: true,
handler(newVal) {
if (!newVal) {
this.searchBenefit = "";
} else {
this.selected.push(
this.benefitData.find((e) => e.name === "Без льготы")
);
this.selected = this.benefitData.find((e) => e.name === "Без льготы");
}
},
},
@@ -126,13 +119,9 @@ export default {
deep: true,
handler() {
if (this.benefitData && this.showModal && !this.basic.id) {
this.selected.push(
this.benefitData.find((e) => e.name === "Без льготы")
);
this.selected = this.benefitData.find((e) => e.name === "Без льготы");
} else if (this.basic.id) {
this.selected.push(
this.benefitData.find((e) => e.id === this.basic.id)
);
this.selected = this.benefitData.find((e) => e.id === this.basic.id);
}
},
},
@@ -145,36 +134,80 @@ export default {
width: 895px
height: 660px
font-feature-settings: 'pnum' on, 'lnum' on
color: var(--font-dark-blue-color)
.left-side
width: 364px
padding: 32px 28px 0px
padding: 28px 32px 0px
.field
height: 457px
margin-right: -12px
height: 456px
margin-right: -16px
&::-webkit-scrollbar
width: 4px
&::-webkit-scrollbar-track:vertical
margin-bottom: 24px
.filed-category
height: 100%
&::-webkit-scrollbar-track:vertical
margin-bottom: 16px
.name
min-height: 40px
padding-top: 4px
padding-top: 8px
padding-bottom: 4px
border-bottom: 1px solid var(--bg-light-grey)
width: 268px
width: 264px
.q-checkbox :deep(.q-checkbox__bg)
border-radius: 50%
border: 1.5px solid var(--font-grey-color)
.buttons-group
border-top: 1px solid #D3D4D0
margin-left: -28px
margin-right: -28px
border-top: 1px solid var(--bg-event-gret-color-2)
margin-left: -32px
margin-right: -32px
column-gap: 7px
.right-side
background: var(--bg-light-grey)
line-height: 135%
background: var(--default-white)
border-left: 1px solid var(--border-light-grey-color)
width: 531px
height: 100%
.right-header
padding: 27px 40px
margin-left: -40px
margin-right: -40px
border-bottom: 1px solid var(--border-light-grey-color)
.grey-color
color: var(--font-grey-color)
.q-item
padding: 0
min-height: 40px
.q-item__section
width: 36px
min-width: 36px
.q-item :deep(.q-focus-helper)
width: 0
height: 0
.input :deep(.q-field__native)
color: var(--font-grey-color)
font-size: 16px !important
font-style: normal
line-height: normal !important
.input :deep(.q-field__control)
color: var(--font-dark-blue-color)
&:hover:before
border: 1px solid var(--font-dark-blue-color)
&:after
border-width: 1px !important
</style>