增加台帐修订；预付款审批。

biaoduan-panel.html

@@ -37,13 +37,19 @@
           <!--标签-->
           <ul class="nav nav-tabs nav-fill">
             <li class="nav-item">
-              <a class="nav-link active" data-toggle="tab" href="#gaikuang" role="tab">概况</a>
+              <a class="px-1 nav-link active" data-toggle="tab" href="#gaikuang" role="tab">概况</a>
             </li>
             <li class="nav-item">
-              <a class="nav-link" data-toggle="tab" href="#jlqi" role="tab">计量期</a>
+              <a class="px-1 nav-link" data-toggle="tab" href="#yufukuan" role="tab">预付款</a>
             </li>
             <li class="nav-item">
-              <a class="nav-link" data-toggle="tab" href="#biangeng" role="tab">工程变更</a>
+              <a class="px-1 nav-link" data-toggle="tab" href="#tzxiuding" role="tab">台帐修订</a>
+            </li>
+            <li class="nav-item">
+              <a class="px-1 nav-link" data-toggle="tab" href="#jlqi" role="tab">计量期</a>
+            </li>
+            <li class="nav-item">
+              <a class="px-1 nav-link" data-toggle="tab" href="#biangeng" role="tab">工程变更</a>
             </li>
           </ul>
           <div class="tab-content">
@@ -68,49 +74,92 @@
                 </div>
               </div>
             </div>
-            <div class="tab-pane" id="jlqi">
-              <!--期列表-->
+            <div class="tab-pane" id="yufukuan">
+              <div class="card my-3">
+                <div class="card-body">
+                  <a href="biaoduan-yufukuan.html"><h5 class="card-title d-flex justify-content-between">开工预付款<span>第3期</span></h5></a>
+                </div>
+              </div>
+              <div class="card my-3">
+                <div class="card-body">
+                  <a href="biaoduan-yufukuan.html"><h5 class="card-title d-flex justify-content-between">材料预付款<span>第5期</span></h5></a>
+                </div>
+              </div>
+              <div class="card my-3">
+                <div class="card-body">
+                  <a href="biaoduan-yufukuan.html"><h5 class="card-title d-flex justify-content-between">安全生产费预付款<span>第1期</span></h5></a>
+                </div>
+              </div>
+            </div>
+            <div class="tab-pane" id="tzxiuding">
               <dl class="mb-2 mt-3">
-                <dt class="bg-light p-2 d-flex justify-content-between"><span>第6期</span><span class="text-warning">王五-监理 审批中</span></dt>
+                <dt class="bg-light p-2 d-flex justify-content-between"><span>第2次修订</span><span class="text-warning">王五-监理 审批中</span></dt>
                 <dd>
                   <table class="table table-hover">
-                    <tbody><tr>
-                      <td>
-                        <p class="mb-0">本期合同计量</p>
-                        <b>￥5618881.00</b>
-                      </td>
-                      <td>
-                        <p class="mb-0">本期数量变更计量</p>
-                        <b>￥0.00</b>
-                      </td>
-                    </tr>
-                    <tr>
-                      <td>
-                        <p class="mb-0">本期完成计量</p>
-                        <b>￥5618881.00</b>
-                      </td>
-                      <td>
-                        <p class="mb-0">截止上期完成计量</p>
-                        <b>￥14763357.00</b>
-                      </td>
-                    </tr>
-                    <tr>
-                      <td>
-                        <p class="mb-0">截止本期完成计量</p>
-                        <b>￥20382238.00</b>
-                      </td>
-                      <td>
-                        <p class="mb-0">本期应付</p>
-                        <b>￥5618881.00</b>
-                      </td>
-                    </tr>
+                    <tr><td width="90">修订时间</td><td>2021-05-22</td></tr>
+                    <tr><td>修订人</td><td>仁温书</td></tr>
+                    <tr><td>修订详情</td><td>对方幸福，阿斯顿，阿斯顿，阿斯顿阿斯大声，的 <a href="#">展开更多</a></td></tr>
                     <tr>
                       <td colspan="2">
-                        <a class="btn btn-block btn-success" href="biaoduan-qi.html">审批本期</a>
+                        <a class="btn btn-block btn-success" href="biaoduan-tzxiuding.html">审批</a>
                       </td>
                     </tr>
-                  </tbody>
-                </table>
+                  </table>
+                </dd>
+                <dt class="bg-light p-2 d-flex justify-content-between"><span>第1次修订</span><span class="text-success">审批完成</span></dt>
+                <dd>
+                  <table class="table table-hover">
+                    <tr><td width="90">修订时间</td><td>2021-05-20</td></tr>
+                    <tr><td>修订人</td><td>仁温书</td></tr>
+                    <tr><td>修订详情</td><td>修订详情内容文本长长一段。修订详情内容文本长长一段。修订详情内容文本长长一段。<a href="#">展开更多</a></td></tr>
+                  </table>
+                </dd>
+              </dl>
+            </div>
+            <div class="tab-pane" id="jlqi">
+              <!--期列表-->
+              <dl class="mb-2 mt-3">
+                <dt class="bg-light p-2 d-flex justify-content-between"><span>第6期</span><span class="text-warning">王五-监理 审批中</span></dt>
+                <dd>
+                  <table class="table table-hover">
+                    <tbody>
+                      <tr>
+                        <td>
+                          <p class="mb-0">本期合同计量</p>
+                          <b>￥5618881.00</b>
+                        </td>
+                        <td>
+                          <p class="mb-0">本期数量变更计量</p>
+                          <b>￥0.00</b>
+                        </td>
+                      </tr>
+                      <tr>
+                        <td>
+                          <p class="mb-0">本期完成计量</p>
+                          <b>￥5618881.00</b>
+                        </td>
+                        <td>
+                          <p class="mb-0">截止上期完成计量</p>
+                          <b>￥14763357.00</b>
+                        </td>
+                      </tr>
+                      <tr>
+                        <td>
+                          <p class="mb-0">截止本期完成计量</p>
+                          <b>￥20382238.00</b>
+                        </td>
+                        <td>
+                          <p class="mb-0">本期应付</p>
+                          <b>￥5618881.00</b>
+                        </td>
+                      </tr>
+                      <tr>
+                        <td colspan="2">
+                          <a class="btn btn-block btn-success" href="biaoduan-qi.html">审批本期</a>
+                        </td>
+                      </tr>
+                    </tbody>
+                  </table>
                 </dd>
                 <dt class="bg-light p-2 d-flex justify-content-between"><span>第5期</span><span class="text-success">审批完成</span></dt>
                 <dd>

