群组界面

common/app.bootstrap.less

@@ -26,18 +26,33 @@
   }
 }
 
-.nav {
+.nav, .nav-pills {
+  font-size: 13px;
+  font-weight: 600;
   > li {
     > a {
       &:hover,
-      &:focus {
+      &:focus,
+      &:active {
         background-color: @brand-primary;
         color: #fff;
       }
-      background-color: #fff;
+      background-color: #FFF;
       color: @brand-primary;
       text-align: center;
       padding: 5px 10px;
     }   
   }
+  > li.active {
+    > a {
+      background-color: @brand-primary;
+      color: #fff;
+      &:hover,
+      &:focus,
+      &:active {
+        background-color: @brand-primary;
+        color: #fff;
+      }
+    }
+  }
 }

common/app.variables.less

@@ -14,7 +14,7 @@
 @gray-light:             lighten(@gray-base, 46.7%); // #777
 @gray-lighter:           lighten(@gray-base, 93.5%); // #eee
 
-@brand-primary:         darken(#428bca, 6.5%); // #337ab7
+@brand-primary:         #5A98DE; // #337ab7
 @brand-success:         #5cb85c;
 @brand-info:            #5bc0de;
 @brand-warning:         #f0ad4e;

talkview/src/less/app.main.less

@@ -641,11 +641,20 @@ body {
             padding: 2px 4px;
             margin: 5px 10px;
             font-size: 12px;
-            background: #5A98DE;
-            border: #5A98DE;
+            background: #5bc0de;
+            border: #5bc0de;
             >span {
                 padding-right: 2px;
             }
+            &:hover,&:active {
+                border: none;
+                outline: none;
+                background: #439BB2;
+            }
+            &:focus {
+                border: none;
+                outline: 1px solid #3E97EB;
+            }
         }
         >span {
             float: left;
@@ -715,22 +724,25 @@ body {
                 height: 35px;
                 width: 75px;
                 text-align: left;
-                border: none;
-                &:hover,&:active,&:focus {
+                background: #5bc0de;
+                border: #5bc0de;
+                &:active,&:focus {
                     border: none;
-                    background: #5CB85C;
+                    outline: 1px solid #3E97EB;
+                    background: #5bc0de;
                 }
             }
             .dropdown-toggle {
                 margin-left: -33px;
                 height: 20px;
                 width: 10px;
+                background: #5bc0de;
                 border: none;
                 outline: none;
                 &:hover,&:active,&:focus {
                     border: none;
                     outline: none;
-                    background: #449D44;
+                    background: #439BB2;
                 }
                 >span.caret {
                     float: right;
@@ -1012,18 +1024,102 @@ body {
 }
 
 .groupinfo {
-    width: 660px;
+    width: 500px;
     height: 500px;
     margin: 0px auto;
-    background: #F5FAFE;
-    #leftlist {
+    background: #FFF;
+    #tablist {
         margin: auto;
-        width: 600px;
-        height: 50px;
-        background: #FFF;
+        width: 450px;
+        height: 55px;
+        .nav {
+            padding-top: 20px;
+        }
     }
     #media {
-        
+        .tab-pane {
+            margin: 5px auto;
+            #form1 {
+                background: #FFF;/* Opera 11.1 - 12.0 */
+                overflow: hidden;
+                #icoImg {
+                    float: left;
+                    width: 80px;
+                    height: 80px;
+                    margin: 10px 0px 10px 30px;
+                    border-radius: 100%;
+                    border:2px solid #ccc;
+                    background: #96CEDF;
+                    >a{
+                        cursor:default;
+                        >img {
+                            border-radius: 100%;
+                            width: 100%;
+                            height: 100%;
+                            }
+                    }
+                }
+                .displayname {
+                    color: #444;
+                    font-size: 18px;
+                    font-weight: 500;
+                    font-family: "微软雅黑","宋体";
+                }
+                #groupId {
+                    margin-top: 24px;
+                    margin-left: 120px;
+                    text-align: left;
+                    font-family: "微软雅黑","宋体";
+                    background: #FFF;
+                    color: #666;
+                    font-size: 12px;
+                    white-space: nowrap; /* 自适应宽度,不换行*/
+                    >input {
+                        margin-left: 7px;
+                        border: none;
+                        outline: none;
+                        color: #444;
+                        background: #FFF;
+                        width: 88%;
+                        white-space: nowrap;
+                        overflow: hidden;
+                        text-overflow: ellipsis;
+                    }
+                }
+                #groupIntroduction {
+                    height: 100px;
+                    margin: 70px 5px 0px 30px;
+                    color: #444;
+                    font-size: 16px;
+                    font-weight: 500;
+                    font-family: "微软雅黑","宋体";
+                    >span {
+                        float: left;
+                        margin: 5px
+                    }
+                }
+                #groupNotice {
+                    height: 100px;
+                    margin: 0px 5px 0px 30px;
+                    color: #444;
+                    font-size: 16px;
+                    font-weight: 500;
+                    font-family: "微软雅黑","宋体";
+                    >span {
+                        float: left;
+                        margin: 5px
+                    }
+                }
+                .text-message {
+                    width: 330px;
+                    float: left;
+                    padding: 5px;
+                    font-size: 12px;
+                    font-weight: 500;
+                    font-family: "微软雅黑","宋体";
+                }
+            }
+        }
     }
     #set {
         

talkview/src/templates/groupsInfo.html

@@ -1,13 +1,44 @@
 <div class="groupinfo">
-    <div id="leftlist">
-        Tabbed pills with CSS classes
-        <uib-tabset type="pills">
-            <uib-tab heading="Default Size">Tab 1 content</uib-tab>
-            <uib-tab heading="Default Size">Tab 2 content</uib-tab>
-        </uib-tabset>
+    <div id="tablist">
+        <!-- Nav tabs -->
+        <ul class="nav nav-pills" role="tablist">
+            <li role="presentation" class="active"><a href="#home" aria-controls="home" role="tab" data-toggle="tab">群组资料</a></li>
+            <li role="presentation"><a href="#members" aria-controls="members" role="tab" data-toggle="tab">成员列表</a></li>
+            <li role="presentation"><a href="#settings" aria-controls="settings" role="tab" data-toggle="tab">群组设置</a></li>
+        </ul>
     </div>
-    <div id="media">
+    <div style="border-top:solid 1px #ddd;width:460px;margin:0px auto;"></div>
+    <div id="media" class="tab-content">
+        <div class="tab-pane fade in active" id="home">
+            <form id="form1">
+                <div id="icoImg">
+                    <a><img src="../img/自己头像.png"></a>
+                </div>
+                <div id="groupId">
+                    <p class="displayname">浙江万赛软件运维群</p>
+                    群ID :<input type="text" readonly="readonly" value="84d2da460b5d5b17264199759d1edc04">
+                </div>
+                <div id="groupIntroduction">
+                    <span>群简介</span>
+                    <span class="text-message">群主很懒,什么都没有留下</span>
+                </div>
+                <div id="groupNotice">
+                    <span>群公告</span>
+                    <span class="text-message">重要通知通告、技术交流、问题探讨.</span>
+                </div>
 
+            </form>
+        </div>
+        <div class="tab-pane fade" id="members">
+            <form id="form2">
+                22222222222222222222
+            </form>
+        </div>
+        <div class="tab-pane fade" id="settings">
+            <form id="form3">
+                33333333333333333333333
+            </form>
+        </div>
     </div>
     <div id="set">