纯CSS实现复杂流程图

<template>
  <div class="flowPage_main">
    <div class="flowPage_header">整体业务流程图</div>
    <div class="flowPage_body">
      <div class="flowPage_box1">
        <div class="box-header">xxx</div>
        <div class="box-body left-body">
          <div class="body-main body_top">
            <div class="circle-box start-box blue-box">开始</div>
            <div class="other-box green-box">
              xx系统
              <span :class="['wf-line', 'activeLine']"></span>
              <span :class="['wf-point', 'activePoint']"></span>
            </div>
            <div class="other-box blue-box">
              xx平台
              <span class="line_text green_text">下发文件</span>
              <span :class="['wf-line', 'rightLine']"></span>
              <span :class="['wf-point', 'rightPoint']"></span>
            </div>
          </div>
          <div class="body-main body_bottom">
            <div class="other-box blue-box">xx平台</div>
            <div class="other-box green-box">
              xx系统
              <span :class="['wf-line', 'activeLine']"></span>
              <span :class="['wf-point', 'activePoint']"></span>
            </div>
            <div class="circle-box blue-box">
              结束
              <span :class="['wf-line', 'activeLine']"></span>
              <span :class="['wf-point', 'activePoint']"></span>
            </div>
          </div>
        </div>
      </div>
      <div class="flowPage_box2">
        <div class="box-header">xxx</div>
        <div class="box-body mid-body">
          <div class="body-main body_top">
            <div class="mid-circle-box blue-box">开始</div>
            <div class="mid-other-box blue-box">
              新增维护
              <span :class="['blueLine', 'activeLine']"></span>
              <span :class="['bluePoint', 'activePoint']"></span>
            </div>
            <div class="par-box par-left-box">
              <div class="child-box blue-box">
                DB文件管理
              </div>
              <div class="child-box blue-box">
                指标库(共享)
                <span class="line_text">自定义</span>
                <span class="line_text top_text">自动解析</span>
                <span :class="['blueLine', 'rightBlueLine']"></span>
                <span :class="['bluePoint', 'rightBluePoint']"></span>
              </div>
              <div class="child-box"></div>
            </div>
          </div>
          <div class="body-main">
            <div class="mask-box">
              <div class="mid-left-box light-box">开发配置</div>
            </div>
            <div class="mid-other-box light-box">指标填报页面</div>
            <div class="par-box">
              <div class="child-box blue-box">
                xx系统
                <span :class="['blueNoLine']"></span>
                <span :class="['blueNoPointline']"></span>
              </div>
              <div class="child-box blue-box">
                aa系统
                <span class="line_text right_text">点击后跳转维护页面</span>
                <span class="line_text other_text">基于开始/填报/频次</span>
                <span :class="['blueLine', 'leftBlueLine']"></span>
                <span :class="['bluePoint', 'leftBluePoint']"></span>
              </div>
              <div class="child-box green-box">
                xx(业务数据拉取、统计分析)
              </div>
            </div>
            <div class="mask-foot-box">
              <div class="mid-left-box green-box">上报管理</div>
            </div>
            <div class="mid-other-box blue-box">
              采集中心
              <span class="line_text right_text">推送填写完成数据</span>
              <span :class="['blueLine', 'activeLine']"></span>
              <span :class="['bluePoint', 'activePoint']"></span>
            </div>
            <div class="par-box par-right-box">
              <div class="child-box"></div>
              <div class="child-box blue-box">
                打包上报
                <span class="line_text under_text">基于业务数据</span>
                <span class="line_text gray_text">根据文件格式要求推送（xx通道）</span>
                <span :class="['blueRightLine']"></span>
                <span :class="['blueRightPoint']"></span>
                <span :class="['leftShortBlueLine']"></span>
                <span :class="['onBlueLine']"></span>
                <span :class="['leftLongBlueLine']"></span>
                <span :class="['leftLongBluePoint']"></span>
              </div>
              <div class="child-box blue-box">
                统计分析
                <span class="line_text yellow_text">推送填写完成指标</span>
                <span :class="['yellowLine']"></span>
                <span :class="['yellowPoint']"></span>
              </div>
            </div>
            <div class="mid-other-box blue-box">
              上报记录
              <span class="line_text green_text green_right_text">生成</span>
              <span :class="['wf-line', 'activeLine']"></span>
              <span :class="['wf-point', 'activePoint']"></span>
            </div>
          </div>
        </div>
      </div>
      <div class="flowPage_box3">
        <div class="box-header">备注说明</div>
        <div class="box-body">
          <crec-card title="指标管理：分类两种形式">
            <p>1、xx下发生成</p>
            <p>2、xx内部指标</p>
          </crec-card>
          <crec-card title="指标库">
            <p>供xx用户进行查看</p>
          </crec-card>
          <crec-card title="上报管理">
            <p>1、采集中心：xx可在该模块进行处理接收各系统已提交上报数据，方便用户进行查看</p>
            <p>2、上报管理：支持将xx单位层级填报大指标数据。根据对应的业务口径以及要求大频次进行打包上报处理</p>
            <p>3、上报记录：可查看</p>
          </crec-card>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'FlowPage',
  data () {
    return {}
  }
}
</script>

