分享增加 最近分享及联系人

css/main.css

@@ -734,4 +734,69 @@ text-overflow: ellipsis;
 white-space: nowrap;
 max-width:80px;
 }
+}
+/*联系人列表*/
+.book-list{
+  list-style: none;
+  padding:0;
+  margin:0;
+  height:285px;
+  overflow-y: auto;
+}
+.book-list li{
+  padding:8px 10px 8px 60px;
+  position: relative;
+}
+.book-list li:hover{
+  background:#f2f2f2;
+  cursor: pointer;
+}
+.book-list li .avatar{
+  position: absolute;
+  left:10px;
+  height:40px;
+  line-height: 40px;
+  text-align: center;
+  width:40px;
+  background:#999;
+  color:#fff;
+  border-radius: 30px
+}
+.book-list li .avatar.bg-1{
+  background:rgb(16,109,156)
+}
+.book-list li .avatar.bg-2{
+  background:rgb(90,146,173)
+}
+.book-list li .avatar.bg-3{
+  background:rgb(150,164,139)
+}
+.book-list li .avatar.bg-4{
+  background:rgb(216,202,175)
+}
+.book-list li .avatar.bg-5{
+  background:rgb(201,192,211)
+}
+.book-list li .avatar.bg-6{
+  background:rgb(61,89,171)
+}
+.book-list li .avatar.bg-7{
+  background:rgb(243,203,211)
+}
+.book-list li .avatar.bg-8{
+  background:rgb(181,196,177)
+}
+.book-list li .avatar.bg-9{
+  background:rgb(150,84,84)
+}
+.book-list li .avatar.bg-0{
+  background:rgb(191,191,191)
+}
+.book-list li .book-body{
+  color:#666;
+}
+.book-list li .book-body h5{
+  font-size: 16px;
+  margin-bottom:0;
+  color:#333;
 }

project-management.html

@@ -1025,40 +1025,165 @@
     </div>
     <!--弹出分享-->
     <div class="modal fade" id="share" data-backdrop="static">
-        <div class="modal-dialog" role="document">
+        <div class="modal-dialog modal-lg" role="document">
             <div class="modal-content">
                 <div class="modal-header">
