diff options
Diffstat (limited to 'packages/client/src/components/global/error.vue')
| -rw-r--r-- | packages/client/src/components/global/error.vue | 46 |
1 files changed, 46 insertions, 0 deletions
diff --git a/packages/client/src/components/global/error.vue b/packages/client/src/components/global/error.vue new file mode 100644 index 0000000000..8ce5d16ac6 --- /dev/null +++ b/packages/client/src/components/global/error.vue @@ -0,0 +1,46 @@ +<template> +<transition :name="$store.state.animation ? 'zoom' : ''" appear> + <div class="mjndxjcg"> + <img src="https://xn--931a.moe/assets/error.jpg" class="_ghost"/> + <p><i class="fas fa-exclamation-triangle"></i> {{ $ts.somethingHappened }}</p> + <MkButton @click="() => $emit('retry')" class="button">{{ $ts.retry }}</MkButton> + </div> +</transition> +</template> + +<script lang="ts"> +import { defineComponent } from 'vue'; +import MkButton from '@/components/ui/button.vue'; + +export default defineComponent({ + components: { + MkButton, + }, + data() { + return { + }; + }, +}); +</script> + +<style lang="scss" scoped> +.mjndxjcg { + padding: 32px; + 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> |