赞
踩
来由:项目用的是iview组件库进行开发的,但是它的时间轴组件无法满足项目复杂需求,所有特意自定义这个新的流程图组件
注意:所有图标来自阿里云iconfont图标库
效果图:
<!-- 自定义流程图 --> <div class="new-approval-map"> <h2 class="map-title">审批进度</h2> <div class="map-node"> <div class="map-left-line"> <span title="宫本武藏" class="line-name">{{'宫本武'.substring(0,2)}}</span> <span class="line-complete-icon"><i class="icon2_ icon2_gou complete-icon"></i></span> <!-- <i class="icon2_ icon2_shenpiguanli line-icon"></i> --> </div> <div class="map-right-content"> <div class="item-cell"> <div class="item-label"> <span class="label-name">发起申请</span> <span class="label-time">2021-4-30 13:54:44</span> </div> <div class="item-node"> <span title="李四撒大苏" :class="['node-name', 'active']">李四撒大苏</span> <span class="is-complete-icon"><i class="icon2_ icon2_gou complete-icon"></i></span> <span :class="['node-status']"></span> </div> <div class="item-status-content">送到佛山东方红石佛店还是山大佛还是</div> </div> </div> </div> <div class="map-node"> <div class="map-left-line"> <!-- <span title="后羿" class="line-name">后羿</span> --> <i class="icon2_ icon2_workflow-center line-icon"></i> <span class="line-complete-icon"><i class="icon2_ icon2_gou complete-icon"></i></span> </div> <div class="map-right-content"> <div class="item-cell"> <div class="item-label"> <span class="label-name">审批人</span> <span class="label-time">2021-4-30 13:54:44</span> </div> <div class="item-node"> <span :class="['node-name', 'active']">李四</span> <span class="is-complete-icon"><i class="icon2_ icon2_gou complete-icon"></i></span> <span :class="['node-status','agree']">已审批</span> </div> <div class="item-status-content">送到佛山东方红石佛店还是山大佛还是</div> </div> </div> </div> <div class="map-node"> <div :class="['map-left-line', 'send']"> <!-- <span title="后羿" class="line-name">后羿</span> --> <i class="icon2_ icon2_faqishenpi line-icon"></i> </div> <div class="map-right-content"> <div class="item-cell"> <div class="item-label"> <span class="label-name">抄送人</span> <span class="label-time">2021-4-30 13:54:44</span> </div> <div class="item-node"> <span :class="['node-name', 'active']">李四</span> <span :class="['node-status','pend']">待审批</span> </div> <div class="item-status-content">送到佛山东方红石佛店还是山大佛还是</div> </div> </div> </div> </div>
.new-approval-map{ .map-title{ font-size: 16px; font-weight: bold; color: #333; margin-bottom: 20px; } .map-node{ display: flex; position: relative; .map-left-line{ width: 40px; height: 40px; border-radius: 50%; background-color: #2d8cf0; font-size: 8px; color: #fff; text-align: center; line-height: 40px; // overflow: hidden; // position: relative; .line-name{ font-size: 12px; } .line-icon{ font-size: 22px; } .line-complete-icon{ display: block; width: 16px; height: 16px; border-radius: 50%; text-align: center; line-height: 16px; background-color: #3fba73; position: absolute; left: 25px; top: 25px; .complete-icon{ color: #fff; } } &.send{ background-color: #FFBA02; } // 自定义流程虚线 &::before{ content: ''; display: block; width: 2px; height: 100%; background-color: #CDCDCD; z-index: -1; position: absolute; left: 18px; top: 0px; } } &:last-child{ .map-left-line{ &::before{ display: none; } } } .map-right-content{ position: relative; width: 100%; margin: 12px 0 0 17px; .item-cell{ position: relative; top: -22px; left: 10px; background-color: #fff; border-radius: 6px; padding: 12px 16px; box-shadow: 1px 1px 4px #93c1f3; .item-label{ line-height: 1; display: flex; justify-content: space-between; .label-name{ font-size: 15px; font-weight: bold; color: #333; } .label-time{ font-size: 13px; font-weight: bold; color: #B9B9B9; .label-status{ padding: 0 10px; } } } .item-node{ display: flex; align-items: center; margin: 10px 0; .node-name{ width: 30px; height: 30px; border-radius: 50%; background-color: #2d8cf0; font-size: 8px; color: #fff; text-align: center; line-height: 30px; overflow: hidden; position: relative; } .is-complete-icon{ display: block; width: 16px; height: 16px; border-radius: 50%; text-align: center; line-height: 16px; background-color: #3fba73; position: absolute; left: 35px; top: 55px; .complete-icon{ color: #fff; } } .node-status{ color: #666; padding-left: 10px; &.agree{ // 同意样式 color: #3fba73; } &.reject{ // 拒绝样式 color: #E76060; } &.pend{ // 待审批样式 color: #fa795e; } &.recall{ // 撤回 color: orange; } &.send{ // chaoso color: #2d8cf0; } } } .item-status-content{ line-height: 1.5; } &::before{ content: ''; width: 0; height: 0; border-top: 10px solid transparent; border-right: 12px solid #edf6ff; border-bottom: 11px solid transparent; position: absolute; left: -13px; top: 20px; } } } } }
赞
踩
Copyright © 2003-2013 www.wpsshop.cn 版权所有,并保留所有权利。