<div class="todo-list-item" fxLayout="row" fxLayoutAlign="start center" [ngClass]="{'completed': todo.completed}"
  matRipple>
  <mat-icon class="handle m-r-16" cdkDragHandle>drag_handle</mat-icon>
  <mat-checkbox class="m-r-16" fxFlex="0 1 auto" (click)="toggle(todo)"></mat-checkbox>

  <div class="item" fxLayout="row" fxLayoutAlign="start center" fxFlex>
    <div [ngClass]="{'completed':todo.completed}" fxLayout="column" fxFlex>
      <div class="title">{{ todo.title }}</div>
      <div class="notes">{{ todo?.notes }}</div>
      <div class="tags" fxLayout="row wrap" fxLayoutAlign="start center">
        <div class="tag" fxLayout="row" fxLayoutAlign="start center">
          <div class="tag-color" style="background-color: rgb(56, 142, 60);"></div>
          <div class="tag-label">前端</div>
        </div>
      </div>
    </div>
  </div>

  <div class="actions" fxLayout="row" fxLayoutAlign="star center">
    <button mat-icon-button class="btn-icon">
      <mat-icon>error</mat-icon>
    </button>
    <button mat-icon-button class="btn-icon">
      <mat-icon>star</mat-icon>
    </button>
    <button mat-icon-button class="btn-icon">
      <mat-icon>more_vert</mat-icon>
    </button>
  </div>

</div>

./todo-item.component.scss

.completed {
  .title {
    text-decoration: line-through;
  }

  .notes {
    text-decoration: line-through;
  }
}

.tags {
  .tag {
    font-size: 11px;
    border-radius: 2px;
    margin: 8px 4px 0 0;
    padding: 3px 8px;
    background-color: rgba(0, 0, 0, 0.08);

    .tag-color {
      width: 8px;
      height: 8px;
      margin-right: 8px;
      border-radius: 50%;
    }
  }
}

.btn-icon {
  color: rgba(0, 0, 0, 0.54);
}