<template>
    <div class="box_empty">
        <div class="card_empty" :style="{ 'flex-direction': bottom ? 'column' : '' }">
            <svg-icon icon-class="empty" className="arch_icon" />
            <div class="empty_title" :style="{'margin': bottom ? '10px 0px 0px 0px' : ''}">{{ title }}</div>
        </div>
    </div>
</template>

<script setup>
defineProps({
    title: {
        type: String,
        default: '暂无数据'
    },
    bottom: {
        type: Boolean,
        default: false
    }
})

</script>

<style scoped lang="scss">
.box_empty {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
}

.card_empty {
    display: flex;
    align-items: center;
}

.arch_icon {
    width: 50px;
    height: 50px;
}

.empty_title {
    margin-left: 10px;
    font-size: 16px;
    color: rgb(124, 141, 186);
}
</style>