Cheng Zhou
41 lines
907 B
Vue
41 lines
907 B
Vue
<template>
|
|
<section class="ctms-state state state-error">
|
|
<el-icon class="ctms-state-icon state-icon"><CircleClose /></el-icon>
|
|
<h3 class="ctms-state-title state-title">{{ title }}</h3>
|
|
<p v-if="description" class="ctms-state-desc state-desc">{{ description }}</p>
|
|
<div v-if="$slots.action" class="ctms-state-action state-action">
|
|
<slot name="action" />
|
|
</div>
|
|
</section>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import { CircleClose } 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-icon {
|
|
color: var(--ctms-danger);
|
|
}
|
|
|
|
.state-title {
|
|
color: var(--ctms-text-main);
|
|
}
|
|
|
|
.state-desc {
|
|
color: var(--ctms-text-secondary);
|
|
}
|
|
</style>
|