<template>
    <!--  <dv-border-box-13 class="lr_titles">-->
    <div class="lr_titles">
        <div class="item_title" v-if="title !== ''">
            <div class="zuo">
                <span class="title-inner" > &nbsp;&nbsp;{{ title }}&nbsp;&nbsp; </span></div>

        </div>
        <div
            :class="title !== '' ? 'item_title_content' : 'item_title_content_def'"
        >
            <slot></slot>
        </div>
    </div>


    <!--  </dv-border-box-13>-->
</template>

<script>
export default {
    data() {
        return {};
    },
    props: {
        title: {
            type: String,
            default: () => '',
        },
    },
    created() {
    },

    mounted() {
    },
    methods: {},
};
</script>
<style lang="scss" scoped>
$item-title-height: 38px;
$item_title_content-height: calc(100% - 38px);

.lr_titles {
    box-sizing: border-box;

    ::v-deep .border-box-content {
        box-sizing: border-box;
        padding: 6px 16px 0px;
    }

    .item_title {
        height: $item-title-height;
        line-height: $item-title-height;
        width: 100%;
        color: #31abe3;
        text-align: center;
        // background: linear-gradient(to right, transparent, #0f0756, transparent);
        position: relative;
        display: flex;
        align-items: center;
        justify-content: center;

        .zuo,
        .you {
            width: 100%;
            height: 50px;
            background-image: url("../../../../assets/bigScreen/img/titles/小标题.png");
        }

        .you {
            transform: rotate(180deg);
        }

        .title-inner {
            //float: left;
            //color: #fff;
            position: absolute;
            left: 111px;
            font-weight: 900;
            letter-spacing: 2px;
            background: white;
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
        }
    }

    .item_title_content {
        height: $item_title_content-height;
    }

    .item_title_content_def {
        width: 100%;
        height: 100%;
    }
}
</style>
