<template>
    <div class="title">
        <b>{{$attrs.con || ''}}</b>
        <div class="underLine">
            <p>
                <span></span>
            </p>
            <i :style="{width: $attrs.width || '100%'}"></i>
        </div>
    </div>
</template>

<script>
export default {
    name: 'Title',

    data () {
        return {}
    },

    mounted () {},

    methods: {}
}
</script>

<style lang="less" scoped>
    .title {

        b {
            font-size: 20px;
            font-family: Microsoft YaHei;
            font-weight: 400;
            color: #FFFFFF;
            padding-left: 23px;
        }

        .underLine {
            display: flex;
            justify-content: flex-start;
            p {
                position: relative;
                width: 14px;
                height: 14px;
                background: rgba(54, 150, 223, .4);
                border-radius: 50%;

                span {
                    position: absolute;
                    top: 3px;
                    left: 3px;
                    width: 8px;
                    height: 8px;
                    background: #3696DF;
                    border-radius: 50%;
                }
            }
            i {
                height: 2px;
                background: linear-gradient(90deg,rgba(54, 150, 223, .4), transparent);
                position: relative;
                top: 6px;
            }
        }
    }
</style>