WIP Поправила баг с аллергиями

src/pages/newMedicalCard/components/MedicalCardHeader.vue

@@ -44,16 +44,25 @@
             size="10px",
             padding="2px 8px",
             dropdown-icon="expand_more",
-            menu-anchor="bottom left"
+            menu-anchor="bottom left",
-            menu-self="top start"
+            menu-self="top start",
           )
-            q-list.w-56(:style="{padding: '16px', color: 'var(--font-dark-blue-color)'}")
+            .p-4.w-56.flex.justify-between
-              q-item.text-smm(
+              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, 'min-height': '32px'}"
+                  :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`}",
                 )
-                q-item-section.cursor-pointer {{allergy}}
         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;
+    },*/
   },
 };
 </script>
@@ -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
 </style>