书签批注

css/main.css

@@ -503,4 +503,26 @@ background-color: #f7f7f9;
 }
 .navbar-crumb .f-nav li.focus .s-nav{
   display: block
+}
+/*书签颜色*/
+.annotate-color-1{
+  background: #E2F2C5
+}
+.annotate-color-2{
+  background: #F9E2CF
+}
+.annotate-color-3{
+  background: #F2EFD9
+}
+.annotate-color-4{
+  background: #F5D1DA
+}
+.annotate-color-5{
+  background: #E3E3E3
+}
+.annotate-color-6{
+  background: #B6F3F2
+}
+.annotate-color-7{
+  background: #ECE0F5
 }

zaojiashu.html

@@ -273,20 +273,20 @@
                 <div class="side-tabs">
                     <ul class="nav nav-tabs" role="tablist">
                         <li class="nav-item">
-                            <a class="nav-link active px-3" data-toggle="tab" href="#sc" role="tab">查找定位</a>
-                        </li>
-                        <li class="nav-item">
-                            <a class="nav-link px-3" data-toggle="tab" href="#mbk" role="tab">模板库</a>
-                        </li>
-                        <li class="nav-item">
                             <a class="nav-link px-3" data-toggle="tab" href="#zy" role="tab">清单指引</a>
                         </li>
                         <li class="nav-item">
-                            <a class="nav-link px-3" data-toggle="tab" href="#qd" role="tab">清单规则</a>
-                        </li>
-                        <li class="nav-item">
                             <a class="nav-link px-3" data-toggle="tab" href="#de" role="tab">定额库</a>
                         </li>
+                        <li class="nav-item dropdown">
+                            <a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">更多</a>
+                            <div class="dropdown-menu">
+                              <a class="dropdown-item" data-toggle="tab" href="#sc" role="tab">查找定位</a>
+                              <a class="dropdown-item" data-toggle="tab" href="#mbk" role="tab">模板库</a>
+                              <a class="dropdown-item" data-toggle="tab" href="#qd" role="tab">清单规则</a>
+                              <a class="dropdown-item" data-toggle="tab" href="#sqpz" role="tab">书签批注</a>
+                            </div>
+                          </li>
                     </ul>
                 </div>
             </div>
@@ -927,7 +927,7 @@
                     </div>
                     <div class="main-side col-lg-4 p-0">
                         <div class="tab-content">
-                            <!--清单指引-->
+                            <!--模板库-->
                             <div class="tab-pane" id="mbk" role="tabpanel">
                                 <div class="sidebar-tools-bar container-fluid tools-bar-height-z">
                                     <div class="p-1 row">
@@ -1395,6 +1395,78 @@
                                     22
                                 </div> -->
                             </div>
+                            <!--书签批注-->
+                            <div class="tab-pane active" id="sqpz" role="tabpanel">
+                                <div class="sidebar-tools-bar container-fluid tools-bar-height-q">
+                                    <div class="p-1 row">
+                                        <div class="dropdown">
+                                          <button class="btn btn-sm btn-primary dropdown-toggle" type="button" data-toggle="dropdown">
+                                            书签设置
+                                          </button>
+                                          <form class="dropdown-menu p-2">
+                                                <div class="input-group input-group-sm mb-2" style="width:200px">
+                                                      <div class="input-group-prepend">
+                                                        <span class="input-group-text annotate-color-1">&nbsp;&nbsp;&nbsp;&nbsp;</span>
+                                                      </div>
+                                                      <input type="text" class="form-control" placeholder="描述">
+                                                    </div>
+                                                <div class="input-group input-group-sm mb-2">
+                                                      <div class="input-group-prepend">
+                                                        <span class="input-group-text annotate-color-2">&nbsp;&nbsp;&nbsp;&nbsp;</span>
+                                                      </div>
+                                                      <input type="text" class="form-control" placeholder="描述">
+                                                    </div>
+                                                <div class="input-group input-group-sm mb-2">
+                                                      <div class="input-group-prepend">
+                                                        <span class="input-group-text annotate-color-3">&nbsp;&nbsp;&nbsp;&nbsp;</span>
+                                                      </div>
+                                                      <input type="text" class="form-control" placeholder="描述">
+                                                    </div>
+                                                <div class="input-group input-group-sm mb-2">
+                                                      <div class="input-group-prepend">
+                                                        <span class="input-group-text annotate-color-4">&nbsp;&nbsp;&nbsp;&nbsp;</span>
+                                                      </div>
+                                                      <input type="text" class="form-control" placeholder="描述">
+                                                    </div>
+                                                <div class="input-group input-group-sm mb-2">
+                                                      <div class="input-group-prepend">
+                                                        <span class="input-group-text annotate-color-5">&nbsp;&nbsp;&nbsp;&nbsp;</span>
+                                                      </div>
+                                                      <input type="text" class="form-control" placeholder="描述">
+                                                    </div>
+                                                <div class="input-group input-group-sm mb-2">
+                                                      <div class="input-group-prepend">
+                                                        <span class="input-group-text annotate-color-6">&nbsp;&nbsp;&nbsp;&nbsp;</span>
+                                                      </div>
+                                                      <input type="text" class="form-control" placeholder="描述">
+                                                    </div>
+                                                <div class="input-group input-group-sm mb-2">
+                                                      <div class="input-group-prepend">
+                                                        <span class="input-group-text annotate-color-7">&nbsp;&nbsp;&nbsp;&nbsp;</span>
+                                                      </div>
+                                                      <input type="text" class="form-control" placeholder="描述">
+                                                    </div>
+                                              <button type="submit" class="btn btn-sm btn-primary">确定</button>
+                                          </form>
+                                        </div>
+                                    </div>
+                                </div>
+                                <!--上下结构-->
+                                <div class="main-data-side-q">
+                                    <table class="table table-sm table-bordered">
+                                        <tr><th>序号</th><th>编码</th><th>书签名称</th></tr>
+                                        <tr><td>1</td><td>040303002001</td><td>混凝土基础</td></tr>
+                                        <tr><td>2</td><td>040303005001</td><td>混凝土墩(台)身</td></tr>
+                                    </table>
+                                </div>
+                                <div class="sidebar-bottom container-fluid">
+                                    <div class="row">
+                                        <div class="col-lg-12">
+                                            <textarea class="form-control" id="exampleTextarea" rows="8" >批注内容</textarea>
+                                        </div>
+                                    </div>
+                                </div>
+                            </div>
                         </div>
                     </div>
                 </div>