更新论坛管理模块布局

src/app/forum/forum.component.html

@@ -23,8 +23,11 @@
   <h1 class="text-info col-12 text-center">{{ 'forum.check' | translate }}</h1>
 
 
+  <div class="col-3">
+
+    <!--帖子列表-->
+    <ul class="list-group">
 <!--      帖子列表-->
-    <ul class="list-group col-3">
       <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>
@@ -37,11 +40,27 @@
       <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="#">Previous</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="#">Next</a></li>
+      </ul>
+
+  </div>
+
 <!--  帖子内容-->
-  <div class="col-6 post border-secondary p-3 position-relative">
+  <div class="col-9 post border-secondary p-3 position-relative">
-    <div class="position-absolute">
+
+<!--    活动帖子-->
+    <ng-container *ngIf="true;else elseBlock">
+
+<!--      发件人信息-->
+      <div class="position-absolute sender">
     <!--    发帖人头像-->
-      <img src="/fff" class="headimg mb-3"/>
+        <img src="/" class="headimg mb-3"/>
     <!--    发帖人-->
         <div class="forum-label border-info mb-3 text-center">
            发帖人
@@ -51,6 +70,9 @@
           信用分
         </div>
       </div>
+
+<!--      帖子框架-->
+      <div>
     <!--    标题-->
         <h1 class="text-info col-12 text-center mb-3 forum-title">活动名</h1>
     <!--    帖子正文-->
@@ -62,6 +84,52 @@
             <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>
@@ -69,14 +137,4 @@
     </div>
   </div>
 
-<!--  帖子列表分页-->
-  <nav class="col-4 ml-5">
-    <ul class="pagination">
-      <li class="page-item"><a class="page-link" href="#">Previous</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="#">Next</a></li>
-    </ul>
-  </nav>
 </div>

src/app/forum/forum.component.scss

@@ -33,11 +33,28 @@
   border-width: 3px;
 }
 
+
+//帖子内容
+.forum-content{
+  border-style: solid;
+  border-width: 3px;
+  height: 300px;
+  max-height: 300px;
+}
+
+//活动贴start
 // 帖子标题
 .forum-title{
   z-index: 0;
 }
 
+
+//发帖人信息
+.sender{
+  margin-top: 65px;
+  margin-left: 45px;
+}
+
 //头像
 .headimg{
   height: 100px;
@@ -45,14 +62,6 @@
   z-index: 1;
 }
 
-//帖子内容
-.forum-content{
-  border-style: solid;
-  border-width: 3px;
-  height: 300px;
-  max-height: 300px;
-}
-
 //发帖人信息
 .forum-label{
   border-style: solid;
@@ -60,10 +69,29 @@
   width: 100px;
   height: 30px;
 }
-
+//帖子底部
 .forum-footer{
   border-style: solid;
   border-width: 3px;
   height: 100px;
 }
+//活动贴end
+
+//投诉帖start
+.complaint{
+  height: 460px;
+}
+
+//名称边框
+.l-label{
+  border-style: solid;
+  border-width: 3px;
+}
+
+//头像顶部距离
+.m-headimg{
+  margin-top: 50px;
+}
+
+//投诉帖end
 

src/assets/i18n/en-US.json

@@ -21,10 +21,11 @@
     "check": "check",
     "sender": "sender",
     "time": "time",
-    "active_date": "Active Date：From:{startDate} To {endDate}",
+    "active_date": "Active Date：From {{startDate}} To {{endDate}}",
-    "active_score": "Active Score：{score}",
+    "active_score": "Active Score：{{score}}",
     "approve": "approve",
-    "reject": "reject"
+    "reject": "reject",
+    "complaint": "time：{{time}}"
   },
   "tip":{
     "input": "please input ",

src/assets/i18n/zh-CN.json

@@ -23,8 +23,9 @@
     "time": "公告时间",
     "active_date": "活动起止时间：{{startDate}}到{{endDate}}",
     "active_score": "参与活动奖励信用分：{{score}}",
-    "approve": "通过",
+    "approve": "审核通过",
-    "reject": "拒绝"
+    "reject": "审核不通过",
+    "complaint_time": "投诉时间：{{time}}"
   },
   "tip":{
     "input": "请输入",