-                  <h5 class="modal-title">分享</h5>
+                  <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>
-                      <input class="form-control" placeholder="输入对方手机号" type="text">
-                      <span class="form-text text-danger">账号不存在。</span>
-                      <span class="form-text text-danger">已与该用户分享。</span>
-                  </div>
-                  <div class="card">
-                      <div class="card-body">
-                        <h4 class="card-title">张三</h4>
-                        <h6 class="card-subtitle mb-2 text-muted">珠海纵横创新软件有限公司</h6>
-                      </div>
-                      <ul class="list-group list-group-flush">
-                        <li class="list-group-item" data-toggle="tooltip" data-placement="bottom" title="" data-original-title="通行账号手机"><i class="fa fa-tablet"></i> 15812644017</li>
-                        <li class="list-group-item" data-toggle="tooltip" data-placement="bottom" title="" data-original-title="通行账号邮箱"><i class="fa fa-envelope-o "></i> 0756-3850891</li>
-                      </ul>
-                  </div>
-                  <div class="form-group mt-3">
-                    <p>分享后，该用户仅可查阅工程，不具备任何编辑修改功能。</p>
+                      <div class="input-group input-group-sm">
+                        <input id="sharePhone" type="text" class="form-control" placeholder="输入 手机号 添加分享" autofocus="autofocus">
+                        <div class="input-group-append">
+                              <a class="btn btn-outline-secondary dropdown-toggle" href="#" role="button" id="dropdownMenuBook">
+                                最新分享
+                              </a>
+                              <div class="dropdown-menu dropdown-menu-right" aria-labelledby="dropdownMenuBook" style="width: 250px;">
+                                <div class="">
+                                    <ul class="nav nav-tabs nav-fill mx-1">
+                                        <li class="nav-item">
+                                            <a class="nav-link active" id="zuijin-tab" data-toggle="tab" href="#zuijin" role="tab" aria-controls="zuijin" aria-selected="true">最近分享</a>
+                                          </li>
+                                          <li class="nav-item">
+                                            <a class="nav-link" id="lianxi-tab" data-toggle="tab" href="#lianxi" role="tab" aria-controls="lianxi" aria-selected="false">联系人</a>
+                                          </li>
+                                    </ul>
+                                    <div class="tab-content" id="myTabContent">
+                                      <div class="tab-pane fade show active" id="zuijin" role="tabpanel" aria-labelledby="zuijin-tab">
+                                        <!--最近分享5个人-->
+                                        <ul class="book-list">
+                                            <li>
+                                                <span class="avatar bg-8">润隆</span>
+                                                <div class="book-body">
+                                                    <h5 class="mt-0" title="某某有限公司">张润隆</h5>
+                                                    15800000008
+                                                </div>
+                                            </li>
+                                            <li>
+                                                <span class="avatar bg-3">李旭</span>
+                                                <div class="book-body">
+                                                    <h5 class="mt-0" title="某某有限公司">李旭</h5>
+                                                    15800000003
+                                                </div>
+                                            </li>
+                                            <li>
+                                                <span class="avatar bg-9">佳玫</span>
+                                                <div class="book-body">
+                                                    <h5 class="mt-0" title="某某有限公司">张佳玫</h5>
+                                                    15800000009
+                                                </div>
+                                            </li>
+                                            <li>
+                                                <span class="avatar bg-4">伽淼</span>
+                                                <div class="book-body">
+                                                    <h5 class="mt-0" title="某某有限公司">李伽淼</h5>
+                                                    15800000004
+                                                </div>
+                                            </li>
+                                            <li>
+                                                <span class="avatar bg-7">白尔</span>
+                                                <div class="book-body">
+                                                    <h5 class="mt-0" title="某某有限公司">张白尔</h5>
+                                                    15800000007
+                                                </div>
+                                            </li>
+                                        </ul>
+                                      </div>
+                                      <div class="tab-pane fade" id="lianxi" role="tabpanel" aria-labelledby="lianxi-tab">
+                                          <ul class="book-list">
+                                            <li>
+                                                <span class="avatar bg-0">桐杉</span>
+                                                <div class="book-body">
+                                                    <h5 class="mt-0" title="某某有限公司">陈桐杉</h5>
+                                                    15800000000
+                                                </div>
+                                            </li>
+                                            <li>
+                                                <span class="avatar bg-1">迎华</span>
+                                                <div class="book-body">
+                                                    <h5 class="mt-0" title="某某有限公司">陈迎华</h5>
+                                                    15800000001
+                                                </div>
+                                            </li>
+                                            <li>
+                                                <span class="avatar bg-2">木贤</span>
+                                                <div class="book-body">
+                                                    <h5 class="mt-0" title="某某有限公司">黄木贤</h5>
+                                                    15800000002
+                                                </div>
+                                            </li>
+                                            <li>
+                                                <span class="avatar bg-3">李旭</span>
+                                                <div class="book-body">
+                                                    <h5 class="mt-0" title="某某有限公司">李旭</h5>
+                                                    15800000003
+                                                </div>
+                                            </li>
+                                            <li>
+                                                <span class="avatar bg-4">伽淼</span>
+                                                <div class="book-body">
+                                                    <h5 class="mt-0" title="某某有限公司">李伽淼</h5>
+                                                    15800000004
+                                                </div>
+                                            </li>
+                                            <li>
+                                                <span class="avatar bg-5">川汉</span>
+                                                <div class="book-body">
+                                                    <h5 class="mt-0" title="某某有限公司">李川汉</h5>
+                                                    15800000005
+                                                </div>
+                                            </li>
+                                            <li>
+                                                <span class="avatar bg-6">石宝</span>
+                                                <div class="book-body">
+                                                    <h5 class="mt-0" title="某某有限公司">李石宝</h5>
+                                                    15800000006
+                                                </div>
+                                            </li>
+                                            <li>
+                                                <span class="avatar bg-7">白尔</span>
+                                                <div class="book-body">
+                                                    <h5 class="mt-0">张白尔</h5>
+                                                    15800000007
+                                                </div>
+                                            </li>
+                                            <li>
+                                                <span class="avatar bg-8">润隆</span>
+                                                <div class="book-body">
+                                                    <h5 class="mt-0" title="某某有限公司">张润隆</h5>
+                                                    15800000008
+                                                </div>
+                                            </li>
+                                            <li>
+                                                <span class="avatar bg-9">佳玫</span>
+                                                <div class="book-body">
+                                                    <h5 class="mt-0" title="某某有限公司">张佳玫</h5>
+                                                    15800000009
+                                                </div>
+                                            </li>
+                                        </ul>
+                                      </div>
+                                    </div>
+                                </div>
+                              </div>
+                        </div>
+                    </div>
                   </div>
