<template> <div class="d-flex flex-column flex-column-fluid"> <!--begin::Content--> <div class="d-flex flex-column flex-column-fluid text-center p-10 py-lg-15"> <!--begin::Logo--> <router-link to="/dashboard" class="mb-10 pt-lg-10"> <img alt="Logo" src="media/logos/logo-1.svg" class="h-40px mb-5" /> </router-link> <!--end::Logo--> <!--begin::Wrapper--> <div class="pt-lg-10 mb-10"> <!--begin::Logo--> <h1 class="fw-bolder fs-4x text-gray-800 mb-10">System Error</h1> <!--end::Logo--> <!--begin::Message--> <div class="fw-bold fs-3 text-muted mb-15"> Something went wrong! <br /> Please try again later. </div> <!--end::Message--> <!--begin::Action--> <div class="text-center"> <router-link to="/dashboard" class="btn btn-lg btn-primary fw-bolder" >Go to homepage</router-link > </div> <!--end::Action--> </div> <!--end::Wrapper--> <!--begin::Illustration--> <div class="d-flex flex-row-auto bgi-no-repeat bgi-position-x-center bgi-size-contain bgi-position-y-bottom min-h-100px min-h-lg-350px" :style="{ backgroundImage: 'url(' + getIllustrationsPath('17.png') + ')', }" ></div> <!--end::Illustration--> </div> <!--end::Content--> <!--begin::Footer--> <div class="d-flex flex-center flex-column-auto p-10"> <!--begin::Links--> <div class="d-flex align-items-center fw-bold fs-6"> <a href="https://keenthemes.com" class="text-muted text-hover-primary px-2" >About</a > <a href="mailto:support@keenthemes.com" class="text-muted text-hover-primary px-2" >Contact</a > <a href="https://1.envato.market/EA4JP" class="text-muted text-hover-primary px-2" >Contact Us</a > </div> <!--end::Links--> </div> <!--end::Footer--> </div> </template> <script lang="ts"> import { defineComponent, onMounted, onUnmounted } from "vue"; import { useStore } from "vuex"; import { Actions } from "@/store/enums/StoreEnums"; import { getIllustrationsPath } from "@/core/helpers/assets"; export default defineComponent({ name: "error-500", components: {}, setup() { const store = useStore(); onMounted(() => { store.dispatch(Actions.ADD_BODY_CLASSNAME, "bg-body"); }); onUnmounted(() => { store.dispatch(Actions.REMOVE_BODY_CLASSNAME, "bg-body"); }); return { getIllustrationsPath, }; }, }); </script>