<template>
    <div class="screen-module" :class="'border-' + border">
        <border-box6 v-if="border == 6" />
        <border-box1 v-if="border == 1" />
        <div class="screen-one-1-1">
            <div class="module-title"><span>{{ label || '' }}</span></div>
            <slot></slot>
        </div>
    </div>
</template>

<script>
export default {
    props: {
        border: {
            type: Number
        },
        label: {
            type: String
        }
    }
};
</script>
<style lang="less" scoped>
.screen-module {
    &.border-6 {
        position: relative;
        /deep/ .dv-border-svg-container{
            top:14px;
        }

        .screen-one-1-1 {
            background: unset;
            .module-title{
                position: relative;
                top:20px;
            }
        }
    }
    &.border-1 {
        position: relative;    
        background: rgba(5,12,25,0.6);
        .screen-one-1-1 {
            background: unset;
            .module-title{
                position: relative;
                top: 20px;
                left:20px;
            }
        }
    }

}
</style>