<template>
    <div class="theme-title">
        <slot></slot>
    </div>
</template>

<script>
export default {
  name: 'CardTitle'
}
</script>

<style scoped lang="scss">
    .theme-title {
        height: 30px;
        line-height: 30px;
        background: url("../../images/content/cardTitleBg.png") no-repeat;
        background-size: 100% 100%;
    }

    .theme-title span {
        margin-left: 60px;
        position: relative;
        font-size: 14px;
    }

    .theme-title span:before {
        content: '';
        background: url('../../images/content/cardTitleSide.png') no-repeat;
        background-size: 100% 100%;
        position: absolute;
        width: 40px;
        height: 13px;
        top: 3px;
        left: -47px;
    }

    .theme-title span:after {
        content: '';
        background: url('../../images/content/cardTitleSide.png') no-repeat;
        background-size: 100% 100%;
        position: absolute;
        width: 40px;
        height: 13px;
        top: 3px;
        right: -50px;
    }
</style>
