<div class="historymsg">
    <div id="head">
        <div class="input-group">
            <input type="text" class="form-control input-sm" aria-label="..." placeholder="搜索关键字. . ." ng-model="keyWords">
            <div class="input-group-btn">
                <button type="button" class="btn btn-default" ng-click="searchMsg()">查找</button>
                <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                    <span class="caret"></span>
                    <span class="sr-only">Toggle Dropdown</span>
                </button>
                <ul class="dropdown-menu">
                    <li><a href="#" ng-click="activeClick($event)"><span class="glyphicon glyphicon-ok active"></span> 全部</a></li>
                    <li><a href="#" ng-click="activeClick($event)"><span class="glyphicon glyphicon-ok active hid"></span> 最近一周</a></li>
                    <li><a href="#" ng-click="activeClick($event)"><span class="glyphicon glyphicon-ok active hid"></span> 最近一个月</a></li>
                </ul>
            </div>
        </div>
        <div class="selectData">
            <span>搜索范围</span>
            <select class="form-control input-sm" ng-change="onSelectedChange()" ng-model="searchArea">
                <option>全部</option>
                <option>最近联系人</option>
                <option>单位部门</option>
                <option>群组</option>
                <option>手机短信</option>
                <option>系统消息</option>
            </select>
        </div>
        <button type="button" class="glyphicon glyphicon-refresh" title="重置" ng-click="onRefresh($event)"></button>
    </div>
    <div style="border-top:solid 1px #ddd;"></div>
    <div id="leftTab">
        <ul class="nav nav-pills slide nav-stacked">
            <li role="presentation" class="active"><a class="slip" ng-click="animate($event)" href="#recentContacts" aria-controls="home" role="tab" data-toggle="tab"><span>最近联系人</span></a></li>
            <li role="presentation"><a class="slip" ng-click="animate($event)" href="#units" aria-controls="home" role="tab" data-toggle="tab"><span>单位部门</span></a></li>
            <li role="presentation"><a class="slip" ng-click="animate($event)" href="#groups" aria-controls="home" role="tab" data-toggle="tab"><span>群组</span></a></li>
            <li role="presentation"><a class="slip" ng-click="animate($event)" href="#others" aria-controls="home" role="tab" data-toggle="tab"><span>其他</span></a></li>
        </ul>
    </div>
    <div id="box" style="margin-left:150px;position:relative;">
        <div class="tab-content">
            <div role="tabpanel" class="tab-pane active" id="recentContacts">
                <ul>
                    <li class="Li" ng-click="actived($event)">
                        <label class="lf">
                        <img src="../img/自己头像1.png"><span>杭州测试王巧巧杭州测试王巧巧ls_wqq)</span>
                    </label>
                    </li>
                    <li class="Li" ng-click="actived($event)">
                        <label class="lf">
                        <img src="../img/自己头像1.png"><span>郑连根</span>
                    </label>
                    </li>
                    <li class="Li" ng-click="actived($event)">
                        <label class="lf">
                        <img src="../img/自己头像1.png"><span>郑连根</span>
                    </label>
                    </li>
                    <li class="Li" ng-click="actived($event)">
                        <label class="lf">
                        <img src="../img/自己头像1.png"><span>郑连根</span>
                    </label>
                    </li>
                    <li class="Li" ng-click="actived($event)">
                        <label class="lf">
                        <img src="../img/自己头像1.png"><span>郑连根</span>
                    </label>
                    </li>
                    <li class="Li" ng-click="actived($event)">
                        <label class="lf">
                        <img src="../img/自己头像1.png"><span>杭州测试王巧巧(ls_wqq)</span>
                    </label>
                    </li>
                    <li class="Li" ng-click="actived($event)">
                        <label class="lf">
                        <img src="../img/自己头像1.png"><span>郑连根</span>
                    </label>
                    </li>
                    <li class="Li" ng-click="actived($event)">
                        <label class="lf">
                        <img src="../img/自己头像1.png"><span>郑连根</span>
                    </label>
                    </li>
                    <li class="Li" ng-click="actived($event)">
                        <label class="lf">
                        <img src="../img/自己头像1.png"><span>郑连根</span>
                    </label>
                    </li>
                    <li class="Li" ng-click="actived($event)">
                        <label class="lf">
                        <img src="../img/自己头像1.png"><span>郑连根</span>
                    </label>
                    </li>
                    <li class="Li" ng-click="actived($event)">
                        <label class="lf">
                        <img src="../img/自己头像1.png"><span>杭州测试王巧巧(ls_wqq)</span>
                    </label>
                    </li>
                    <li class="Li" ng-click="actived($event)">
                        <label class="lf">
                        <img src="../img/自己头像1.png"><span>郑连根</span>
                    </label>
                    </li>
                    <li class="Li" ng-click="actived($event)">
                        <label class="lf">
                        <img src="../img/自己头像1.png"><span>郑连根</span>
                    </label>
                    </li>
                    <li class="Li" ng-click="actived($event)">
                        <label class="lf">
                        <img src="../img/自己头像1.png"><span>郑连根</span>
                    </label>
                    </li>
                    <li class="Li" ng-click="actived($event)">
                        <label class="lf">
                        <img src="../img/自己头像1.png"><span>郑连根</span>
                    </label>
                    </li>
                    <li class="Li" ng-click="actived($event)">
                        <label class="lf">
                        <img src="../img/自己头像1.png"><span>杭州测试王巧巧(ls_wqq)</span>
                    </label>
                    </li>
                    <li class="Li" ng-click="actived($event)">
                        <label class="lf">
                        <img src="../img/自己头像1.png"><span>郑连根</span>
                    </label>
                    </li>
                    <li class="Li" ng-click="actived($event)">
                        <label class="lf">
                        <img src="../img/自己头像1.png"><span>郑连根</span>
                    </label>
                    </li>
                    <li class="Li" ng-click="actived($event)">
                        <label class="lf">
                        <img src="../img/自己头像1.png"><span>郑连根</span>
                    </label>
                    </li>
                    <li class="Li" ng-click="actived($event)">
                        <label class="lf">
                        <img src="../img/自己头像1.png"><span>郑连根</span>
                    </label>
                    </li>
                    <li class="Li" ng-click="actived($event)">
                        <label class="lf">
                        <img src="../img/自己头像1.png"><span>杭州测试王巧巧(ls_wqq)</span>
                    </label>
                    </li>
                    <li class="Li" ng-click="actived($event)">
                        <label class="lf">
                        <img src="../img/自己头像1.png"><span>郑连根</span>
                    </label>
                    </li>
                    <li class="Li" ng-click="actived($event)">
                        <label class="lf">
                        <img src="../img/自己头像1.png"><span>郑连根</span>
                    </label>
                    </li>
                    <li class="Li" ng-click="actived($event)">
                        <label class="lf">
                        <img src="../img/自己头像1.png"><span>郑连根</span>
                    </label>
                    </li>
                    <li class="Li" ng-click="actived($event)">
                        <label class="lf">
                        <img src="../img/自己头像1.png"><span>郑连根</span>
                    </label>
                    </li>
                    <li class="Li" ng-click="actived($event)">
                        <label class="lf">
                        <img src="../img/自己头像1.png"><span>杭州测试王巧巧(ls_wqq)</span>
                    </label>
                    </li>
                    <li class="Li" ng-click="actived($event)">
                        <label class="lf">
                        <img src="../img/自己头像1.png"><span>郑连根</span>
                    </label>
                    </li>
                    <li class="Li" ng-click="actived($event)">
                        <label class="lf">
                        <img src="../img/自己头像1.png"><span>郑连根</span>
                    </label>
                    </li>
                    <li class="Li" ng-click="actived($event)">
                        <label class="lf">
                        <img src="../img/自己头像1.png"><span>郑连根</span>
                    </label>
                    </li>
                    <li class="Li" ng-click="actived($event)">
                        <label class="lf">
                        <img src="../img/自己头像1.png"><span>郑连根</span>
                    </label>
                    </li>
                </ul>
            </div>
            <div role="tabpanel" class="tab-pane" id="units">
                <ul>
                    <li class="Li" ng-click="actived($event)">
                        <label class="lf">
                        <img src="../img/自己头像1.png"><span>郑连根</span>
                    </label>
                    </li>
                    <li class="Li" ng-click="actived($event)">
                        <label class="lf">
                        <img src="../img/自己头像1.png"><span>郑连根</span>
                    </label>
                    </li>
                    <li class="Li" ng-click="actived($event)">
                        <label class="lf">
                        <img src="../img/自己头像1.png"><span>郑连根</span>
                    </label>
                    </li>
                    <li class="Li" ng-click="actived($event)">
                        <label class="lf">
                        <img src="../img/自己头像1.png"><span>郑连根</span>
                    </label>
                    </li>
                    <li class="Li" ng-click="actived($event)">
                        <label class="lf">
                        <img src="../img/自己头像1.png"><span>郑连根</span>
                    </label>
                    </li>
                </ul>
            </div>
            <div role="tabpanel" class="tab-pane" id="groups">
                <ul class="groupList">
                    <li class="Li" ng-click="actived($event)">
                        <span>浙江万赛软件维护群</span>
                    </li>
                    <li class="Li" ng-click="actived($event)">
                        <span>浙江万赛软件维护群</span>
                    </li>
                    <li class="Li" ng-click="actived($event)">
                        <span>浙江万赛软件维护群</span>
                    </li>
                    <li class="Li" ng-click="actived($event)">
                        <span>浙江万赛软件维护群</span>
                    </li>
                    <li class="Li" ng-click="actived($event)">
                        <span>浙江万赛软件维护群</span>
                    </li>
                </ul>
            </div>
            <div role="tabpanel" class="tab-pane" id="others">
                <p><a class="Aa" ng-click="actived($event)">- 手机短信</a></p>
                <p><a class="Aa" ng-click="actived($event)">- 系统消息</a></p>
            </div>
        </div>
        <div class="div-draw"></div>
        <div id="media">
            <div class="feed-element">
                <div class="media-body ">
                    <p><span class="glyphicon glyphicon-menu-right"><span>郑连根</span>16:28:40</span>
                    </p>
                    <div class="well m-l-xs m-t-xs fit-content">
                        <span class="text-message">包括250多个来自 Glyphicon Halflings 的字体图标。Glyphicons Halflings 一般是收费的，但是他们的作者允许 Bootstrap 免费使用。为了表示感谢，希望你在使用时尽量为 Glyphicons 添加一个友情链接。包括250多个来自 Glyphicon Halflings 的字体图标。Glyphicons Halflings 一般是收费的，但是他们的作者允许 Bootstrap 免费使用。为了表示感谢，希望你在使用时尽量为 Glyphicons 添加一个友情链接。</span>
                    </div>
                </div>
            </div>
            <div class="feed-element">
                <div class="media-body ">
                    <p><span class="glyphicon glyphicon-menu-right"><span>郑连根</span>16:28:50</span>
                    </p>
                    <div class="well m-l-xs m-t-xs fit-content">
                        <span class="text-message">
                        <a href="#" class="thumbnail">
                            <img style="max-width:300px;max-height:250px;" src="../img/美女.jpg" alt="通用的占位符缩略图">
                        </a>
					</span>
                    </div>
                </div>
            </div>
            <div class="feed-element">
                <div class="media-body ">
                    <p><span class="glyphicon glyphicon-menu-right"><span>郑连根</span>16:28:50</span>
                    </p>
                    <div class="well m-l-xs m-t-xs fit-content">
                        <span class="text-message">
                        <a href="#" class="thumbnail">
                            <img style="max-width:300px;max-height:250px;" src="../img/Lighthouse.jpg" alt="通用的占位符缩略图">
                        </a>
					</span>
                    </div>
                </div>
            </div>
            <div class="feed-element">
                <div class="media-body ">
                    <p><span class="glyphicon glyphicon-menu-right"><span>郑连根</span>16:28:50</span>
                    </p>
                    <div class="well m-l-xs m-t-xs fit-content">
                        <span class="text-message">
                        <a href="#" class="thumbnail">
                            <img style="max-width:300px;max-height:250px;" src="../img/自己头像1.png" alt="通用的占位符缩略图">
                        </a>
					</span>
                    </div>
                </div>
            </div>
            <div class="feed-element">
                <div class="media-body ">
                    <p><span class="glyphicon glyphicon-menu-right"><span>郑连根</span>16:28:50</span>
                    </p>
                    <div class="well m-l-xs m-t-xs fit-content">
                        <span class="text-message">
                        <div class="app-voice-you">
                            <div class="app-voice-time">
                                1"
                            </div>
                            <div class="app-voice-state-bg">
                                <div class="app-voice-state app-voice-pause" ng-click="voicePlay($event)" style="background-image: url(../img/yuyin.png);"></div>
                                <div class="app-voice-unread"></div>
                            </div>
                            <audio>
                                
                                <source src="../img/FreeFlight.ogg" >
                                您的浏览器不支持 audio 元素。
                            </audio>
                        </div>
					</span>
                    </div>
                </div>
            </div>
            <div class="feed-element">
                <div class="media-body ">
                    <p><span class="glyphicon glyphicon-menu-right"><span>郑连根</span>16:28:50</span>
                    </p>
                    <div class="well m-l-xs m-t-xs fit-content">
                        <span class="text-message">
                        <div class="app-voice-you">
                            <div class="app-voice-time">
                                1"
                            </div>
                            <div class="app-voice-state-bg">
                                <div class="app-voice-state app-voice-pause" ng-click="voicePlay($event)" style="background-image: url(../img/yuyin.png);"></div>
                                <div class="app-voice-unread"></div>
                            </div>
                            <audio>
                                
                                <source src="../img/FreeFlight.ogg" >
                                您的浏览器不支持 audio 元素。
                            </audio>
                        </div>
					</span>
                    </div>
                </div>
            </div>
        </div>
        <div id="paginationTab">
            <ul uib-pagination boundary-links="true" total-items="totalItems" ng-model="currentPage" class="pagination-sm diy" max-size="maxSize" force-ellipses="true" previous-text="上页" next-text="下页" first-text="首页" last-text="尾页"></ul>
            <p>共{{0+totalItems}}条记录</p>
        </div>
    </div>
</div>