WIP Переделала inputs в agreement и medical

src/pages/medicalCard/components/MedicalBaseData.vue

@@ -10,34 +10,35 @@
           v-model="gender",
         )
         .flex.gap-x-4
-          .flex.flex-col.gap-y-2
-            .counter.font-semibold.text-smm Дата рождения
-            base-input-date.input-date.h-10(:width-input="277")
-          .flex.flex-col.gap-y-2
-            .counter.font-semibold.text-smm СНИЛС
+          .input
+            base-input-date(label="Дата рождения")
+          .input
             base-input(
-              :width-input="277",
               placeholder="000–000–000 00",
-              v-mask="'###-###-### ##'"
+              v-mask="'###-###-### ##'",
+              label="СНИЛС"
             )
         .flex.flex-col.gap-y-6
-          .flex.flex-col.gap-y-2
-            .counter.font-semibold.text-smm Адрес регистрации
-            base-input(:width-input="277", placeholder="Введите полный адрес")
-          .flex.flex-col.gap-y-2
-            .counter.font-semibold.text-smm Фактический адрес места жительства
-            base-input(:width-input="277", placeholder="Введите полный адрес")
+          base-input(
+            label="Адрес регистрации",
+            placeholder="Введите полный адрес"
+          )
+          base-input(
+            label="Фактический адрес места жительства",
+            placeholder="Введите полный адрес"
+          )
         .flex.gap-x-4
-          .flex.flex-col.gap-y-2
-            .counter.font-semibold.text-smm Номер телефона
+          .input
             base-input(
-              :width-input="277",
+              label="Номер телефона",
               placeholder="+7 (915) 644–92–23",
               v-mask="'+7 (###) ###-##-##'"
             )
-          .flex.flex-col.gap-y-2
-            .counter.font-semibold.text-smm Email
-            base-input(:width-input="277", placeholder="user@yandex.ru")
+          .input
+            base-input(
+              label="Email",
+              placeholder="user@yandex.ru"
+            )
 </template>
 
 <script>
@@ -79,10 +80,6 @@ export default {
 </script>
 
 <style lang="sass" scoped>
-.input-date
-  border: 1.5px solid var(--border-light-grey-color)
-  border-radius: 4px
-
-.counter
-  color: var(--font-grey-color)
+.input
+  width: 277px
 </style>

src/pages/medicalCard/components/MedicalIdentityDocuments.vue

@@ -4,19 +4,22 @@
       span.font-bold Паспортные данные
       .flex.flex-col.gap-y-6
         .flex.gap-x-4
-          .flex.flex-col.gap-y-2
-            .counter.font-semibold.text-smm Серия и номер
-            base-input(:width-input="277", placeholder="0000 000000")
-          .flex.flex-col.gap-y-2
-            .counter.font-semibold.text-smm Дата выдачи
-            base-input-date.input-date.h-10(:width-input="277")
+          .input
+            base-input(
+              label="Серия и номер",
+              placeholder="0000 000000"
+            )
+          .input
+            base-input-date(label="Дата выдачи")
         .flex.flex-col.gap-y-6
-          .flex.flex-col.gap-y-2
-            .counter.font-semibold.text-smm Кем выдан
-            base-input(:width-input="277", placeholder="Точно как в паспорте")
-          .flex.flex-col.gap-y-2
-            .counter.font-semibold.text-smm Страховая оганизация
-            base-input(:width-input="277", placeholder="Введите название организации")
+          base-input(
+            label="Кем выдан",
+            placeholder="Точно как в паспорте"
+          )
+          base-input(
+            label="Страховая оганизация",
+            placeholder="Введите название организации"
+          )
 </template>
 
 <script>
@@ -37,10 +40,6 @@ export default {
 </script>
 
 <style lang="sass" scoped>
-.input-date
-  border: 1.5px solid var(--border-light-grey-color)
-  border-radius: 4px
-
-.counter
-  color: var(--font-grey-color)
+.input
+  width: 277px
 </style>

src/pages/medicalCard/components/MedicalPolicyDocuments.vue

@@ -4,25 +4,25 @@
       .flex.flex-col.gap-y-6
         span.font-bold Полис
         .flex.gap-x-6
-          .flex.flex-col.gap-y-2
-            .counter.font-semibold.text-smm Серия и номер полиса ОМС
-            base-input(:width-input="277", placeholder="0000 000000")
-          .flex.flex-col.gap-y-2
-            .counter.font-semibold.text-smm Серия и номер полиса ДМС
-            base-input(:width-input="277", placeholder="0000 000000")
-    .flex.flex-col.gap-y-2
-      .counter.font-semibold.text-smm Код категории льготы
-      base-input(:width-input="277", placeholder="000")
-    .flex.flex-col.gap-y-6
-      .flex.flex-col.gap-y-2
-        .counter.font-semibold.text-smm К кому обращаться в случае необходимости 
-        base-input.w-full(placeholder="ФИО*")
-      .flex.flex-col.gap-y-2
-        .counter.font-semibold.text-smm Номер телефона
-        base-input(
-          :width-input="277",
-          placeholder="+7 (915) 644–92–23"
-        )
+          .input
+            base-input(
+              label="Серия и номер полиса ОМС",
+              placeholder="0000 000000"
+            )
+          .input
+            base-input(
+              label="Серия и номер полиса ДМС",
+              placeholder="0000 000000"
+            )
+    base-input(label="Код категории льготы", placeholder="000")
+    base-input(
+      label="К кому обращаться в случае необходимости",
+      placeholder="ФИО*"
+    )
+    base-input(
+      label="Номер телефона",
+      placeholder="+7 (915) 644–92–23"
+    )
 </template>
 
 <script>
@@ -40,10 +40,6 @@ export default {
 </script>
 
 <style lang="sass" scoped>
-.input-date
-  border: 1.5px solid var(--border-light-grey-color)
-  border-radius: 4px
-
-.counter
-  color: var(--font-grey-color)
+.input
+  width: 277px
 </style>