semantic-ui 实现系统通知页面，分为点赞通知、回复通知、关注通知

可以使用 semantic-ui 中的 Message 组件来实现系统通知页面，具体步骤如下：

1. 在 HTML 中添加一个 Message 组件，设置其类型为 info。

<div class="ui info message">
  <div class="header">系统通知</div>
  <p>您有新的通知，请查收。</p>
</div>

2. 在 Message 组件中添加三个子组件，分别表示点赞通知、回复通知、关注通知。

<div class="ui info message">
  <div class="header">系统通知</div>
  <p>您有新的通知，请查收。</p>
  <div class="ui divided list">
    <div class="item">
      <i class="thumbs up outline icon"></i>
      <div class="content">
        <div class="header">点赞通知</div>
        <div class="description">您收到了一条点赞通知。</div>
      </div>
    </div>
    <div class="item">
      <i class="comment outline icon"></i>
      <div class="content">
        <div class="header">回复通知</div>
        <div class="description">您收到了一条回复通知。</div>
      </div>
    </div>
    <div class="item">
      <i class="user outline icon"></i>
      <div class="content">
        <div class="header">关注通知</div>
        <div class="description">您收到了一条关注通知。</div>
      </div>
    </div>
  </div>
</div>

3. 根据需要对子组件进行样式调整，可以使用 semantic-ui 中提供的各种样式类来实现。

<div class="ui info message">
  <div class="header">系统通知</div>
  <p>您有新的通知，请查收。</p>
  <div class="ui divided list">
    <div class="item">
      <i class="thumbs up outline icon"></i>
      <div class="content">
        <div class="header">点赞通知</div>
        <div class="description">您收到了一条点赞通知。</div>
        <div class="extra">10 分钟前</div>
      </div>
    </div>
    <div class="item">
      <i class="comment outline icon"></i>
      <div class="content">
        <div class="header">回复通知</div>
        <div class="description">您收到了一条回复通知。</div>
        <div class="extra">20 分钟前</div>
      </div>
    </div>
    <div class="item">
      <i class="user outline icon"></i>
      <div class="content">
        <div class="header">关注通知</div>
        <div class="description">您收到了一条关注通知。</div>
        <div class="extra">30 分钟前</div>
      </div>
    </div>
  </div>
</div>

通过这种方式，就可以使用 semantic-ui 中的 Message 组件来实现系统通知页面，分为点赞通知、回复通知、关注通知。