更新论坛管理模块布局

src/app/app.component.html

@@ -19,7 +19,7 @@
 
 <nav class="navbar navbar-light bg-light justify-content-end">
   <span class="navbar-text">
-    {{ 'tip.HELLO' | translate:param }}
+    {{ 'tip.HELLO' | translate:{value: 'admin'} }}
   </span>
 </nav>
 

src/app/app.component.ts

@@ -13,8 +13,6 @@ export class AppComponent {
   // 登陆状态
   isLogin;
 
-  // 当前登陆管理员
-  param = {value: 'admin'};
   navStart: Observable<NavigationStart>;
   constructor(public route: ActivatedRoute, public translate: TranslateService, private router: Router) {
 

src/app/forum/forum.component.html

@@ -1,12 +1,82 @@
+<!--公告栏-->
 <div class="notice bg-light col-5 mx-auto">
-<h1 class="text-center mb-3 mt-3">{{ 'forum.notice' | translate }}</h1>
+<!--  公告标志-->
-<div class="notice-content border-success mt-3 mb-3 position-relative">
+  <h1 class="text-center mb-3 mt-3">{{ 'forum.notice' | translate }}</h1>
-  <h2 class="text-center mb-3 mt-3">公告标题</h2>
+<!--  公告内容-->
-  <div class="notice-body overflow-auto">
+  <div class="notice-content border-success mt-3 mb-3 position-relative">
-     公告内容公告内容公告内容公告内容公告内容公告内容公告内容公告内容公告内容公告内容公告内容公告内容公告内容公告内容公告内容公告内容公告内容公告内容公告内容公告内容公告内容公告内容公告内容公告内容公告内容公告内容
+<!--    公告标题-->
-  </div>
+    <h2 class="text-center mb-3 mt-3">公告标题</h2>
-  <div class="notice-footer border border-info text-right align-text-bottom">
+<!--    公告正文-->
-    <span>编辑管理员</span><span>编辑时间：2020-01-01</span>
+    <div class="notice-body overflow-auto">
+      公告内容公告内容公告内容公告内容公告内容公告内容公告内容公告内容公告内容公告内容公告内容公告内容公告内容公告内容公告内容公告内容公告内容公告内容公告内容公告内容公告内容公告内容公告内容公告内容公告内容公告内容
+    </div>
+<!--    公告底部-->
+    <div class="notice-footer border border-info text-right align-text-bottom position-absolute">
+      <div class="col-12">{{ 'forum.sender' | translate }} ：admin<br>{{ 'forum.time' | translate }}：2020-01-01</div>
+    </div>
   </div>
 </div>
+
+<!--审核贴-->
+<div class="row border-warning check p-3">
+<!--  审核帖标识-->
+  <h1 class="text-info col-12 text-center">{{ 'forum.check' | translate }}</h1>
+
+
+    <!--帖子列表-->
+    <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>
+      <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>
+
+<!--  帖子内容-->
+  <div class="col-6 post border-secondary p-3 position-relative">
+    <div class="position-absolute">
+  <!--    发帖人头像-->
+      <img src="/fff" 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>
+<!--    标题-->
+    <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 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>
+
+<!--  帖子列表分页-->
+  <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

@@ -1,19 +1,69 @@
+//公告栏
 .notice{
   height: 300px;
 }
+//公告正文边框
 .notice-content{
   height: 200px;
   border-style: solid;
   border-width: 3px;
 }
+//公告正文
 .notice-body{
   max-height: 100px;
 }
-
+//公告底部
 .notice-footer{
-  position:absolute;
   top: 145px;
   bottom: 0;
   width: 100%;
+}
+//帖子正文
+.post{
+  border-style: solid;
+  border-width: 3px;
+}
+//公告编辑信息
+.author{
+  width:100px
+}
+//待审核帖子父边框
+.check{
+  border-style: solid;
+  border-width: 3px;
+}
+
+// 帖子标题
+.forum-title{
+  z-index: 0;
+}
 
+//头像
+.headimg{
+  height: 100px;
+  width: 100px;
+  z-index: 1;
 }
+
+//帖子内容
+.forum-content{
+  border-style: solid;
+  border-width: 3px;
+  height: 300px;
+  max-height: 300px;
+}
+
+//发帖人信息
+.forum-label{
+  border-style: solid;
+  border-width: 3px;
+  width: 100px;
+  height: 30px;
+}
+
+.forum-footer{
+  border-style: solid;
+  border-width: 3px;
+  height: 100px;
+}
+

src/assets/i18n/en-US.json

@@ -17,7 +17,14 @@
   },
   "forum": {
     "name": "forum",
-    "notice": "公告栏"
+    "notice": "notice",
+    "check": "check",
+    "sender": "sender",
+    "time": "time",
+    "active_date": "Active Date：From:{startDate} To {endDate}",
+    "active_score": "Active Score：{score}",
+    "approve": "approve",
+    "reject": "reject"
   },
   "tip":{
     "input": "please input ",

src/assets/i18n/zh-CN.json

@@ -17,7 +17,14 @@
   },
   "forum": {
     "name": "论坛管理",
-    "notice": "公告栏"
+    "notice": "公告栏",
+    "check": "待审核帖子",
+    "sender": "公告管理员",
+    "time": "公告时间",
+    "active_date": "活动起止时间：{{startDate}}到{{endDate}}",
+    "active_score": "参与活动奖励信用分：{{score}}",
+    "approve": "通过",
+    "reject": "拒绝"
   },
   "tip":{
     "input": "请输入",