From c35267ecf24d97dc5a48b1d057793debd75b2e80 Mon Sep 17 00:00:00 2001
From: cleverqin <705597001@qq.com>
Date: Sun, 22 Apr 2018 19:50:27 +0800
Subject: [PATCH] =?UTF-8?q?=E5=8F=98=E6=9B=B4=E8=81=8A=E5=A4=A9=E7=A4=BA?=
 =?UTF-8?q?=E4=BE=8B=E9=A1=B5=E9=9D=A2=E6=B7=BB=E5=8A=A0=E6=9C=AA=E8=AF=BB?=
 =?UTF-8?q?=E6=B6=88=E6=81=AF=E6=8F=90=E7=A4=BA?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 index.html            | 14 ++++++++++++++
 static/css/thread.css | 13 +++++++++++++
 2 files changed, 27 insertions(+)

diff --git a/index.html b/index.html
index f563f27..daf137e 100644
--- a/index.html
+++ b/index.html
@@ -86,6 +86,7 @@
 </template>
 <template id="user">
     <div class="ui-itemUser" :class="{active:user.id==channel}" @click="change(user.id)">
+        <span class="ui-chatBadge">{{noReaderNum}}</span>
         <div class="ui-itemUser-avatar">
             <img :src="user.avatarUrl" alt="" class="img">
         </div>
@@ -164,6 +165,18 @@
                     str=_this.user.messages[_this.user.messages.length-1].text;
                 }
                 return str;
+            },
+            noReaderNum:function () {
+                var num=0;
+                var _this=this;
+                if(_this.user.messages&&_this.user.messages.length>0){
+                  _this.user.messages.forEach(function (item) {
+                    if(!item.isReader){
+                      num++;
+                    }
+                  })
+                }
+                return num;
             }
         },
         methods:{
@@ -281,6 +294,7 @@
                     user:user,
                     type:type,
                     text:text,
+                    isReader:false,
                     time:new Date().getTime()
                 };
                 this.users.forEach(function (item,index) {
diff --git a/static/css/thread.css b/static/css/thread.css
index 31f85fd..db923ee 100644
--- a/static/css/thread.css
+++ b/static/css/thread.css
@@ -287,8 +287,21 @@ body{
 .ui-itemUser{
     padding: 10px 18px;
     border-bottom: 1px solid #4c4c4c;
+    position: relative;
     cursor: pointer;
 }
+.ui-chatBadge{
+    position: absolute;
+    background-color: #f56c6c;
+    border-radius: 10px;
+    color: #fff;
+    font-size: 12px;
+    line-height: 12px;
+    padding: 3px 6px;
+    text-align: center;
+    white-space: nowrap;
+    right: 10px;
+}
 .ui-itemUser.active,.ui-itemUser:hover{
     background: #3a3f45;
 }