人材机增加可以切换的双栏

css/main.css

@@ -325,7 +325,7 @@ a{
 .bottom-content .tab-content .ovf-hidden{
     overflow: hidden;
 }
-.tn-nav{
+.tn-nav,.rn-nav{
   width:30px;
   height: 100%;
   border-left:1px solid #dee2e6 ;
@@ -337,6 +337,28 @@ a{
   background:#f7f7f9;
   cursor: pointer;
 }
+.rn-nav {
+  background: #f7f7f9
+}
+.rn-nav .nav{
+  padding: 0
+}
+.rn-nav .nav-tabs {
+  border:none;
+  margin-top:2px;
+}
+.rn-nav .nav-tabs .nav-link{
+  padding:0.2em 0.4em;
+  line-height: 20px
+}
+.rn-nav .nav-tabs .nav-link.active {
+  border:none;
+  background-color: #fff;
+  border-left:1px solid #fff;
+  margin-left:-1px;
+  border-top:1px solid #ccc;
+  border-bottom:1px solid #ccc;
+}
 .form-signin {
     max-width: 500px;
     margin: 150px auto;

zaojiashu.html

@@ -316,7 +316,7 @@
                                                 Some tooltip text!
                                             </div>
                                         </div>
-                                        <div class="message-box box-text-style">
+                                        <!-- <div class="message-box box-text-style">
                                             <div>
                                                 <p>[项目特征]</p>
                                                 <p>1.土石类别:综合考虑（含清表、淤泥、孤石等）</p>
@@ -406,17 +406,17 @@
                                             </div>
                                             <div class="triangle-border tb-border"></div>
                                             <div class="triangle-border tb-background"></div>
-                                        </div>
+                                        </div> -->
                                     </p>
                             </div>
                         </div>
                         <div class="bottom-content">
                             <ul class="nav nav-tabs d-flex" role="tablist">
                                 <li class="nav-item">
-                                    <a class="nav-link active" data-toggle="tab" href="#qdjl" role="tab">清单精灵</a>
+                                    <a class="nav-link" data-toggle="tab" href="#qdjl" role="tab">清单精灵</a>
                                 </li>
                                 <li class="nav-item">
-                                    <a class="nav-link" data-toggle="tab" href="#gl" role="tab">人材机</a>
+                                    <a class="nav-link active" data-toggle="tab" href="#gl" role="tab">人材机</a>
                                 </li>
                                 <li class="nav-item">
                                     <a class="nav-link" data-toggle="tab" href="#fzt" role="tab">附注条件</a>
@@ -442,7 +442,8 @@
                             </ul>
                             <!-- Tab panes -->
                             <div class="tab-content">
-                                <div class="tab-pane active" id="qdjl" role="tabpanel">
+                                <!--清单精灵-->
+                                <div class="tab-pane" id="qdjl" role="tabpanel">
                                     <div class="row">
                                         <div class="col-6">
                                             <div class="main-data-bottom ovf-hidden">
@@ -457,325 +458,56 @@
                                         </div>
                                     </div>
                                 </div>
-                                <div class="tab-pane" id="gl" role="tabpanel">
-                                    <div class="main-data-bottom ovf-hidden">
-                                        <table class="table table-sm table-bordered m-1">
-                                            <thead>
-                                                <th>编号</th>
-                                                <th>名称</th>
-                                                <th>规格</th>
-                                                <th>...</th>
-                                                <th>...</th>
-                                            </thead>
-                                            <tbody>
-                                                <tr>
-                                                    <td>AZ0020</td>
-                                                    <td>综合工日</td>
-                                                    <td></td>
-                                                    <td></td>
-                                                    <td></td>
-                                                </tr>
-                                                <tr>
-                                                    <td>AZ0020</td>
-                                                    <td>综合工日</td>
-                                                    <td></td>
-                                                    <td></td>
-                                                    <td></td>
-                                                </tr>
-                                                <tr>
-                                                    <td>AZ0020</td>
-                                                    <td>综合工日</td>
-                                                    <td></td>
-                                                    <td></td>
-                                                    <td></td>
-                                                </tr>
-                                                <tr>
-                                                    <td>AZ0020</td>
-                                                    <td>综合工日</td>
-                                                    <td></td>
-                                                    <td></td>
-                                                    <td></td>
-                                                </tr>
-                                                <tr>
-                                                    <td>AZ0020</td>
-                                                    <td>综合工日</td>
-                                                    <td></td>
-                                                    <td></td>
-                                                    <td></td>
-                                                </tr>
-                                                <tr>
-                                                    <td>AZ0020</td>
-                                                    <td>综合工日</td>
-                                                    <td></td>
-                                                    <td></td>
-                                                    <td></td>
-                                                </tr>
-                                                <tr>
-                                                    <td>AZ0020</td>
-                                                    <td>综合工日</td>
-                                                    <td></td>
-                                                    <td></td>
-                                                    <td></td>
-                                                </tr>
-                                                <tr>
-                                                    <td>AZ0020</td>
-                                                    <td>综合工日</td>
-                                                    <td></td>
-                                                    <td></td>
-                                                    <td></td>
-                                                </tr>
-                                                <tr>
-                                                    <td>AZ0020</td>
-                                                    <td>综合工日</td>
-                                                    <td></td>
-                                                    <td></td>
-                                                    <td></td>
-                                                </tr>
-                                                <tr>
-                                                    <td>AZ0020</td>
-                                                    <td>综合工日</td>
-                                                    <td></td>
-                                                    <td></td>
-                                                    <td></td>
-                                                </tr>
-                                                <tr>
-                                                    <td>AZ0020</td>
-                                                    <td>综合工日</td>
-                                                    <td></td>
-                                                    <td></td>
-                                                    <td></td>
-                                                </tr>
-                                                <tr>
-                                                    <td>AZ0020</td>
-                                                    <td>综合工日</td>
-                                                    <td></td>
-                                                    <td></td>
-                                                    <td></td>
-                                                </tr>
-                                                <tr>
-                                                    <td>AZ0020</td>
-                                                    <td>综合工日</td>
-                                                    <td></td>
-                                                    <td></td>
-                                                    <td></td>
-                                                </tr>
-                                                <tr>
-                                                    <td>AZ0020</td>
-                                                    <td>综合工日</td>
-                                                    <td></td>
-                                                    <td></td>
-                                                    <td></td>
-                                                </tr>
-                                                <tr>
-                                                    <td>AZ0020</td>
-                                                    <td>综合工日</td>
-                                                    <td></td>
-                                                    <td></td>
-                                                    <td></td>
-                                                </tr>
-                                                <tr>
-                                                    <td>AZ0020</td>
-                                                    <td>综合工日</td>
-                                                    <td></td>
-                                                    <td></td>
-                                                    <td></td>
-                                                </tr>
-                                                <tr>
-                                                    <td>AZ0020</td>
-                                                    <td>综合工日</td>
-                                                    <td></td>
-                                                    <td></td>
-                                                    <td></td>
-                                                </tr>
-                                                <tr>
-                                                    <td>AZ0020</td>
-                                                    <td>综合工日</td>
-                                                    <td></td>
-                                                    <td></td>
-                                                    <td></td>
-                                                </tr>
-                                                <tr>
-                                                    <td>AZ0020</td>
-                                                    <td>综合工日</td>
-                                                    <td></td>
-                                                    <td></td>
-                                                    <td></td>
-                                                </tr>
-                                                <tr>
-                                                    <td>AZ0020</td>
-                                                    <td>综合工日</td>
-                                                    <td></td>
-                                                    <td></td>
-                                                    <td></td>
-                                                </tr>
-                                                <tr>
-                                                    <td>AZ0020</td>
-                                                    <td>综合工日</td>
-                                                    <td></td>
-                                                    <td></td>
-                                                    <td></td>
-                                                </tr>
-                                                <tr>
-                                                    <td>AZ0020</td>
-                                                    <td>综合工日</td>
-                                                    <td></td>
-                                                    <td></td>
-                                                    <td></td>
-                                                </tr>
-                                                <tr>
-                                                    <td>AZ0020</td>
-                                                    <td>综合工日</td>
-                                                    <td></td>
-                                                    <td></td>
-                                                    <td></td>
-                                                </tr>
-                                                <tr>
-                                                    <td>AZ0020</td>
-                                                    <td>综合工日</td>
-                                                    <td></td>
-                                                    <td></td>
-                                                    <td></td>
-                                                </tr>
-                                                <tr>
-                                                    <td>AZ0020</td>
-                                                    <td>综合工日</td>
-                                                    <td></td>
-                                                    <td></td>
-                                                    <td></td>
-                                                </tr>
-                                                <tr>
-                                                    <td>AZ0020</td>
-                                                    <td>综合工日</td>
-                                                    <td></td>
-                                                    <td></td>
-                                                    <td></td>
-                                                </tr>
-                                                <tr>
-                                                    <td>AZ0020</td>
-                                                    <td>综合工日</td>
-                                                    <td></td>
-                                                    <td></td>
-                                                    <td></td>
-                                                </tr>
-                                                <tr>
-                                                    <td>AZ0020</td>
-                                                    <td>综合工日</td>
-                                                    <td></td>
-                                                    <td></td>
-                                                    <td></td>
-                                                </tr>
-                                                <tr>
-                                                    <td>AZ0020</td>
-                                                    <td>综合工日</td>
-                                                    <td></td>
-                                                    <td></td>
-                                                    <td></td>
-                                                </tr>
-                                                <tr>
-                                                    <td>AZ0020</td>
-                                                    <td>综合工日</td>
-                                                    <td></td>
-                                                    <td></td>
-                                                    <td></td>
-                                                </tr>
-                                                <tr>
-                                                    <td></td>
-                                                    <td></td>
-                                                    <td></td>
-                                                    <td></td>
-                                                    <td></td>
-                                                </tr>
-                                                <tr>
-                                                    <td></td>
-                                                    <td></td>
-                                                    <td></td>
-                                                    <td></td>
-                                                    <td></td>
-                                                </tr>
-                                                <tr>
-                                                    <td></td>
-                                                    <td></td>
-                                                    <td></td>
-                                                    <td></td>
-                                                    <td></td>
-                                                </tr>
-                                                <tr>
-                                                    <td></td>
-                                                    <td></td>
-                                                    <td></td>
-                                                    <td></td>
-                                                    <td></td>
-                                                </tr>
-                                                <tr>
-                                                    <td></td>
-                                                    <td></td>
-                                                    <td></td>
-                                                    <td></td>
-                                                    <td></td>
-                                                </tr>
-                                                <tr>
-                                                    <td></td>
-                                                    <td></td>
-                                                    <td></td>
-                                                    <td></td>
-                                                    <td></td>
-                                                </tr>
-                                                <tr>
-                                                    <td></td>
-                                                    <td></td>
-                                                    <td></td>
-                                                    <td></td>
-                                                    <td></td>
-                                                </tr>
-                                                <tr>
-                                                    <td></td>
-                                                    <td></td>
-                                                    <td></td>
-                                                    <td></td>
-                                                    <td></td>
-                                                </tr>
-                                                <tr>
-                                                    <td></td>
-                                                    <td></td>
-                                                    <td></td>
-                                                    <td></td>
-                                                    <td></td>
-                                                </tr>
-                                                <tr>
-                                                    <td></td>
-                                                    <td></td>
-                                                    <td></td>
-                                                    <td></td>
-                                                    <td></td>
-                                                </tr>
-                                                <tr>
-                                                    <td></td>
-                                                    <td></td>
-                                                    <td></td>
-                                                    <td></td>
-                                                    <td></td>
-                                                </tr>
-                                                <tr>
-                                                    <td></td>
-                                                    <td></td>
-                                                    <td></td>
-                                                    <td></td>
-                                                    <td></td>
-                                                </tr>
-                                            </tbody>
-                                        </table>
+                                <!--人材机-->
+                                <div class="tab-pane container-fluid active" id="gl" role="tabpanel">
+                                    <div class="row">
+                                        <div class="col p-0">
+                                            <div class="main-data-bottom ovf-hidden">
+                                                内容
+                                            </div>
+                                        </div>
+                                        <div class="col-4 p-0">
+                                            <div class="tab-content">
+                                                <div class="tab-pane active" id="rnc-xm">
+                                                    <div class="main-data-bottom ovf-hidden">
+                                                    项目特征 内容
+                                                    </div>
+                                                </div>
+                                                <div class="tab-pane" id="rnc-zm">
+                                                    <div class="main-data-bottom ovf-hidden">
+                                                    子目换算 内容
+                                                    </div>
+                                                </div>
+                                                <div class="tab-pane" id="rnc-fz"><div class="main-data-bottom ovf-hidden">
+                                                    辅助定额 内容
+                                                    </div>
+                                                </div>
+                                            </div>
+                                        </div>
+                                        <div class="col-auto p-0">
+                                            <div class="rn-nav d-flex align-items-start flex-column">
+                                                <ul class="nav nav-tabs">
+                                                    <li class="nav-item"><a data-toggle="tab" href="#rnc-xm" role="tab" class="nav-link active">项目特征</a></li>
+                                                    <li class="nav-item"><a data-toggle="tab" href="#rnc-zm" role="tab"class="nav-link">子目换算</a></li>
+                                                    <li class="nav-item"><a data-toggle="tab" href="#rnc-fz" role="tab"class="nav-link">辅助定额</a></li>
+                                                </ul>
+                                            </div>
+                                        </div>
                                     </div>
                                 </div>
+                                <!--附注条件-->
                                 <div class="tab-pane" id="fzt" role="tabpanel">
                                     <div class="main-data-bottom">
                                         附注条件的内容
                                     </div>
                                 </div>
+                                <!--辅助定额-->
                                 <div class="tab-pane" id="fzd" role="tabpanel">
                                     <div class="main-data-bottom">
                                         辅助定额的内容
                                     </div>
                                 </div>
+                                <!--安装增加费-->
                                 <div class="tab-pane" id="az" role="tabpanel">
                                     <div class="main-data-bottom">
                                         <table class="table table-sm table-bordered m-0">
@@ -823,6 +555,7 @@
                                         </table>
                                     </div>
                                 </div>
+                                <!--工程量明细-->
                                 <div class="tab-pane" id="gc" role="tabpanel">
                                     <div class="main-data-bottom">
                                         <table class="table table-sm table-bordered m-0">
@@ -845,16 +578,19 @@
                                         </table>
                                     </div>
                                 </div>
+                                <!--计算程序-->
                                 <div class="tab-pane" id="dj" role="tabpanel">
                                     <div class="main-data-bottom">
                                         计算程序的内容
                                     </div>
                                 </div>
+                                <!--说明信息-->
                                 <div class="tab-pane" id="sm" role="tabpanel">
                                     <div class="main-data-bottom">
                                         <textarea class="form-control" id="exampleTextarea" rows="8" readonly="">分项说明的内容，定额说明的内容</textarea>
                                     </div>
                                 </div>
+                                <!--特征及内容-->
                                 <div class="tab-pane" id="tenr" role="tabpanel">
                                     <div class="row">
                                         <div class="col">
@@ -871,7 +607,7 @@
                                             </div>
                                         </div>
                                         <!--打开添加规则后 col-6 修改为col-4 -->
-                                        <div class="col-6">
+                                        <div class="col-4">
                                             <div class="main-data-bottom">
                                                 项目特征
                                             </div>
@@ -890,7 +626,7 @@
                                                 <i class="fa fa-arrow-left mt-auto mb-3 text-primary ml-2"></i>
                                             </div>
                                         </div>
-                                        <!-- <div class="col-4">
+                                        <div class="col-4">
                                         <div class="main-data-bottom">
                                           <div class="container-fluid my-2">
                                             <div class="mb-2 d-flex justify-content-between"><span>排版规则</span><a href="#"><i class="fa fa-arrow-right" data-toggle="tooltip" data-placement="bottom" title="" data-original-title="收起排版规则"></i></a></div>
@@ -940,7 +676,7 @@
                                             </div>
                                           </div>
                                         </div>
-                                      </div> -->
+                                      </div>
                                     </div>
                                 </div>
                             </div>