使⽤css实现⼯单处理进度流程图
该流程图已经过多设备兼容测试，针对不同⼤⼩的屏幕并不会出样式错乱问题
下⾯是项⽬代码
<div class="box7">
<div class="title">处理进度</div>
<div class="box7-content">
<div class="line-box">
<div class="line1">
<div
:class="box1Info.dqhjbh === '0101' ? 'now' : box1Info.dqhjbh > '0101' ? 'finishedIcon' : ''"class="item"><div class="icon"></div><span>省公司下发< /span></div>
<div :class="box1Info.dqhjbh > '0101' ? 'finishedLine' : ''"class="xiafa">下发</div>
<div :class="box1Info.dqhjbh === '0102' ? 'now' : box1Info.dqhjbh > '0102' ? 'finishedIcon' : ''"class="item"><div class="icon"></div><span>地市局下发</span></div>
<div :class="box1Info.dqhjbh > '0102' ? 'finishedLine' : ''"class="xiafa">下发</div>
<div :class="box1Info.dqhjbh === '0103' ? 'now' : box1Info.dqhjbh > '0103' ? 'finishedIcon' : ''"class="item"><div class="icon"></div><span>区县局下发</span></div>
<div :class="box1Info.dqhjbh > '0103' ? 'finishedLine' : ''"class="xiafa">下发</div>
<div :class="box1Info.dqhjbh === '0104' ? 'now' : box1Info.dqhjbh > '0104' ? 'finishedIcon' : ''"class="item"><div class="icon"></div><span>派单</s pan></div>
<div :class="box1Info.dqhjbh > '0104' ? 'finishedLine' : ''"class="middle-xiafa">下发</div>
</div>
<div class="line2">
<div :class="box1Info.dqhjbh === '0105' ? 'now' : box1Info.dqhjbh > '0105' ? 'finishedIcon' : ''"class="item"><div class="icon"></div><span>⼯单处理</span></div>
<div :class="box1Info.dqhjbh > '0105' ? 'finishedLine' : ''"class="shangjiao">上交</div>
<div :class="box1Info.dqhjbh === '0106' ? 'now' : box1Info.dqhjbh > '0106' ? 'finishedIcon' : ''"class="item"><div class="icon"></div><span>班长审核</span></div>
<div :class="box1Info.dqhjbh > '0106' ? 'finishedLine' : ''"class="shangjiao">上交</div>
<div :class="box1Info.dqhjbh === '0107' ? 'now' : box1Info.dqhjbh > '0107' ? 'finishedIcon' : ''"class="item"><div class="icon"></div><span>区县局审核</span></div>
<div :class="box1Info.dqhjbh > '0107' ? 'finishedLine' : ''"class="shangjiao">上交</div>
<div :class="box1Info.dqhjbh === '0108' ? 'now' : box1Info.dqhjbh > '0108' ? 'finishedIcon' : ''"class="item"><div class="icon"></div><span>地市局审核</span></div>
<div :class="box1Info.dqhjbh > '0108' ? 'finishedLine' : ''"class="last-shangjiao">上交</div>
</div>
<div :class="box1Info.dqhjbh === '0110' ? 'now' : box1Info.dqhjbh > '0110' ? 'finishedIcon' : ''"class="last-item"><div class="icon"></div><span>归档</span></div>
</div>
</div>
</div>
css这⾥使⽤的是stylus
.box7-content
width 90%
margin 0 auto
margin 0 auto
padding 15px 10px
display flex
position relative
.line-box
margin 0 auto
.line1
display flex
padding-bottom 25px
height 50px
.line2
display flex
height 50px
padding 25px 0
flex-direction row-reverse
.line1,.line2
position relative
.xiafa,.shangjiao
font-size $s_font
position relative
color #ccc
.xiafa:before,.shangjiao:before
content ''
border-bottom 2px solid #d9d9d9          width 80px
height 1px
position absolute
top 15px
left 50%
transform translateX(-50%)
z-index 0
.item
width 60px
display flex
flex-direction column
align-items center
margin-top 10px
z-index 1
.icon
width 15px
height 15px
border-radius 50%
border 5px solid #d9d9d9
box-sizing border-box
background-color #eee
span
width 100%
text-align center
text-overflow ellipsis
white-space nowrap
margin-top 5px
font-size $s_font
color #888
overflow hidden
.middle-xiafa
text-align right
position absolute
top 65px
right 15px
font-size $s_font
color #ccc
.middle-xiafa:before
content ''
position absolute
top -49px
right -10px
right -10px
width 30px
height 98px
border 2px solid #d9d9d9
border-radius 5px
border-left none
z-index 0
borderbox.last-item
padding-top 25px
width 60px
display flex
flex-direction column
align-items center
margin-top 10px
position relative
z-index 2
.icon
width 15px
height 15px
box-sizing border-box
border-radius 50%
border 5px solid #d9d9d9
background #eee
span
margin-top 5px
font-size $s_font
color #888
.last-shangjiao
position absolute
bottom -11px
left 0
font-size $s_font
color #ccc
.last-shangjiao:before
content ''
position absolute
top -58px
left -5px
width 35px
height 98px
border 2px solid #d9d9d9
border-right none
border-radius 5px
.finishedIcon
.icon
border-color #2e7fcb !important    background #eee !important
span
color #2e7fcb !important
.finishedLine
color #2e7fcb !important
.finishedLine:before
border-color #2e7fcb !important .now
.
icon
border-color #f47e00 !important    background #eee !important
span
color #f47e00 !important

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。