vue中自定义步骤条（时间线）

效果图

源代码

<template>
    <!-- 自定义步骤条 -->
    <div class="steps">

        <div class="step" v-for="(item,index) in timeLineData">
            <div class="title" :style="{'background-color': item.bgColor}">{{ item.title }}</div>
            <div class="icon" :style="{'border': `3px solid ${item.bgColor}`}"></div>
            <div class="line" :style="{'background-color': item.bgColor}" :class="{'last-line': index == data.length - 1}"></div>
            <div class="date" :style="{'color': item.bgColor}">{{ item.date }}</div>
        </div>

    </div>
</template>

<script>
export default {
    name: 'TimeLine',
    data(){
        return {
             timeLineData: [
                {
                  title: "未开始",
                  date: "2024-06-18",
                  bgColor: "#FF7575",
                },
                {
                  title: "进行中",
                  date: "2024-06-24",
                  bgColor: "#FACD91",
                },
                {
                  title: "已完成",
                  date: "2024-06-26",
                  bgColor: "#03BF16",
                },
            ]
        }
    }
}
</script>

<style scoped lang="scss">
.steps {
    display: flex;

    .step {
        flex: 1;

        .title {
            cursor: pointer;
            border-radius: 16px;
            // background-color: #FF7575;
            color: #fff;
            text-align: center;
            width: 80px;
            height: 30px;
            line-height: 30px;
        }

        .icon {
            margin: 15px 0;
            margin-left: 30px;
            border-radius: 50%;
            background-color: #fff;
            width: 16px;
            height: 16px;
            // border: 3px solid #FF7575;
        }

        .line {
            width: calc(100% - 16px);
            // background-color: #FF7575;
            margin: -23px 0 15px 46px;
            height: 1px;
        }

        .last-line {
            width: 0;
        }

        .date {
            // color: #FF7575;
            font-size: 16px;
        }
    }
}
</style>