Cheng Zhou
60 lines
1.1 KiB
Vue
60 lines
1.1 KiB
Vue
<template>
|
|
<div class="state state-error">
|
|
<el-icon class="state-icon"><CircleCloseFilled /></el-icon>
|
|
<div class="state-title">{{ title }}</div>
|
|
<div v-if="description" class="state-desc">{{ description }}</div>
|
|
<div v-if="$slots.action" class="state-action">
|
|
<slot name="action" />
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import { CircleCloseFilled } from "@element-plus/icons-vue";
|
|
import { TEXT } from "../locales";
|
|
|
|
withDefaults(
|
|
defineProps<{
|
|
title?: string;
|
|
description?: string;
|
|
}>(),
|
|
{
|
|
title: TEXT.common.messages.loadFailed,
|
|
description: TEXT.common.messages.requestFailed,
|
|
}
|
|
);
|
|
</script>
|
|
|
|
<style scoped>
|
|
.state {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
justify-content: center;
|
|
padding: 40px 12px;
|
|
text-align: center;
|
|
}
|
|
|
|
.state-icon {
|
|
font-size: 36px;
|
|
color: var(--ctms-danger);
|
|
margin-bottom: 10px;
|
|
}
|
|
|
|
.state-title {
|
|
font-size: 14px;
|
|
font-weight: 600;
|
|
color: var(--ctms-text-main);
|
|
}
|
|
|
|
.state-desc {
|
|
font-size: 12px;
|
|
color: var(--ctms-text-secondary);
|
|
margin-top: 6px;
|
|
}
|
|
|
|
.state-action {
|
|
margin-top: 12px;
|
|
}
|
|
</style>
|