app-myzh/src/app/comments/comments.page.html

<ion-header [translucent]="true">
  <ion-toolbar>
    <ion-buttons slot="start">
      <ion-back-button defaultHref="/tabs/tab1"></ion-back-button>
    </ion-buttons>
    <ion-title>
      <div class="user-info">
        <img
          src="https://tse3-mm.cn.bing.net/th/id/OIP-C.QGUz1-tWsQhwsa3F6i9nGAHaHa?w=268&h=201&c=7&r=0&o=5&dpr=1.3&pid=1.7"
          class="avatar">
        <span class="username">用户名</span>
      </div>
    </ion-title>
  </ion-toolbar>
</ion-header>

<ion-content [fullscreen]="true">
  <!-- 作者发布的内容 -->
  <div class="post">
    <p>
      太阳似乎不想归去，念念不舍地在云后露出淡淡的脸庞。
      阴云越凝越厚，到后来，就连那淡淡的脸庞也消失了。
      风吹起来了，带着几分凌人的傲慢，冷森森的，把将要收拢的花朵打落一地，无精打采地躺在那里，像一个个重病号；
      电线被吹得呜呜作响，得意忘形地在空中摇来摆去:枝头的叶子本来不想离开那充满希望的枝干，却硬被拽了下来，丢落在地.
    </p>
    <p>
      突然，天地间开始有些异常，一种隐隐然的骚动，一种还不太响却一定是非常响的声音，充斥周际。
      如地震前兆，如海啸将临，如山崩即至，浑身起一种莫名的紧张，又紧张得急于趋附。
      不知是自己走去还是被它吸去的，终于陡然一惊，我已站在伏龙观前，眼前，急流浩荡，大地震颤。
    </p>
  </div>

  <ion-toolbar>
    <div class="user-info">
      <img
        src="https://tse3-mm.cn.bing.net/th/id/OIP-C.QGUz1-tWsQhwsa3F6i9nGAHaHa?w=268&h=201&c=7&r=0&o=5&dpr=1.3&pid=1.7"
        class="avatar">
      <span class="username">我</span>
    </div>
    <ion-input placeholder="说点什么..." clearInput></ion-input>
    <ion-button slot="end" color="primary">发送</ion-button>
  </ion-toolbar>

  <!-- 其他用户发送的评论 -->
  <div class="comments">
    <div class="comment">
      <div class="user-info">
        <img
          src="https://tse3-mm.cn.bing.net/th/id/OIP-C.QGUz1-tWsQhwsa3F6i9nGAHaHa?w=268&h=201&c=7&r=0&o=5&dpr=1.3&pid=1.7"
          class="avatar">
        <span class="username">评论者</span>
      </div>
      <div class="content">
        <p>评论内容...</p>
      </div>
      <div class="actions">
        <ion-button size="small" color="primary">
          <ion-icon name="thumbs-up"></ion-icon>
          <!-- 点赞 -->
        </ion-button>
        <ion-button size="small" color="primary" (click)="openCommentPopover($event)">
          <ion-icon name="chatbox-ellipses-outline"></ion-icon>
          <!-- 评论 -->
        </ion-button>
      </div>
    </div>

    <div class="comment">
      <div class="user-info">
        <img
          src="https://tse3-mm.cn.bing.net/th/id/OIP-C.QGUz1-tWsQhwsa3F6i9nGAHaHa?w=268&h=201&c=7&r=0&o=5&dpr=1.3&pid=1.7"
          class="avatar">
        <span class="username">评论者</span>
      </div>
      <div class="content">
        <p>评论内容...</p>
      </div>
      <div class="actions">
        <ion-button size="small" color="primary">
          <ion-icon name="thumbs-up"></ion-icon>
          <!-- 点赞 -->
        </ion-button>
        <ion-button size="small" color="primary" (click)="openCommentPopover($event)">
          <ion-icon name="chatbox-ellipses-outline"></ion-icon>
          <!-- 评论 -->
        </ion-button>
      </div>
    </div>
    <!-- 可以继续添加更多评论 -->
  </div>
</ion-content>

<div>......</div>
<div>已经到底了</div>

<ion-footer>
  <ion-button (click)="like()">
    <ion-icon name="thumbs-up"></ion-icon>
    点赞
  </ion-button>

  <ion-button (click)="favorite()">
    <ion-icon name="heart"></ion-icon>
    收藏
  </ion-button>

  <ion-button (click)="comment()">
    <ion-icon name="chatbox"></ion-icon>
    评论
  </ion-button>
</ion-footer>