更新论坛管理模块布局

change
panqihua 4 years ago
parent 5c1f8073bd
commit 2c3366feb0
  1. 126
      src/app/forum/forum.component.html
  2. 46
      src/app/forum/forum.component.scss
  3. 7
      src/assets/i18n/en-US.json
  4. 5
      src/assets/i18n/zh-CN.json

@ -23,8 +23,11 @@
<h1 class="text-info col-12 text-center">{{ 'forum.check' | translate }}</h1>
<div class="col-3">
<!--帖子列表-->
<ul class="list-group 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>
@ -37,46 +40,101 @@
<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="position-absolute">
<!-- 发帖人头像-->
<img src="/fff" class="headimg mb-3"/>
<!-- 发帖人-->
<div class="forum-label border-info mb-3 text-center">
发帖人
<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 class="forum-label border-info mb-3 text-center">
信用分
<!-- 帖子框架-->
<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>
</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>
<!--帖子审核按钮-->
</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>
<!-- 帖子列表分页-->
<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>

@ -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

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

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

Loading…
Cancel
Save