base_ui/pages/404.vue

97 lines
1.9 KiB
Vue
Raw Normal View History

2025-02-01 09:34:55 +00:00
<template>
<div class="main-container flex-grow-1 dashboard-bg ">
<div class="error-code">404</div>
<div class="error-message">
<h1 class="ThePageNotFound">{{ $t("ThePageNotFound") }}</h1>
<ul class="links d-flex justify-content-center">
<li>
<router-link
class="btn btn-outline-primary"
:to="{ name: 'defaultRoute' }"
title="سامانه ها"
>{{ $t("System") }}</router-link
>
</li>
<li>
<router-link :to="{ name: 'aboutUs' }" class="btn">
{{ $t("AboutUs") }}
</router-link>
</li>
<li>
<router-link :to="{ name: 'contactUs' }" class="btn">
{{ $t("ContactUs") }}</router-link
>
</li>
<li>
<router-link :to="{ name: 'downloadApp' }" class="btn">
دانلود اپ ویندوزی
</router-link>
</li>
</ul>
</div>
</div>
</template>
<script>
export default {
};
</script>
<style lang="scss" scoped>
.main-container {
height: 100vh;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
background: linear-gradient(to bottom right, #eee, #e9e9e9);
.error-code {
font-size: 5rem;
}
.error-message {
font-size: 1rem;
}
.links {
display: flex;
align-items: center;
list-style: none;
padding: 0;
margin: 0;
li {
&:first-child {
margin-left: 0.5em;
.btn {
font-size: 1rem;
}
}
}
}
h1 {
margin: 40px 0 20px;
}
}
.dashboard-bg{
// background-image: url('../../../assets/common/img/main-bg.png');
background-size: 14em;
background-position: center;
}
@media (max-width: 576px) {
.ThePageNotFound {
font-size: 1.5rem;
}
.btn {
font-size: 0.7rem;
}
.main-container .links li:first-child .btn {
font-size: 0.7rem;
}
}
</style>