biaoduan-tzxiuding.html

@@ -0,0 +1,386 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no">
+    <meta http-equiv="x-ua-compatible" content="ie=edge">
+    <title>标段概况-计量支付</title>
+    <link rel="stylesheet" href="css/bootstrap/bootstrap.min.css">
+    <link rel="stylesheet" href="css/main.css">
+    <link rel="stylesheet" href="css/font-awesome/font-awesome.min.css">
+    <script src=js/echarts/echarts.min.js></script>
+    <link rel="shortcut icon" href="img/favicon.ico">
+<style>
+</style>
+</head>
+<body>
+    <div class="container">
+        <!--顶部-->
+        <nav class="fixed-top bg-dark">
+            <div class="my-2 d-flex justify-content-between">
+                <span class="text-white ml-3"><a href="biaoduan-panel.html" class="mr-2 text-white"><i class="fa fa-chevron-left"></i> 台帐修订</a></span>
+                <div class="mr-3">
+                    <div class="dropdown">
+                      <button class="btn btn-sm btn-light dropdown-toggle" type="button" data-toggle="dropdown">
+                        张三
+                      </button>
+                      <div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
+                        <a class="dropdown-item" href="#">退出登录</a>
+                      </div>
+                    </div>
+                </div>
+            </div>
+        </nav>
+        <!--标段概况-->
+        <div class="py-6">
+          <!--最新期-->
+          <dl class="mb-2 mt-3">
+                <dt class="bg-light p-2 d-flex justify-content-between"><span>第2次修订</span><span class="text-warning">王五-监理 审批中</span></dt>
+                <dd>
+                  <table class="table table-hover">
+                    <tr><td width="90">修订时间</td><td>2021-05-22</td></tr>
+                    <tr><td>修订人</td><td>仁温书</td></tr>
+                    <tr><td>修订详情</td><td>审批修订内容全部显示。修订详情内容文本长长一段。修订详情内容文本长长一段。修订详情内容文本长长一段。</td></tr>
+                  </table>
+                </dd>
+          </dl>
+          <!--审批流程-->
+          <div class="card mt-3">
+            <ul class="list-group list-group-flush">
+              <li class="list-group-item">
+                <span class="text-success pull-right"><small>2017-11-25</small> 上报</span>
+                 <h5 class="card-title"><i class="fa fa-play-circle fa-rotate-90 text-success"></i> 布尔 <small class="text-muted">施工</small></h5>
+              </li>
+              <li class="list-group-item">
+                <span class="text-success pull-right"><small>2017-11-25</small> 审批通过</span>
+                 <h5 class="card-title"><i class="fa fa-chevron-circle-down text-success"></i> 张三 <small class="text-muted">监理</small></h5>
+                 <p class="card-text">审批意见。</p>
+              </li>
+              <li class="list-group-item">
+                <span class="text-success pull-right"><small>2017-11-25</small> 审批通过</span>
+                 <h5 class="card-title"><i class="fa fa-chevron-circle-down text-success"></i> 王五 <small class="text-muted">监理</small></h5>
+                 <p class="card-text">审批意见。</p>
+              </li>
+              <li class="list-group-item">
+                <span class="text-warning pull-right"><small>2017-11-25</small>审批退回 王五</span>
+                 <h5 class="card-title"><i class="fa fa-stop-circle text-warning"></i> 李四 <small class="text-muted">监理</small></h5>
+                 <p class="card-text">审批意见。</p>
+              </li>
+              <li class="list-group-item">
+                <span class="pull-right">审批中</span>
+                 <h5 class="card-title"><i class="fa fa-chevron-circle-down"></i> 王五 <small class="text-muted">监理</small></h5>
+                 <div class="form-group">
+                   <div class="text-center">
+                    <button class="btn btn-success" data-toggle="modal" data-target="#sp-done" >审批通过</button>
+                    <button class="btn btn-warning" data-toggle="modal" data-target="#sp-back" >审批退回</button>
+                  </div>
+                 </div>
+              </li>
+              <li class="list-group-item">
+                 <h5 class="card-title"><i class="fa fa-stop-circle"></i> 李四 <small class="text-muted">监理</small></h5>
+              </li>
+            </ul>
+          </div>
+        </div>
+        <!--底栏菜单-->
+        <nav class="fixed-bottom navbar-dark bg-light border-top">
+          <ul class="nav nav-fill my-2">
+              <li class="nav-item">
+                <a class="nav-link text-muted" href="todo.html"><i class="fa fa-check-square-o"></i> 待审批</a>
+              </li>
+              <li class="nav-item">
+                <a class="nav-link active " href="biaoduan.html"><i class="fa fa-list-ul"></i> 项目</a>
+              </li>
+            </ul>
+        </nav>
+    </div>
+    <!--审批通过弹窗-->
+    <div class="modal" tabindex="-1" role="dialog" id="sp-done">
+      <div class="modal-dialog" role="document">
+        <div class="modal-content">
+          <div class="modal-header">
+            <h5 class="modal-title">审批通过</h5>
+            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
+              <span aria-hidden="true">&times;</span>
+            </button>
+          </div>
+          <div class="modal-body">
+            <div class="form-group">
+               <label>审批意见</label>
+               <textarea class="form-control" rows="8"></textarea>
+             </div>
+          </div>
+          <div class="modal-footer">
+            <button type="button" class="btn btn-secondary" data-dismiss="modal">取消</button>
+            <button type="button" class="btn btn-success">审批通过</button>
+          </div>
+        </div>
+      </div>
+    </div>
+    <!--审批退回弹窗-->
+    <div class="modal" tabindex="-1" role="dialog" id="sp-back">
+      <div class="modal-dialog" role="document">
+        <div class="modal-content">
+          <div class="modal-header">
+            <h5 class="modal-title">审批通过</h5>
+            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
+              <span aria-hidden="true">&times;</span>
+            </button>
+          </div>
+          <div class="modal-body">
+            <div class="form-group">
+               <label>审批意见</label>
+               <textarea class="form-control" rows="8"></textarea>
+             </div>
+             <div class="alert alert-warning">
+                  <div class="custom-control custom-radio custom-control-inline">
+                    <input type="radio" id="customRadioInline1" name="customRadioInline1" class="custom-control-input">
+                    <label class="custom-control-label" for="customRadioInline1">退回上报 布尔</label>
+                  </div>
+                  <div class="custom-control custom-radio custom-control-inline">
+                    <input type="radio" id="customRadioInline2" name="customRadioInline1" class="custom-control-input">
+                    <label class="custom-control-label" for="customRadioInline2">退回上一审批人 张三</label>
+                  </div>
+              </div>
+          </div>
+          <div class="modal-footer">
+            <button type="button" class="btn btn-secondary" data-dismiss="modal">取消</button>
+            <button type="button" class="btn btn-warning">确认退回</button>
+          </div>
+        </div>
+      </div>
+    </div>
+    <!-- JS. -->
+    <script src="js/jquery/jquery-3.2.1.min.js"></script>
+    <script src="js/popper/popper.min.js"></script>
+    <script src="js/bootstrap/bootstrap.min.js"></script>
+    <script src="js/global.js"></script>
+        <script type="text/javascript">
+                    //4 标段期数计量进度//
+                    var myChart = echarts.init(document.getElementById('chartContainer4'));
+                    var option = {
+                      color: ['#e9af68','#57b7b6','#e4575a','#959eac','#6699FF',
+                              '#d38b70','#8fb7cf','#cd5c5c','#ffa500','#40e0d0',
+                              '#1e90ff','#ff6347','#7b68ee','#00fa9a','#ffd700',
+                              '#5c616b','#ff6666','#3cb371','#b8860b','#30e0e0'],
+                              title : {
+                                  text: ''
+                              },
+        tooltip : {
+            trigger: 'axis'
+        },
+        calculable : true,
+        legend: {
+            data:['本期合同计量','本期数量变更计量','截止上期累计完成','本期完成计量','完成度']
+        },
+        dataZoom: [
+               {show: true,start: 0, end: 100}
+          ],
+        xAxis : [
+            {
+                type : 'category',
+                splitLine : {show : true},
+                data : ['第一期','第二期','第三期','第四期','第五期','第六期','第七期']
+            }
+        ],
+        yAxis : [
+            {
+               type : 'value',
+                name : '金额',
+                position:'left',
+                axisLabel : {
+                    formatter: '{value} 元'
+                },
+                splitArea : {show : true}
+            },
+            {
+                type : 'value',
+                name:'完成度',
+                axisLabel : {
+                    formatter: '{value} %'
+                },
+                position: 'right',
+                splitArea : {show : true}
+            }
+        ],
+        series : [
+            {
+                name:'本期合同计量',
+                type:'bar',
+                tooltip : {trigger: 'item',formatter: "{b}  <br/>{a}：{c}元"},
+                stack: '合同',
+                data:[320, 332, 301, 334, 390, 330, 320]
+            },
+            {
+                name:'本期数量变更计量',
+                type:'bar',
+                tooltip : {trigger: 'item',formatter: "{b}  <br/>{a}：{c}元"},
+                stack: '合同',
+                data:[320, -20, 301, 334, 390, 330, 320]
+            },
+            {
+                name:'截止上期累计完成',
+                type:'bar',
+                tooltip : {trigger: 'item',formatter: "{b}  <br/>{a}：{c}元"},
+                stack: '完成',
+                data:[120, 132, 101, 134, 90, 230, 210]
+            },
+            {
+                name:'本期完成计量',
+                type:'bar',
+                tooltip : {trigger: 'item',formatter: "{b}  <br/>{a}：{c}元"},
+                stack: '完成',
+                data:[220, 182, 191, 234, 290, 330, 310]
+            },
+            {
+                name:'完成度',
+                type:'line',
+                tooltip : {trigger: 'axis',formatter: "{b}占总标段<br/>{a}：{c} %"},
+                yAxisIndex: 1,
+                data:[10, 15, 20, 13, 11, 9, 5]
+            },
+        ]
+    };
+
+                    // 为echarts对象加载数据
+                    myChart.setOption(option);
+                    //4 标段期数计量进度//
+                    //3 标段月进度//
+    // 基于准备好的dom，初始化echarts图表
+                    var myChart = echarts.init(document.getElementById('chartContainer3'));
+                    var option = {
+                              color:["#e9af68","#57b7b6"],
+                              title : {
+                                  text: ''
+                              },
+                              tooltip : {
+                                  trigger: 'axis',
+                                  formatter: "{b} <br/>{a}：{c} %<br/>{a1}：{c1} %"
+                              },
+                              legend: {
+                                  data:['截止本月完成','本月完成']
+                              },
+                              toolbox: {
+                                  show : true,
+                                  feature : {
+                                      magicType : {show: true, type: ['line', 'bar']}
+                                  }
+                              },
+        dataZoom : {
+            show : true,
+            start : 50,
+            end : 100
+        },
+        xAxis : [
+            {
+                                      type : 'category',
+                                      boundaryGap : true,
+                data : [
+                    '2月','3月','4月','5月','6月','7月','8月','9月','10月'
+                ]
+            }
+        ],
+        yAxis : [
+                                  {
+                                      type : 'value',
+                                      axisLabel : {
+                                          formatter: '{value} %'
+                                      },
+                                      splitArea : {show : true}
+                                  }
+                              ],
+        series : [
+                                  {
+                                      name:'截止本月完成',
+                                      type:'line',
+                                      itemStyle: {
+                                          normal: {
+                                              lineStyle: {
+                                                  shadowColor : 'rgba(0,0,0,0.4)',
+                                                  shadowBlur: 5,
+                                                  shadowOffsetX: 3,
+                                                  shadowOffsetY: 3
+                                              }
+                                          }
+                                      },
+                                      data:[10, 10, 30, 40, 50, 60, 80, 85, 100]
+                                  },
+                                  {
+                                      name:'本月完成',
+                                      type:'line',
+                                      itemStyle: {
+                                          normal: {
+                                              lineStyle: {
+                                                  shadowColor : 'rgba(0,0,0,0.4)',
+                                                  shadowBlur: 5,
+                                                  shadowOffsetX: 3,
+                                                  shadowOffsetY: 3
+                                              }
+                                          }
+                                      },
+                                      data:[10, 0, 20, 10, 10, 10, 10, 5, 15]
+                                  }
+                              ]
+      };
+                    // 为echarts对象加载数据 
+                    myChart.setOption(option); 
+                    //3 标段月进度//
+        </script>
+            <!--sjs-->
+    <script>
+        $(document).ready(function () {
+        const data = [
+            {
+                单位:'稍等',
+                精度:3,
+            },{
+                单位:'km',
+                精度:3,
+            },{
+                单位:'m',
+                精度:3,
+            },{
+                单位:'m2',
+                精度:3,
+            },{
+                单位:'m3',
+                精度:3,
+            },{
+                单位:'kg',
+                精度:3,
+            },{
+                单位:'个',
+                精度:3,
+            },{
+                单位:'台',
+                精度:3,
+            },{
+                单位:'套',
+                精度:3,
+            },{
+                单位:'棵',
+                精度:3,
+            },{
+                单位:'组',
+                精度:3,
+            },{
+                单位:'总额',
+                精度:3,
+            },{
+                单位:'系统',
+                精度:3,
+            },{
+                单位:'其他未列单位',
+                精度:3,
+            }
+          ];
+          const spread = new GC.Spread.Sheets.Workbook($('#option-spread1')[0], {
+              sheetCount: 1
+          });
+          spread.getActiveSheet().setDataSource(data);
+           spread.options.tabStripVisible = false;
+        })
+    </script>
+</body>
+
+</html>

