一个特殊静态页面的处理---静态页面实现流程图

Tips:今天接收一个静态页面，被布局所困扰，不知从何下手，请同事指教，求解。

         每一个字段均从后台传入，每一个值也均改变的， 节点是可改变的 输入配置文字也是可以变化的

解决代码：

1.HTML

<!-- modals /S -->
<div class="modal modal-common-black" id="modalAddBucket">
    <div class="modal-box" style="width:800px;margin-top:5%">
       <div class="modal-title">业务流名称三<svg class="icon icon-guanbi size-30" modalAddBucketClose="modalAddBucketClose"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#icon-guanbi"></use></svg></div>
       
        <div class="flow-box">
            <div class="floor1" >
           <div class= "box1">  
               <ul>
               <li><label>节点名称：</label><span>activity start（默认）</span></li>
               <li><label>bucket：</label><span>bucketABC</span></li>
               
               <li><label>输入路径：</label><span>13415425</span></li>
               <li><label>管道ID：</label><span>13415425</span></li>
               <li><label>执行状态：</label><span>进行中</span></li>
               </ul>
               <div class="line-dom"><div class="dom-box">输入配置</div><span class="line"></span></div>
           </div>
           <div class="floor2">
            <div class="line-dom"><div class="dom-box">输入配置</div><span class="line"></span></div>
            <div> 
               <div class="box1 error"> 
               <ul>
               <li><label>节点名称：</label><span>activity start（默认）</span></li>
               <li><label>bucket：</label><span>bucketABC</span></li>