From 10dd978bd7549f5588e09865ded7a45ef1977239 Mon Sep 17 00:00:00 2001
From: Daria Golova <danalis969@gmail.com>
Date: Fri, 28 Apr 2023 17:37:58 +0300
Subject: [PATCH] =?UTF-8?q?WIP=20=D0=A1=D0=B4=D0=B5=D0=BB=D0=B0=D0=BB?=
 =?UTF-8?q?=D0=B0=20=D1=85=D0=B5=D0=B4=D0=B5=D1=80=20=D0=BA=D0=B0=D1=80?=
 =?UTF-8?q?=D1=82=D0=BE=D1=87=D0=BA=D0=B8?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/assets/icons/teeth.svg                    |  3 ++
 src/components/base/BaseSelect.vue            |  7 ++++
 .../components/MedicalProtocolsList.vue       | 35 +++++++++++++++++--
 3 files changed, 42 insertions(+), 3 deletions(-)
 create mode 100644 src/assets/icons/teeth.svg

diff --git a/src/assets/icons/teeth.svg b/src/assets/icons/teeth.svg
new file mode 100644
index 0000000..d681b88
--- /dev/null
+++ b/src/assets/icons/teeth.svg
@@ -0,0 +1,3 @@
+<svg width="14" height="16" viewBox="0 0 14 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M5.33433 1.47208C4.95015 1.20462 4.42919 1.04873 3.89713 1.00284C3.35611 0.956177 2.74964 1.01812 2.17445 1.24056C1.59445 1.46485 1.04262 1.85457 0.638994 2.45772C0.235372 3.06086 0.00585952 3.83856 0.00585938 4.79742C0.00585908 7.0961 0.666001 9.57205 1.37185 11.4562C1.72623 12.4021 2.09886 13.2168 2.41929 13.8036C2.57817 14.0945 2.73252 14.3448 2.87314 14.5304C2.94205 14.6213 3.02186 14.7158 3.11024 14.7939C3.15466 14.8331 3.21479 14.8804 3.28918 14.9204C3.35975 14.9583 3.48039 15.0099 3.635 15.0099C3.85726 15.0099 4.01644 14.8992 4.0613 14.8679C4.131 14.8192 4.19198 14.7628 4.23883 14.7164C4.33433 14.6219 4.43989 14.4992 4.54286 14.3757C4.61512 14.289 4.68935 14.1981 4.7664 14.1037C4.92432 13.9103 5.09412 13.7024 5.28327 13.4864C5.56119 13.1691 5.84511 12.8772 6.11538 12.6685C6.40258 12.4467 6.5849 12.3893 6.67105 12.3893C6.7612 12.3893 6.93369 12.4445 7.19611 12.6583C7.44601 12.862 7.7037 13.1487 7.95519 13.4642C8.12872 13.6819 8.28265 13.8913 8.42632 14.0867C8.49343 14.178 8.5583 14.2663 8.62188 14.3509C8.7146 14.4743 8.8119 14.5996 8.90223 14.6971C8.94652 14.7449 9.00629 14.8049 9.07702 14.8574C9.12551 14.8934 9.28622 15.0099 9.51535 15.0099C9.73132 15.0099 9.87863 14.9038 9.92361 14.87C9.98602 14.823 10.0333 14.7723 10.0637 14.7372C10.1263 14.6648 10.1848 14.5791 10.236 14.4981C10.3415 14.331 10.4662 14.103 10.602 13.8367C10.876 13.2996 11.2215 12.5551 11.5918 11.7072C12.3324 10.0112 13.1868 7.86803 13.7834 6.082C14.0438 5.30242 14.0514 4.59017 13.8689 3.95799C13.6881 3.33168 13.3324 2.82317 12.9249 2.42382C12.1246 1.63943 11.0656 1.21658 10.4428 1.08577C10.0061 0.994049 9.54275 0.984615 9.06952 1.06837C8.24689 1.21397 7.39428 1.64118 6.59933 2.40726L5.34885 1.4825C5.34406 1.47896 5.33922 1.47549 5.33433 1.47208ZM9.15185 4.2949C9.42938 4.50014 9.48798 4.89151 9.28274 5.16904C9.0775 5.44657 8.68614 5.50517 8.4086 5.29993L7.14458 4.36516L4.61393 2.49369C4.45771 2.38739 4.16858 2.28089 3.78972 2.24822C3.41476 2.21588 3.002 2.26074 2.62531 2.40642C2.25344 2.55022 1.92077 2.7899 1.67784 3.15291C1.44311 3.50367 1.26801 4.00589 1.25647 4.72169C1.25606 4.74667 1.25586 4.77191 1.25586 4.79742C1.25586 6.88732 1.86338 9.20513 2.5424 11.0176C2.88045 11.92 3.22955 12.6793 3.51636 13.2045C3.57068 13.3039 3.6216 13.3929 3.66867 13.4713C3.7035 13.4289 3.74043 13.3837 3.77913 13.3363C3.94356 13.135 4.13992 12.8947 4.34294 12.6628C4.63883 12.325 4.98536 11.9618 5.35136 11.6791C5.70042 11.4096 6.16017 11.1393 6.67105 11.1393C7.19232 11.1393 7.64512 11.4118 7.98572 11.6893C8.33882 11.977 8.66185 12.3454 8.93262 12.685C9.11753 12.917 9.29466 13.1574 9.44241 13.3583C9.4574 13.3294 9.47278 13.2995 9.48853 13.2686C9.74656 12.7628 10.0809 12.0435 10.4462 11.207C11.1767 9.53426 12.0162 7.42699 12.5978 5.68597C12.7847 5.12632 12.7744 4.6736 12.6679 4.30465C12.6413 4.21257 12.6081 4.12327 12.5686 4.03673C12.4476 3.77097 12.2689 3.53116 12.05 3.31653C11.4548 2.7332 10.6283 2.402 10.1859 2.30909C9.49631 2.16425 8.568 2.32394 7.62177 3.16338L9.08775 4.2475L9.15185 4.2949Z" fill="white"/>
+</svg>
diff --git a/src/components/base/BaseSelect.vue b/src/components/base/BaseSelect.vue
index b498f6a..9b78e71 100644
--- a/src/components/base/BaseSelect.vue
+++ b/src/components/base/BaseSelect.vue
@@ -12,6 +12,7 @@
         :bg-color="bgColor",
         :standout="standout",
         dense,
+        :behavior="behavior",
         emit-value,
         map-options
       )
@@ -100,3 +101,9 @@ export default {
   },
 };
 </script>
+<style lang="sass">
+.q-btn--outline:before, .q-field--outlined .q-field__control:before
+  border-width: 1px !important
+.q-field__marginal
+  color: var(--font-grey-color) !important
+</style>
diff --git a/src/pages/newMedicalCard/components/MedicalProtocolsList.vue b/src/pages/newMedicalCard/components/MedicalProtocolsList.vue
index 5c07cc4..b026cfa 100644
--- a/src/pages/newMedicalCard/components/MedicalProtocolsList.vue
+++ b/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>