Сверстал loginPage поправил аватар сайдбара

src/pages/calendar/components/CalendarSidebar.vue

@@ -11,8 +11,9 @@
         .flex.flex-col.items-center.gap-y-2.justify-center
           base-button.mb-2(left-icon="icon-plus", rounded, :size="24", :icon-left-size="10", secondary )
           .team-card(v-for="teammate in teamData" :key="teammate.id")
-            BaseAvatar(:size="32")
-              img(:src="avatar" alt="Team member")
+            base-avatar(:size="32")
+              img(:src="teammate.avatar" alt="Team member" v-if="teammate.avatar")
+              span(v-if="!teammate.avatar") {{`${teammate.last_name[0]}${teammate.first_name[0]}`}}
       .sidebar-content.items-center.flex.flex-col.gap-y-8.px-4.py-19px(v-else)
         base-button(right-icon="icon-plus", split, :size="40", :icon-right-size="10", @click="openFormCreate" ) Создать событие
         .flex.items-center.flex-col.gap-y-4
@@ -35,8 +36,9 @@
               v-for="teammate in teamData"
               :key="teammate.id")
               .flex.items-center
-                BaseAvatar(:size="32")
-                  img(:src="avatar" alt="Team member")
+                base-avatar(:size="32")
+                  img(:src="teammate.avatar" alt="Team member" v-if="teammate.avatar")
+                  span(v-if="!teammate.avatar") {{`${teammate.last_name[0]}${teammate.first_name[0]}`}}
                 .flex.ml-2.not-italic.font-medium.text-xxs {{ changeName(teammate.last_name, teammate.first_name, teammate.patronymic) }}
               span.icon-change-place.cursor-pointer.w-5.flex.items-center.justify-center.w-6.h-6
       .button-wrapper.flex.justify-center.mb-23px
@@ -101,6 +103,9 @@ export default {
         width: this.widthSidebarClose,
       };
     },
+    defaultName(last, first) {
+      return `${last[0]}${first[0]}`;
+    },
   },
   methods: {
     changeSize() {

src/pages/login/TheLogin.vue

@@ -0,0 +1,63 @@
+<template lang="pug">
+  .login-wrapper.flex
+    .left-col.flex.flex-col.items-center.relative
+      .logo-wrapper.absolute.left-12.top-12
+        img.logo-img(src="@/assets/images/logoText.svg" alt="logoText")
+      .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(
+            :style="{color: this.colorUnderText}") Очень рады вас видеть. Войдите в аккаунт, чтобы начать пользоваться сервисом «Астра».
+        .flex.flex-col.gap-y-5
+          .flex.flex-col.gap-y-6
+            .flex Логин
+            base-input(placeholder="Введите ваш логин")
+          .flex.flex-col.gap-y-6
+            .flex Пароль
+            base-input(type="password" placeholder="Введите ваш пароль")
+          .flex.items-center.gap-x-11
+            input.w-4.h-4.checkbox.cursor-pointer(type="checkbox" @change="(e) => check(e)")
+            .flex Запомнить меня
+        base-button.font-semibold(:size="48") Войти в аккаунт
+      .absolute.left-12.bottom-12 2022 © Астра 
+    .right-col.flex.items-center.justify-center.relative
+      img.logo-img.absolute.z-10(src="@/assets/images/bigLogo.svg" alt="bigLogo")
+      img.logo-img.absolute.z-10.absolute.left-0.bottom-0(src="@/assets/images/ellipseBottom.svg" alt="ellipseBottom")
+      img.logo-img.absolute.z-10.absolute.right-0.top-0(src="@/assets/images/ellipseTop.svg" alt="ellipseTop")
+      img.logo-img.opacity-10(src="@/assets/images/dots.svg" alt="Logo")
+</template>
+
+<script>
+import BaseInput from "@/components/base/BaseInput";
+import BaseButton from "@/components/base/BaseButton";
+export default {
+  name: "TheLogin",
+  components: { BaseInput, BaseButton },
+  data() {
+    return {
+      colorUnderText: "var(--font-grey-color)",
+    };
+  },
+};
+</script>
+
+<style lang="sass" scoped>
+.left-col
+  padding: 329px 185px
+  background-color: var(--default-white)
+  height: 1080px
+  width: 812px
+.logo-wrapper
+  width: 89.28px
+  height: 74.64px
+.login-panel
+  width: 444px
+  height: 422px
+.text-welcome
+  letter-spacing: 0.02em
+  color: var(--font-dark-blue-color)
+.right-col
+  height: 1080px
+  width: 1105px
+  background-color: var(--font-dark-blue-color)
+</style>