自定义步骤条样式怎么写？

Question

像这样的步骤条样式应该怎么写？

应该怎么改

下图是我现在写的，

代码如下：

                       <div class="step-bar">
                            <div class="step" v-for="item, index in stages" :key="item.id">
                                <div class="step-number">
                                    {{ index + 1 }}
                                </div>
                                <div class="step-content">
                                    <div class="step-title">{{ item.stageName }}</div>
                                    <div class="step-content-i">
                                        <div class="step-status">{{ item.status }}</div>
                                        <a href="#" class="step-details">详情</a>
                                    </div>
                                </div>
                                <div class="el-step__head-left"
                                    v-if="(index + 1) % 4 !== 0 && (index + 1) !== stages.length">
                                    <div class="step-line"></div>
                                    <i class="step-line-jiantou"></i>
                                </div>
                            </div>
                        </div>

stages = [{
            "stageName": "第一阶段",
            "status": "完成",
        },
        {
            "stageName": "第二阶段",
            "status": "完成",
        },
        {
            "stageName": "第三阶段",
            "status": "完成",
        },
        {
            "stageName": "第四阶段",
            "status": "完成",
        },
        {
            "stageName": "第五阶段",
            "status": "进行中",
        },
        {
            "stageName": "第六阶段",
            "status": "未完成",
        },
        {
            "stageName": "第七阶段",
            "status": "未完成",
        },
        {
            "stageName": "第八阶段",
            "status": "未完成",
        },
        {
            "stageName": "第九阶段",
            "status": "未完成",
        }

        ]

.step-bar {
    display: flex;
    flex-wrap: wrap;
    padding: 20px 150px;

    .step {
        display: flex;
        flex-wrap: wrap;
        margin-bottom: 10px;
        position: relative;

        /* 每行显示4个盒子 */
        &:nth-child(4n+1),
        &:nth-child(4n+2),
        &:nth-child(4n+3),
        &:nth-child(4n+4) {
            flex-basis: 25%;
        }


        .step-number {
            position: absolute;
            left: -50px;
            display: flex;
            justify-content: center;
            align-items: center;
            width: 35px;
            height: 35px;
            font-size: 20px;
            border-radius: 50%;
            color: #fff;
            background: #165ee6;
        }

        .step-content {
            border: 1px solid #f4f4f5;

            .step-title {
                display: flex;
                justify-content: center;
                align-items: center;
                width: 160px;
                height: 35px;
                font-size: 16px;
                color: #fff;
                background: #165ee6;
            }

            .step-content-i {
                display: flex;
                justify-content: center;
                align-items: center;
                flex-direction: column;
                padding: 10px 20px;

                .step-status {
                    margin: 10px;
                }

                .step-details {
                    color: #1890FF
                }
            }
        }

        .el-step__head-left {
            width: 176px;
            display: flex;
            align-items: center;

            .step-line {
                width: 100%;
                height: 1px;
                background: #c0c4cc;
            }

            .step-line-jiantou {
                width: 0px;
                height: 0;
                border-top: 8px solid transparent;
                border-bottom: 8px solid transparent;
                border-left: 8px solid #c0c4cc;
            }
        }

        .el-step__head-right {
            width: 176px;
            display: flex;
            align-items: center;

            .step-line {
                width: 100%;
                height: 1px;
                background: #c0c4cc;
            }

            .step-line-jiantou {
                width: 0px;
                height: 0;
                border-top: 8px solid transparent;
                border-bottom: 8px solid transparent;
                border-right: 8px solid #c0c4cc;
            }
        }



    }
}

Answer 1

你可以根据每个阶段的状态来添加不同的 CSS 类，然后在 CSS 中为这些类定义不同的颜色。你需要根据每个阶段的状态来为它们添加相应的类。
例如，如果一个阶段已完成，你可以将 step-completed 类添加到相应的步骤条元素中。你可以在 Vue 组件中利用 v-bind:class 指令根据每个阶段的状态来动态绑定相应的 CSS 类。