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

img

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

应该怎么改

下图是我现在写的，

img

代码如下：


                       <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;
            }
        }



    }
}

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

用js 动态控制

你这个其实没有必要这么麻烦 用G6的流程图就能实现了

  • 你可以参考下这个问题的回答, 看看是否对你有帮助, 链接: https://ask.csdn.net/questions/7458291
  • 你也可以参考下这篇文章：什么是构造函数？什么是实例？为什么说属性在构造函数中声明，方法在原型中声明？
  • 除此之外, 这篇博客: 什么是单页应用？它的优缺点？其缺点的解决方案是什么？中的 1.优点 部分也许能够解决你的问题, 你可以仔细阅读以下内容或跳转源博客中阅读:

  • 而单页应用则是一次性把web应用的所有代码（HTML，JavaScript和CSS）全部请求过来，有时候考虑到首屏加载太慢会按需加载。这样一来，以后用户的每一个动作都不会重新加载页面（即不用再问服务器要页面的HTML，css和js代码），取而代之的是利用 JavaScript 动态的变换HTML的内容（这不需要和服务器交互，除非数据是动态，那么只需要问服务器要数据即可）。

    单页应用优点的小小总结：

    1.分离前后端关注点，前端负责界面显示，后端负责数据存储和计算，减轻服务器压力，服务器只用出数据就可以，而且不会把前后端的逻辑混杂在一起；

    2.API共享，后端API通用化，服务如果是多端的（浏览器端、Android、iOS、微信等），单页应用的模式便于你在多个端共用 API，可以显著减少服务端的工作量；

    3.用户体验好、快，内容的改变不需要重新加载，提升了用户体验；

    4.前端组件化，前端开发不再以页面为单位，更多地采用组件化的思想，代码结构和组织方式更加规范化，便于修改和调整。

  • 您还可以看一下 张传波老师的软件设计是怎样炼成的？课程中的 什么是漂亮的软件设计？小节, 巩固相关知识点