pocketcommunityweb/src/app/forum/forum.component.html

<!--公告轮播-->
<div id="carouselExampleControls" class="carousel slide bg-info m-3" data-ride="carousel">
  <div class="carousel-inner">
<!--    <li *ngFor="let item of notices; index as i;">-->
<!--      {{i}}-->
<!--    </li>-->
    <ng-container *ngFor="let notice of notices;first as isFirst">
      <div class="carousel-item" [class.active]="isFirst"  >
        <!--公告栏-->
        <div class="notice bg-light col-5 mx-auto">
          <!--  公告标志-->
          <h1 class="text-center mb-3">{{ 'forum.notice' | translate }}</h1>
          <!--  公告内容-->
          <div class="notice-content border-success mt-3 mb-3 position-relative">
            <!--    公告标题-->
            <h2 class="text-center mb-3 mt-3">{{notice.title}}</h2>
            <!--    公告正文-->
            <div class="notice-body overflow-auto p-3">
              {{notice.content}}
            </div>
            <!--    公告底部-->
            <div class="notice-footer border border-info text-right align-text-bottom position-absolute">
              <div class="col-12">{{ 'forum.sender' | translate }} ：{{notice.managerName}}<br>{{ 'forum.time' | translate }}：{{notice.createTime|date:'yyyy-MM-dd HH:mm:ss'}}</div>
            </div>
          </div>
        </div>
      </div>
    </ng-container>

  </div>
  <a class="carousel-control-prev" href="#carouselExampleControls" role="button" data-slide="prev">
    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
    <span class="sr-only">Previous</span>
  </a>
  <a class="carousel-control-next" href="#carouselExampleControls" role="button" data-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="sr-only">Next</span>
  </a>
</div>

<!--审核贴-->
<div class="row border-warning check m-3">
  <!--  审核帖标识-->
  <h1 class="text-info col-12 text-center">{{ 'forum.check' | translate }}</h1>


  <div class="col-3">

    <!--帖子列表-->
    <ul class="list-group">
      <!--      帖子列表-->
      <li class="list-group-item active">Cras justo odio</li>
      <li class="list-group-item">Dapibus ac facilisis in</li>
      <li class="list-group-item">Morbi leo risus</li>
      <li class="list-group-item">Porta ac consectetur ac</li>
      <li class="list-group-item">Vestibulum at eros</li>
      <li class="list-group-item">Cras justo odio</li>
      <li class="list-group-item">Dapibus ac facilisis in</li>
      <li class="list-group-item">Morbi leo risus</li>
      <li class="list-group-item">Porta ac consectetur ac</li>
      <li class="list-group-item">Vestibulum at eros</li>
    </ul>

    <!--    分页按钮-->
    <ul class="pagination ml-5 mt-3">
      <li class="page-item"><a class="page-link" href="#">{{'button.prev_page'|translate}}</a></li>
      <li class="page-item active"><a class="page-link" href="#">1</a></li>
      <li class="page-item"><a class="page-link" href="#">2</a></li>
      <li class="page-item"><a class="page-link" href="#">3</a></li>
      <li class="page-item"><a class="page-link" href="#">{{'button.next_page'|translate}}</a></li>
    </ul>

  </div>

  <!--  帖子内容-->
  <div class="col-9 post border-secondary p-3 position-relative">

    <!--    活动帖子-->
    <ng-container *ngIf="true;else elseBlock">

      <!--      发件人信息-->
      <div class="position-absolute sender">
        <!--    发帖人头像-->
        <img src="/" class="headimg mb-3"/>
        <!--    发帖人-->
        <div class="forum-label border-info mb-3 text-center">
          发帖人
        </div>
        <!--信用分-->
        <div class="forum-label border-info mb-3 text-center">
          信用分
        </div>
      </div>

      <!--      帖子框架-->
      <div>
        <!--    标题-->
        <h1 class="text-info col-12 text-center mb-3 forum-title">活动名</h1>
        <!--    帖子正文-->
        <div class="forum-content border-info overflow-auto col-9 offset-2 mb-3">
          帖子正文帖子正文帖子正文帖子正文帖子正文帖子正文帖子正文帖子正文帖子正文帖子正文帖子正文帖子正文帖子正文帖子正文帖子正文帖子正文帖子正文
        </div>
        <!--    帖子底部-->
        <div class="forum-footer border-info p-3 mb-3">
          <h3 class="text-center">{{ 'forum.active_date' | translate:{
            startDate: '2020-01-01',
            endDate: '2020-02-01'
          } }}</h3>
          <h3 class="text-center">{{ 'forum.active_score' | translate:{score: 10} }}</h3>
        </div>
      </div>

    </ng-container>
    <!--    投诉帖子-->
    <ng-template #elseBlock>
      <div class="complaint row p-3">

        <div class="col-5 border-info l-label h-100 d-flex justify-content-around">

          <!--      投诉人信息-->
          <div class="col-6 border-info l-label">
            <!--            头像-->
            <div class="d-flex justify-content-center mb-3 m-headimg">
              <img src="/" class="headimg">
            </div>
            <div class="text-center border-info mb-3 l-label">投诉人</div>
            <div class="text-center border-info l-label">信用分</div>
          </div>

          <!--          被投诉人信息-->
          <div class="col-6 border-info l-label">
            <div class="d-flex justify-content-center mb-3 m-headimg">
              <!--              头像-->
              <img src="/" class="headimg">
            </div>
            <div class="text-center border-info mb-3 l-label">投诉人</div>
            <div class="text-center border-info l-label">信用分</div>
          </div>

        </div>


        <!--      投诉内容-->
        <div class="col-7 border-success l-label h-100">
          <!--          投诉项-->
          <h1 class="text-center">投诉项</h1>
          <!--          投诉内容-->
          <div class="forum-content border-info overflow-auto mb-3">
            投诉内容投诉内容投诉内容投诉内容投诉内容投诉内容投诉内容投诉内容投诉内容投诉内容投诉内容投诉内容投诉内容投诉内容投诉内容投诉内容投诉内容
          </div>
          <!--          投诉时间-->
          <h1 class="text-center">{{ 'forum.complaint_time' | translate:{time: '2020-01-01'} }}</h1>
        </div>
      </div>
    </ng-template>

    <!--帖子审核按钮-->
    <div class="col-12 text-center">
      <button class="btn btn-info col-2 mr-3">{{ 'forum.approve' | translate }}</button>
      <button class="btn btn-danger col-2">{{ 'forum.reject' | translate }}</button>
    </div>
  </div>

</div>