<template>
    <div>
        <div class="empty-box">
            <img :src="url" alt="" />
            暂无{{ emptyTitle }}
        </div>
    </div>
</template>

<script>
export default {
    props: {
        emptyTitle: {
            type: String,
            default: () => '数据',
        },
    },
    data() {
        return {
            url: 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAKoAAABpCAYAAACqCriYAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyZpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNi1jMTM4IDc5LjE1OTgyNCwgMjAxNi8wOS8xNC0wMTowOTowMSAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIDIwMTcgKFdpbmRvd3MpIiB4bXBNTTpJbnN0YW5jZUlEPSJ4bXAuaWlkOjYzOUJFRDg3MURCMzExRUJBQjE5QjZBNzRCNEYxRTY4IiB4bXBNTTpEb2N1bWVudElEPSJ4bXAuZGlkOjYzOUJFRDg4MURCMzExRUJBQjE5QjZBNzRCNEYxRTY4Ij4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6NjM5QkVEODUxREIzMTFFQkFCMTlCNkE3NEI0RjFFNjgiIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6NjM5QkVEODYxREIzMTFFQkFCMTlCNkE3NEI0RjFFNjgiLz4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz6LooW1AAAKmElEQVR42uxd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',
        }
    },
}
</script>

<style lang="scss" scoped>
.empty-box {
    width: 100%;
    height: 100%;

    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    img {
        width: 80px;
        height: 60px;
        margin-bottom: 8px;
    }
}
</style>
