<template>
    <div class="empty">
        <img class="img " src="./empty-icon.png">
        <p class="title">您还没有添加任何内容</p>
        <p class="desc">将左侧内容组件拖拽至此处，可添加页面内容</p>
    </div>
</template>

<script>
export default {
    name: "comp-empty"
}
</script>

<style lang="less" scoped>
.empty{
    text-align: center;
    height: 220px;
    margin: auto;
    margin-top: 100px;
    .img{
        max-width: 30%;
    }
    .title{
        align-self: flex-start;
        padding: 10px 2px 10px 2px;
        box-sizing: border-box;
        width: 100%;
        font-weight: 700;
        font-style: normal;
        font-size: 18px;
        color: #666666;
        text-align: center;
        line-height: 24px;
    }
    .desc{
        align-self: flex-start;
        padding: 2px 2px 2px 2px;
        box-sizing: border-box;
        width: 100%;    font-weight: 400;
        font-style: normal;
        font-size: 14px;
        color: #999999;
        text-align: center;
        line-height: 22px;
    }
}
</style>
