<template>
    <div class="title-tip">
        <span></span>
        <span></span>
        <div class="title-tip-text">
            {{ title }}
        </div>
    </div>
</template>

<script>
export default {
    props: {
        title: {
            type: String,
            default: '',
        },
    },
}
</script>

<style lang="scss" scoped>
.title-tip {
    margin-bottom: 10px;
    display: flex;
    align-items: center;
}

.title-tip span {
    display: inline-block;
    width: 16px;
    height: 16px;
    background-color: #409eff;
    border-radius: 50%;
}

.title-tip span:first-child {
    transform: translateX(30%);
}
.title-tip span:nth-child(2) {
    background-color: #8cc8ff;
}

.title-tip-text {
    flex: 1;
    margin-left: 10px;
    font-size: 16px;
    font-weight: 600;
    color: #363131;
    font-family: 'PingFang SC', sans-serif;
}
</style>