-                  <div class="form-check">
-                     <input type="checkbox" class="form-check-input" id="exampleCheck1">
-                     <label class="form-check-label" for="exampleCheck1">允许该用户拷贝该工程</label>
-                     <!--打勾后出现提示-->
-                     <div id="emailHelp" class="form-text text-danger"><i class="fa fa-exclamation-triangle"></i> 该用户可以把你的项目拷贝成为他的数据，请谨慎勾选。 </div>
-                   </div>
+                  <legend>已分享</legend>
+                  <table class="table table-sm">
+                    <tr>
+                      <th style="width: 112px;">姓名</th>
+                      <th style="width: 165px;">公司</th>
+                      <th style="width: 136px;">手机</th>
+                      <th style="width: 136px;">邮箱</th>
+                      <th style="width: 90px;">允许拷贝</th>
+                      <th style="width: 90px;">允许编辑</th>
+                      <th style="width: 90px;">取消分享</th>
+                   </tr>
+                  </table>
                 </div>
                 <div class="modal-footer">
                     <button type="button" class="btn btn-secondary" data-dismiss="modal">取消</button>
@@ -1067,58 +1192,6 @@
             </div>
         </div>
     </div>
-    <!--弹出分享文件夹-->
-    <div class="modal fade" id="share2" data-backdrop="static">
-        <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>
-                      <input class="form-control" placeholder="输入对方手机号" type="text">
-                      <span class="form-text text-danger">账号不存在。</span>
-                      <span class="form-text text-danger">已与该用户分享。</span>
-                  </div>
-                  <div class="card">
-                      <div class="card-body">
-                        <h4 class="card-title">张三</h4>
-                        <h6 class="card-subtitle mb-2 text-muted">珠海纵横创新软件有限公司</h6>
-                      </div>
-                      <ul class="list-group list-group-flush">
-                        <li class="list-group-item" data-toggle="tooltip" data-placement="bottom" title=""><i class="fa fa-tablet"></i> 15812644017</li>
-                        <li class="list-group-item" data-toggle="tooltip" data-placement="bottom" title=""><i class="fa fa-envelope-o "></i> 0756-3850891</li>
-                        <li class="list-group-item" data-toggle="tooltip" data-placement="bottom" title="">
-                            <div class="form-group my-1">
-                                <p class="m-0">分享后，该用户仅可查阅工程，不具备任何编辑修改功能。</p>
-                            </div>
-                              <div class="form-check mb-2">
-                                 <input type="checkbox" class="form-check-input" id="exampleCheck1">
-                                 <label class="form-check-label" for="exampleCheck1">允许该用户拷贝该工程</label>
-                                 <!--打勾后出现提示-->
-                                 <div id="emailHelp" class="form-text text-danger"><i class="fa fa-exclamation-triangle"></i> 该用户可以把你的项目拷贝成为他的数据，请谨慎勾选。 </div>
-                               </div>
-                            <a class="btn btn-sm btn-primary" href=""><i class="fa fa-plus"></i> 添加</a>
-                        </li>
-                      </ul>
-                  </div>
-                  <div class="form-group mt-3">
-                    <p>确认分享 <b>文件夹</b> 给</p>
-                    <p><h4><span class="badge badge-light mr-3">张三(15812644017) <a href="" class="text-danger" title="移除分享"><i class="fa fa-remove"></i></a></span>
-                        <span class="badge badge-light mr-3">王五(15812644017) <a href="" class="text-danger" title="移除分享"><i class="fa fa-remove"></i></a></span></h4></p>
-                  </div>
-                </div>
-                <div class="modal-footer">
-                    <button type="button" class="btn btn-secondary" data-dismiss="modal">取消</button>
-                    <a href="#" class="btn btn-primary">确认分享</a>
-                </div>
-            </div>
-        </div>
-    </div>
     <!--弹出协同-->
     <div class="modal fade" id="synergy" data-backdrop="static">
         <div class="modal-dialog" role="document">
@@ -1522,4 +1595,7 @@
 <script type="text/javascript">
     autoFlashHeight();
 </script>
+<script type="text/javascript">
+    $('#dropdownMenuBook').dropdown()
+</script>
 </html>