<style lang="less" scoped>
.flowPage_main {
  width: 100%;
  height: 100%;
  .flowPage_header {
    text-align: center;
    background: #1961ac;
    color: #fff;
    height: 56px;
    line-height: 56px;
    font-size: 18px;
  }
  .flowPage_body {
    margin-top: 10px;
    height: calc(100% - 66px);
    .box-header {
      height: 40px;
      line-height: 40px;
      text-align: center;
      font-size: 16px;
    }
    .box-body {
      height: calc(100% - 40px);
    }
    .line_text{
      font-size: 14px;
        position: absolute;
        display: block;
        color: #1961ac;
        top: -42px;
        right: 22%;
    }
    .other_text{
       top: 30px;
       left: -105%;
    }
    .right_text{
        top: -43px;
        right: -15px
    }
    .under_text{
      top: 30px;
      right: -80px;
    }
    .yellow_text{
        color: #edb924;
        right: -10px;
        top: -85px;
    }
    .light_text{
        color: #13c2c2;
    }
    .green_text{
        color:#3fc990;
        top: -42px;
        right: 5px;
    }
    .top_text{
      top: -18px;
      left: -109%;
    }
    .green_right_text{
      right: 80px;
    }
    .gray_text{
        color: #929ea9;
        left: -250%;
    }
    .left-body{
      position: relative;
      // display: flex;
      // justify-content: space-around;
      // flex-direction: column;
    }
    .body_bottom{
      position: absolute !important;
      bottom: 10px;
      width: 100%;
    }
    .body-main{
      position: relative;
      .start-box{
        margin-top: 20px !important;
      }
      .circle-box{
        position: relative;
        width: 75%;
        height: 45px;
        margin: 40px auto;
        border-radius: 20px;
        text-align: center;
        line-height: 45px;
        color: #fff;
        font-size: 16px;
      }
      .other-box{
        position: relative;
        width: 75%;
        height: 45px;
        margin: 40px auto;
        border-radius: 5px;
        text-align: center;
        line-height: 45px;
        color: #fff;
        font-size: 16px;
      }
      .mid-other-box{
        position: relative;
        width: 25%;
        height: 45px;
        margin: 40px auto;
        border-radius: 5px;
        text-align: center;
        line-height: 45px;
        color: #fff;
        font-size: 16px;
      }
      .mid-circle-box{
        position: relative;
        width: 25%;
        height: 45px;
        margin: 20px auto 40px;
        border-radius: 20px;
        text-align: center;
        line-height: 45px;
        color: #fff;
        font-size: 16px;
      }
      .par-box{
        // height: 45px;
        margin: 40px auto;
        display: flex;
        justify-content: space-around;
        .child-box{
          position: relative;
          width: 25%;
          float: left;
          // margin-left: 25px;
          height: 45px;
          border-radius: 5px;
          text-align: center;
          line-height: 45px;
          color: #fff;
          font-size: 16px;
        }
      }
      .mask-box{
         background: #d0f3f3;
         width: 36%;
         margin: 10px auto;
         position: absolute;
         left: 48%;
         top: -40px;
         // bottom: 15px;
         transform: translate(-51%);
         height: 100px;
         .mid-left-box{
            width: 12%;
            height: 100%;
            color: #fff;
            writing-mode: vertical-lr;
            font-size: 16px;
            text-align: center;
            line-height: 42px;
            letter-spacing: 5px;
         }
      }
      .mask-foot-box{
         background: #d9f4e9;
         width: 36%;
         margin: 10px auto;
         position: absolute;
         left: 48%;
         bottom: -28px;
         transform: translate(-51%);
         height: 250px;
         .mid-left-box{
            width: 12%;
            height: 100%;
            color: #fff;
            writing-mode: vertical-lr;
            font-size: 16px;
            text-align: center;
            line-height: 45px;
            letter-spacing: 10px;
         }
      }
      .green-box{
        background: #3fc990;
      }
      .blue-box{
        background: #1961ac;
      }
      .light-box{
        background: #13c2c2;
      }
    }
    // .wf-line:before {
    //   content: '';
    //   border-top: 2px solid #3fc990;
    //   position: absolute;
    //   right: -30%;
    //   display: inline-block;
    //   height: 1px;
    //   width: 60px;
    //   top: 18px;
    // }
    // .wf-point:before {
    //   top: 14px;
    //   width: 0;
    //   height: 0;
    //   right: -30%;
    //   content: '';
    //   position: absolute;
    //   border-top: 5px solid transparent;
    //   border-left: 5px solid #3fc990;
    //   border-bottom: 5px solid transparent;
    // }
    .rightLine:before {
      content: '';
      border-top: 2px solid #3fc990;
      position: absolute;
      right: -35%;
      display: inline-block;
      height: 1px;
      width: 70px;
      top: 20px;
    }
    .rightPoint:before {
      top: 16px;
      width: 0;
      height: 0;
      right: -35%;
      content: '';
      position: absolute;
      border-top: 5px solid transparent;
      border-left: 5px solid #3fc990;
      border-bottom: 5px solid transparent;
    }
    .leftBlueLine:before{
      content: '';
      border-top: 2px solid #75a0cd;
      position: absolute;
      left: -30%;
      display: inline-block;
      height: 1px;
      width: 60px;
      top: 20px;
    }
    .leftBluePoint:before{
      top: 16px;
      width: 0;
      height: 0;
      left: -30%;
      content: '';
      position: absolute;
      border-top: 5px solid transparent;
      border-right: 5px solid #75a0cd;
      border-bottom: 5px solid transparent;
    }
    .rightBlueLine:before{
      content: '';
      border-top: 2px solid #75a0cd;
      position: absolute;
      left: -30%;
      display: inline-block;
      height: 1px;
      width: 60px;
      top: 20px;
    }
    .rightBluePoint:before{
      top: 16px;
      width: 0;
      height: 0;
      left: -5%;
      content: '';
      position: absolute;
      border-top: 5px solid transparent;
      border-left: 5px solid #75a0cd;
      border-bottom: 5px solid transparent;
    }
    .blueRightLine:before{
      content: '';
      border-top: 2px solid #75a0cd;
      position: absolute;
      right: -30%;
      display: inline-block;
      height: 1px;
      width: 60px;
      top: 20px;
    }
    .blueRightPoint:before{
      top: 16px;
      width: 0;
      height: 0;
      right: -31%;
      content: '';
      position: absolute;
      border-top: 5px solid transparent;
      border-left: 5px solid #75a0cd;
      border-bottom: 5px solid transparent;
    }
    .leftShortBlueLine:before{
      content: '';
      border-top: 2px solid #75a0cd;
      position: absolute;
      left: -10%;
      display: inline-block;
      height: 1px;
      width: 20px;
      top: 20px;
    }
    .onBlueLine:after{
      content: '';
      border-left: 1px solid #75a0cd;
      position: absolute;
      left: -10%;
      transform:translate(-50%);
      display: inline-block;
      height: 70px;
      width: 1px;
      bottom: 23px;
    }
    .leftLongBlueLine:before{
      content: '';
      border-top: 2px solid #75a0cd;
      position: absolute;
      left: -172%;
      display: inline-block;
      height: 1px;
      width: 162%;
      top: -48px;
    }
    .leftLongBluePoint:before{
      top: -52px;
      width: 0;
      height: 0;
      left: -173%;
      content: '';
      position: absolute;
      border-top: 5px solid transparent;
      border-right: 5px solid #75a0cd;
      border-bottom: 5px solid transparent;
    }
    .yellowLine:after{
      content: '';
      border-left: 1px solid #f4d37c;
      position: absolute;
      left: 50%;
      transform:translate(-50%);
      display: inline-block;
      height: 100px;
      width: 1px;
      bottom: 60px;
    }
    .yellowPoint::after{
      width: 0;
      height: 0;
      left: 50%;
      transform:translate(-50%);
      content: '';
      top: -15px;
      position: absolute;
      border-left: 5px solid transparent;
      border-top: 5px solid #f4d37c;
      border-right: 5px solid transparent;
    }
    .blueLine:after{
      content: '';
      border-left: 1px solid #75a0cd;
      position: absolute;
      left: 50%;
      transform:translate(-50%);
      display: inline-block;
      height: 20px;
      width: 1px;
      top: -30px
    }
    .blueNoLine:after{
      content: '';
      border-left: 1px solid #75a0cd;
      position: absolute;
      left: 50%;
      transform:translate(-50%);
      display: inline-block;
      height: 18px;
      width: 1px;
      top: -20px
    }
    .blueNoPointline:before{
      content: '';
      border-top: 2px solid #75a0cd;
      position: absolute;
      right: -83%;
      display: inline-block;
      height: 1px;
      width: 133%;
      top: -20px;
    }
    .bluePoint:after{
      width: 0;
      height: 0;
      left: 50%;
      transform:translate(-50%);
      content: '';
      top: -10px;
      position: absolute;
      border-left: 5px solid transparent;
      border-top: 5px solid #75a0cd;
      border-right: 5px solid transparent;
    }
    .wf-line:after {
      content: '';
      border-left: 1px solid #3fc990;
      position: absolute;
      left: 50%;
      transform:translate(-50%);
      display: inline-block;
      height: 20px;
      width: 1px;
      top: -30px
    }
    .wf-point:after {
      width: 0;
      height: 0;
      left: 50%;
      transform:translate(-50%);
      content: '';
      top: -10px;
      position: absolute;
      border-left: 5px solid transparent;
      border-top: 5px solid #3fc990;
      border-right: 5px solid transparent;
    }
    .flowPage_box1 {
      height: 100%;
      float: left;
      width: calc(20% - 10px);
      margin-right: 10px;
      border: 2px solid #d9f4e9;
      .box-header {
        background: #d9f4e9;
        color: #3fc990;
      }
    }
    .flowPage_box2 {
      height: 100%;
      float: left;
      width: calc(60% - 20px);
      margin: 0 10px;
      border: 2px solid #d1dfee;
      .box-header {
        background: #d1dfee;
        color: #1961ac;
      }
    }
    .flowPage_box3 {
      height: 100%;
      float: left;
      width: calc(20% - 10px);
      margin-left: 10px;
      border: 2px solid #dbdfe2;
      .box-header {
        background: #dbdfe2;
        color: #4a5d70;
      }
      .box-body {
        .crec-card {
          margin: 20px auto;
          width: 80%;
          p {
            margin: 0;
          }
        }
        /deep/.crec-card-body {
          padding: 0;
          background: #dbdfe2;
          border-radius: 0;
          margin: 0;
          padding: 10px;
          color: #4a5d70;
        }
        /deep/.crec-card-head {
          min-height: 40px;
          background: #4a5d70;
          color: #fff;
          font-size: 16px;
        }
        /deep/.crec-card-head-title {
          padding: 8px 0;
        }
      }
    }
  }
}
</style>

这篇好文章是转载于：学新通技术网