ShowEasyFrontEnd/FrontEnd/layouts/login.vue

<template>
  <v-app>
    <NavBar />
    <v-main :class="['tw-p-[30px] tw-bg-white md:tw-bg-primary-pale']">
      <div
        class="xl:tw-grid xl:tw-grid-cols-[auto_414px] xl:tw-gap-[96px] xl:tw-max-w-[1246px] xl:tw-mx-auto xl:tw-px-[60px]">
        <div class="tw-hidden xl:tw-block xl:tw-mt-[30px]">
          <p class="welcome tw-text-primary-light">{{ $t("Welcome to ShowEasy") }}</p>
          <p class="sub tw-text-neutral-400">
            {{
            $t(
            "Your best guide from trip to show and from show to the world."
            )
            }}
          </p>
          <img class="mt-11 ml-15" :src="require('@/assets/img/UserLoginMain.png')" />
        </div>
        <div class="md:tw-w-[414px] md:tw-mx-auto">
          <Nuxt />
        </div>
      </div>
    </v-main>
    <customNotifications></customNotifications>
  </v-app>
</template>

<script>
import NavBar from "../components/NavBar.vue";
import customNotifications from "@/components/newComponent/notifications/notifications.vue";

export default {
  name: "LoginLayout",
  layout: "empty",
  components: {
    NavBar,
    customNotifications,
  },
  data() {
    return {};
  },
  computed: {
    drawerAcitve() {
      return this.$store.getters.getDrawerStatus;
    },
    searchDialogActive() {
      return this.$store.getters.getSearchDialogStatus;
    }
  },
  watch: {
    drawerAcitve: {
      handler: function () {
        this.bsd(this.drawerAcitve);
      }
    },
    searchDialogActive: {
      handler: function () {
        this.bsd(this.searchDialogActive);
      }
    }
  },
  methods: {
    bsd(status) {
      var body = document.querySelector("body");
      var scrollTop = window.pageYOffset || document.documentElement.scrollTop;
      var scrollLeft = window.pageXOffset || document.documentElement.scrollLeft;
      window.onscroll = function () { };
      if (status === true) {
        if (window.onscroll !== null) {
          window.onscroll = function () {
            window.scrollTo(scrollLeft, scrollTop);
          };
        }
      } else {
        window.onscroll = function () { };
      }
    }
  }
};
</script>
<style lang="scss" scoped>
#app {
  overflow-y: hidden;
}

.welcome {
  color: #f5cda8;
  font-family: Damion;
  font-size: 48px;
  margin-bottom: 0px;
  font-weight: 400;
  line-height: 66px;
  letter-spacing: 0.02em;
}

.sub {
  color: #9c9c9c;
  font-style: italic;
  font-weight: 400;
  font-size: 22px;
  line-height: 29px;
  letter-spacing: 0.02em;
}
</style>