s202226701053/E-Cover-app/src/app/tab2/tab2.page.html

<!--头部，包含一个段和发布按钮-->
<ion-header>
      <!--选段-->
      <ion-segment value="second">
            <ion-segment-button value="first" content-id="first">
                  <ion-label>关注</ion-label>
            </ion-segment-button>
            <ion-segment-button value="second" content-id="second">
                  <ion-label>推荐</ion-label>
            </ion-segment-button>
      </ion-segment>
      <!--发布按钮-->
      <ion-button (click)="goSendPost()" shape="round">
            <ion-icon slot="start" name="add-outline"></ion-icon>
            <ion-label><b>发布</b></ion-label>
      </ion-button>
</ion-header>
<!--段展示-->
<ion-content>
      <ion-segment-view>
            <ion-segment-content id="first">
            </ion-segment-content>
            <ion-segment-content id="second">
                  <div id="rolling">
                        <ion-card id="rolling-1">
                              <div class="rolling-top">
                                    <ion-img
                                          src="https://s1.imagehub.cc/images/2024/12/24/c6c77e61dd002b2bcb941a608672d0d5.png" />
                                    <ion-button shape="round" size="small">
                                          <ion-label>更多</ion-label>
                                          <ion-icon slot="end" name="chevron-forward-circle"></ion-icon>
                                    </ion-button>
                              </div>

                              <div style="clear: both;margin: 5px 0;" *ngFor="let tag of tags">
                                    <ion-img style="float: left;width:15px;margin: 5px;"
                                          src="https://s1.imagehub.cc/images/2024/12/24/a369c70551f442aeec3718575b7eeffe.png" />
                                    <div style="float: left;">
                                          <p class="text">{{ tag?.get('name') }}</p>
                                          <p class="intro">{{ formatNumber(tag?.get('click')) }} 热度</p>
                                    </div>
                              </div>

                        </ion-card>
                        <ion-card id="rolling-2">
                              <div class="rolling-top">
                                    <ion-img
                                          src="https://s1.imagehub.cc/images/2024/12/24/faa67f754580fc2e41e905a6a3476d85.png" />
                                    <ion-button shape="round" size="small">
                                          <ion-label>更多</ion-label>
                                          <ion-icon slot="end" name="chevron-forward-circle"></ion-icon>
                                    </ion-button>
                              </div>
                        </ion-card>
                        <ion-card id="rolling-3">你卡上，到那时打开拉萨的那棵树的那是肯定</ion-card>
                  </div>
                  <!-- <ion-button (click)="shuaxin()">刷新</ion-button>
                  <div *ngFor="let post of posts; else noPosts">
                        发帖用户：{{ post?.get('UserID')?.name }}<br />
                        发帖标题：{{ post?.get('UserID')?.avatar }}<br />
                        发帖内容：{{ post?.get('content') }}<br />
                        发帖图片：{{ post?.get('image') }}<br />
                        发帖标签：{{ post?.get('tag') }}<br />
                  </div> -->
                  <app-post-list></app-post-list>
            </ion-segment-content>
      </ion-segment-view>

      <ion-button size="large" (click)="goSendPost()">Tab 2</ion-button>

</ion-content>