hamcar-front/error.vue at master · parsa-programmer/hamcar-front · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
<template>
  <div class="not__found__layout">
    <Head>
      <Style>
        .nav__item ul{ background: #0F0F10 !important; } .nav__register a{
        color: white !important; } .not__found__layout .nav__wrapper a { color:
        white; } main{ overflow: visible !important; }
      </Style>
    </Head>
    <the-header :show-search-bar="false" showSearchIcon></the-header>
    <main class="main">
      <div class="container text-center white">
        <slot></slot>
      </div>
    </main>
    <div class="not__found__container" v-if="error?.statusCode == 404">
      <div class="not__found__container__img"></div>
      <h1 class="mb-3">متاسفانه خطای ۴۰۴ رخ داد !</h1>
      <p class="text-center">
        کاربر گرامی متاسفانه این صفحه در وبسایت همکار وجود ندارد؛ شما می توانید
        از طریق صفحه اصلی، منوی وبسایت یا پنل کاربری، صفحه مد نظر خود را بیابید.
      </p>
      <h-button class="m-auto w-full" @click="$router.push('/')"
        >بازگشت به صفحه اصلی</h-button
      >
    </div>
    <div class="relative font-sans" n="green6" v-else>
      <div class="container max-w-200 mx-auto py-10 px-4">
        <h1>{{ error?.message }}</h1>
        There was an error 😱

        <br />
        <NuxtLink to="/404"> Trigger another error </NuxtLink>
        <br />
        <NuxtLink to="/"> Navigate home </NuxtLink>
      </div>
    </div>
  </div>
</template>
<script setup lang="ts">
defineProps({
  error: Object,
});
useHead({
  htmlAttrs: {
    lang: "fa",
    dir: "rtl",
  },
});
</script>

<style scoped>
@media screen and (max-width: 770px) {
  .w-full {
    width: 100% !important;
  }
  p {
    text-align: justify !important;
  }
  .not__found__container__img {
    height: 300px;
    top: -34% !important;
  }
}
h1 {
  color: #fff !important;
  text-align: center;
}
.not__found__container {
  position: relative;
  color: #fff !important;
}
.not__found__container p {
  line-height: 180%;
}
.not__found__container button {
  margin-top: 48px;
  width: 480px;
  gap: 10px;
}
.not__found__container__img {
  background-image: url("/img/Settings-black.png");
  background-repeat: no-repeat;
  background-position: top;
  background-size: contain;
  position: absolute;
  opacity: 0.4;
  height: 100px;
  width: 100%;
  z-index: -1;
  height: 500px;
  top: -50%;
}
.not__found__layout .nav__icon {
  color: white;
}
.not__found__layout main {
  position: relative;
  top: 22%;
}
.not__found__layout {
  background: #0f0f10;
  opacity: 0.9;
  height: 100vh;
  position: relative;
  overflow: hidden;
}
.not__found__layout header {
  background: transparent;
}
</style>