WIP Добавил форму для Основных данных

src/pages/newMedicalCard/components/BasicDataForm.vue

@@ -1,8 +1,69 @@
 <template lang="pug">
+  medical-form-wrapper(title="Основная информация")
+    .form-wrap.form.flex.gap-24.w-full
+      .data-section.flex.flex-col.gap-4(v-for="data in configData")
+        .font-semibold.text-sm.whitespace-nowrap {{data.dataLabel}}
+        .flex.justify-between.items-center.gap-4(v-for="field in data.fields")
+          .label-field.font-sm.text-sm.whitespace-nowrap {{`${field.label} :`}}
+          .avatar-field.justify-start(v-if="field.type === 'avatar'")
+            base-avatar(:size="40")
+          base-input(v-else v-model="initData[data.dataKey][field.key]" :type="field.type" :width="300" standout="bg-white" text-color="black")
 </template>
 
 <script>
+import BaseInput from "@/components/base/BaseInput.vue";
+import BaseAvatar from "@/components/base/BaseAvatar.vue";
+import MedicalFormWrapper from "@/pages/newMedicalCard/components/MedicalFormWrapper.vue";
+import { baseDataForm } from "@/pages/newMedicalCard/utils/configMedical";
 export default {
   name: "BasicDataForm",
+  components: { MedicalFormWrapper, BaseInput, BaseAvatar },
+  data() {
+    return {
+      configData: baseDataForm,
+      initData: {
+        basicData: {
+          last_name: "",
+          first_name: "",
+          patronymic: "",
+          gender: "",
+          birth_date: new Date(),
+          photo: "",
+        },
+        registrationAddress: {
+          region: "",
+          city: "",
+          street: "",
+          house_number: "",
+          apartment_number: "",
+        },
+        residenceAddress: {
+          region: "",
+          city: "",
+          street: "",
+          house_number: "",
+          apartment_number: "",
+        },
+      },
+    };
+  },
 };
 </script>
+
+<style lang="sass" scoped>
+.avatar-field
+  min-width: 310px
+.input
+  color: purple
+.data-section
+  width: 30%
+  @media(max-width: 1900px)
+    width: 28%
+  @media(max-width: 1700px)
+    width: 100%
+.form-wrap
+  @media(max-width: 1700px)
+    flex-direction: column
+.label-field
+  color: var(--font-grey-color)
+</style>