.progress-x { height:40px; width:100%; display:flex; justify-content:center; align-items:center; color:#ccc; } .progress-x > div { /*width:25%; */ height:100%; display:flex; justify-content:space-between; align-items:center; } .progress-x > div.zb-div { width:120px; } .progress-x > div.zb-line { width:calc(33% - 160px); height:3px; border:1px solid #ddd; background:#ccc; margin-right:20px; } .progress-x > div > span.zb-number { position:absolute; display:inline-block; background:#71e0b0; height:4px; } .progress-x > div > span.zb-number { width:20px; height:20px; text-align:center; border-radius:50%; border:1px solid #ddd; color:#ccc; background:#fff; } .progress-x > div > span.zb-title { margin-left:24px; } .progress-x > div.current-n > span.zb-number { border:1px solid #178CFF; color:#fff; background:#178CFF; } .progress-x > div.current-n > span.zb-title { color:#000; }
设置当前步骤,只需给对应步骤div添加一个class:current-n即可