biaoduan-yufukuan-detail.html

@@ -0,0 +1,416 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no">
+    <meta http-equiv="x-ua-compatible" content="ie=edge">
+    <title>标段概况-计量支付</title>
+    <link rel="stylesheet" href="css/bootstrap/bootstrap.min.css">
+    <link rel="stylesheet" href="css/main.css">
+    <link rel="stylesheet" href="css/font-awesome/font-awesome.min.css">
+    <script src=js/echarts/echarts.min.js></script>
+    <link rel="shortcut icon" href="img/favicon.ico">
+<style>
+</style>
+</head>
+<body>
+    <div class="container">
+        <!--顶部-->
+        <nav class="fixed-top bg-dark">
+            <div class="my-2 d-flex justify-content-between">
+                <span class="text-white ml-3"><a href="biaoduan-panel.html" class="mr-2 text-white"><i class="fa fa-chevron-left"></i> 材料预付款</a></span>
+                <div class="mr-3">
+                    <div class="dropdown">
+                      <button class="btn btn-sm btn-light dropdown-toggle" type="button" data-toggle="dropdown">
+                        张三
+                      </button>
+                      <div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
+                        <a class="dropdown-item" href="#">退出登录</a>
+                      </div>
+                    </div>
+                </div>
+            </div>
+        </nav>
+        <!--标段概况-->
+        <div class="py-6">
+          <!--最新期-->
+          <dl class="mb-2 mt-3">
+            <dt class="bg-light p-2 d-flex justify-content-between"><span>材料预付款-第3期</span><span class="text-warning">王五-监理 审批中</span></dt>
+            <dd>
+              <table class="table table-hover">
+                <tbody>
+                  <tr>
+                    <td>
+                      <p class="mb-0">签约预付款</p>
+                    </td>
+                    <td class="text-right">
+                      <b>100000</b>
+                    </td>
+                  </tr>
+                  <tr>
+                    <td>
+                      <p class="mb-0">本期支付比例</p>
+                    </td>
+                    <td class="text-right">
+                      <b>20%</b>
+                    </td>
+                  </tr>
+                  <tr>
+                    <td>
+                      <p class="mb-0">本期金额</p>
+                    </td>
+                    <td class="text-right">
+                      <b>2000</b>
+                    </td>
+                  </tr>
+                  <tr>
+                    <td>
+                      <p class="mb-0">截止本期金额</p>
+                    </td>
+                    <td class="text-right">
+                      <b>6000</b>
+                    </td>
+                  </tr>
+              </tbody></table>
+            </dd>
+          </dl>
+          <!--审批流程-->
+          <div class="card mt-3">
+            <ul class="list-group list-group-flush">
+              <li class="list-group-item">
+                <span class="text-success pull-right"><small>2017-11-25</small> 上报</span>
+                 <h5 class="card-title"><i class="fa fa-play-circle fa-rotate-90 text-success"></i> 布尔 <small class="text-muted">施工</small></h5>
+              </li>
+              <li class="list-group-item">
+                <span class="text-success pull-right"><small>2017-11-25</small> 审批通过</span>
+                 <h5 class="card-title"><i class="fa fa-chevron-circle-down text-success"></i> 张三 <small class="text-muted">监理</small></h5>
+                 <p class="card-text">审批意见。</p>
+              </li>
+              <li class="list-group-item">
+                <span class="text-success pull-right"><small>2017-11-25</small> 审批通过</span>
+                 <h5 class="card-title"><i class="fa fa-chevron-circle-down text-success"></i> 王五 <small class="text-muted">监理</small></h5>
+                 <p class="card-text">审批意见。</p>
+              </li>
+              <li class="list-group-item">
+                <span class="text-warning pull-right"><small>2017-11-25</small>审批退回 王五</span>
+                 <h5 class="card-title"><i class="fa fa-stop-circle text-warning"></i> 李四 <small class="text-muted">监理</small></h5>
+                 <p class="card-text">审批意见。</p>
+              </li>
+              <li class="list-group-item">
+                <span class="pull-right">审批中</span>
+                 <h5 class="card-title"><i class="fa fa-chevron-circle-down"></i> 王五 <small class="text-muted">监理</small></h5>
+                 <div class="form-group">
+                   <div class="text-center">
+                    <button class="btn btn-success" data-toggle="modal" data-target="#sp-done" >审批通过</button>
+                    <button class="btn btn-warning" data-toggle="modal" data-target="#sp-back" >审批退回</button>
+                  </div>
+                 </div>
+              </li>
+              <li class="list-group-item">
+                 <h5 class="card-title"><i class="fa fa-stop-circle"></i> 李四 <small class="text-muted">监理</small></h5>
+              </li>
+            </ul>
+          </div>
+        </div>
+        <!--底栏菜单-->
+        <nav class="fixed-bottom navbar-dark bg-light border-top">
+          <ul class="nav nav-fill my-2">
+              <li class="nav-item">
+                <a class="nav-link text-muted" href="todo.html"><i class="fa fa-check-square-o"></i> 待审批</a>
+              </li>
+              <li class="nav-item">
+                <a class="nav-link active " href="biaoduan.html"><i class="fa fa-list-ul"></i> 项目</a>
+              </li>
+            </ul>
+        </nav>
+    </div>
+    <!--审批通过弹窗-->
+    <div class="modal" tabindex="-1" role="dialog" id="sp-done">
+      <div class="modal-dialog" role="document">
+        <div class="modal-content">
+          <div class="modal-header">
+            <h5 class="modal-title">审批通过</h5>
+            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
+              <span aria-hidden="true">&times;</span>
+            </button>
+          </div>
+          <div class="modal-body">
+            <div class="form-group">
+               <label>审批意见</label>
+               <textarea class="form-control" rows="8"></textarea>
+             </div>
+          </div>
+          <div class="modal-footer">
+            <button type="button" class="btn btn-secondary" data-dismiss="modal">取消</button>
+            <button type="button" class="btn btn-success">审批通过</button>
+          </div>
+        </div>
+      </div>
+    </div>
+    <!--审批退回弹窗-->
+    <div class="modal" tabindex="-1" role="dialog" id="sp-back">
+      <div class="modal-dialog" role="document">
+        <div class="modal-content">
+          <div class="modal-header">
+            <h5 class="modal-title">审批通过</h5>
+            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
+              <span aria-hidden="true">&times;</span>
+            </button>
+          </div>
+          <div class="modal-body">
+            <div class="form-group">
+               <label>审批意见</label>
+               <textarea class="form-control" rows="8"></textarea>
+             </div>
+             <div class="alert alert-warning">
+                  <div class="custom-control custom-radio custom-control-inline">
+                    <input type="radio" id="customRadioInline1" name="customRadioInline1" class="custom-control-input">
+                    <label class="custom-control-label" for="customRadioInline1">退回上报 布尔</label>
+                  </div>
+                  <div class="custom-control custom-radio custom-control-inline">
+                    <input type="radio" id="customRadioInline2" name="customRadioInline1" class="custom-control-input">
+                    <label class="custom-control-label" for="customRadioInline2">退回上一审批人 张三</label>
+                  </div>
+              </div>
+          </div>
+          <div class="modal-footer">
+            <button type="button" class="btn btn-secondary" data-dismiss="modal">取消</button>
+            <button type="button" class="btn btn-warning">确认退回</button>
+          </div>
+        </div>
+      </div>
+    </div>
+    <!-- JS. -->
+    <script src="js/jquery/jquery-3.2.1.min.js"></script>
+    <script src="js/popper/popper.min.js"></script>
+    <script src="js/bootstrap/bootstrap.min.js"></script>
+    <script src="js/global.js"></script>
+        <script type="text/javascript">
+                    //4 标段期数计量进度//
+                    var myChart = echarts.init(document.getElementById('chartContainer4'));
+                    var option = {
+                      color: ['#e9af68','#57b7b6','#e4575a','#959eac','#6699FF',
+                              '#d38b70','#8fb7cf','#cd5c5c','#ffa500','#40e0d0',
+                              '#1e90ff','#ff6347','#7b68ee','#00fa9a','#ffd700',
+                              '#5c616b','#ff6666','#3cb371','#b8860b','#30e0e0'],
+                              title : {
+                                  text: ''
+                              },
+        tooltip : {
+            trigger: 'axis'
+        },
+        calculable : true,
+        legend: {
+            data:['本期合同计量','本期数量变更计量','截止上期累计完成','本期完成计量','完成度']
+        },
+        dataZoom: [
+               {show: true,start: 0, end: 100}
+          ],
+        xAxis : [
+            {
+                type : 'category',
+                splitLine : {show : true},
+                data : ['第一期','第二期','第三期','第四期','第五期','第六期','第七期']
+            }
+        ],
+        yAxis : [
+            {
+               type : 'value',
+                name : '金额',
+                position:'left',
+                axisLabel : {
+                    formatter: '{value} 元'
+                },
+                splitArea : {show : true}
+            },
+            {
+                type : 'value',
+                name:'完成度',
+                axisLabel : {
+                    formatter: '{value} %'
+                },
+                position: 'right',
+                splitArea : {show : true}
+            }
+        ],
+        series : [
+            {
+                name:'本期合同计量',
+                type:'bar',
+                tooltip : {trigger: 'item',formatter: "{b}  <br/>{a}：{c}元"},
+                stack: '合同',
+                data:[320, 332, 301, 334, 390, 330, 320]
+            },
+            {
+                name:'本期数量变更计量',
+                type:'bar',
+                tooltip : {trigger: 'item',formatter: "{b}  <br/>{a}：{c}元"},
+                stack: '合同',
+                data:[320, -20, 301, 334, 390, 330, 320]
+            },
+            {
+                name:'截止上期累计完成',
+                type:'bar',
+                tooltip : {trigger: 'item',formatter: "{b}  <br/>{a}：{c}元"},
+                stack: '完成',
+                data:[120, 132, 101, 134, 90, 230, 210]
+            },
+            {
+                name:'本期完成计量',
+                type:'bar',
+                tooltip : {trigger: 'item',formatter: "{b}  <br/>{a}：{c}元"},
+                stack: '完成',
+                data:[220, 182, 191, 234, 290, 330, 310]
+            },
+            {
+                name:'完成度',
+                type:'line',
+                tooltip : {trigger: 'axis',formatter: "{b}占总标段<br/>{a}：{c} %"},
+                yAxisIndex: 1,
+                data:[10, 15, 20, 13, 11, 9, 5]
+            },
+        ]
+    };
+
+                    // 为echarts对象加载数据
+                    myChart.setOption(option);
+                    //4 标段期数计量进度//
+                    //3 标段月进度//
+    // 基于准备好的dom，初始化echarts图表
+                    var myChart = echarts.init(document.getElementById('chartContainer3'));
+                    var option = {
+                              color:["#e9af68","#57b7b6"],
+                              title : {
+                                  text: ''
+                              },
+                              tooltip : {
+                                  trigger: 'axis',
+                                  formatter: "{b} <br/>{a}：{c} %<br/>{a1}：{c1} %"
+                              },
+                              legend: {
+                                  data:['截止本月完成','本月完成']
+                              },
+                              toolbox: {
+                                  show : true,
+                                  feature : {
+                                      magicType : {show: true, type: ['line', 'bar']}
+                                  }
+                              },
+        dataZoom : {
+            show : true,
+            start : 50,
+            end : 100
+        },
+        xAxis : [
+            {
+                                      type : 'category',
+                                      boundaryGap : true,
+                data : [
+                    '2月','3月','4月','5月','6月','7月','8月','9月','10月'
+                ]
+            }
+        ],
+        yAxis : [
+                                  {
+                                      type : 'value',
+                                      axisLabel : {
+                                          formatter: '{value} %'
+                                      },
+                                      splitArea : {show : true}
+                                  }
+                              ],
+        series : [
+                                  {
+                                      name:'截止本月完成',
+                                      type:'line',
+                                      itemStyle: {
+                                          normal: {
+                                              lineStyle: {
+                                                  shadowColor : 'rgba(0,0,0,0.4)',
+                                                  shadowBlur: 5,
+                                                  shadowOffsetX: 3,
+                                                  shadowOffsetY: 3
+                                              }
+                                          }
+                                      },
+                                      data:[10, 10, 30, 40, 50, 60, 80, 85, 100]
+                                  },
+                                  {
+                                      name:'本月完成',
+                                      type:'line',
+                                      itemStyle: {
+                                          normal: {
+                                              lineStyle: {
+                                                  shadowColor : 'rgba(0,0,0,0.4)',
+                                                  shadowBlur: 5,
+                                                  shadowOffsetX: 3,
+                                                  shadowOffsetY: 3
+                                              }
+                                          }
+                                      },
+                                      data:[10, 0, 20, 10, 10, 10, 10, 5, 15]
+                                  }
+                              ]
+      };
+                    // 为echarts对象加载数据 
+                    myChart.setOption(option); 
+                    //3 标段月进度//
+        </script>
+            <!--sjs-->
+    <script>
+        $(document).ready(function () {
+        const data = [
+            {
+                单位:'稍等',
+                精度:3,
+            },{
+                单位:'km',
+                精度:3,
+            },{
+                单位:'m',
+                精度:3,
+            },{
+                单位:'m2',
+                精度:3,
+            },{
+                单位:'m3',
+                精度:3,
+            },{
+                单位:'kg',
+                精度:3,
+            },{
+                单位:'个',
+                精度:3,
+            },{
+                单位:'台',
+                精度:3,
+            },{
+                单位:'套',
+                精度:3,
+            },{
+                单位:'棵',
+                精度:3,
+            },{
+                单位:'组',
+                精度:3,
+            },{
+                单位:'总额',
+                精度:3,
+            },{
+                单位:'系统',
+                精度:3,
+            },{
+                单位:'其他未列单位',
+                精度:3,
+            }
+          ];
+          const spread = new GC.Spread.Sheets.Workbook($('#option-spread1')[0], {
+              sheetCount: 1
+          });
+          spread.getActiveSheet().setDataSource(data);
+           spread.options.tabStripVisible = false;
+        })
+    </script>
+</body>
+
+</html>

