targo-frontend/src/pages/error-page.vue

44 lines
1.9 KiB
Vue

<script setup lang="ts">
import { useRouter } from 'vue-router';
const router = useRouter();
</script>
<template>
<q-layout view="hHh lpR fFf">
<q-page-container>
<q-page class="row justify-center bg-secondary">
<div class=" column justify-center" :class="$q.platform.is.mobile ? 'col-11' : 'col-8'">
<div class="column rounded-20 q-pa-xs bg-accent" :class="$q.platform.is.mobile ? 'col-5' : 'col-4'">
<div class="col">
<q-img src="src/assets/line-truck-1.jpg" fit="cover" class="relative-position fit border-radius-inherit">
<div class="absolute-bottom text-center column flex-center">
<div class="q-pr-md text-white text-h2 text-weight-bolder">404</div>
<div class="q-pr-md text-white text-h5 text-weight-bold">{{
$t('error.not_found_header')
}}</div>
</div>
</q-img>
</div>
<div class="col-auto text-center text-h6 text-weight-light bg-dark q-pa-md">
<div>{{ $t('error.not_found_description') }}</div>
</div>
</div>
<div class="col-auto row self-center q-py-md">
<q-btn
push
dense
color="accent"
:label="$t('error.go_back')"
class="col-auto q-px-md q-py-xs"
@click="router.go(-2)"
/>
</div>
</div>
</q-page>
</q-page-container>
</q-layout>
</template>