列表定义状态比较不错的UI写法

 

全局样式

/* 列表状态颜色 */
.redStatus::before,
.greenStatus::before,
.blueStatus::before,
.grayStatus::before,
.overStatus::before {
  content: '';
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  margin-right: 4px;
  vertical-align: middle;
}

.redStatus::before {
  background: #ff4d4d;
}

.greenStatus::before {
  background: #02CCA3;
}

.blueStatus::before  {
  background: #4ea7ff;
}

.grayStatus::before  {
  background: #999999;
}

.overStatus::before {
  background: #F9A727;
}