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

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>