添加好友列表

app/roster.component.css

+#friend_list>ul>li>div>p{
+    font-size:12px;
+    padding:3px 5px;
+    margin:0;
+    cursor:default;
+}
+
+#friend_list>ul>li>img{
+    border-radius:25.5px;
+ }
+
+#friend_list>ul>li{
+    padding:3px;
+    list-style-type:none;
+    position:relative;
+}
+#friend_list>ul>li:hover{
+    padding:3px;
+    list-style-type:none;
+    position:relative;
+    background:#aaa;
+}
+
+#friend_list>ul>li>i{
+    position:absolute;
+    top:38px;
+    left:38px;
+}
+
+#friend_list>ul{
+    padding:0;
+}
+
+.fl{float:left;}
+
+#friend_list i{font-size:10px;}
+
+.red{color:red;}
+
+.green_light{color:#8f8;}
+.red_light{color:#f88;}
+.grey{color:grey;}
+.blue_light{color:#88f;}
\ No newline at end of file

app/roster.component.html

-Roster
+<!--<link href="roster.component.css" type="text/css" rel="stylesheet">-->
\ No newline at end of file
+<!--<link rel="stylesheet" href="../node_modules/font-awesome/css/font-awesome.min.css">-->
+<!--<link rel="stylesheet" href="../node_modules/bootstrap/dist/css/bootstrap.min.css">-->
+<!--<script src="../node_modules/core-js/client/shim.min.js"></script>-->
+
+<!--<script src="../node_modules/zone.js/dist/zone.js"></script>-->
+<!--<script src="../node_modules/reflect-metadata/Reflect.js"></script>-->
+<!--<script src="../node_modules/systemjs/dist/system.src.js"></script>-->
+
+<!--<script src="../systemjs.config.js"></script>-->
+
+
+<div >
+    <div class="input-group" id="friend_search">
+        <div class="input-group ">
+            <i  class="fa fa-search input-group-addon search" id="basic-addon1"></i>
+            <input type="text" class="form-control" aria-label="Amount (to the nearest dollar)">
+            <!--<span class="input-group-addon">+</span>-->
+            <button type="button" class="input-group-addon btn btn-sm  btn-primary blue_light">+</button>
+        </div>
+    </div>
+
+    <div id="friend_list">
+        <ul>
+            <li>
+                <img class="fl" src="https://ygobbs.com//letter_avatar_proxy/v2/letter/q/cdc98d/45.png">
+                <i class="fa fa-circle green_light"></i>
+                <div class="fl">
+                    <p>我叫什么名来着</p>
+                    <p>发呆ing</p>
+                </div>
+                <div style="clear: both"></div>
+            </li>
+
+            <li>
+                <img class="fl" src="https://ygobbs.com/user_avatar/ygobbs.com/sky%E7%A5%9E%E6%99%BA/45/16501_1.png">
+                <i class="fa fa-play-circle red_light"></i>
+                <div class="fl">
+                    <p>我叫什么名来着</p>
+                    <p class="red">东方妖妖梦</p>
+                </div>
+                <div style="clear: both"></div>
+            </li>
+
+            <li>
+                <img class="fl" src="https://ygobbs.com/user_avatar/ygobbs.com/%E6%98%9F%E5%85%89pokeboy/45/10237_1.png">
+                <i class="fa fa-question-circle blue_light"></i>
+                <div class="fl">
+                    <p>我叫什么名来着</p>
+                    <p>发呆ing</p>
+                </div>
+                <div style="clear: both"></div>
+            </li>
+
+            <li>
+                <img class="fl" src="https://ygobbs.com//user_avatar/ygobbs.com/%E7%B1%B3%E7%B1%B3%E7%B1%B3%E5%BE%B7%E6%8B%89%E4%BB%80/45/17187_1.png">
+                <i class="fa fa-clock-o grey"></i>
+                <div class="fl">
+                    <p>我叫什么名来着</p>
+                    <p>发呆ing</p>
+                </div>
+                <div style="clear: both"></div>
+            </li>
+        </ul>
+    </div>
+</div>
+