WIP Навесила скролл

src/pages/newMedicalCard/components/MedicalProtocolsList.vue

@@ -7,45 +7,101 @@
         label="Создать осмотр",
         no-caps,
         icon="add",
-        :style="{width: '100%'}"
+        :style="{width: '100%', height: '40px'}"
+        padding="0",
       )
-    .p-4.rounded.background.h-full
+    .p-4.rounded.background.list
       .flex
         base-select(
           :style="{flex: 1}",
         )
         q-btn.ml-2(
-          icon="sort"
+          icon="app:sort-number",
           :style="{width: '40px', height: '40px'}",
-          padding="0"
-          :class="sortingClass"
+          padding="0",
+          :class="sortingClass",
           @click="invertSorting"
         )
       .flex.py-4.w-full.color-grey.text-base.justify-center
         span.opacity-50 Осмотров: 5
-      .flex.gap-y-2
-        .w-full.border.rounded.border-grey.p-4(@click="openInspection")
-          .flex.justify-between.mb-7
-            .flex.flex-col.gap-y-1
-              span.text-xl.font-bold.color-blue.line-height 2023 г.
-              .text-smm.color-grey.flex.items-center.gap-x-6px.line-height
-                span.align-middle 22.02
-                .rounded-full.h-1.w-1.background-grey
-                span.align-middle 18:30 - 19:30
-            .flex.items-center.justify-center.h-6.w-6.rounded.background-grey
-              img.teeth-icon(src="@/assets/icons/teeth.svg")
-          .h-10
+      .flex.flex-col.gap-y-2
+        medical-protocol-card(
+          v-for="protocol in protocolsData", :key="protocol.id",
+          :protocol-data="protocol",
+          @click="openInspection"
+        )
 </template>
 
 <script>
 import BaseSelect from "@/components/base/BaseSelect.vue";
+import BaseAvatar from "@/components/base/BaseAvatar.vue";
+import MedicalProtocolCard from "@/pages/newMedicalCard/components/MedicalProtocolCard.vue";
 export default {
   name: "MedicalProtocolsList",
-  components: { BaseSelect },
+  components: { BaseSelect, BaseAvatar, MedicalProtocolCard },
   props: { openInspection: Function },
   data() {
     return {
       sorting: false,
+      activeProtocolId: 1,
+      protocolsData: [
+        {
+          id: 1,
+          employee: {
+            last_name: "Захаров",
+            first_name: "Алексей",
+            patronymic: "Сергеевич",
+            job_title: "Хирург",
+            photo: "",
+          },
+          date: "2023-04-20",
+          start_time: "18:30",
+          end_time: "19:00",
+          status: "filled",
+        },
+        {
+          id: 2,
+          employee: {
+            last_name: "Лаврентьев",
+            first_name: "Сергей",
+            patronymic: "Анатольевич",
+            job_title: "Терапевт",
+            photo: "",
+          },
+          date: "2077-03-20",
+          start_time: "15:30",
+          end_time: "16:00",
+          status: "partially filled",
+        },
+        {
+          id: 3,
+          employee: {
+            last_name: "Захаров",
+            first_name: "Алексей",
+            patronymic: "Сергеевич",
+            job_title: "Хирург",
+            photo: "",
+          },
+          date: "2023-02-15",
+          start_time: "18:30",
+          end_time: "19:00",
+          status: "filled",
+        },
+        {
+          id: 4,
+          employee: {
+            last_name: "Щевьева",
+            first_name: "Лариса",
+            patronymic: "Николаевна",
+            job_title: "Ортодонт",
+            photo: "",
+          },
+          date: "2023-05-21",
+          start_time: "13:30",
+          end_time: "15:00",
+          status: "",
+        },
+      ],
     };
   },
   computed: {
@@ -70,6 +126,11 @@ export default {
 <style lang="sass" scoped>
 .list-wrapper
   width: 19.6%
+.list
+  height: calc(100% - 76px)
+  overflow-y: auto
+  &::-webkit-scrollbar
+    width: 0
 .background
   background-color: var(--default-white)
 .sort-icon-default
@@ -80,15 +141,4 @@ export default {
   color: var(--default-white)
 .color-grey
   color: var(--font-grey-color)
-.background-grey
-  background-color: var(--font-grey-color)
-.border-grey
-  border-color: var(--border-grey-color)
-.color-blue
-  color: var(--font-dark-blue-color)
-.line-height
-  line-height: 135%
-.teeth-icon
-  width: 16px
-  height: 16px
 </style>