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>

src/pages/newMedicalCard/components/MedicalFormWrapper.vue

@@ -1,7 +1,7 @@
 <template lang="pug">
   .form-wrapper.relative.h-fit.rounded
     transition(name="medical-form", mode="out-in")
-      .loader.absolute.flex.items-center.justify-center.w-full.h-full.rounded(v-if="isLoadingData")
+      .loader.absolute.z-10.flex.items-center.justify-center.w-full.h-full.rounded(v-if="isLoadingData")
         base-loader
     .flex.flex-col.h-full.gap-25px.p-6
       .flex.w-fit.gap-11px.items-center
@@ -48,8 +48,10 @@ export default {
 
 <style lang="sass" scoped>
 .form-wrapper
-  width: 1532px
+  width: 83.2%
   background-color: var(--default-white)
+  @media (max-width: 600px)
+    width: fit-content
 .edit-button
   color: var(--btn-blue-color)
 .loader