Cheng Zhou
59 lines
1.1 KiB
Vue
59 lines
1.1 KiB
Vue
<template>
|
|
<section class="ctms-state state state-empty">
|
|
<el-icon v-if="false" class="ctms-state-icon state-icon"><Document /></el-icon>
|
|
<h3 v-if="!description" class="ctms-state-title state-title">{{ title }}</h3>
|
|
<p class="ctms-state-desc state-desc">{{ description || title }}</p>
|
|
<div v-if="$slots.action" class="ctms-state-action state-action">
|
|
<slot name="action" />
|
|
</div>
|
|
</section>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import { Document } from "@element-plus/icons-vue";
|
|
import { TEXT } from "../locales";
|
|
|
|
withDefaults(
|
|
defineProps<{
|
|
title?: string;
|
|
description?: string;
|
|
}>(),
|
|
{
|
|
title: TEXT.common.empty.noData,
|
|
description: "",
|
|
}
|
|
);
|
|
</script>
|
|
|
|
<style scoped>
|
|
.state-empty {
|
|
padding: 28px 12px;
|
|
gap: 8px;
|
|
}
|
|
|
|
.state-icon {
|
|
color: var(--ctms-text-disabled);
|
|
font-size: 18px;
|
|
opacity: 0.35;
|
|
}
|
|
|
|
.state-title {
|
|
color: var(--ctms-text-secondary);
|
|
font-size: 14px;
|
|
font-weight: 600;
|
|
line-height: 1.4;
|
|
margin: 0;
|
|
}
|
|
|
|
.state-desc {
|
|
color: #8a97ab;
|
|
font-size: 14px;
|
|
line-height: 1.6;
|
|
margin: 0;
|
|
}
|
|
|
|
.state-action {
|
|
margin-top: 4px;
|
|
}
|
|
</style>
|