biaoduan-yufukuan.html

@@ -0,0 +1,471 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no">
+    <meta http-equiv="x-ua-compatible" content="ie=edge">
+    <title>标段概况-计量支付</title>
+    <link rel="stylesheet" href="css/bootstrap/bootstrap.min.css">
+    <link rel="stylesheet" href="css/main.css">
+    <link rel="stylesheet" href="css/font-awesome/font-awesome.min.css">
+    <script src=js/echarts/echarts.min.js></script>
+    <link rel="shortcut icon" href="img/favicon.ico">
+<style>
+</style>
+</head>
+<body>
+    <div class="container">
+        <!--顶部-->
+        <nav class="fixed-top bg-dark">
+            <div class="my-2 d-flex justify-content-between">
+                <span class="text-white ml-3"><a href="biaoduan-panel.html" class="mr-2 text-white"><i class="fa fa-chevron-left"></i> 材料预付款</a></span>
+                <div class="mr-3">
+                    <div class="dropdown">
+                      <button class="btn btn-sm btn-light dropdown-toggle" type="button" data-toggle="dropdown">
+                        张三
+                      </button>
+                      <div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
+                        <a class="dropdown-item" href="#">退出登录</a>
+                      </div>
+                    </div>
+                </div>
+            </div>
+        </nav>
+        <!--标段概况-->
+        <div class="py-6">
+          <ul class="nav nav-tabs nav-fill">
+            <li class="nav-item">
+              <a class="px-1 nav-link ">开工预付款</a>
+            </li>
+            <li class="nav-item">
+              <a class="px-1 nav-link active">材料预付款</a>
+            </li>
+            <li class="nav-item">
+              <a class="px-1 nav-link ">安全生产预付款</a>
+            </li>
+          </ul>
+          <!--最新期-->
+          <dl class="mb-2 mt-3">
+            <dt class="bg-light p-2 d-flex justify-content-between"><span>材料预付款-第3期</span><span class="text-warning">王五-监理 审批中</span></dt>
+            <dd>
+              <table class="table table-hover">
+                <tbody>
+                  <tr>
+                    <td>
+                      <p class="mb-0">签约预付款</p>
+                    </td>
+                    <td class="text-right">
+                      <b>100000</b>
+                    </td>
+                  </tr>
+                  <tr>
+                    <td>
+                      <p class="mb-0">本期支付比例</p>
+                    </td>
+                    <td class="text-right">
+                      <b>20%</b>
+                    </td>
+                  </tr>
+                  <tr>
+                    <td>
+                      <p class="mb-0">本期金额</p>
+                    </td>
+                    <td class="text-right">
+                      <b>2000</b>
+                    </td>
+                  </tr>
+                  <tr>
+                    <td>
+                      <p class="mb-0">截止本期金额</p>
+                    </td>
+                    <td class="text-right">
+                      <b>6000</b>
+                    </td>
+                  </tr>
+                    <tr>
+                      <td colspan="2">
+                        <a class="btn btn-block btn-success" href="biaoduan-yufukuan-detail.html">审批</a>
+                      </td>
+                    </tr>
+              </tbody></table>
+            </dd>
+            <dt class="bg-light p-2 d-flex justify-content-between"><span>材料预付款-第2期</span><span class="text-success">审批完成</span></dt>
+            <dd>
+              <table class="table table-hover">
+                <tbody>
+                  <tr>
+                    <td>
+                      <p class="mb-0">签约预付款</p>
+                    </td>
+                    <td class="text-right">
+                      <b>100000</b>
+                    </td>
+                  </tr>
+                  <tr>
+                    <td>
+                      <p class="mb-0">本期支付比例</p>
+                    </td>
+                    <td class="text-right">
+                      <b>20%</b>
+                    </td>
+                  </tr>
+                  <tr>
+                    <td>
+                      <p class="mb-0">本期金额</p>
+                    </td>
+                    <td class="text-right">
+                      <b>2000</b>
+                    </td>
+                  </tr>
+                  <tr>
+                    <td>
+                      <p class="mb-0">截止本期金额</p>
+                    </td>
+                    <td class="text-right">
+                      <b>6000</b>
+                    </td>
+                  </tr>
+              </tbody></table>
+            </dd>
+            <dt class="bg-light p-2 d-flex justify-content-between"><span>材料预付款-第1期</span><span class="text-success">审批完成</span></dt>
+            <dd>
+              <table class="table table-hover">
+                <tbody>
+                  <tr>
+                    <td>
+                      <p class="mb-0">签约预付款</p>
+                    </td>
+                    <td class="text-right">
+                      <b>100000</b>
+                    </td>
+                  </tr>
+                  <tr>
+                    <td>
+                      <p class="mb-0">本期支付比例</p>
+                    </td>
+                    <td class="text-right">
+                      <b>20%</b>
+                    </td>
+                  </tr>
+                  <tr>
+                    <td>
+                      <p class="mb-0">本期金额</p>
+                    </td>
+                    <td class="text-right">
+                      <b>2000</b>
+                    </td>
+                  </tr>
+                  <tr>
+                    <td>
+                      <p class="mb-0">截止本期金额</p>
+                    </td>
+                    <td class="text-right">
+                      <b>6000</b>
+                    </td>
+                  </tr>
+              </tbody></table>
+            </dd>
+          </dl>
+        </div>
+        <!--底栏菜单-->
+        <nav class="fixed-bottom navbar-dark bg-light border-top">
+          <ul class="nav nav-fill my-2">
+              <li class="nav-item">
+                <a class="nav-link text-muted" href="todo.html"><i class="fa fa-check-square-o"></i> 待审批</a>
+              </li>
+              <li class="nav-item">
+                <a class="nav-link active " href="biaoduan.html"><i class="fa fa-list-ul"></i> 项目</a>
+              </li>
+            </ul>
+        </nav>
+    </div>
+    <!--审批通过弹窗-->
+    <div class="modal" tabindex="-1" role="dialog" id="sp-done">
+      <div class="modal-dialog" role="document">
+        <div class="modal-content">
+          <div class="modal-header">
+            <h5 class="modal-title">审批通过</h5>
+            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
+              <span aria-hidden="true">&times;</span>
+            </button>
+          </div>
+          <div class="modal-body">
+            <div class="form-group">
+               <label>审批意见</label>
+               <textarea class="form-control" rows="8"></textarea>
+             </div>
+          </div>
+          <div class="modal-footer">
+            <button type="button" class="btn btn-secondary" data-dismiss="modal">取消</button>
+            <button type="button" class="btn btn-success">审批通过</button>
+          </div>
+        </div>
+      </div>
+    </div>
+    <!--审批退回弹窗-->
+    <div class="modal" tabindex="-1" role="dialog" id="sp-back">
+      <div class="modal-dialog" role="document">
+        <div class="modal-content">
+          <div class="modal-header">
+            <h5 class="modal-title">审批通过</h5>
+            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
+              <span aria-hidden="true">&times;</span>
+            </button>
+          </div>
+          <div class="modal-body">
+            <div class="form-group">
+               <label>审批意见</label>
+               <textarea class="form-control" rows="8"></textarea>
+             </div>
+             <div class="alert alert-warning">
+                  <div class="custom-control custom-radio custom-control-inline">
+                    <input type="radio" id="customRadioInline1" name="customRadioInline1" class="custom-control-input">
+                    <label class="custom-control-label" for="customRadioInline1">退回上报 布尔</label>
+                  </div>
+                  <div class="custom-control custom-radio custom-control-inline">
+                    <input type="radio" id="customRadioInline2" name="customRadioInline1" class="custom-control-input">
+                    <label class="custom-control-label" for="customRadioInline2">退回上一审批人 张三</label>
+                  </div>
+              </div>
+          </div>
+          <div class="modal-footer">
+            <button type="button" class="btn btn-secondary" data-dismiss="modal">取消</button>
+            <button type="button" class="btn btn-warning">确认退回</button>
+          </div>
+        </div>
+      </div>
+    </div>
+    <!-- JS. -->
+    <script src="js/jquery/jquery-3.2.1.min.js"></script>
+    <script src="js/popper/popper.min.js"></script>
+    <script src="js/bootstrap/bootstrap.min.js"></script>
+    <script src="js/global.js"></script>
+        <script type="text/javascript">
+                    //4 标段期数计量进度//
+                    var myChart = echarts.init(document.getElementById('chartContainer4'));
+                    var option = {
+                      color: ['#e9af68','#57b7b6','#e4575a','#959eac','#6699FF',
+                              '#d38b70','#8fb7cf','#cd5c5c','#ffa500','#40e0d0',
+                              '#1e90ff','#ff6347','#7b68ee','#00fa9a','#ffd700',
+                              '#5c616b','#ff6666','#3cb371','#b8860b','#30e0e0'],
+                              title : {
+                                  text: ''
+                              },
+        tooltip : {
+            trigger: 'axis'
+        },
+        calculable : true,
+        legend: {
+            data:['本期合同计量','本期数量变更计量','截止上期累计完成','本期完成计量','完成度']
+        },
+        dataZoom: [
+               {show: true,start: 0, end: 100}
+          ],
+        xAxis : [
+            {
+                type : 'category',
+                splitLine : {show : true},
+                data : ['第一期','第二期','第三期','第四期','第五期','第六期','第七期']
+            }
+        ],
+        yAxis : [
+            {
+               type : 'value',
+                name : '金额',
+                position:'left',
+                axisLabel : {
+                    formatter: '{value} 元'
+                },
+                splitArea : {show : true}
+            },
+            {
+                type : 'value',
+                name:'完成度',
+                axisLabel : {
+                    formatter: '{value} %'
+                },
+                position: 'right',
+                splitArea : {show : true}
+            }
+        ],
+        series : [
+            {
+                name:'本期合同计量',
+                type:'bar',
+                tooltip : {trigger: 'item',formatter: "{b}  <br/>{a}：{c}元"},
+                stack: '合同',
+                data:[320, 332, 301, 334, 390, 330, 320]
+            },
+            {
+                name:'本期数量变更计量',
+                type:'bar',
+                tooltip : {trigger: 'item',formatter: "{b}  <br/>{a}：{c}元"},
+                stack: '合同',
+                data:[320, -20, 301, 334, 390, 330, 320]
+            },
+            {
+                name:'截止上期累计完成',
+                type:'bar',
+                tooltip : {trigger: 'item',formatter: "{b}  <br/>{a}：{c}元"},
+                stack: '完成',
+                data:[120, 132, 101, 134, 90, 230, 210]
+            },
+            {
+                name:'本期完成计量',
+                type:'bar',
+                tooltip : {trigger: 'item',formatter: "{b}  <br/>{a}：{c}元"},
+                stack: '完成',
+                data:[220, 182, 191, 234, 290, 330, 310]
+            },
+            {
+                name:'完成度',
+                type:'line',
+                tooltip : {trigger: 'axis',formatter: "{b}占总标段<br/>{a}：{c} %"},
+                yAxisIndex: 1,
+                data:[10, 15, 20, 13, 11, 9, 5]
+            },
+        ]
+    };
+
+                    // 为echarts对象加载数据
+                    myChart.setOption(option);
+                    //4 标段期数计量进度//
+                    //3 标段月进度//
+    // 基于准备好的dom，初始化echarts图表
+                    var myChart = echarts.init(document.getElementById('chartContainer3'));
+                    var option = {
+                              color:["#e9af68","#57b7b6"],
+                              title : {
+                                  text: ''
+                              },
+                              tooltip : {
+                                  trigger: 'axis',
+                                  formatter: "{b} <br/>{a}：{c} %<br/>{a1}：{c1} %"
+                              },
+                              legend: {
+                                  data:['截止本月完成','本月完成']
+                              },
+                              toolbox: {
+                                  show : true,
+                                  feature : {
+                                      magicType : {show: true, type: ['line', 'bar']}
+                                  }
+                              },
+        dataZoom : {
+            show : true,
+            start : 50,
+            end : 100
+        },
+        xAxis : [
+            {
+                                      type : 'category',
+                                      boundaryGap : true,
+                data : [
+                    '2月','3月','4月','5月','6月','7月','8月','9月','10月'
+                ]
+            }
+        ],
+        yAxis : [
+                                  {
+                                      type : 'value',
+                                      axisLabel : {
+                                          formatter: '{value} %'
+                                      },
+                                      splitArea : {show : true}
+                                  }
+                              ],
+        series : [
+                                  {
+                                      name:'截止本月完成',
+                                      type:'line',
+                                      itemStyle: {
+                                          normal: {
+                                              lineStyle: {
+                                                  shadowColor : 'rgba(0,0,0,0.4)',
+                                                  shadowBlur: 5,
+                                                  shadowOffsetX: 3,
+                                                  shadowOffsetY: 3
+                                              }
+                                          }
+                                      },
+                                      data:[10, 10, 30, 40, 50, 60, 80, 85, 100]
+                                  },
+                                  {
+                                      name:'本月完成',
+                                      type:'line',
+                                      itemStyle: {
+                                          normal: {
+                                              lineStyle: {
+                                                  shadowColor : 'rgba(0,0,0,0.4)',
+                                                  shadowBlur: 5,
+                                                  shadowOffsetX: 3,
+                                                  shadowOffsetY: 3
+                                              }
+                                          }
+                                      },
+                                      data:[10, 0, 20, 10, 10, 10, 10, 5, 15]
+                                  }
+                              ]
+      };
+                    // 为echarts对象加载数据 
+                    myChart.setOption(option); 
+                    //3 标段月进度//
+        </script>
+            <!--sjs-->
+    <script>
+        $(document).ready(function () {
+        const data = [
+            {
+                单位:'稍等',
+                精度:3,
+            },{
+                单位:'km',
+                精度:3,
+            },{
+                单位:'m',
+                精度:3,
+            },{
+                单位:'m2',
+                精度:3,
+            },{
+                单位:'m3',
+                精度:3,
+            },{
+                单位:'kg',
+                精度:3,
+            },{
+                单位:'个',
+                精度:3,
+            },{
+                单位:'台',
+                精度:3,
+            },{
+                单位:'套',
+                精度:3,
+            },{
+                单位:'棵',
+                精度:3,
+            },{
+                单位:'组',
+                精度:3,
+            },{
+                单位:'总额',
+                精度:3,
+            },{
+                单位:'系统',
+                精度:3,
+            },{
+                单位:'其他未列单位',
+                精度:3,
+            }
+          ];
+          const spread = new GC.Spread.Sheets.Workbook($('#option-spread1')[0], {
+              sheetCount: 1
+          });
+          spread.getActiveSheet().setDataSource(data);
+           spread.options.tabStripVisible = false;
+        })
+    </script>
+</body>
+
+</html>

