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:
DwCay
2022-10-28 18:27:00 +03:00
parent 92a25cecc7
commit 2a318c61ba
13 changed files with 240 additions and 212 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
src/components/base/BaseAddingNetwork.vue
View File

@@ -1,7 +1,7 @@
<template lang="pug">
.flex(class="gap-x-1.5")
.flex.w-full(class="gap-x-1.5")
base-select(:for-networks="true" :style-border="true" :list-data="listAddingNetworks" :option-data="selectedOption" :choose-option="chooseNetwork" :width-select="42")
base-input.input-info.w-full(v-model:value="value.username" :id="value.id" placeholder="Ссылкa")
base-input.input-info.w-full(v-model:value="value.username" placeholder="Ссылкa")
</template>
<script>

2
src/components/base/BaseSelect.vue
View File

@@ -26,7 +26,7 @@
:style="{ minWidth : widthSelect + 'px'}")
.flex.not-italic.option.justify-center.py-1.text-xl(
v-for="responsible in listData"
@click="(e) => chooseOption(e)"
@click="chooseOption"
:key="responsible.network"
:id="responsible.network"
:class="responsible.icon"

140
src/pages/clients/components/ClientsFormCreate.vue
View File

@@ -1,30 +1,31 @@
<template lang="pug">
.wrapper.flex.flex-col.absolute.top-28.right-0.px-8.py-7.gap-y-8
.wrapper-create.flex.flex-col.absolute.top-28.right-0.px-4.py-7.gap-y-8
.icon-cancel.close.absolute.top-5.right-5.cursor-pointer(@click="closeForm")
span.title.text-xl.font-bold Создание клиента
.flex.gap-x-4.h-fit
span.title.text-xl.font-bold.px-4 Создание клиента
.flex.gap-x-4.h-fit.px-4
.flex.gap-x-3.w-full
.export-avatar.cursor-pointer.flex.justify-center.items-center
img.icon-download(src="@/assets/icons/download.svg" alt="Download")
base-input(v-model:value="infoClient.fullName" placeholder="ФИО*" :width-input="326" )
base-select(:list-data="priorityList" :option-data="priorityOption" :width-select="176" :style-border="true" :choose-option="chooseOptionSelect")
.icon-download.text-xl
base-input(v-model:value="infoClient.basic.full_name" placeholder="ФИО*" :width-input="326" )
base-select(:list-data="priorityList" :option-data="getPriorityOption" :width-select="176" :for-networks="false" :style-border="true" :choose-option="chooseOptionSelect")
.flex.flex-col.flex-auto.l.gap-y-8
.flex
button.title-info.px-6.py-2.cursor-pointer(v-for="(info, index) in infoTitleArray" @click="(e) => selectTab(e)" :class="{active:info.active}" :key="index" :id="info.title") {{info.title}}
.flex.px-4
button.title-info.px-6.py-2.cursor-pointer.w-full.text-sm(v-for="(info, index) in listInfoTitle" @click="(e) => selectTab(e)" :class="{active:info.active}" :key="index" :id="info.title") {{info.title}}
.flex(:style="{display :'block'}" ref="basic")
form-create-basic-info( :basic-info="infoClient.basicInfo" :add-network="addNewNetwork" :save-client="saveClient")
.flex(:style="{display :'none'}" ref="secondary")
form-create-secondary-info(:secondary-info="infoClient.secondaryInfo" :save-client="saveClient")
form-create-basic-info( :basic-info="infoClient.basic" :phone="infoClient.phone" :email="infoClient.email" :add-network="addNewNetwork" :save-client="saveClient" :choose-option="chooseOptionNetworks")
.flex(:style="{display :'none'}" ref="doc")
form-create-doc(:doc="infoClient.doc" :save-file="saveDocFile" :save-client="saveClient")
form-create-identity-documents(:identity-document="infoClient.pass" :save-client="saveClient")
.flex(:style="{display :'none'}" ref="addresses")
form-create-addresses(:addresses="infoClient.addresses" :save-file="saveDocFile" :save-client="saveClient")
.flex(:style="{display :'none'}" ref="additional")
form-create-additional(:additional-info="infoClient.additional" :add-new-additional="addNewAdditionalInfo" :save-file="saveAdditionalFiles" :save-client="saveClient")
</template>
<script>
import { column } from "@/pages/clients/utils/tableConfig";
import FormCreateBasicInfo from "@/pages/clients/components/FormCreateBasicInfo";
import FormCreateSecondaryInfo from "@/pages/clients/components/FormCreateSecondaryInfo";
import FormCreateDoc from "@/pages/clients/components/FormCreateDoc";
import FormCreateIdentityDocuments from "@/pages/clients/components/FormCreateIdentityDocuments";
import FormCreateAddresses from "@/pages/clients/components/FormCreateAddresses";
import FormCreateAdditional from "@/pages/clients/components/FormCreateAdditional";
import BaseInput from "@/components/base/BaseInput";
import BaseSelect from "@/components/base/BaseSelect";
@@ -34,8 +35,8 @@ export default {
BaseInput,
BaseSelect,
FormCreateBasicInfo,
FormCreateSecondaryInfo,
FormCreateDoc,
FormCreateIdentityDocuments,
FormCreateAddresses,
FormCreateAdditional,
},
props: {
@@ -43,40 +44,39 @@ export default {
},
data() {
return {
prioritySettings: column.find((el) => el.name === "priority"),
infoClient: {
fullName: "",
priority: "",
basicInfo: {
age: "",
jobTitle: "",
number: "",
email: "",
networks: [
basic: {
full_name: "",
birth_date: "",
priority: null,
contacts: [
{
id: "network",
network: "",
kind: "",
username: "",
},
],
},
secondaryInfo: {
phone: {
kind: "PHONE",
username: "",
},
email: {
kind: "EMAIL",
username: "",
},
pass: {
number: "",
issuedBy: "",
divisionCode: "",
dateIssue: "",
},
snilsInn: {
inn: "",
snils: "",
},
dates: {
birthday: "",
kind: "Паспорт",
numba: "",
issued_by_org: "",
issued_by_date: "",
issued_by_org_code: "",
},
addresses: {
actualPlace: "",
registrationPlace: "",
},
},
doc: {},
additional: [
{
@@ -87,20 +87,20 @@ export default {
},
],
},
infoTitleArray: [
listInfoTitle: [
{
title: "Основное",
key: "basic",
active: true,
},
{
title: "Вторичное",
key: "secondary",
title: "Документы",
key: "doc",
active: false,
},
{
title: "Документы",
key: "doc",
title: "Адреса",
key: "addresses",
active: false,
},
{
@@ -113,12 +113,36 @@ export default {
priorityList: ["Высокий", "Средний", "Низкий", "-"],
};
},
methods: {
chooseOptionSelect(e) {
this.priorityOption = this.priorityList[e.target.id];
this.infoClient.priority = this.priorityList[e.target.id];
computed: {
getPriorityOption() {
return this.prioritySettings.settings.find(
(el) => el.priority === this.infoClient.basic.priority
).text;
},
},
methods: {
postNewClient() {
fetch("http://45.84.227.122:8080/general/person/create/", {
method: "POST",
headers: {
Accept: "text/html; q=1.0, */*",
"Content-Type": "application/json;charset=utf-8",
},
body: JSON.stringify({
full_name: this.infoClient.basic.full_name,
birth_date: this.infoClient.basic.birth_date,
}),
});
},
chooseOptionSelect(e) {
this.infoClient.basic.priority = this.prioritySettings.settings.find(
(el) => el.text === e.target.id
).priority;
},
chooseOptionNetworks() {},
saveClient() {
this.postNewClient();
},
saveClient() {},
saveDocFile(e) {
this.infoClient.doc = e.target.files;
},
@@ -136,15 +160,16 @@ export default {
});
},
addNewNetwork() {
this.infoClient.basicInfo.networks.push({
this.infoClient.basic.contacts.push({
id:
this.infoClient.basicInfo.networks[0].id +
this.infoClient.basicInfo.networks.length,
network: "",
this.infoClient.basic.contacts[0].id +
this.infoClient.basic.contacts.length,
kind: "",
username: "",
});
},
selectTab(event) {
this.infoTitleArray.forEach((el) => {
this.listInfoTitle.forEach((el) => {
if (el.title === event.target.id) {
el.active = true;
this.$refs[el.key].style.display = "block";
@@ -159,20 +184,15 @@ export default {
</script>
<style lang="sass" scoped>
.wrapper
.wrapper-create
z-index: 1
background-color: var(--default-white)
width: fit-content
border-radius: 4px
min-width: 634px
max-height: 700px
width: 634px
min-height: 700px
box-shadow: var(--default-shadow)
.title
color: var(--font-dark-blue-color)
.icon-download
width: 18px
height: 18px
.export-avatar
width: 40px
height: 40px

31
src/pages/clients/components/ClientsTable.vue
View File

@@ -1,7 +1,8 @@
<template lang="pug">
.wrapper.flex.flex-col.gap-y-8.px-6.pt-6.h-full.w-full.min-w-fit
clients-table-hat(:is-open-actions="marked.length" :open-form-create="openFormCreate")
.flex.flex-col.h-full.gap-y-2
.wrapper-table.relative.flex.flex-col.gap-y-8.px-6.py-6.h-full.w-full
clients-form-create(v-if="isOpenFormCreate" :close-form="closeFormCreateClient")
clients-table-hat(:is-open-actions="marked.length" :open-form-create="openFormCreateClient")
.flex.flex-col.h-full.gap-y-2.table-container
clients-table-header(:check="selectedCheck" :is-check="selectAll")
.flex.flex-col
clients-table-row(
@@ -19,6 +20,7 @@ import ClientsTableHeader from "@/pages/clients/components/ClientsTableHeader";
import ClientsTableHat from "@/pages/clients/components/ClientsTableHat";
import ClientsTableRow from "@/pages/clients/components/ClientsTableRow";
import ClientsTableCheckbox from "@/pages/clients/components/ClientsTableCheckbox";
import ClientsFormCreate from "@/pages/clients/components/ClientsFormCreate";
export default {
name: "ClientsTable",
components: {
@@ -26,18 +28,23 @@ export default {
ClientsTableRow,
ClientsTableHat,
ClientsTableHeader,
},
props: {
openFormCreate: Function,
ClientsFormCreate,
},
data() {
return {
isOpenFormCreate: false,
selectAll: false,
marked: [],
dataClients: [],
};
},
methods: {
openFormCreateClient() {
this.isOpenFormCreate = true;
},
closeFormCreateClient() {
this.isOpenFormCreate = false;
},
saveDataClients(data) {
this.dataClients = data.results;
},
@@ -72,6 +79,16 @@ export default {
</script>
<style lang="sass" scoped>
.wrapper
.wrapper-table
background-color: var(--default-white)
.table-container
overflow: auto
&::-webkit-scrollbar
height: 4px
&::-webkit-scrollbar-track
background-color: rgba(211, 212, 220, 0.5)
border-radius: 8px
&::-webkit-scrollbar-thumb
border-radius: 8px
background-color: var(--btn-blue-color)
</style>

2
src/pages/clients/components/ClientsTableHeader.vue
View File

@@ -1,5 +1,5 @@
<template lang="pug">
.flex.row.text-base.font-semibold
.flex.row.text-base.font-semibold.min-w-fit
clients-table-cell-header(v-for="cell in columnHead" :title="cell.title" :width="cell.width" :class="!cell.title && 'px-3'")
.icon-down-arrow.icon.text-xsm.cursor-pointer(v-if="cell.iconHead && cell.name !== 'fullName'" )
.icon-sort-number.cursor-pointer.text-xs.icon(v-if="cell.iconHead && cell.name === 'fullName'")

2
src/pages/clients/components/ClientsTableRow.vue
View File

@@ -1,5 +1,5 @@
<template lang="pug">
.row-wrapper.flex.flex-col.w-full
.row-wrapper.flex.flex-col.w-full.min-w-fit
.row-body.flex.w-full.cursor-pointer(:id="id" @dblclick="(e) => openDetailInfo(e)")
.check-box.flex.justify-center.items-center
clients-table-checkbox(:id="id" :check="check" :is-check="isCheck")

1
src/pages/clients/components/ClientsWrapper.vue
View File

@@ -1,7 +1,6 @@
<template lang="pug">
.wrapper.flex.w-full.relative.mx-6
clients-table(:open-form-create="openFormCreateClient")
clients-form-create(v-if="isOpenForm" :close-form="closeFormCreateClient")
</template>
<script>

3
src/pages/clients/components/FormCreateAdditional.vue
View File

@@ -1,6 +1,6 @@
<template lang="pug">
.wrapper-additional.flex.flex-col.gap-y-8.justify-between.text-base
.flex.flex-col.gap-y-6.w-full
.flex.flex-col.gap-y-6.w-full.px-4
.flex.flex-col.gap-y-4.w-full(v-for="info in additionalInfo" :key="info.id")
.flex.flex-col.gap-y-1
base-input(v-model:value="info.header" placeholder="Заголовок")
@@ -15,6 +15,7 @@
.add-additional.flex.gap-x-3.cursor-pointer(@click="addNewAdditional")
.icon-plus
span Добавить еще пункт
.px-4
base-create-button(@click="saveClient" text="Создать клиента")
</template>

48
src/pages/clients/components/FormCreateAddresses.vue Normal file
View File

@@ -0,0 +1,48 @@
<template lang="pug">
.wrapper-addresses.flex.flex-col.flex-auto.h-full.gap-y-8.justify-between
.flex.flex-col.gap-y-6.px-4
span.title-info.text-base.font-bold Адреса
.grid.grid-cols-2.gap-x-4.gap-y-6
.flex.flex-col.col-start-1.col-end-3(class="gap-y-1.5")
span.text-sm Адрес постоянной регистрации
base-input.input-info(v-model:value="addresses.actualPlace" placeholder="Место регистрации (в паспорте)")
.flex.flex-col.col-start-1.col-end-3(class="gap-y-1.5")
span.text-sm Адрес фактического проживания
base-input.input-info(v-model:value="addresses.registrationPlace" placeholder="Место проживания на данный момент")
.px-4
base-create-button(text="Создать клиента" @click="saveClient")
</template>
<script>
import BaseInput from "@/components/base/BaseInput";
import BaseCreateButton from "@/components/base/buttons/BaseCreateButton";
export default {
name: "FormCreateAddresses",
components: { BaseCreateButton, BaseInput },
props: {
addresses: Object,
saveClient: Function,
saveFile: Function,
},
};
</script>
<style lang="sass" scoped>
.wrapper-addresses
min-height: 443px
max-height: 443px
overflow-y: auto
color: var(--font-grey-color)
&::-webkit-scrollbar
width: 4px
&::-webkit-scrollbar-track
background-color: rgba(211, 212, 220, 0.5)
border-radius: 8px
&::-webkit-scrollbar-thumb
border-radius: 8px
background-color: var(--btn-blue-color)
.input-info
color: var(--font-dark-blue-color)
.title-info
color: var(--font-dark-blue-color)
</style>

38
src/pages/clients/components/FormCreateBasicInfo.vue
View File

@@ -1,42 +1,48 @@
<template lang="pug">
.wrapper-info.flex.flex-col.flex-auto.h-full.gap-y-8.justify-between
.grid.grid-cols-2.gap-x-4.gap-y-6
.grid.grid-cols-2.gap-x-4.gap-y-6.px-4
.flex.flex-col(class="gap-y-1.5")
span.text-sm Возраст
span.text-sm Дата рождения
span.obligatory *
base-input.input-info(v-model:value="basicInfo.age" placeholder="Колличество полных лет" :width-input="277")
.flex.flex-col(class="gap-y-1.5")
span.text-sm Должность
base-input.input-info(v-model:value="basicInfo.jobTitle" placeholder="Должность клиента" :width-input="277")
base-input.input-info(v-model:value="basicInfo.birth_date" type="date" :width-input="277")
.flex.flex-col(class="gap-y-1.5")
span.text-sm Номер телефона
span.obligatory *
base-input.input-info(v-model:value="basicInfo.number" placeholder="+7 (915) 644–92–23" :width-input="277")
base-input.input-info(v-model:value="phone.username" placeholder="+7 (915) 644–92–23" :width-input="277")
.flex.flex-col(class="gap-y-1.5")
span.text-sm Email
span.obligatory *
base-input.input-info(v-model:value="basicInfo.email" placeholder="user@yandex.ru" :width-input="277")
.flex.flex-col.col-start-1.col-end-3(class="gap-y-1.5")
base-input.input-info(v-model:value="email.username" placeholder="user@yandex.ru" :width-input="277")
.flex.flex-col.col-start-1.col-end-3.w-100(class="gap-y-1.5")
span.text-sm Ссылки на соцсети
.flex(class="gap-x-1.5" v-for="network in basicInfo.networks" :key="network.id")
.icon.flex.justify-center.items-center
span.icon-tg.leading-2.text-lg
base-input.input-info.w-full(v-model:value="network.network" :id="network.id" placeholder="Ссылкa")
span.add-network.cursor-pointer(@click="addNetwork") Добавить соцсеть
base-create-button(text="Создать клиента" @click="saveClient")
.flex(class="gap-x-1.5" v-for="network in basicInfo.contacts" :key="network.id")
base-adding-network(:list-adding-networks="networks.settings" selected-option="icon-tg" :value="network" :choose-network="chooseOption")
span.add-network.cursor-pointer(v-show="networks.settings.length !== basicInfo.contacts.length" @click="addNetwork") Добавить соцсеть
.px-4
base-create-button(text="Сохранить" @click="saveClient")
</template>
<script>
import BaseCreateButton from "@/components/base/buttons/BaseCreateButton";
import BaseInput from "@/components/base/BaseInput";
import BaseAddingNetwork from "@/components/base/BaseAddingNetwork";
import { column } from "@/pages/clients/utils/tableConfig";
export default {
name: "FormCreateBasicInfo",
components: { BaseInput, BaseCreateButton },
components: { BaseInput, BaseCreateButton, BaseAddingNetwork },
props: {
chooseOption: Function,
phone: Object,
email: Object,
basicInfo: Object,
saveClient: Function,
addNetwork: Function,
},
data() {
return {
networks: column.find((el) => el.name === "networks"),
};
},
};
</script>

40
src/pages/clients/components/FormCreateDoc.vue
View File

@@ -1,40 +0,0 @@
<template lang="pug">
.wrapper-doc.flex.flex-col.justify-between
.upload-wrapper.flex.flex-col.justify-center.items-center
.upload-text.text-center.flex.w-fit
input.hidden(@change="(e) => saveFile(e)" type="file" id="file-upload")
span Загрузите элемент
label.label.cursor-pointer(for="file-upload") с комьютера
span или перетащите их сюда
base-create-button(@click="saveClient" text="Создать клиента")
</template>
<script>
import BaseCreateButton from "@/components/base/buttons/BaseCreateButton";
export default {
name: "FormCreateDoc",
components: { BaseCreateButton },
props: {
saveClient: Function,
saveFile: Function,
},
};
</script>
<style lang="sass" scoped>
.wrapper-doc
min-height: 443px
max-height: 443px
overflow-y: auto
color: var(--font-grey-color)
.upload-wrapper
min-height: 92px
max-height: 92px
width: 100%
border: 2px dashed var(--font-grey-color)
border-radius: 4px
.upload-text
max-width: 278px
.label
color: var(--btn-blue-color)
</style>

53
src/pages/clients/components/FormCreateIdentityDocuments.vue Normal file
View File

@@ -0,0 +1,53 @@
<template lang="pug">
.wrapper-documents.flex.flex-col.flex-auto.h-full.gap-y-8.justify-between
.flex.flex-col.gap-y-6.px-4
span.title-info.text-base.font-bold Паспортные данные
.grid.grid-cols-2.gap-x-4.gap-y-6
.flex.flex-col(class="gap-y-1.5")
span.text-sm Серия и номер
base-input.input-info(v-model:value="identityDocument.numba" placeholder="0000 000000" :width-input="277")
.flex.flex-col(class="gap-y-1.5")
span.text-sm Кем и когда выдан
base-input.input-info(v-model:value="identityDocument.issued_by_org" placeholder="Точно как в паспорте" :width-input="277")
.flex.flex-col(class="gap-y-1.5")
span.text-sm Код подразделения
base-input.input-info(v-model:value="identityDocument.issued_by_org_code" placeholder="000–000" :width-input="277")
.flex.flex-col(class="gap-y-1.5")
span.text-sm Дата выдачи
base-input.input-info(type="date" v-model:value="identityDocument.issued_by_date" placeholder="Дата" :width-input="277")
.px-4
base-create-button(text="Создать клиента" @click="saveClient")
</template>
<script>
import BaseCreateButton from "@/components/base/buttons/BaseCreateButton";
import BaseInput from "@/components/base/BaseInput";
export default {
name: "FormCreateIdentityDocuments",
components: { BaseCreateButton, BaseInput },
props: {
identityDocument: Object,
saveClient: Function,
},
};
</script>
<style lang="sass" scoped>
.wrapper-documents
min-height: 443px
max-height: 443px
overflow-y: auto
color: var(--font-grey-color)
&::-webkit-scrollbar
width: 4px
&::-webkit-scrollbar-track
background-color: rgba(211, 212, 220, 0.5)
border-radius: 8px
&::-webkit-scrollbar-thumb
border-radius: 8px
background-color: var(--btn-blue-color)
.input-info
color: var(--font-dark-blue-color)
.title-info
color: var(--font-dark-blue-color)
</style>

76
src/pages/clients/components/FormCreateSecondaryInfo.vue
View File

@@ -1,76 +0,0 @@
<template lang="pug">
.wrapper-secondary.flex.flex-col.gap-y-8
.flex.flex-col.gap-y-6
span.title-info.text-base.font-bold Паспортные данные
.grid.grid-cols-2.gap-x-4.gap-y-6
.flex.flex-col(class="gap-y-1.5")
span.text-sm Серия и номер
base-input.input-info(v-model:value="secondaryInfo.pass.number" placeholder="0000 000000" :width-input="277")
.flex.flex-col(class="gap-y-1.5")
span.text-sm Кем и когда выдан
base-input.input-info(v-model:value="secondaryInfo.pass.issuedBy" placeholder="Точно как в паспорте" :width-input="277")
.flex.flex-col(class="gap-y-1.5")
span.text-sm Код подразделения
base-input.input-info(v-model:value="secondaryInfo.pass.divisionCode" placeholder="000–000" :width-input="277")
.flex.flex-col(class="gap-y-1.5")
span.text-sm Дата выдачи
base-input.input-info(type="date" v-model:value="secondaryInfo.pass.dateIssue" placeholder="Дата" :width-input="277")
.flex.flex-col.gap-y-6
span.title-info.text-base.font-bold СНИЛС и ИНН
.grid.grid-cols-2.gap-x-4.gap-y-6
.flex.flex-col(class="gap-y-1.5")
span.text-sm Номер СНИЛС
base-input.input-info(v-model:value="secondaryInfo.snilsInn.snils" placeholder="000–000–000 00" :width-input="277")
.flex.flex-col(class="gap-y-1.5")
span.text-sm Номер ИНН
base-input.input-info(v-model:value="secondaryInfo.snilsInn.inn" placeholder="000000000000" :width-input="277")
.flex.flex-col.gap-y-6
span.title-info.text-base.font-bold Даты
.grid.grid-cols-2.gap-x-4.gap-y-6
.flex.flex-col(class="gap-y-1.5")
span.text-sm Дата рождения
base-input.input-info(type="date" v-model:value="secondaryInfo.dates.birthday" placeholder="00,00,0000" :width-input="277")
.flex.flex-col.gap-y-6
span.title-info.text-base.font-bold Адреса
.grid.grid-cols-2.gap-x-4.gap-y-6
.flex.flex-col.col-start-1.col-end-3(class="gap-y-1.5")
span.text-sm Адрес постоянной регистрации
base-input.input-info(v-model:value="secondaryInfo.addresses.actualPlace" placeholder="Место регистрации (в паспорте)")
.flex.flex-col.col-start-1.col-end-3(class="gap-y-1.5")
span.text-sm Адрес фактического проживания
base-input.input-info(v-model:value="secondaryInfo.addresses.registrationPlace" placeholder="Место проживания на данный момент")
base-create-button(text="Создать клиента" @click="saveClient")
</template>
<script>
import BaseCreateButton from "@/components/base/buttons/BaseCreateButton";
import BaseInput from "@/components/base/BaseInput";
export default {
name: "FormCreateSecondaryInfo",
components: { BaseCreateButton, BaseInput },
props: {
secondaryInfo: Object,
saveClient: Function,
},
};
</script>
<style lang="sass" scoped>
.wrapper-secondary
max-height: 443px
overflow-y: auto
flex: auto
color: var(--font-grey-color)
&::-webkit-scrollbar
width: 4px
&::-webkit-scrollbar-track
background-color: rgba(211, 212, 220, 0.5)
border-radius: 8px
&::-webkit-scrollbar-thumb
border-radius: 8px
background-color: var(--btn-blue-color)
.input-info
color: var(--font-dark-blue-color)
.title-info
color: var(--font-dark-blue-color)
</style>