<template>
    <div class="section-title">
        <img v-if="type === 'dot'" class="title-point" src="~@/assets/images/layout/common/title-point.png" />
        <div v-if="type === 'line'" class="title-line"></div>
        <span class="label">{{ title }}</span>
        <span class="line"></span>
        <span class="decoration-triangle"></span>
    </div>
</template>
<script>
export default {
    name: 'SectionTitle',
    props: {
        // 标题
        title: {
            type: String,
            default: '',
        },
        type: {
            type: String,
            default: 'dot',
        },
    },
    data() {
        return {}
    },
}
</script>
<style scoped lang="scss">
.section-title {
    display: flex;
    justify-content: space-between;
    align-items: center;

    .title-point {
        width: 14px;
        height: 14px;
    }

    .title-line {
        width: 3px;
        height: 14px;
        background: linear-gradient(270deg, rgba(0, 212, 255, 0) 0%, rgba(0, 212, 255, 0) 0%, #33DDFF 100%);
    }

    .label {
        font-weight: 400;
        font-size: 13px;
        color: #ffffff;
        padding: 0 6px;
    }

    .line {
        flex: 1;
        height: 1px;
        background-color: rgba(51, 153, 255, 0.2);
    }

    .decoration-triangle {
        width: 20px;
        height: 24px;
        background: url('@/assets/images/layout/common/triangle01.png') no-repeat;
        background-size: 20px 24px;
        position: relative;

        &::after {
            content: '';
            position: absolute;
            top: 1px;
            left: -7px;
            width: 20px;
            height: 22px;
            background: url('@/assets/images/layout/common/triangle02.png') no-repeat;
            background-size: 20px 22px;
        }
    }
}
</style>