Исправил страницу авторизации, согласно требованиям

src/assets/icons/eye_close.svg

@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M3.42097 3.47124C3.71299 3.17748 4.18787 3.17608 4.48163 3.4681L6.94978 5.92167C8.43742 5.07018 10.1628 4.58333 12.0004 4.58333C16.5909 4.58333 20.4706 7.61774 21.7185 11.7835C21.7605 11.9238 21.7605 12.0734 21.7185 12.2137C21.1198 14.2148 19.9144 15.9536 18.3163 17.221L20.5767 19.4681C20.8705 19.7601 20.8719 20.235 20.5799 20.5288C20.2878 20.8225 19.813 20.8239 19.5192 20.5319L3.42411 4.5319C3.13035 4.23987 3.12895 3.765 3.42097 3.47124ZM17.2438 16.1548C18.618 15.1101 19.6664 13.6657 20.214 11.9988C19.0853 8.56614 15.8356 6.08333 12.0004 6.08333C10.58 6.08333 9.24121 6.42341 8.06045 7.02579L10.1616 9.11456C10.6934 8.77829 11.3246 8.58333 12.0004 8.58333C13.8919 8.58333 15.4329 10.1088 15.4329 12C15.4329 12.6718 15.2377 13.2986 14.9016 13.8265L17.2438 16.1548ZM13.7911 12.7226C13.8827 12.4995 13.9329 12.2557 13.9329 12C13.9329 10.9456 13.0719 10.0833 12.0004 10.0833C11.7439 10.0833 11.4995 10.1327 11.276 10.2223L13.7911 12.7226ZM5.31514 8.0711C5.6306 8.33953 5.66872 8.81288 5.40028 9.12833C4.68841 9.9649 4.13532 10.9378 3.78602 12.0012C4.91465 15.4339 8.16444 17.9167 11.9996 17.9167C12.8179 17.9167 13.6084 17.8038 14.3568 17.5934C14.7555 17.4814 15.1697 17.7137 15.2818 18.1125C15.3939 18.5113 15.1615 18.9254 14.7627 19.0375C13.8834 19.2847 12.9564 19.4167 11.9996 19.4167C7.40909 19.4167 3.52937 16.3823 2.28154 12.2165C2.23951 12.0762 2.23949 11.9267 2.28148 11.7863C2.68577 10.4352 3.36668 9.20358 4.25791 8.15624C4.52634 7.84078 4.99968 7.80266 5.31514 8.0711Z" fill="#252850"/>
+</svg>

src/assets/icons/eye_open.svg

@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M12.0008 5.75C8.18257 5.75 4.91657 8.32394 3.7607 11.9333C3.74642 11.9778 3.74644 12.0272 3.76073 12.0718C4.91804 15.6785 8.18277 18.25 11.9992 18.25C15.8174 18.25 19.0834 15.6761 20.2393 12.0667C20.2536 12.0222 20.2536 11.9728 20.2393 11.9282C19.082 8.32154 15.8172 5.75 12.0008 5.75ZM2.33216 11.4758C3.67129 7.29421 7.48051 4.25 12.0008 4.25C16.519 4.25 20.3267 7.29138 21.6675 11.4699C21.7774 11.8123 21.7775 12.1818 21.6678 12.5242C20.3287 16.7058 16.5195 19.75 11.9992 19.75C7.48104 19.75 3.67326 16.7086 2.33246 12.5301C2.22261 12.1877 2.22251 11.8182 2.33216 11.4758ZM12.0001 9.95C10.9521 9.95 10.0544 10.8407 10.0544 12C10.0544 13.1593 10.9521 14.05 12.0001 14.05C13.048 14.05 13.9457 13.1593 13.9457 12C13.9457 10.8407 13.048 9.95 12.0001 9.95ZM8.55444 12C8.55444 10.0665 10.0705 8.45 12.0001 8.45C13.9296 8.45 15.4457 10.0665 15.4457 12C15.4457 13.9335 13.9296 15.55 12.0001 15.55C10.0705 15.55 8.55444 13.9335 8.55444 12Z" fill="#252850"/>
+</svg>

src/pages/login/TheLogin.vue

@@ -5,35 +5,37 @@
         img(:src="logoMark")
       .login-panel.flex.flex-col.justify-center.gap-y-10
         .flex.flex-col.gap-y-2
