ConstructionCost/web/common/components/share/index.html

<div class="modal fade" id="share" data-backdrop="static">
    <div class="modal-dialog modal-lg" 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="row justify-content-center">
                    <div class="form-group col-6 ">
                        <div class="input-group input-group-sm">
                            <input id="sharePhone" type="text" class="form-control" placeholder="输入 手机号 添加分享" autofocus="autofocus">
                            <div class="btn-group btn-group-sm ml-1">
                                <a class="btn btn-primary dropdown-toggle" href="#" role="button" id="dropdownMenuBook2">
                                    联系人
                                </a>
                                <div class="dropdown-menu dropdown-menu-right" aria-labelledby="dropdownMenuBook2" style="width: 250px;">
                                    <div class="">
                                        <ul class="book-list">
                                            <li>C</li>
                                            <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>H</li>
                                            <li>
                                                <span class="avatar bg-2">木贤</span>
                                                <div class="book-body">
                                                    <h5 class="mt-0" title="某某有限公司">黄木贤</h5>
                                                    15800000002
                                                </div>
                                            </li>
                                            <li>L</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>Z</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 class="row">
                    <div class="col-3">
                        <legend>最近分享</legend>
                        <!--最近分享-->
                        <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="col-9">
                    
                <!--搜索结果-->
                <ul class="book-list my-3" style="height:auto">
                    <li class="card mb-1">
                        <div class="card-body p-1 row m-0">
                            <span class="avatar bg-8">伽淼</span>
                            <!--姓名手机-->
                            <div class="book-body col-auto pl-0">
                                <h5 class="mt-0">李伽淼</h5>
                                15800000004
                            </div>
                            <!--公司-->
                            <div class="col-5">珠海纵横创新软件有限公司</div>
                            <!--操作-->
                            <div class="col ml-auto p-0">
                                <div class="d-flex justify-content-end">
                                    <div>
                                        <div class="custom-control custom-checkbox">
                                            <input type="checkbox" class="custom-control-input" id="customCheck1" checked="">
                                            <label class="custom-control-label" for="customCheck1">允许拷贝</label>
                                        </div>
                                        <div class="custom-control custom-checkbox">
                                            <input type="checkbox" class="custom-control-input" id="customCheck2" checked="">
                                            <label class="custom-control-label" for="customCheck2">允许编辑</label>
                                        </div>
                                    </div>
                                    <div class="ml-3 d-flex align-items-center"><button class="btn btn-sm btn-primary">分享给Ta</button></div>
                                </div>
                            </div>
                            <!--提示信息-->
                            <!-- <div class="col-12">
                                <p class="text-danger mb-0">允许拷贝，用户可以对您分享的项目进行拷贝复制。</p>
                                <p class="text-danger mb-0">允许编辑，用户可以对您分享的项目进行任意编辑修改，请谨慎开启。</p>
                            </div> -->
                        </div>
                    </li>
                </ul>
                <!--已分享列表-->
                <legend>已分享</legend>
                <ul class="book-list" style="max-height: 250px">
                    <li class="card mb-1">
                        <div class="card-body p-1 row m-0">
                            <span class="avatar bg-8">润隆</span>
                            <!--姓名手机-->
                            <div class="book-body col-auto pl-0">
                                <h5 class="mt-0">张润隆</h5>
                                15800000008
                            </div>
                            <!--公司-->
                            <div class="col-5">珠海纵横创新软件有限公司</div>
                            <!--操作-->
                            <div class="col ml-auto p-0">
                            <div class="d-flex justify-content-end">
                                <div>
                                    <div class="custom-control custom-checkbox">
                                        <input type="checkbox" class="custom-control-input" id="customCheck3" checked="">
                                        <label class="custom-control-label" for="customCheck3">允许拷贝</label>
                                    </div>
                                    <div class="custom-control custom-checkbox">
                                        <input type="checkbox" class="custom-control-input" id="customCheck4">
                                        <label class="custom-control-label" for="customCheck4">允许编辑</label>
                                    </div>
                                </div>
                                <div class="ml-3 d-flex align-items-center"><button class="btn btn-sm btn-outline-danger">取消分享</button></div>
                                </div>
                            </div>
                        </div>
                    </li>
                    <li class="card mb-1">
                        <div class="card-body p-1 row m-0">
                            <span class="avatar bg-7">白尔</span>
                            <!--姓名手机-->
                            <div class="book-body col-auto pl-0">
                                <h5 class="mt-0">张白尔</h5>
                                15800000007
                            </div>
                            <!--公司-->
                            <div class="col-5">珠海纵横创新软件有限公司</div>
                            <!--操作-->
                            <div class="col ml-auto p-0">
                            <div class="d-flex justify-content-end">
                                <div>
                                    <div class="custom-control custom-checkbox">
                                      <input type="checkbox" class="custom-control-input" id="customCheck5">
                                      <label class="custom-control-label" for="customCheck5">允许拷贝</label>
                                    </div>
                                    <div class="custom-control custom-checkbox">
                                      <input type="checkbox" class="custom-control-input" id="customCheck6">
                                      <label class="custom-control-label" for="customCheck6">允许编辑</label>
                                    </div>
                                </div>
                                <div class="ml-3 d-flex align-items-center"><button class="btn btn-sm btn-outline-danger">取消分享</button></div>
                                </div>
                            </div>
                        </div>
                    </li>
                    </ul>
                    </div>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal">关闭</button>
            </div>
        </div>
    </div>
</div>