update

src/assets/index.css

@@ -77,7 +77,7 @@ button:hover {
 }
 
 .container {
-  max-width: 1200px;
+  max-width: 800px;
   width: 100%;
   margin-inline: auto;
 }
@@ -225,7 +225,8 @@ button,
 input,
 optgroup,
 select,
-textarea {
+textarea,
+option {
   font-family: inherit; /* 1 */
   font-size: 100%; /* 1 */
   line-height: 1.15; /* 1 */

src/assets/index.css.map

@@ -1 +1 @@
-{"version":3,"sourceRoot":"","sources":["fonts.scss","style.scss","normalize.scss"],"names":[],"mappings":"AAAQ;AAER;EACE;;;AAGF;EACE;EACA;EACA;;;AAGF;EACE;EACA;EACA;;;AAGF;EACE;EACA;EACA;;;AAGF;EACE;EACA;EACA;;;AAGF;EACE;EACA;EACA;;;AAGF;EACE;EACA;EACA;;;AAGF;EACE;;;AC3CF;AAAA;EAEE;;;AAGF;EACE;EACA;EACA;EACA;;;AAGF;EACE;;;AAGF;EACE;EACA;;AAEA;EACE;EACA;;;AAIJ;EACE;;;AAGF;EACE;;;AAGF;EACE;EACA;EAEA;;;ACtCF;AAEA;AAAA;AAGA;AAAA;AAAA;AAAA;AAKA;EACE;EACA;;;AAGF;AAAA;AAGA;AAAA;AAAA;AAIA;EACE;;;AAGF;AAAA;AAAA;AAIA;EACE;;;AAGF;AAAA;AAAA;AAAA;AAUA;AAAA;AAGA;AAAA;AAAA;AAAA;AAKA;EACE;EACA;EACA;;;AAGF;AAAA;AAAA;AAAA;AAKA;EACE;EACA;;;AAGF;AAAA;AAGA;AAAA;AAAA;AAIA;EACE;;;AAGF;AAAA;AAAA;AAAA;AAKA;EACE;EACA;EACA;;;AAGF;AAAA;AAAA;AAIA;AAAA;EAEE;;;AAGF;AAAA;AAAA;AAAA;AAKA;AAAA;AAAA;EAGE;EACA;;;AAGF;AAAA;AAAA;AAIA;EACE;;;AAGF;AAAA;AAAA;AAAA;AAKA;AAAA;EAEE;EACA;EACA;EACA;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;AAAA;AAGA;AAAA;AAAA;AAIA;EACE;EACA;EACA;;;AAGF;EACE;;;AAGF;AAAA;AAGA;AAAA;AAAA;AAAA;AAKA;AAAA;AAAA;AAAA;AAAA;EAKE;EACA;EACA;EACA;EACA;EACA;;;AAGF;AAAA;AAAA;AAAA;AAKA;AAAA,QACQ;EACN;;;AAGF;AAAA;AAAA;AAAA;AAKA;AAAA,SACS;EACP;;;AAGF;AAAA;AAAA;AAIA;AAAA;AAAA;AAAA;EAIE;;;AAGF;AAAA;AAAA;AAIA;AAAA;AAAA;AAAA;EAIE;EACA;;;AAGF;AAAA;AAAA;AAIA;AAAA;AAAA;AAAA;EAIE;;;AAGF;AAAA;AAAA;AAIA;EACE;;;AAGF;AAAA;AAAA;AAAA;AAAA;AAAA;AAOA;EACE;EACA;EACA;EACA;EACA;EACA;;;AAGF;AAAA;AAAA;AAIA;EACE;;;AAGF;AAAA;AAAA;AAIA;EACE;;;AAGF;AAAA;AAAA;AAAA;AAKA;AAAA;EAEE;EACA;;;AAGF;AAAA;AAAA;AAIA;AAAA;EAEE;;;AAGF;AAAA;AAAA;AAAA;AAKA;EACE;EACA;;;AAGF;AAAA;AAAA;AAIA;EACE;;;AAGF;AAAA;AAAA;AAAA;AAKA;EACE;EACA;;;AAGF;AAAA;AAGA;AAAA;AAAA;AAIA;EACE;;;AAGF;AAAA;AAAA;AAIA;EACE;;;AAGF;AAAA;AAGA;AAAA;AAAA;AAIA;EACE;;;AAGF;AAAA;AAAA;AAIA;EACE","file":"index.css"}
+{"version":3,"sourceRoot":"","sources":["fonts.scss","style.scss","normalize.scss"],"names":[],"mappings":"AAAQ;AAER;EACE;;;AAGF;EACE;EACA;EACA;;;AAGF;EACE;EACA;EACA;;;AAGF;EACE;EACA;EACA;;;AAGF;EACE;EACA;EACA;;;AAGF;EACE;EACA;EACA;;;AAGF;EACE;EACA;EACA;;;AAGF;EACE;;;AC3CF;AAAA;EAEE;;;AAGF;EACE;EACA;EACA;EACA;;;AAGF;EACE;;;AAGF;EACE;EACA;;AAEA;EACE;EACA;;;AAIJ;EACE;;;AAGF;EACE;;;AAGF;EACE;EACA;EAEA;;;ACtCF;AAEA;AAAA;AAGA;AAAA;AAAA;AAAA;AAKA;EACE;EACA;;;AAGF;AAAA;AAGA;AAAA;AAAA;AAIA;EACE;;;AAGF;AAAA;AAAA;AAIA;EACE;;;AAGF;AAAA;AAAA;AAAA;AAUA;AAAA;AAGA;AAAA;AAAA;AAAA;AAKA;EACE;EACA;EACA;;;AAGF;AAAA;AAAA;AAAA;AAKA;EACE;EACA;;;AAGF;AAAA;AAGA;AAAA;AAAA;AAIA;EACE;;;AAGF;AAAA;AAAA;AAAA;AAKA;EACE;EACA;EACA;;;AAGF;AAAA;AAAA;AAIA;AAAA;EAEE;;;AAGF;AAAA;AAAA;AAAA;AAKA;AAAA;AAAA;EAGE;EACA;;;AAGF;AAAA;AAAA;AAIA;EACE;;;AAGF;AAAA;AAAA;AAAA;AAKA;AAAA;EAEE;EACA;EACA;EACA;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;AAAA;AAGA;AAAA;AAAA;AAIA;EACE;EACA;EACA;;;AAGF;EACE;;;AAGF;AAAA;AAGA;AAAA;AAAA;AAAA;AAKA;AAAA;AAAA;AAAA;AAAA;AAAA;EAME;EACA;EACA;EACA;EACA;EACA;;;AAGF;AAAA;AAAA;AAAA;AAKA;AAAA,QACQ;EACN;;;AAGF;AAAA;AAAA;AAAA;AAKA;AAAA,SACS;EACP;;;AAGF;AAAA;AAAA;AAIA;AAAA;AAAA;AAAA;EAIE;;;AAGF;AAAA;AAAA;AAIA;AAAA;AAAA;AAAA;EAIE;EACA;;;AAGF;AAAA;AAAA;AAIA;AAAA;AAAA;AAAA;EAIE;;;AAGF;AAAA;AAAA;AAIA;EACE;;;AAGF;AAAA;AAAA;AAAA;AAAA;AAAA;AAOA;EACE;EACA;EACA;EACA;EACA;EACA;;;AAGF;AAAA;AAAA;AAIA;EACE;;;AAGF;AAAA;AAAA;AAIA;EACE;;;AAGF;AAAA;AAAA;AAAA;AAKA;AAAA;EAEE;EACA;;;AAGF;AAAA;AAAA;AAIA;AAAA;EAEE;;;AAGF;AAAA;AAAA;AAAA;AAKA;EACE;EACA;;;AAGF;AAAA;AAAA;AAIA;EACE;;;AAGF;AAAA;AAAA;AAAA;AAKA;EACE;EACA;;;AAGF;AAAA;AAGA;AAAA;AAAA;AAIA;EACE;;;AAGF;AAAA;AAAA;AAIA;EACE;;;AAGF;AAAA;AAGA;AAAA;AAAA;AAIA;EACE;;;AAGF;AAAA;AAAA;AAIA;EACE","file":"index.css"}

src/assets/normalize.scss

@@ -167,7 +167,8 @@ button,
 input,
 optgroup,
 select,
-textarea {
+textarea,
+option{
   font-family: inherit; /* 1 */
   font-size: 100%; /* 1 */
   line-height: 1.15; /* 1 */

src/assets/style.scss

@@ -33,7 +33,7 @@ button {
 }
 
 .container{
-  max-width: 1200px;
+  max-width: 800px;
   width: 100%;
 
   margin-inline: auto;

src/components/app-checkbox.vue

@@ -0,0 +1,87 @@
+<template>
+  <div>
+    <input
+        class='checkbox'
+        type="checkbox"
+        :id="id"
+        :checked="checked"
+        @input="handleClick($event)">
+    <label :for="id">{{ text }}</label>
+  </div>
+</template>
+
+<script setup>
+const emits = defineEmits(['update:checked'])
+const props = defineProps({
+  checked: {
+    type: Boolean,
+    default: false
+  },
+  id: {
+    type: String,
+    default: ''
+  },
+  text: {
+    type: String,
+    default: ''
+  },
+})
+const handleClick = (event) => {
+  emits('update:checked', event.target.checked)
+}
+</script>
+
+<style lang="scss" scoped>
+.checkbox {
+  position: absolute;
+  z-index: -1;
+  opacity: 0;
+
+  & + label {
+    display: inline-flex;
+    align-items: center;
+    user-select: none;
+  }
+
+  & + label::before {
+    content: '';
+    display: inline-block;
+    width: 24px;
+    height: 24px;
+    flex-shrink: 0;
+    flex-grow: 0;
+    border: 1px solid #adb5bd;
+    border-radius: 6px;
+    margin-right: 10px;
+    background-repeat: no-repeat;
+    background-position: center center;
+    background-size: 50% 50%;
+  }
+
+  &:checked + label::before {
+    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3e%3cpath fill='%23fff' d='M6.564.75l-3.59 3.612-1.538-1.55L0 4.26 2.974 7.25 8 2.193z'/%3e%3c/svg%3e");
+  }
+
+  &:not(:disabled):not(:checked) + label:hover::before {
+    border-color: var(--primary-hover);
+  }
+
+  &:not(:disabled):active + label::before {
+    background-color: var(--primary);
+    border: 1px solid #ECEBED;
+  }
+
+  &:focus + label::before {
+    box-shadow: 0 7px 20px rgba(0, 0, 0, 0.07);
+  }
+
+  &:focus:not(:checked) + label::before {
+    border-color: var(--primary);
+  }
+
+  &:disabled + label::before {
+    background-color: #e9ecef;
+    border: 1px solid #ECEBED;
+  }
+}
+</style>

src/components/app-input.vue

@@ -7,7 +7,8 @@
     <input
         :placeholder=placeholder
         :value="value"
-        @input="updateValue">
+        @input="updateValue"
+    >
     <div
         class="app-input__warning"
         v-for="element of error"
@@ -55,10 +56,15 @@ const updateValue = (e) => {
   border-radius: 10px;
   cursor: pointer;
 
+  &:hover {
+    opacity: 0.7;
+  }
+
   input {
     width: 100%;
     border-radius: 5px;
     padding: 10px;
+    height: 25px;
   }
 
   &__title {

src/components/app-select.vue

@@ -0,0 +1,41 @@
+<template>
+  <label class="app-select">
+    <div>{{ title }}</div>
+    <select class="select">
+      <option v-for="item in items" :key="item.id">
+        {{ item }}
+      </option>
+    </select>
+  </label>
+</template>
+
+<script setup>
+defineProps({
+  items: {
+    type: Array,
+    required: true
+  },
+  title: {
+    type: String,
+    default: ''
+  }
+})
+</script>
+
+<style lang="scss">
+.app-select {
+  width: 300px;
+  cursor: pointer;
+
+  &:hover {
+    opacity: 0.7;
+  }
+}
+
+.select {
+  padding: 10px;
+  width: 100%;
+  height: 45px;
+  border-radius: 5px;
+}
+</style>

src/pages/createUser.vue

@@ -4,6 +4,7 @@
       <h1 class="createUser__title">Создание пользователя</h1>
 
       <form @submit.prevent="submitForm" class="createUser__form">
+        <h3>Персональные данные</h3>
         <div class="createUser__row">
           <AppInput
               placeholder='Введите фамилию'
@@ -12,14 +13,138 @@
               :error="v$.nameField.$errors"
           />
           <AppInput
-              placeholder='Введите почту'
+              placeholder='Введите имя'
-              title="Почта"
+              title="Имя"
-              v-model:value="v$.emailField.$model"
+              v-model:value="v$.nameField.$model"
-              :error="v$.emailField.$errors"
+              :error="v$.nameField.$errors"
+          />
+        </div>
+        <div class="createUser__row">
+          <AppInput
+              placeholder='Введите отчество'
+              title="Отчество"
+              v-model:value="v$.nameField.$model"
+              :error="v$.nameField.$errors"
+          />
+          <AppInput
+              placeholder='Введите дату рождения'
+              title="Дата рождения"
+              v-model:value="v$.nameField.$model"
+              :error="v$.nameField.$errors"
+          />
+        </div>
+        <div class="createUser__row">
+          <AppSelect
+              title="Укажите ваш пол"
+              :items="['Мужской','Женский']"
+          />
+          <AppSelect
+              title="Группа клиентов"
+              :items="['Vip','Проблемные','ОМС']"
+          />
+        </div>
+        <div class="createUser__row">
+          <AppInput
+              placeholder='Введите номер телефона'
+              title="Номер телефона"
+              v-model:value="v$.nameField.$model"
+              :error="v$.nameField.$errors"
+          />
+          <AppSelect
+              title="Лечющий врач"
+              :items="['Иванов', 'Захаров', 'Чернышева']"
+          />
+        </div>
+        <div class="createUser__row">
+          <AppCheckbox
+              class="createUser__checkbox"
+              text="Не отправлять СМС"
+              id="checkboxIsActive"
+              v-model:checked="checkboxIsActive"/>
+        </div>
+
+        <h3>Адресс</h3>
+        <div class="createUser__row">
+          <AppInput
+              placeholder='Введите индекс'
+              title="Индекс"
+              v-model:value="v$.nameField.$model"
+              :error="v$.nameField.$errors"
+          />
+          <AppInput
+              placeholder='Введите вашу страну'
+              title="Страна"
+              v-model:value="v$.nameField.$model"
+              :error="v$.nameField.$errors"
+          />
+        </div>
+        <div class="createUser__row">
+          <AppInput
+              placeholder='Введите вагу область'
+              title="Область"
+              v-model:value="v$.nameField.$model"
+              :error="v$.nameField.$errors"
+          />
+          <AppInput
+              placeholder='Введите ваш город'
+              title="Город"
+              v-model:value="v$.nameField.$model"
+              :error="v$.nameField.$errors"
+          />
+        </div>
+        <div class="createUser__row">
+          <AppInput
+              placeholder='Введите вашу улицу'
+              title="Улица"
+              v-model:value="v$.nameField.$model"
+              :error="v$.nameField.$errors"
+          />
+          <AppInput
+              placeholder='Введите ваш номер дома'
+              title="Дом"
+              v-model:value="v$.nameField.$model"
+              :error="v$.nameField.$errors"
           />
         </div>
 
-        <AppButton medium>Confirm</AppButton>
+        <h3>Паспортные данные</h3>
+        <div class="createUser__row">
+          <AppSelect
+              title='Выберите документ'
+              :items="['Паспорт','Свидетельство о рождении','Водительское удостоверение']"
+          />
+          <AppInput
+              placeholder='Введите серию'
+              title="Серия"
+              v-model:value="v$.nameField.$model"
+              :error="v$.nameField.$errors"
+          />
+        </div>
+        <div class="createUser__row">
+          <AppInput
+              placeholder='Введите номер'
+              title="Номер"
+              v-model:value="v$.nameField.$model"
+              :error="v$.nameField.$errors"
+          />
+          <AppInput
+              placeholder='Дата'
+              title="Дата выдвчи"
+              v-model:value="v$.nameField.$model"
+              :error="v$.nameField.$errors"
+          />
+        </div>
+        <div class="createUser__row">
+          <AppInput
+              width="100%"
+              placeholder='Введите название оргонизации'
+              title="Кем выдан"
+              v-model:value="v$.nameField.$model"
+              :error="v$.nameField.$errors"
+          />
+        </div>
+
+        <AppButton medium type="Submit">Confirm</AppButton>
       </form>
     </div>
   </div>
@@ -32,6 +157,10 @@ import AppInput from "../components/app-input.vue";
 import {computed, ref} from "vue";
 import {email, helpers, minLength} from "@vuelidate/validators";
 import useVuelidate from "@vuelidate/core";
+import AppCheckbox from "../components/app-checkbox.vue";
+import AppSelect from "../components/app-select.vue";
+
+const checkboxIsActive = ref(false)
 
 const nameField = ref('')
 const emailField = ref('')
@@ -48,26 +177,46 @@ const rules = computed(() => ({
 }))
 
 const v$ = useVuelidate(rules, {nameField, emailField})
-console.log(v$)
+
+function submitForm() {
+  alert('pizda')
+}
 </script>
 
 <style lang="scss">
 .createUser {
+  height: 100%;
+
   &__title {
     margin-top: 30px;
     margin-bottom: 50px;
   }
 
   &__form {
-    display: flex;
+    //display: flex;
     flex-direction: column;
     gap: 30px;
+    height: 100%;
+
+    @media (max-width: 700px) {
+      align-items: center;
+    }
   }
 
   &__row {
     display: flex;
     flex-direction: row;
     justify-content: space-between;
+
+    @media (max-width: 700px) {
+      display: flex;
+      flex-direction: column;
+      gap: 30px;
+    }
+  }
+
+  &__checkbox {
+    margin-top: auto;
   }
 }