count of room member is commented

projects/ucap-webmessenger-ui-room/src/lib/components/list-item.component.html

@@ -11,6 +11,15 @@
       <span *ngIf="roomInfo.isTimeRoom" class="text-warn-color badge-timer">
         <mat-icon>timer</mat-icon>
       </span>
+      <!-- <div style="position: relative;">
+        <div
+          class="num text-accent-darkest thumbnail"
+          *ngIf="roomInfo.roomType === RoomType.Multi"
+          style="position: absolute; width: 40px; height: 40px; top: -40px"
+        >
+          {{ roomInfo.joinUserCount }}
+        </div>
+      </div> -->
     </dt>
     <dd class="info">
       <div class="detail">

projects/ucap-webmessenger-ui-room/src/lib/components/list-item.component.scss

@@ -25,19 +25,19 @@ $thumbnail-msize: 40px;
 }
 
 .badge-timer {
-  position:absolute;
+  position: absolute;
   background-color: #ffffff;
   width: 18px;
   height: 18px;
   border-radius: 50%;
   bottom: 14px;
   left: 46px;
-  text-align:center;
+  text-align: center;
-  .mat-icon{
+  .mat-icon {
-    font-size:14px;
+    font-size: 14px;
     width: 18px;
     height: 18px;
-    line-height:18px;
+    line-height: 18px;
   }
 }
 
@@ -131,7 +131,7 @@ $thumbnail-msize: 40px;
           font-size: 16px;
           color: #666666;
           margin-left: 4px;
-          line-height:unset;
+          line-height: unset;
         }
         .num {
           font-size: 12px;
@@ -158,6 +158,14 @@ $thumbnail-msize: 40px;
       @include ellipsis(1);
     }
   }
+
+  .num {
+    font-size: 18px;
+    font: bold;
+    flex: none;
+    text-align: center;
+    background-color: rgba($color: #666666, $alpha: 0.5);
+  }
 }
 
 .list-item {