历史消息界面

talkview/src/js/controller/historyMsgController.js

@@ -7,6 +7,7 @@ angular.module('appMessage').controller('HistoryMsgController', ['$scope', '$fil
     $scope.historymessages = [];
     $scope.searchArea = "全部";
     $scope.activeData = "全部";
+    $scope.animateFirst = true;
     $scope.totalItems = 100;
     $scope.currentPage = Math.floor($scope.totalItems / 10) + 1; //初始当前页
     $scope.maxSize = 5; //最多显示7页其他的用···代替
@@ -15,6 +16,21 @@ angular.module('appMessage').controller('HistoryMsgController', ['$scope', '$fil
         $scope.appContent = JSON.parse(appContentJson);
     };
 
+    $scope.animate = function($event) {
+        var animate = $($event.target);
+        console.log(animate);
+        if (animate[0].innerText == "最近联系人" && $scope.animateFirst)
+            return;
+        else if (animate[0].nodeName == "A") {
+            angular.element(".slip").removeClass("animate");
+            animate.addClass("animate");
+        } else if (animate[0].nodeName == "SPAN") {
+            angular.element(".slip").removeClass("animate");
+            $(animate[0].parentElement).addClass("animate");
+        }
+        $scope.animateFirst = false;
+    };
+
     $scope.actived = function($event) {
         var activeClick = $($event.target);
         console.log(activeClick);
@@ -34,20 +50,6 @@ angular.module('appMessage').controller('HistoryMsgController', ['$scope', '$fil
         }
     };
 
-    $scope.opened = function($event) {
-        var activeClick = $($event.target);
-        $scope.collapsed = activeClick[0].className;
-        if ($scope.collapsed == "collapsed") {
-            angular.element(".pull-right").removeClass("glyphicon-menu-down");
-            angular.element(".pull-right").addClass("glyphicon-menu-right");
-            $(activeClick[0].parentElement.nextElementSibling).removeClass("glyphicon-menu-right");
-            $(activeClick[0].parentElement.nextElementSibling).addClass("glyphicon-menu-down");
-        } else if ($scope.collapsed == "") {
-            angular.element(".pull-right").removeClass("glyphicon-menu-down");
-            angular.element(".pull-right").addClass("glyphicon-menu-right");
-        }
-    };
-
     $scope.activeClick = function($event) {
         var activeClick = $($event.target.firstElementChild);
         $scope.activeData = $event.target.innerText;
@@ -56,7 +58,7 @@ angular.module('appMessage').controller('HistoryMsgController', ['$scope', '$fil
     };
 
     $scope.onRefresh = function($event) {
-        var activeClick = $($event.target.parentElement.firstElementChild.lastElementChild.lastElementChild.firstElementChild.firstElementChild.firstElementChild);
+        var activeClick = $($(".dropdown-menu")[0].firstElementChild.firstElementChild.firstElementChild);
         console.log(activeClick)
         $scope.activeData = "全部";
         $scope.searchArea = "全部"

talkview/src/less/app.main.less

@@ -774,14 +774,18 @@ body {
 }
 
 .historymsg {
+    ::-webkit-scrollbar { width: 0px;}
     width:100%;
     height: 100%;
+    min-width: 700px;
     margin: 0px auto;
-    background: #F5FAFE;
+    background: #FFF;
     font-size: 12px;
     font-family: "微软雅黑","宋体";
     border-bottom: 1px solid #ddd;
     #head{
+        line-height: normal !important;
+        background-color: #F5FAFE;
         height: 40px;
         .selectData {
             float: right;
@@ -872,132 +876,159 @@ body {
             }
         }
     }
-    #leftList {
-        background: #F5FAFE;
+    #leftTab {
         float: left;
-        width: 220px;
-        height: 560px;
-        border-right: 1px solid #ddd;
-        font-size: 12px;
-        font-family: "微软雅黑","宋体";
-        .panel-group {
-            #first {
-                border-top: none;
-            }
-            .panel-default {
-                margin-bottom: -10px;
-                border-radius: 0px;
-                border-right: none;
-                border-left: none;
-                .panel-heading {
-                    background: #F5FAFE;
-                    span {
-                        margin-left: -3px;
-                        font-size: 13px;
-                        color: #444;
-                    }
-                    a {
-                        margin-left: 5px;
-                        font-size: 13px;
-                        color: #555;
-                        text-decoration: none;
+        width: 150px;
+        .nav-pills {
+            margin: 8px 10px 0px 10px;
+            &.diy {
+                font-size: 12px;
+                font-family: "微软雅黑","宋体";
+                font-weight: normal;
+                > li {
+                    > a {
+                        background-color: #FFF;
+                        border: 1px solid #e6e6e6;
+                        color: #777;
+                        padding: 5px 20px;
+                        margin-bottom: 15px;
+                        border-radius: 15px;
+                        text-align: left;
+                        &.animate {
+                            animation-name:animateRt;
+                            animation-duration:0.1s;
+                            animation-timing-function:linear;
+                            animation-iteration-count:1;
+                            animation-direction:normal;
+                            /* Safari and Chrome: */
+                            -webkit-animation-name:animateRt;
+                            -webkit-animation-duration:0.1s;
+                            -webkit-animation-timing-function:linear;
+                            -webkit-animation-iteration-count:1;
+                            -webkit-animation-direction:normal;
+                        }
+                        &.animateLt {
+                            animation-name:animateLt;
+                            animation-duration:1s;
+                            animation-timing-function:linear;
+                            animation-iteration-count:1;
+                            animation-direction:normal;
+                            /* Safari and Chrome: */
+                            -webkit-animation-name:animateLt;
+                            -webkit-animation-duration:1s;
+                            -webkit-animation-timing-function:linear;
+                            -webkit-animation-iteration-count:1;
+                            -webkit-animation-direction:normal;
+                        }
                     }
-                    .glyphicon-duplicate {
-                        margin: 0px 1px 0px -2px;
+                    @keyframes animateRt {
+                        0%  {text-align: left;background-color:#FFF;color: #777;}
+                        100%  {text-align: right;background-color:#eee;color: #009688;}
                     }
-                    .lt {
-                        font-size: 13px;
+                    @-webkit-keyframes animateRt {
+                        0%  {text-align: left;background-color:#FFF;color: #777;}
+                        100%  {text-align: right;background-color:#eee;color: #009688;}
                     }
-                    .rt {
-                        margin-right: -2px;
-                        font-size: 13px;
-                        margin-left: -10px;
-                        margin-top: -10px;
+                    @keyframes animateLt {
+                        0%  {text-align: right;background-color:#eee;color: #009688;}
+                        100%  {text-align: left;background-color:#FFF;color: #777;}
                     }
-                    i {
-                        margin-top: 2px;
-                        font-weight: normal;
-                        font-size: 12px;
-                        color: #888;
+                    @-webkit-keyframes animateLt {
+                        0%  {text-align: right;background-color:#eee;color: #009688;}
+                        100%  {text-align: left;background-color:#FFF;color: #777;}
                     }
                 }
-                .panel-collapse {
-                    .panel-body {
-                        overflow-y: auto;
-                        overflow-x: hidden;
-                        max-height: 255px;
-                    }
-                    .groupList {
-                        span {
-                            margin-left: 12px;
-                            cursor: default;
-                        }
+                > li.active {
+                    > a {
+                        border: 1px solid #e6e6e6;
+                        background-color:#eee;
+                        color: #009688;
+                        text-align: right;
                     }
-                    .activeColor {
-                        color: #0090E0;
+                }
+            }
+        }
+    }
+    .tab-content {
+        background: #FFF;
+        float: left;
+        width: 180px;
+        height: 560px;
+        overflow-y: auto;
+        overflow-x: hidden;
+        border-left: 1px solid #ddd;
+        border-right: 1px solid #ddd;
+        font-size: 12px;
+        font-family: "微软雅黑","宋体";
+        >.tab-pane {
+            .groupList {
+                span {
+                    margin-left: 12px;
+                    cursor: default;
+                }
+            }
+            .activeColor {
+                color: #0090E0;
+            }
+            p {
+                margin-left: 12px;
+                margin-top: 12px;
+                &:last-child {
+                    margin-bottom: -5px;
+                }
+                a {
+                    cursor: pointer;
+                    text-decoration: none;
+                    color: #555;
+                    &:hover,&:active,&:focus {
+                        color: #5bc0de;
                     }
-                    p {
-                        margin-left: -2px;
-                        margin-top: -10px;
-                        margin-bottom: 18px;
-                        &:last-child {
-                            margin-bottom: -5px;
-                        }
-                        a {
-                            cursor: pointer;
-                            text-decoration: none;
-                            color: #555;
-                            &:hover,&:active,&:focus {
-                                color: #5bc0de;
-                            }
-                        }
+                }
+            }
+            >ul {
+                list-style: none;
+                margin: 8px 0px -10px -40px;
+                >li.activeBackground {
+                    background: #eee;
+                    color: #009EE0;
+                }
+                >li {
+                    width: 178px;
+                    height: 28px;
+                    font-family: "微软雅黑","宋体";
+                    padding-top:3px;
+                    padding-bottom: 2px;
+                    text-align: left;
+                    font-size: 12px;
+                    color: #555;
+                    white-space: nowrap; /* 自适应宽度,不换行*/
+                    overflow: hidden;
+                    &:hover,&:active,&:focus {
+                        background: #eee;
+                        color: #009EE0;
                     }
-                    ul {
-                        list-style: none;
-                        margin: -15px 0px -10px -58px;
-                        >li.activeBackground {
-                            background: #eee;
-                            color: #009EE0;
+                    .lf {
+                        cursor:default;
+                        width: 20px;
+                        height: 20px;
+                        margin: 0px 0px 10px 10px;
+                        border-radius: 100%;
+                        border:1px solid #ddd;
+                        background: #96CEDF;
+                        img {
+                            border-radius: 100%;
+                            width: 100%;
+                            height: 100%;
                         }
-                        >li {
-                            width: 225px;
+                        span {
                             height: 28px;
-                            font-family: "微软雅黑","宋体";
-                            padding-top:3px;
-                            padding-bottom: 2px;
-                            text-align: left;
-                            font-size: 12px;
-                            color: #555;
-                            white-space: nowrap; /* 自适应宽度,不换行*/
+                            font-weight: normal;
+                            vertical-align: middle;
+                            margin-left: 5px;
+                            width: 800%;
+                            white-space: nowrap;
                             overflow: hidden;
-                            &:hover,&:active,&:focus {
-                                background: #eee;
-                                color: #009EE0;
-                            }
-                            .lf {
-                                cursor:default;
-                                width: 20px;
-                                height: 20px;
-                                margin: 0px 0px 10px 10px;
-                                border-radius: 100%;
-                                border:1px solid #ddd;
-                                background: #96CEDF;
-                                img {
-                                    border-radius: 100%;
-                                    width: 100%;
-                                    height: 100%;
-                                }
-                                span {
-                                    height: 28px;
-                                    font-weight: normal;
-                                    vertical-align: middle;
-                                    margin-left: 5px;
-                                    width: 800%;
-                                    white-space: nowrap;
-                                    overflow: hidden;
-                                    text-overflow: ellipsis;
-                                }
-                            }
+                            text-overflow: ellipsis;
                         }
                     }
                 }
@@ -1005,10 +1036,8 @@ body {
         }
     }
     #media {
-        overflow-y: auto;
-        margin-left: 220px;
-        margin-right: 2px;
         height: 510px;
+        overflow-y: auto;
         padding-bottom: 10px;
         background: #FFF;
         border-bottom: 1px solid #eee;
@@ -1021,8 +1050,8 @@ body {
         }
     }
     #paginationTab {
-        margin-left: 220px;
         height: 50px;
+        min-width: 820px;
         background: #FFF;
         text-align: right;
         >span {

talkview/src/templates/historyMsg.html

@@ -1,7 +1,7 @@
 <div class="historymsg">
     <div id="head">
         <div class="input-group">
-            <input type="text" class="form-control input-sm" aria-label="..." placeholder="请输入搜索关键字. . ." ng-model="keyWords">
+            <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">
@@ -29,129 +29,220 @@
         <button type="button" class="glyphicon glyphicon-refresh" title="刷新" ng-click="onRefresh($event)"></button>
     </div>
     <div style="border-top:solid 1px #ddd;"></div>
-    <div id="leftList">
-        <div class="panel-group" id="accordion">
-            <div class="panel panel-default" id="first">
-                <div class="panel-heading">
-                    <span class="panel-title">
-                        <span class="glyphicon glyphicon-user"></span><a ng-click="opened($event)" data-toggle="collapse" data-parent="#accordion" href="#collapseOne"> 最近联系人</a>
-                    </span>
-                    <i class="pull-right glyphicon glyphicon-menu-down"></i>
-                </div>
-                <div id="collapseOne" class="panel-collapse collapse in">
-                    <div class="panel-body">
-                        <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>
-                        </ul>
-                    </div>
-                </div>
-            </div>
-            <div class="panel panel-default">
-                <div class="panel-heading">
-                    <span class="panel-title">
-                        <span class="glyphicon glyphicon-home"></span><a ng-click="opened($event)" data-toggle="collapse" data-parent="#accordion" href="#collapseTwo"> 单位部门</a>
-                    </span>
-                    <i class="pull-right glyphicon glyphicon-menu-right"></i>
-                </div>
-                <div id="collapseTwo" class="panel-collapse collapse">
-                    <div class="panel-body">
-                        <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>
-            </div>
-            <div class="panel panel-default">
-                <div class="panel-heading">
-                    <span class="panel-title">
-                        <span class="glyphicon glyphicon-user lt"></span><span class="glyphicon glyphicon-user rt"></span><a ng-click="opened($event)" data-toggle="collapse" data-parent="#accordion" href="#collapseThree"> 群组</a>
-                    </span>
-                    <i class="pull-right glyphicon glyphicon-menu-right"></i>
-                </div>
-                <div id="collapseThree" class="panel-collapse collapse">
-                    <div class="panel-body">
-                        <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>
-            </div>
-            <div class="panel panel-default">
-                <div class="panel-heading">
-                    <span class="panel-title">
-                        <span class="glyphicon glyphicon-duplicate"></span><a ng-click="opened($event)" data-toggle="collapse" data-parent="#accordion" href="#collapseFour"> 其他</a>
-                    </span>
-                    <i class="pull-right glyphicon glyphicon-menu-right"></i>
-                </div>
-                <div id="collapseFour" class="panel-collapse collapse">
-                    <div class="panel-body">
-                        <p><a class="Aa" ng-click="actived($event)">- 手机短信</a></p>
-                        <p><a class="Aa" ng-click="actived($event)">- 系统消息</a></p>
-                    </div>
-                </div>
-            </div>
+    <div id="leftTab">
+        <ul class="nav nav-pills diy 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 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 id="media">