diff --git a/src/assets/sass/variables.sass b/src/assets/sass/variables.sass index 7c7a853..be28f54 100644 --- a/src/assets/sass/variables.sass +++ b/src/assets/sass/variables.sass @@ -96,4 +96,5 @@ --system-color-red: #f34549 --system-color-green: #21ba72 --gray-background: #e9e9ed + --aqua-color: #2cc3e5 diff --git a/src/pages/newCalendar/components/HeaderRecordForm.vue b/src/pages/newCalendar/components/HeaderRecordForm.vue index 9d2cfde..c4eab3c 100644 --- a/src/pages/newCalendar/components/HeaderRecordForm.vue +++ b/src/pages/newCalendar/components/HeaderRecordForm.vue @@ -39,13 +39,16 @@ .flex.h-14.gap-x-3.items-center.text-smm .text.font-semibold Медкарта: .flex.gap-x-1 - .name.flex.items-center.px-4.pt-2.pb-1.gap-x-2.rounded-md - .photo.flex.h-10.w-10.items-center.justify-center - img.w-10.h-10.rounded-full(v-if="patient", :src="patient.avatar") - q-icon.icon(v-else, name="app:noname", size="24px") - .flex.flex-col.font-medium - .dark-blue {{patient ? trimPatientName(patient.last_name, patient.first_name, patient.patronymic) : "Имя Фамилия"}} - .grey-color.text-xsx.rounded-md {{patient ? patient.birthday : "Дата"}} + .name.flex.rounded-md.flex-col + .flex.items-center.px-4.py-2.gap-x-2(:class="{'medcard': patient}") + .photo.flex.h-10.w-10.items-center.justify-center + img.w-10.h-10.rounded-full(v-if="patient", :src="patient.avatar") + q-icon.icon(v-else, name="app:noname", size="24px") + .flex.flex-col.font-medium.gap-y-2px + .dark-blue {{patient ? trimPatientName(patient.last_name, patient.first_name, patient.patronymic) : "Имя Фамилия"}} + .grey-color.text-xsx.rounded-md {{patient ? patient.birthday : "Дата"}} + .indicator-default.flex.w-full.h-1 + .indicator.flex.h-1(:style="{width: patient ? patient.fill : '0%'}") .change.flex.items-center.rounded-md q-btn(dense, padding="18px 4px", @click="isShowMedcards = true") q-icon.icon(name="app:folder", size="20px") @@ -119,6 +122,9 @@ export default { }, }, methods: { + fixedFill(fill) { + return 100 - fill.slice(0, -1) + "%"; + }, closeModalMedcards() { this.isShowMedcards = false; }, @@ -167,6 +173,7 @@ export default { .change background: var(--bg-light-grey) color: var(--font-grey-color) + border: 1px solid var(--gray-secondary) .status width: 160px @@ -180,16 +187,28 @@ export default { color: var(--font-grey-color) width: 76px +.medcard + cursor: pointer + &:hover + background: var(--gray-secondary) + .name - background: var(--bg-light-grey) - border-bottom-color: var(--border-light-grey-color) - border-bottom-width: 4px + background: var(--default-white) width: 200px + border: 1px solid var(--gray-secondary) .photo background: var(--border-light-grey-color) border-radius: 50% +.indicator-default + background: var(--gray-secondary) + border-end-end-radius: 4px + +.indicator + background: var(--aqua-color) + border-end-start-radius: 4px + .grey-color color: var(--font-grey-color) diff --git a/src/pages/newCalendar/components/MedcardsModal.vue b/src/pages/newCalendar/components/MedcardsModal.vue index a4932b8..57b1c34 100644 --- a/src/pages/newCalendar/components/MedcardsModal.vue +++ b/src/pages/newCalendar/components/MedcardsModal.vue @@ -17,18 +17,18 @@ :class="sortingClass" ) calendar-sidebar-svg(name-svg="sort", :active="sort") - .medcards-wrapper.flex.flex-col.overflow-auto + .medcards-wrapper.flex.flex-col.overflow-auto.w-full .medcard.flex.items-center.cursor-pointer( v-for="patient in patients", @click="selectMedcard(patient)" ) - .flex.justify-between.w-full.items-center + .name.flex.justify-between.w-full.items-center.h-14 .info-block.flex.justify-between.gap-x-2 img.h-10.w-10.object-cover.rounded-full(:src="patient.avatar") .flex.flex-col.gap-y-1 .text-m {{trimPatientName(patient.last_name, patient.first_name, patient.patronymic)}} .grey-color.text-smm {{patient.birthday}} - q-icon.ok-icon(name="app:ok", v-if="patient.check" size="24px") + q-icon.ok-icon(name="app:ok", v-if="patient.check", size="24px") .footer.flex.gap-2 base-button(type="secondary", label="Отменить", width="125px", @click="closeMedcards") base-button( @@ -98,17 +98,22 @@ export default { .search :deep(.q-field__prepend) padding-right: 4px +.name + margin: 4px 0px + &:hover + border-radius: 4px + background: var(--gray-thirdly) + .medcard height: 64px margin-right: 14px border-bottom: 1px solid var(--gray-secondary) &:last-child border-bottom: none - &:hover - border-radius: 4px - background: var(--gray-thirdly) + .medcards-wrapper + width: 440px max-height: 563px margin-right: -18px &::-webkit-scrollbar diff --git a/src/pages/newCalendar/utils/calendarConfig.js b/src/pages/newCalendar/utils/calendarConfig.js index 0157dfa..0c47c79 100644 --- a/src/pages/newCalendar/utils/calendarConfig.js +++ b/src/pages/newCalendar/utils/calendarConfig.js @@ -121,6 +121,7 @@ export const patientList = [ email: "gaevaia@yandex.ru", company: "ООО «АльфаСтрахование»", policy: "№ 2131-1331-4142", + fill: "90%", }, { id: 1, @@ -139,6 +140,7 @@ export const patientList = [ email: "gaevaia@yandex.ru", company: "ООО «АльфаСтрахование»", policy: "№ 2131-1331-4142", + fill: "20%", }, { id: 2, @@ -157,6 +159,7 @@ export const patientList = [ email: "gaevaia@yandex.ru", company: "ООО «АльфаСтрахование»", policy: "№ 2131-1331-4142", + fill: "50%", }, { id: 3, @@ -175,6 +178,7 @@ export const patientList = [ email: "gaevaia@yandex.ru", company: "ООО «АльфаСтрахование»", policy: "№ 2131-1331-4142", + fill: "50%", }, { id: 4, @@ -193,6 +197,7 @@ export const patientList = [ email: "gaevaia@yandex.ru", company: "ООО «АльфаСтрахование»", policy: "№ 2131-1331-4142", + fill: "50%", }, { id: 5, @@ -211,6 +216,7 @@ export const patientList = [ email: "gaevaia@yandex.ru", company: "ООО «АльфаСтрахование»", policy: "№ 2131-1331-4142", + fill: "50%", }, { id: 6, @@ -229,6 +235,7 @@ export const patientList = [ email: "gaevaia@yandex.ru", company: "ООО «АльфаСтрахование»", policy: "№ 2131-1331-4142", + fill: "50%", }, { id: 7, @@ -247,6 +254,7 @@ export const patientList = [ email: "gaevaia@yandex.ru", company: "ООО «АльфаСтрахование»", policy: "№ 2131-1331-4142", + fill: "50%", }, { id: 8, @@ -265,6 +273,7 @@ export const patientList = [ email: "gaevaia@yandex.ru", company: "ООО «АльфаСтрахование»", policy: "№ 2131-1331-4142", + fill: "50%", }, { id: 9, @@ -283,6 +292,7 @@ export const patientList = [ email: "gaevaia@yandex.ru", company: "ООО «АльфаСтрахование»", policy: "№ 2131-1331-4142", + fill: "50%", }, { id: 10, @@ -301,6 +311,7 @@ export const patientList = [ email: "gaevaia@yandex.ru", company: "ООО «АльфаСтрахование»", policy: "№ 2131-1331-4142", + fill: "50%", }, ], choice: false,