增加项目star数及部分star成员的显示

index.html

@@ -117,13 +117,20 @@
                     </div>
                 </div>
                 <div class="ui-webChat-item ui-webChat-tool" v-show="tab=='tool'">
-                    <div class="ui-settingBox">
+                    <div class="ui-settingBox ui-toolInfoBox">
                         <h2>关于</h2>
                         <ul class="ui-tool-list">
                             <li><span class="ui-info-txt">版本：v1.0.0</span></li>
                             <li><span class="ui-info-txt">协议：MIT</span></li>
                             <li><span class="ui-info-txt">源码地址：https://github.com/cleverqin/node-websocket-Chatroom</span></li>
                             <li><span class="ui-info-txt">联系我：705597001@qq.com</span></li>
+                            <li><span class="ui-info-txt">Star：{{star}} ★</span></li>
+                            <li>
+                                <div class="ui-star-user" v-for="item in starUser">
+                                    <img :src="item.avatar_url" alt="">
+                                    <div class="ui-starUser-info">{{item.login}}</div>
+                                </div>
+                            </li>
                         </ul>
                     </div>
                 </div>

static/css/ui-player.css

@@ -383,3 +383,32 @@
 .ui-songsBox{
     background-image: linear-gradient(60deg, #29323c 0%, #485563 100%);
 }
+/****************************/
+.ui-star-user{
+    width: 60px;
+    display: inline-block;
+    padding: 10px 5px 5px;
+    margin-right: 10px;
+    margin-top: 5px;
+    border-radius: 4px;
+    border: 1px solid #e9e9e9;
+}
+.ui-star-user img{
+    display: block;
+    width: 30px;
+    height: 30px;
+    border-radius: 4px;
+    margin: 0 auto;
+}
+.ui-starUser-info{
+    font-size: 12px;
+    text-align: center;
+    color: #666666;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    line-height: 20px;
+}
+.ui-webChat-tool .ui-settingBox.ui-toolInfoBox{
+    width: 595px;
+}

static/js/webChat.js

@@ -721,7 +721,9 @@ new Vue({
                 isShowName:true
             },
             keyWord:"",
-            isLogin:true
+            isLogin:true,
+            star:0,
+            starUser:[]
         }
     },
     computed: {
@@ -745,6 +747,8 @@ new Vue({
     created:function () {
         this.initBg();
         this.initPlayer();
+        this.getStar();
+        this.getStarUser();
     },
     filters:{
         time:function (value) {
@@ -947,6 +951,20 @@ new Vue({
                       songs:songs
                   })
             })
+        },
+        getStar:function () {
+            this.$http.get("https://api.github.com/repos/cleverqin/node-websocket-Chatroom")
+              .then(function (reponse) {
+                  var body=reponse.body;
+                  this.star=body.stargazers_count;
+              })
+        },
+        getStarUser:function () {
+            this.$http.get("https://api.github.com/repos/cleverqin/node-websocket-Chatroom/stargazers")
+              .then(function (reponse) {
+                  var body=reponse.body;
+                  this.starUser=body;
+              })
         }
     }
 })