todo.html

@@ -36,6 +36,47 @@
             <div class="card mb-3">
                 <div class="card-header d-flex justify-content-between">
                     <span>建设项目名称</span>
+                    <span class="badge badge-pill badge-warning">预付款</span>
+                </div>
+                <div class="bg-light p-2 px-3"><b>A1标段</b></div>
+                <div class="card-body">
+                    <div class="d-flex justify-content-between"><span>材料预付款-第1期</span><span></span></div>
+                    <div class="my-2">
+                        <table class="table table-sm table-bordered">
+                            <tr><th>签约预付款</th><td class="text-right">34234</td></tr>
+                            <tr><th>本期支付比例</th><td class="text-right">20%</td></tr>
+                            <tr><th>本期金额</th><td class="text-right">2000</td></tr>
+                            <tr><th>截止上期金额</th><td class="text-right">44234</td></tr>
+                        </table>
+                    </div>
+                    <div class="">
+                        <a href="biaoduan-yufukuan-detail.html" class="btn btn-block btn-success">审批</a>
+                    </div>
+                </div>
+            </div>
+            <div class="card mb-3">
+                <div class="card-header d-flex justify-content-between">
+                    <span>建设项目名称</span>
+                    <span class="badge badge-pill badge-info">台帐修订</span>
+                </div>
+                <div class="bg-light p-2 px-3"><b>A1标段</b></div>
+                <div class="card-body">
+                    <div class="d-flex justify-content-between"><span>第N次修订</span><span>2021-05-26 16:47</span></div>
+                    <div class="my-2">
+                        <table class="table table-sm table-bordered">
+                            <tr><th width="90">修订时间</th><td class="text-right">34234</td></tr>
+                            <tr><th>修订人</th><td class="text-right">20%</td></tr>
+                            <tr><th>修订详情</th><td class="">对方幸福，阿斯顿，阿斯顿，阿斯顿阿斯大声，的 <a href="#">展开更多</a></td></tr>
+                        </table>
+                    </div>
+                    <div class="">
+                        <a href="biaoduan-tzxiuding.html" class="btn btn-block btn-success">审批</a>
+                    </div>
+                </div>
+            </div>
+            <div class="card mb-3">
+                <div class="card-header d-flex justify-content-between">
+                    <span>建设项目名称</span>
                     <span class="badge badge-pill badge-info">计量期</span>
                 </div>
                 <div class="bg-light p-2 px-3"><b>A1标段</b></div>