纯CSS实现复杂流程图

胜玲龙

已于 2023-02-27 15:53:04 修改

阅读量2.2k

点赞数 4

文章标签： css 流程图前端

于 2023-02-27 15:51:37 首次发布

本文链接：https://blog.csdn.net/qq_40184218/article/details/129243365

版权

本文深入探讨如何仅使用CSS实现复杂流程图的创建，涵盖了定位技巧、伪元素和过渡效果等关键知识点，旨在帮助前端开发者掌握不依赖JavaScript的流程图设计方法。

摘要由CSDN通过智能技术生成

在这里插入图片描述

<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