1
0
mirror of https://github.com/MisskeyIO/misskey synced 2024-12-24 03:28:27 +09:00
MisskeyIO/packages/frontend/src/components/global/MkError.vue

44 lines
930 B
Vue
Raw Normal View History

<template>
2023-04-01 13:42:40 +09:00
<Transition :name="defaultStore.state.animation ? '_transition_zoom' : ''" appear>
2023-01-14 11:23:02 +09:00
<div :class="$style.root">
<img :class="$style.img" src="https://xn--931a.moe/assets/error.jpg" class="_ghost"/>
<p :class="$style.text"><i class="ti ti-alert-triangle"></i> {{ i18n.ts.somethingHappened }}</p>
2023-02-12 16:51:45 +09:00
<MkButton :class="$style.button" @click="() => emit('retry')">{{ i18n.ts.retry }}</MkButton>
2020-07-09 21:18:46 +09:00
</div>
2022-12-30 13:37:14 +09:00
</Transition>
</template>
2022-01-07 15:02:25 +09:00
<script lang="ts" setup>
import MkButton from '@/components/MkButton.vue';
2022-07-20 22:24:26 +09:00
import { i18n } from '@/i18n';
2023-04-01 13:42:40 +09:00
import { defaultStore } from '@/store';
2023-02-12 16:51:45 +09:00
const emit = defineEmits<{
(ev: 'retry'): void;
}>();
</script>
2023-01-14 11:23:02 +09:00
<style lang="scss" module>
.root {
padding: 32px;
text-align: center;
align-items: center;
2023-01-14 11:23:02 +09:00
}
2023-01-14 11:23:02 +09:00
.text {
margin: 0 0 8px 0;
}
2023-01-14 11:23:02 +09:00
.button {
margin: 0 auto;
}
2020-02-08 18:35:42 +09:00
2023-01-14 11:23:02 +09:00
.img {
vertical-align: bottom;
width: 128px;
2023-01-14 11:23:02 +09:00
height: 128px;
margin-bottom: 16px;
border-radius: 16px;
}
</style>