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>