手绘简单的一步线
时间：2023-03-27 23:48:59
HTML
{{item.label}} 上面indexi{高度：10px；宽度：10px；背景：#e6e6e6；显示：块；边界半径：50%；&.active{背景：#f39800;;}&.active{背景：#f39800；框阴影：0003px#f39800；}}.line{flex:1;高度：1px；背景：#e6e6e6；&.active{背景：#f39800;}}}//为了让文字居中，包裹层向右移动了20px//文字的中心偏移了relative。如果有更好的方法，请把代码发给我~.title-text{position:relative;顶部边距：5px；&.active{颜色：#edc462;}}.title-text-0{左：-20px；}.title-text-1{左：-23px；}.title-text-2{左：-20px；}.title-text-3{左：-10px；}}第二种：template{{item.label}}scss.per-step{flex:1;text-align:center;background:rgba(0,0,0,.5);padding:10px0;margin:020px;color:#fff;position:relative;height:40px;cursor:pointer;&.active{background:rgba(0,84,165,.5);}&.before-trangle{margin-left:40px;&::before{content:"";宽度：0px；高度：0px；位置：绝对；顶部：0；左侧：-40px；边框：20pxsolidrgba(0,0,0,.5)；边框左颜色：透明；}&.active{&::before{border:20pxsolidrgba(0,84,165,.5);左边框颜色：透明；}}}&.after-trangle{&::after{内容："";宽度：0px；高度：0px；位置：绝对；顶部：0；右：-40px；边框：20px实心透明；左边框颜色：rgba(0,0,0,.5);}&.active{&::after{border:20pxsolidtransparent;左边框颜色：rgba(0,84,165,.5)；}}}&.per-step-0{margin-left:0;}&.per-step-3{margin-right:0;}}
