1. 应用外观

    开始
    订单分解
    发PBOSS
    CALLPF
    服务开通
    同步
    结束
  2. 使用说明

    1. 复制基本代码结构

      <div class="c_flowPic">
      	<div class="line">
      		<!-- 这里放连接线代码 -->
      	</div>
      	<div class="node">
      		<!-- 这里放节点代码 -->
      	</div>
      </div>
      
    2. 放入连接线代码和节点代码

      <div class="c_flowPic">
      	<div class="line">
      		<div class="l"><span></span></div>
      		<div class="l"><span></span></div>
      	</div>
      	<div class="node">
      		<div class="gray"><span>开始</span><div></div></div>
      		<div class="gray"><span>订单分解</span><div></div></div>
      		<div class="gray"><span>结束</span><div></div></div>
      	</div>
      </div>
      
    3. 设置连接线与节点的位置与大小

      <div class="c_flowPic">
      	<div class="line">
      		<div class="l" style="width:40px; top:25px; left:60px;"><span></span></div>
      		<div class="l" style="width:40px; top:25px; left:160px;"><span></span></div>
      	</div>
      	<div class="node">
      		<div class="gray" style="top:0px; left:0px;"><span>开始</span><div></div></div>
      		<div class="gray" style="top:0px; left:100px;"><span>订单分解</span><div></div></div>
      		<div class="gray" style="top:0px; left:200px;"><span>结束</span><div></div></div>
      	</div>
      </div>
      
    4. 设置连接线箭头方向与节点外观

      <div class="c_flowPic">
      	<div class="line">
      		<div class="l right" style="width:40px;top:25px;left:60px;"><span></span></div>
      		<div class="l right" style="width:40px;top:25px;left:160px;"><span></span></div>
      	</div>
      	<div class="node">
      		<div class="gray" style="top:0px;left:0px;"><span>开始</span><div></div></div>
      		<div class="gray" style="top:0px;left:100px;"><span>订单分解</span><div></div></div>
      		<div class="green" style="top:0px;left:200px;"><span>结束</span><div></div></div>
      	</div>
      </div>
      
    5. 设置整体高度

      <div class="c_flowPic" style="height:60px;">
      	<div class="line">
      		<div class="l right" style="width:40px;top:25px;left:60px;"><span></span></div>
      		<div class="l right" style="width:40px;top:25px;left:160px;"><span></span></div>
      	</div>
      	<div class="node">
      		<div class="gray" style="top:0px;left:0px;"><span>开始</span><div></div></div>
      		<div class="gray" style="top:0px;left:100px;"><span>订单分解</span><div></div></div>
      		<div class="green" style="top:0px;left:200px;"><span>结束</span><div></div></div>
      	</div>
      </div>
      

      【注】高度的设置从外观上没有明显变化,实际如果不设置高度该组件则不占据页面上的实际空间,会导致组件“重叠”的 BUG 出现。

  3. 代码说明

    1. 连接线设置

      1. 基本连接线

        <div class="l"><span></span></div>
        
      2. 横向向左

        <div class="l left"><span></span></div>
        
      3. 横向向右

        <div class="l right"><span></span></div>
        
      4. 横向左右

        <div class="l left right"><span></span></div>
        
      5. 纵向

        <div class="v"><span></span></div>
        
      6. 纵向向上

        <div class="v top"><span></span></div>
        
      7. 纵向向下

        <div class="v bottom"><span></span></div>
        
      8. 纵向上下

        <div class="v top bottom"><span></span></div>
        
    2. 节点设置

      1. 基本节点

        文字
        <div class="gray"><span>文字</span><div></div></div>
        
      2. 绿色节点

        文字
        <div class="green"><span>文字</span><div></div></div>
        
      3. 蓝色节点

        文字
        <div class="blue"><span>文字</span><div></div></div>
        
      4. 红色节点

        文字
        <div class="red"><span>文字</span><div></div></div>