<template>
    <div class="main-box">
        <div class="mian-icon">
            <img src="@/assets/image/uncultivated.svg">
        </div>
        <div class="main-text">
            <div class="main-content">
                <h1>功能设计中。。。</h1>
                <p class="time"><b>计划完成：</b><slot name="plan"></slot><b>开发完成：</b><slot name="finish"></slot></p>
                <p><b>上线时间：</b><slot name="onLine"></slot></p>
                <p class="explain">业务功能说明：</p>
                <div><slot name="explain"></slot></div>
            </div>
        </div>
    </div>
    <!-- <h4>开发中...</h4> -->
    <!-- <button v-if="hasPermission('system:role:query')">测试权限 </button> -->
</template>
<script>
export default {
    name: 'Dasboard',
    props: [],
    data() {
        return {}
    },
    computed: {},
    methods: {},
    created() {
        // console.log('--------------------- index created')
    },
    mounted() {},
    components: {}
}
</script>
<style lang='scss' scoped>
.main-box{
    width: 100%;
    height: 100%;
    display: flex;
}
.mian-icon{
    flex: 2;
    text-align: center;
    position: relative;
    img{
        position: absolute;
        top: 25%;
    }
}
.main-text{
    flex: 3;
    position: relative;
    .main-content{
        position: absolute;
        padding-right: 200px;
        top: 20%;
        .time{
            margin-top: 10px;
        }
        .explain{
            margin-top: 20px;
        }
        p{
            font-weight: bold;
            span{
                margin-right: 20px;
            }
        }
    }
}
</style>