优化缓存,增加头像列表

public/cdn/layui-ul.css

@@ -1,24 +1,72 @@
-.ul-nav-tree{
+.ul-nav-tree {
   border-right: 1px solid #bbb;
 }
-.ul-nav-tree-item{
-  display: flex;
+
+.ul-nav-tree-item {
+  display    : flex;
   align-items: baseline;
-  cursor: pointer;
-  padding: 5px;
+  cursor     : pointer;
+  padding    : 5px;
 }
 
-.ul-nav-tree-item-title{
+.ul-nav-tree-item-title {
   font-size: 15px;
-  
+
 }
 
-.ul-nav-tree-item-desc{
-  font-size: 14px;
-  color: #999;
+.ul-nav-tree-item-desc {
+  font-size  : 14px;
+  color      : #999;
   margin-left: 15px;
 }
 
-.ul-padding-md{
+.ul-padding-md {
   padding: 15px;
+}
+
+.ul-avatar-list {
+  
+}
+
+.ul-avatar-list-item {
+  display         : flex;
+  align-items     : center;
+  justify-content : space-between;
+  padding         : 8px;
+  background-color: #ddd;
+}
+.ul-avatar-list-item.current{
+  background-color: #bbb;
+}
+.ul-avatar-list-item-img {
+  height             : 48px;
+  width              : 48px;
+  background-image   : url('/static/images/avatar.png');
+  background-size    : cover;
+  background-position: center;
+  border-radius      : 3px;
+  background-color   : #fff;
+}
+
+.ul-avatar-list-item-info {
+  margin-left: 10px;
+  position   : relative;
+  width      : calc(100% - 48px - 10px);
+}
+
+.ul-avatar-list-item-time {
+  position: absolute;
+  right   : 0;
+  top     : 0;
+  color: #999;
+}
+
+.ul-avatar-list-item-tips {
+  color        : #999;
+  font-size    : 14px;
+  display      : inline-block;
+  white-space  : nowrap;
+  width        : 100%;
+  overflow     : hidden;
+  text-overflow: ellipsis;
 }