servicio_social_front/layouts/error.vue

<template>
  <section class="hero is-light is-bold is-fullheight">
    <div class="container hero-body">
      <transition name="slide-fade" appear>
        <div class="container columns">
          <div class="column animate__animated animate__fadeIn animate__slow">
            <b-image
              class="image"
              :src="require('@/assets/404.webp')"
              alt="404 image"
            ></b-image>
          </div>
          <div class="column">
            <h1 class="title">ERROR 404 LA PÁGINA NO HA SIDO ENCONTRADA</h1>
            <b-button class="is-dark" outlined @click="cerrarSesion()"
              >Ir a la página principal
            </b-button>
          </div>
        </div>
      </transition>
    </div>
  </section>
</template>

<script>
export default {
  layout: 'login',
  methods: {
    cerrarSesion() {
      localStorage.clear()

      this.$router.push('/')
    },
  },
}
</script>

<style scoped>
.image {
  height: 100%;
  width: 100%;
}

.title {
  margin-top: 40%;
}

.slide-fade-enter-active {
  transition: all 2s ease;
}

.slide-fade-leave-active {
  transition: all 0.8s cubic-bezier(1, 0.5, 0.8, 1);
}

.slide-fade-enter, .slide-fade-leave-to
/* .slide-fade-leave-active below version 2.1.8 */ {
  transform: translateX(10px);
  opacity: 0;
}
</style>