WIP Сделала хедер карточки

src/pages/newMedicalCard/components/MedicalProtocolsList.vue

@@ -9,9 +9,11 @@
         icon="add",
         :style="{width: '100%'}"
       )
-    .p-4.rounded.background.h-full.w-full
-      .flex.w-full
-        base-select(:style="{flex: 1}")
+    .p-4.rounded.background.h-full
+      .flex
+        base-select(
+          :style="{flex: 1}",
+        )
         q-btn.ml-2(
           icon="sort"
           :style="{width: '40px', height: '40px'}",
@@ -19,6 +21,20 @@
           :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
+          .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
 </template>
 
 <script>
@@ -61,4 +77,17 @@ export default {
 .sort-icon-active
   background-color: var(--btn-blue-color)
   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>