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="share-phone" 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="contacts-dropdown">
                                    联系人
                                </a>
                                <div class="dropdown-menu dropdown-menu-right" aria-labelledby="contacts-dropdown" style="width: 250px;" id="contacts-menue">
                                    <div class="">
                                        <ul class="book-list" id="contacts">
                                        </ul>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="row">
                    <div class="col-3">
                        <legend>最近分享</legend>
                        <!--最近分享-->
                        <ul class="book-list" id="recent-share">
                        </ul>
                    </div>
                    <div class="col-9">
                <!-- 搜索提示 -->
                <p class="text-danger" id="share-hint"></p>    
                <!--搜索结果-->
                <ul class="book-list my-3" style="height:auto" id="share-search-result">
                </ul>
                <!--已分享列表-->
                <legend>已分享</legend>
                <ul class="book-list" style="max-height: 250px" id="shared-list">
                    </ul>
                    </div>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal">关闭</button>
            </div>
        </div>
    </div>
</div>