From 053745622345be65fc79273ebd86965604c7603b Mon Sep 17 00:00:00 2001
From: ZHD <123456>
Date: Sat, 23 May 2020 21:46:17 +0800
Subject: [PATCH] fix:ui

---
 src/app/account/login/login.component.html | 18 ++--
 src/app/account/login/login.component.scss |  3 +
 src/app/app.component.html                 |  2 +-
 src/app/forum/forum/forum.component.html   | 98 ++++++++++++----------
 src/app/forum/forum/forum.component.scss   |  3 +-
 src/styles.scss                            | 19 +++++
 6 files changed, 89 insertions(+), 54 deletions(-)

diff --git a/src/app/account/login/login.component.html b/src/app/account/login/login.component.html
index 965b482..658f29f 100644
--- a/src/app/account/login/login.component.html
+++ b/src/app/account/login/login.component.html
@@ -40,12 +40,18 @@
     </div>
 
     <div style="margin: 10px 0!important;" class="col-12 mx-auto text-right mb-3">
-      <!--    登陆按钮-->
-      <button style="background: rgb(45, 135, 210);border: rgb(45, 135, 210);padding: 4px 40px;float: left;margin-left: 20px;opacity: 1;" type="button" (click)="login()" class="btn btn-info btn-lg"
-              [disabled]="form().invalid">{{ 'button.login' | translate }}</button>
-      <!--    注册按钮 -->
-      <button style="background: rgb(45, 135, 210);border: rgb(45, 135, 210);padding: 4px 40px;margin-right: 20px;" type="button" class="btn btn-info btn-lg ml-3"
-              [routerLink]="['/register']">{{ 'button.register' | translate }}</button>
+      <div class="row flex-nowrap">
+        <div class="col-6">
+          <!--    登陆按钮-->
+          <button style="background: rgb(45, 135, 210);border: rgb(45, 135, 210);padding: 4px 40px;float: left;margin-left: 20px;opacity: 1; word-wrap: none;" type="button" (click)="login()" class="btn btn-info btn-lg"
+                  [disabled]="form().invalid">{{ 'button.login' | translate }}</button>
+        </div>
+        <div class="col-6">
+          <!--    注册按钮 -->
+          <button style="background: rgb(45, 135, 210);border: rgb(45, 135, 210);padding: 4px 40px;margin-right: 20px; word-wrap: none;" type="button" class="btn btn-info btn-lg ml-3"
+                  [routerLink]="['/register']">{{ 'button.register' | translate }}</button>
+        </div>
+      </div>
     </div>
 
     <app-message></app-message>
diff --git a/src/app/account/login/login.component.scss b/src/app/account/login/login.component.scss
index 621df14..3aa4b76 100644
--- a/src/app/account/login/login.component.scss
+++ b/src/app/account/login/login.component.scss
@@ -1,5 +1,6 @@
 
 #login{
+    // color: rgb(80, 138, 202);
     .mx-auto{
         margin: 10px 0;
     }
@@ -10,7 +11,9 @@
         border: none;
         outline: none;
     }
+    
 }
