PC-mj/components/Empty.vue

<template>
    <div class="empty-box-list flexcenter">
        <div class="dot-list flexacenter">
            <img class="item" src="@/assets/img/dot-yellow.svg" />
            <img class="item" src="@/assets/img/dot-yellow.svg" />
            <img class="item" src="@/assets/img/dot-yellow.svg" />
            <img class="item" src="@/assets/img/dot-gray.svg" />
            <img class="item" src="@/assets/img/dot-gray.svg" />
            <img class="item" src="@/assets/img/dot-gray.svg" />
        </div>
        <img class="empty-icon" src="@/assets/img/empty-icon.svg" />
        <div class="empty-hint">{{ hint || "暂无内容" }}</div>
    </div>
</template>

<script setup>
let props = defineProps({
    hint: String,
})
</script>

<style lang="less" scoped>
.empty-box-list {
    // width: 690px;
    // height: 490px;
    background-color: #ffffff;
    border-radius: 6px;
    margin: 0 auto;
    flex-direction: column;

    .dot-list .item {
        width: 8px;
        height: 8px;

        &:not(:last-of-type) {
            margin-right: 5px;
        }
    }

    .empty-icon {
        width: 100px;
        height: 100px;
        margin-top: 10px;
        margin-bottom: 15px;
    }

    .empty-hint {
        font-size: 13px;
        color: #7f7f7f;
        line-height: 22px;
    }
}
</style>