-          .text-welcome.flex.not-italic.font-bold.text-5xl Добро пожаловать!
-          .text-under.flex.not-italic.font-medium.text-base(
+          .flex.not-italic.font-bold.text-5xl.letter-spacing Добро пожаловать!
+          .flex.not-italic.font-medium.text-base(
             :style="{color: this.underTextColor}"
           ) Войдите в аккаунт, чтобы начать пользоваться сервисом «Астра».
         .flex.flex-col.gap-y-5
-          base-input.font-medium(
-            :rule="[wrongData => !!wrongData]",
-            v-model="user.username",
-            placeholder="Введите ваш логин",
-            label="Логин",
-            outlined
-          )
-          base-input(
-            :rule="[wrongData => !!wrongData]",
-            v-model="user.password",
-            :type="changeType",
-            placeholder="Введите ваш пароль",
-            label="Пароль",
-            outlined
-          )
-            .flex.items-center.cursor-pointer
-              q-icon(
-                v-if="!wrongData && user.password"
-                :name="!isView ? 'visibility_off' : 'visibility'",
-                @click="changeView"
-              )
-          span.font-medium(:style="{color: this.redColor}", v-if="wrongData") Неверный логин или пароль
-          .flex.items-center.gap-x-8px
-            q-checkbox(@click="persist", v-model="isView", type="checkbox")
+          .flex.flex-col.gap-y-px
+            base-input.input(
+              :rule="[wrongData => !!wrongData]",
+              v-model="user.username",
+              placeholder="+7 (915) 224–21–31",
+              label="Номер телефона",
+              outlined,
+              no-error-icon
+            )
+            .red-color.text-smm.font-semibold(v-if="wrongData") Этого телефона нет в системе
+          .flex.flex-col.gap-y-px
+            base-input.input(
+              :rule="[wrongData => !!wrongData]",
+              v-model="user.password",
+              :type="changeType",
+              placeholder="Введите ваш пароль",
+              label="Пароль",
+              outlined,
+              no-error-icon
+            )
+              .flex.items-center.cursor-pointer(@click="changeView", v-if="!wrongData && user.password")
+                img(:src="eye_close", v-if="!isView")
+                img(:src="eye_open", v-else)
+            .red-color.text-smm.font-semibold(v-if="wrongData") Неверный пароль
+          .flex.items-center.gap-x-8px.-ml-2
+            q-checkbox(@click="persist", v-model="person", type="checkbox")
             .flex.non-italic.font-medium.base Запомнить меня
         base-button(
           :disable="disabledButton",
@@ -41,7 +43,7 @@
           size="L",
           @click="login",
         )
-      .absolute.left-12.bottom-12 2023 © Астра
+      .absolute.left-12.bottom-12.text-smm.font-medium 2023 © Астра
     .right-col.flex.items-center.justify-center.relative
 </template>
 
@@ -50,6 +52,8 @@ import { fetchWrapper } from "@/shared/fetchWrapper";
 import BaseInput from "@/components/base/BaseInput";
 import logoMark from "@/assets/images/logoMark.svg";
 import BaseButton from "@/components/base/BaseButton.vue";
+import eye_open from "@/assets/icons/eye_open.svg";
+import eye_close from "@/assets/icons/eye_close.svg";
 
 export default {
   name: "TheLogin",
@@ -59,10 +63,12 @@ export default {
       underTextColor: "var(--font-grey-color)",
       isView: false,
       logoMark,
+      eye_close,
+      eye_open,
       authorized: true,
       user: { username: "", password: "" },
-      redColor: "var(--border-red-color)",
       userData: {},
+      person: false,
     };
   },
   computed: {
@@ -86,6 +92,7 @@ export default {
       this.isView = !this.isView;
     },
     persist() {
+      if (!this.person) return;
       localStorage.username = this.user.username;
       localStorage.password = this.user.password;
     },
@@ -126,8 +133,9 @@ export default {
 <style lang="sass" scoped>
 .left-col
   background-color: var(--default-white)
+  color: var(--font-dark-blue-color)
   height: 100%
-  width: 40%
+  width: calc(1920px - 1108px)
 
 .logo-wrapper
   width: 90px
@@ -137,16 +145,32 @@ export default {
   width: 444px
   height: 422px
 
-.text-welcome
+.letter-spacing
   letter-spacing: 0.02em
-  color: var(--font-dark-blue-color)
 
 .right-col
-  height: 100%
   background-color: var(--font-dark-blue-color)
-  width: 60%
+  width: calc(100vw - 812px)
   background-image: url("@/assets/images/loginBG.svg")
   background-size: cover
   background-repeat: no-repeat
   background-position: center
+
+.red-color
+  color: var(--border-red-color)
+
+.q-btn
+  height: 48px
+
+.input :deep(.label)
+  opacity: 1
+  color: var(--font-dark-blue-color)
+  line-height: 135%
+
+.input :deep(.q-field__control)
+  color: var(--font-dark-blue-color)
+  &:hover:before
+    border: 1px solid var(--font-dark-blue-color)
+  &:after
+    border-width: 1px !important
 </style>