diff --git a/src/pages/newMedicalCard/components/MedicalCardHeader.vue b/src/pages/newMedicalCard/components/MedicalCardHeader.vue index 7b2e745..ec7894a 100644 --- a/src/pages/newMedicalCard/components/MedicalCardHeader.vue +++ b/src/pages/newMedicalCard/components/MedicalCardHeader.vue @@ -44,16 +44,25 @@ size="10px", padding="2px 8px", dropdown-icon="expand_more", - menu-anchor="bottom left" - menu-self="top start" + menu-anchor="bottom left", + menu-self="top start", ) - q-list.w-56(:style="{padding: '16px', color: 'var(--font-dark-blue-color)'}") - q-item.text-smm( - v-close-popup, - v-for="allergy in allergiesList", - :style="{padding: 0, 'min-height': '32px'}" - ) - q-item-section.cursor-pointer {{allergy}} + .p-4.w-56.flex.justify-between + q-list.allergies-list.w-full(id="allergiesList") + q-item.allergies-item.text-smm.rounded( + v-close-popup, + v-for="allergy in allergiesList", + :style="{padding: '0 8px', 'min-height': '32px'}" + ) + q-item-section.cursor-pointer {{allergy.name}} + .m-auto.label-color.icon-eye + q-icon(name="visibility", size="16px") + //.scroll-wrapper.h-hull.px-6px.relative.flex.flex-col + .scroll-track.rounded.w-full.h-full + .scroll-thumb.rounded.w-1.h-28.absolute( + id="thumb", + :style="{top: `${thumbPos}px`, height: `${thumbHeight}px`}", + ) span.text-smm.label-color Добавлен в систему: span.date-color {{ createdDate }} span.text-smm.label-color Последнее обновление: @@ -98,6 +107,9 @@ export default { return { menuItem: headerMenuItem, routes: routesDictionary, + //thumbPos: 0, + //scrollTop: 0, + //thumbHeight: 0, }; }, computed: { @@ -140,6 +152,46 @@ export default { return this.checkDate("updated_at"); }, allergiesList() { + /*let arr = [ + { + name: "Грибы", + title: "Сыпь", + }, + { + name: "Грибы", + title: "Сыпь", + }, + { + name: "Грибы", + title: "Сыпь", + }, + { + name: "Грибы", + title: "Сыпь", + }, + { + name: "Пенецеллин", + title: "Сыпь", + }, + { + name: "Мох", + title: "Опухание лица", + }, + { + name: "Пыльца", + title: "Чихание", + }, + { + name: "Злаковые", + title: "Чихание", + }, + ]; + return this.patientData?.allergic + .map((elem) => ({ + name: elem?.name, + title: elem?.title, + })) + .concat(arr);*/ return this.patientData?.allergic.map((elem) => ({ name: elem?.name, title: elem?.title, @@ -158,6 +210,28 @@ export default { ? moment.parseZone(this.medicalCardData?.[field]).format("DD.MM.YYYY") : ""; }, + /*scroll() { + let list = document.getElementById("allergiesList"); + this.thumbHeight = + list?.offsetHeight / (list?.scrollHeight / list?.offsetHeight); + /*let thumb = document.getElementById("thumb"); + let nativeThumbHeight = + list?.offsetHeight / (list?.scrollHeight / list?.offsetHeight); + let difference = Math.abs(nativeThumbHeight - thumb.clientHeight); + if (list.scrollTop < this.scrollTop && this.thumbPos > 0) { + this.thumbPos = this.thumbPos - difference - this.scrollTop; + this.scrollTop = list.scrollTop; + } + if ( + list.scrollTop > this.scrollTop && + list.scrollTop + thumb.clientHeight <= list.offsetHeight + ) { + console.log(list.scrollTop + thumb.clientHeight, list.offsetHeight); + this.thumbPos = difference + list.scrollTop; + this.scrollTop = list.scrollTop; + } + this.thumbPos = list.scrollTop; + },*/ }, }; @@ -194,4 +268,35 @@ export default { color: var(--font-grey-color) .date-color color: var(--font-dark-blue-color) +/*.scroll-wrapper + width: 16px + background-color: transparent +/*.scroll-track + background-color: var(--bg-ligth-blue-color) +/*.scroll-thumb + background-color: var(--bg-aqua-blue) +.allergies-list + max-height: 190px + overflow-y: auto + //&::-webkit-scrollbar-track:horizontal + // margin: 16px 6px 0 104px + &::-webkit-scrollbar + //width: 16px + width: 4px + background-color: var(--default-white) + &::-webkit-scrollbar-track + margin: 0 + // border-left: 6px solid var(--default-white) + // border-right: 6px solid var(--default-white) + //&::-webkit-scrollbar-thumb + // border-left: 6px solid var(--default-white) + // border-right: 6px solid var(--default-white) +.allergies-item + color: var(--font-dark-blue-color) +.allergies-item:hover + background-color: var(--bg-light-grey) + .icon-eye + display: block +.icon-eye + display: none