+
 //圆角边框
 .rect-radius {
   border: 1px solid;
diff --git a/src/app/app.component.html b/src/app/app.component.html
index 6b6f961..da4f44b 100644
--- a/src/app/app.component.html
+++ b/src/app/app.component.html
@@ -19,7 +19,7 @@
   </span>
 </nav>
 
-<nav class="navbar navbar-expand-lg navbar-light bg-light-self justify-content-center pb-0">
+<nav class="navbar navbar-expand-lg bg-white justify-content-center pb-0">
   <ng-container *ngIf="isLogin">
     <ul class="navbar-nav">
       <li class="nav-item mr-2" routerLinkActive="active">
diff --git a/src/app/forum/forum/forum.component.html b/src/app/forum/forum/forum.component.html
index a97d93e..8699d1f 100644
--- a/src/app/forum/forum/forum.component.html
+++ b/src/app/forum/forum/forum.component.html
@@ -1,10 +1,9 @@
 <!--公告轮播-->
 <ng-container *ngIf="notices;else load_notice_err">
-  111
   <h1 *ngIf="notices.length==0;else notice_temp"
       class="text-center col-12 m-3">{{prefix('notice.zero')|translate}}</h1>
   <ng-template #notice_temp>
-    <div id="carouselExampleControls" class="carousel slide bg-info m-3" data-ride="carousel">
+    <div id="carouselExampleControls" class="carousel slide bg-info m-3 bg-white" data-ride="carousel">
       <div class="carousel-inner">
         <ng-container *ngFor="let notice of notices;first as isFirst">
           <div class="carousel-item" [class.active]="isFirst">
@@ -16,7 +15,7 @@
                 <button [title]="this.prefix('delete')|translate" (click)="deleteNotice(notice.id)"
                         class="position-absolute delete_notice btn btn-outline-danger">
                   <svg class="icon" viewBox="0 0 1024 1024"
-                       xmlns="http://www.w3.org/2000/svg" width="50" height="50">
+                       xmlns="http://www.w3.org/2000/svg" width="20" height="20">
                     <path
                       d="M810.666667 273.493333L750.506667 213.333333 512 451.84 273.493333 213.333333 213.333333 273.493333 451.84 512 213.333333 750.506667 273.493333 810.666667 512 572.16 750.506667 810.666667 810.666667 750.506667 572.16 512z"
                     >
@@ -67,7 +66,7 @@
 
 
 <!--审核贴-->
-<div class="row border-warning check m-3">
+<div class="row border-warning check m-3 border-circle bg-white">
   <!--  审核帖标识-->
   <h1 class="text-info col-12 text-center">{{ 'forum.check' | translate }}</h1>
 
@@ -76,17 +75,17 @@
         class="text-center col-12 m-3">{{prefix('posts.zero')|translate}}</h1>
 
     <ng-template #post_temp>
-      <div class="col-3">
+      <div class="col-3  d-flex flex-column justify-content-between align-content-center">
 
         <!--帖子列表-->
-        <ul class="list-group">
+        <ul class="list-group flex-grow-1" style="background: #eee;">
           <!--      帖子列表-->
-          <li class="list-group-item" (click)="currentIndex=i" [class.active]="currentIndex===i"
+          <li class="list-group-item mb-2" (click)="currentIndex=i" [class.active]="currentIndex===i"
               *ngFor="let post of posts.forumList.list;index as i">{{post.title}}</li>
         </ul>
 
         <!--    分页按钮-->
-        <ul class="pagination ml-5 mt-3">
+        <ul class="pagination m-auto pb-4">
           <li class="page-item" [class.disabled]="posts.forumList.currentPage-1===0"><a class="page-link btn"
                                                                                         (click)="getAllPosts(posts.forumList.currentPage-1)">{{'button.prev_page'|translate}}</a>
           </li>
@@ -117,38 +116,43 @@
 
           <!--          活动贴-->
           <ng-container *ngSwitchCase="activeType">
-            <!--      发件人信息-->
-            <div class="position-absolute sender">
-              <!--    发帖人头像-->
-              <img [src]="getHeadImg(getForum().info.headImg)" alt="headimg" class="headimg mb-3"/>
-              <!--    发帖人-->
-              <div class="forum-label border-info mb-3 text-center">
-                {{getForum().username}}
-              </div>
-              <!--信用分-->
-              <div class="forum-label border-info mb-3 text-center">
-                {{getForum().info.creditScore}}
-              </div>
+            <div class="row">
+               <!--    标题-->
+              <h1 class="text-info col-12 text-center forum-title">{{getForum().title}}</h1>
             </div>
-
-            <!--      帖子框架-->
-            <div>
-              <!--    标题-->
-              <h1 class="text-info col-12 text-center mb-3 forum-title">{{getForum().title}}</h1>
-              <!--    帖子正文-->
-              <div class="forum-content border-info overflow-auto col-9 offset-2 mb-3">
-                {{getContent().content}}
+            <div class="row justify-content-around flex-nowrap mb-3">
+              <div class="col-3">
+                <!--      发件人信息-->
+                <div class="card">
+                  <!--    发帖人头像-->
+                  <img [src]="getHeadImg(getForum().info.headImg)" class="img-responsive card-img-top" alt="headimg">
+                  <ul class="list-group list-group-flush">
+                    <!--    发帖人-->
+                    <li class="list-group-item">昵称：{{getForum().username}}</li>
+                    <!--信用分-->
+                    <li class="list-group-item">信用分：{{getForum().info.creditScore}}</li>
+                  </ul>
+                </div>
               </div>
-              <!--    帖子底部-->
-              <div class="forum-footer border-info p-3 mb-3">
-                <h3
-                  class="text-center">{{'forum.deadline'|translate:{endDate: (getActive().registrationDeadline|date:dateFormat)} }}</h3>
-                <h3 class="text-center">{{ 'forum.active_date' | translate:{
-                  startDate: getActive().activeStartTime|date:dateFormat,
-                  endDate: getActive().activeEndTime|date:dateFormat
-                } }}</h3>
-                <h3
-                  class="text-center">{{ 'forum.active_score' | translate:{score: getActive().activeScore} }}</h3>
+                <!--      帖子框架-->
+                <div class="col-9 flex-column justify-content-between">
+            
+                  <!--    帖子正文-->
+                  <div class="forum-content border-info overflow-auto  d-flxe flex-column justify-content-between">
+                    <div class="flex-grow-1">
+                      {{getContent().content}}
+                    </div>
+                    <!--    帖子底部-->
+                    <div class="forum-footer border-info text-right p-3 mb-3">
+                      <div>
+                        {{'forum.deadline'|translate:{endDate: (getActive().registrationDeadline|date:dateFormat)} }}</div>
+                      <div>{{ 'forum.active_date' | translate:{
+                                    startDate: getActive().activeStartTime|date:dateFormat,
+                                    endDate: getActive().activeEndTime|date:dateFormat
+                                  } }}</div>
+                      <div>{{ 'forum.active_score' | translate:{score: getActive().activeScore} }}</div>
+                    </div>
+                  </div>
               </div>
             </div>
           </ng-container>
@@ -249,21 +253,23 @@
               <div class="forum-content border-info overflow-auto col-9 offset-2 mb-3">
                 {{getContent().content}}
               </div>
+              <!--    帖子底部-->
+              <div class="forum-footer border-info p-3 mb-3">
+                <h3
+                  class="text-center">{{ 'forum.active_score' | translate:{score: getScore().activeScore} }}</h3>
+              </div>
             </div>
 
-            <!--    帖子底部-->
-            <div class="forum-footer border-info p-3 mb-3">
-              <h3
-                class="text-center">{{ 'forum.active_score' | translate:{score: getScore().activeScore} }}</h3>
-            </div>
 
           </ng-container>
 
         </ng-container>
         <!--帖子审核按钮-->
-        <div class="col-12 text-center">
-          <button class="btn btn-info col-2 mr-3" (click)="checkPost(okType)">{{ 'forum.approve' | translate }}</button>
-          <button class="btn btn-danger col-2" (click)="checkPost(failType)">{{ 'forum.reject' | translate }}</button>
+        <div class="row">
+          <div class="col-12 text-center">
+            <button class="btn btn-info col-2 mr-3 btn-border" (click)="checkPost(okType)">{{ 'forum.approve' | translate }}</button>
+            <button class="btn btn-danger col-2 btn-border" (click)="checkPost(failType)">{{ 'forum.reject' | translate }}</button>
+          </div>
         </div>
 
       </div>
diff --git a/src/app/forum/forum/forum.component.scss b/src/app/forum/forum/forum.component.scss
index 28f5cd5..8d44164 100644
--- a/src/app/forum/forum/forum.component.scss
+++ b/src/app/forum/forum/forum.component.scss
@@ -42,7 +42,8 @@
 
 //帖子内容
 .forum-content {
-  border-style: solid;
+  display: flex;
+  border-style: none;
   border-width: 3px;
   height: 300px;
   max-height: 300px;
diff --git a/src/styles.scss b/src/styles.scss
index 01d9aa6..0dfeb68 100644
--- a/src/styles.scss
+++ b/src/styles.scss
@@ -9,6 +9,10 @@ body{
     background-color: rgb(141, 198, 248) !important;
 }
 
+.bg-white {
+    background-color: #fff!important;
+}
+
 // navBar 第一栏字体放大
 .nav-text-lg {
     font-size: 1.5rem;
@@ -18,3 +22,18 @@ body{
 .btn-border {
     border-radius: 1rem;
 }
+
+.border-circle,
+.border-circle * {
+    border-radius: 0.5rem;
+}
+
+.border-circle {
+    // background-color: #eee;
+}
+
+.border-circle * {
+    border-radius: 0.5rem;
+    // border-style:none !important;
+    // background-color: #fff;
+}
\ No newline at end of file