diff options
Diffstat (limited to 'src/client/pages/_error_.vue')
| -rw-r--r-- | src/client/pages/_error_.vue | 55 |
1 files changed, 55 insertions, 0 deletions
diff --git a/src/client/pages/_error_.vue b/src/client/pages/_error_.vue new file mode 100644 index 0000000000..c2497c17b3 --- /dev/null +++ b/src/client/pages/_error_.vue @@ -0,0 +1,55 @@ +<template> +<transition :name="$store.state.device.animation ? 'zoom' : ''" appear> + <div class="_section"> + <div class="mjndxjch _content"> + <img src="https://xn--931a.moe/assets/error.jpg" class="_ghost"/> + <p><Fa :icon="faExclamationTriangle"/> {{ $t('pageLoadError') }}</p> + <p>{{ $t('pageLoadErrorDescription') }}</p> + </div> + </div> +</transition> +</template> + +<script lang="ts"> +import { defineComponent } from 'vue'; +import { faExclamationTriangle } from '@fortawesome/free-solid-svg-icons'; +import MkButton from '@/components/ui/button.vue'; + +export default defineComponent({ + components: { + MkButton, + }, + data() { + return { + INFO: { + header: [{ + title: this.$t('error'), + icon: faExclamationTriangle + }] + }, + faExclamationTriangle + }; + }, +}); +</script> + +<style lang="scss" scoped> +.mjndxjch { + text-align: center; + + > p { + margin: 0 0 8px 0; + } + + > .button { + margin: 0 auto; + } + + > img { + vertical-align: bottom; + height: 128px; + margin-bottom: 16px; + border-radius: 16px; + } +} +</style> |