提交部分修改

src/app/account/login/login.component.html

@@ -1,48 +1,50 @@
 <!--设置高度，添加bootstrap样式类d-flex align-items-center 使表单垂直居中，justify-content-center水平居中-->
-<div [style]="height" class="d-flex align-items-center justify-content-center">
-  <form [formGroup]="loginForm" class="col-6">
+<div [style]="height" id="login" class="d-flex align-items-center justify-content-center">
+  <div style="color: #fff;">
+    <div style="font-size: 40px;font-weight: 700;">Pocket community</div>
+    <div style="font-size: 30px;font-weight: 400;">Redefining your community life</div>
+  </div>
+  <form [formGroup]="loginForm" class="col-4" style="padding: 70px 40px;background: #fff;margin-left: 20px;margin-top: 280px;border-radius: 5px;">
 
     <!--    管理员名-->
-    <div class="input-group mb-3 mx-auto col-7">
-      <div class="input-group-prepend">
+    <div style="margin: 20px 0!important;" class="input-group mb-3 mx-auto col-12">
+      <!-- <div class="input-group-prepend">
         <span class="input-group-text">{{ 'login.manager_name' | translate }}</span>
-      </div>
+      </div> -->
+      <span style="margin-right: 5px;margin-top: 3px;"><img src="../../../assets/image/head.png" style="height: 30px;width: 30px;" /></span>
       <input autocomplete="managerName" type="text" class="form-control text-center"
              [class.is-invalid]="getValue('managerName').invalid"
              [placeholder]="'tip.input' | translate:{value:'login.manager_name'|translate}"
              formControlName="managerName">
-
+ 
       <div class="invalid-feedback font-weight-bold text-center">
         {{'tip.notnull' | translate:{value: 'login.manager_name'|translate} }}
       </div>
     </div>
 
     <!--    管理员密码-->
-    <div class="input-group mb-3 mx-auto col-7">
-      <div class="input-group-prepend">
+    <div style="margin: 20px 0!important;" class="input-group mb-3 mx-auto col-12">
+      <!-- <div class="input-group-prepend">
         <span class="input-group-text">{{ 'login.password' | translate }}</span>
-      </div>
+      </div> -->
+      <span style="margin-right: 5px;margin-top: 3px;"><img src="../../../assets/image/head.png" style="height: 30px;width: 30px;" /></span>
       <input autocomplete="new-password" type="password" class="form-control text-center"
              [class.is-invalid]="getValue('password').invalid"
              [placeholder]="'tip.input' | translate:{value:'login.manager_name'|translate}" formControlName="password">
-      <div class="input-group-append">
-        <button class="btn btn-outline-secondary" type="button"
-                [routerLink]="['/reset_pwd']">{{ 'button.forget_pwd' | translate }}</button>
-      </div>
-
       <div class="invalid-feedback font-weight-bold text-center">
         {{'tip.notnull' | translate:{value: 'login.password'|translate} }}
       </div>
-
+    </div>
+    <div style="text-align: right;">
+      <a style="color: black;font-size: 12px;" type="button" [routerLink]="['/reset_pwd']">{{ 'button.forget_pwd' | translate }}</a>
     </div>
 
-
-    <div class="col-5 mx-auto text-center mb-3">
+    <div style="margin: 10px 0!important;" class="col-12 mx-auto text-right mb-3">
       <!--    登陆按钮-->
-      <button type="button" (click)="login()" class="btn btn-primary btn-lg"
+      <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 type="button" class="btn btn-info btn-lg ml-3"
+      <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>
 

src/app/account/login/login.component.scss

@@ -0,0 +1,12 @@
+#login{
+    .mx-auto{
+        margin: 10px 0;
+    }
+    .form-control{
+        // color: #fff;
+        background: rgb(242, 242, 242);
+        border-radius: 19px!important;
+        border: none;
+        outline: none;
+    }
+}

src/app/account/register/register.component.html

@@ -1,12 +1,15 @@
 <!--设置高度，添加bootstrap样式类d-flex align-items-center 使表单垂直居中，justify-content-center水平居中-->
-<div [style]="height" class="d-flex align-items-center justify-content-center">
-  <form [formGroup]="registerForm" class="col-6">
-
+<div id="register" [style]="height" class="align-items-center justify-content-center">
+  <div style="color: #fff;" class="col-12">
+    <div style="font-size: 40px;font-weight: 700;text-align: center;margin: 10px 0 30px;">Pocket community</div>
+  </div>
+  <form [formGroup]="registerForm" class="col-5" style="margin: 0 auto;padding: 50px 40px;background: #fff;border-radius: 5px;">
     <!--    管理员名-->
-    <div class="input-group mb-3 mx-auto col-7">
-      <div class="input-group-prepend">
+    <div  style="margin: 20px 0!important;" class="input-group mb-3 mx-auto col-12">
+      <!-- <div class="input-group-prepend">
         <span class="input-group-text">{{ 'login.manager_name' | translate }}</span>
-      </div>
+      </div> -->
+      <span style="margin-right: 5px;margin-top: 3px;"><img src="../../../assets/image/head.png" style="height: 30px;width: 30px;" /></span>
       <input type="text" class="form-control text-center" [class.is-invalid]="getValue('managerName').invalid"
              [placeholder]="'tip.input' | translate:{value:'login.manager_name'|translate}"
              formControlName="managerName"/>
@@ -16,10 +19,11 @@
     </div>
 
     <!--    管理员密码-->
-    <div class="input-group mb-3 mx-auto col-7">
-      <div class="input-group-prepend">
+    <div style="margin: 20px 0!important;" class="input-group mb-3 mx-auto col-12">
+      <!-- <div class="input-group-prepend">
         <span class="input-group-text">{{ 'login.password' | translate }}</span>
-      </div>
+      </div> -->
+      <span style="margin-right: 5px;margin-top: 3px;"><img src="../../../assets/image/head.png" style="height: 30px;width: 30px;" /></span>
       <input autocomplete="password" type="password" class="form-control text-center"
              [class.is-invalid]="getValue('password').invalid"
              [placeholder]="'tip.input' | translate:{value:'login.password'|translate}" formControlName="password"/>
@@ -31,10 +35,11 @@
 
 
     <!--    管理员确认密码-->
-    <div class="input-group mb-3 mx-auto col-7">
-      <div class="input-group-prepend">
+    <div style="margin: 20px 0!important;" class="input-group mb-3 mx-auto col-12">
+      <!-- <div class="input-group-prepend">
         <span class="input-group-text">{{ 'register.confirm_pwd' | translate }}</span>
-      </div>
+      </div> -->
+      <span style="margin-right: 5px;margin-top: 3px;"><img src="../../../assets/image/head.png" style="height: 30px;width: 30px;" /></span>
       <input autocomplete="confirmPassword" type="password" class="form-control text-center"
              [class.is-invalid]="getValue('confirmPassword').invalid"
              [placeholder]="'tip.input' | translate:{value:'register.confirm_pwd'|translate}"
@@ -51,10 +56,11 @@
     </div>
 
     <!--    手机号-->
-    <div class="input-group mb-3 mx-auto col-7">
-      <div class="input-group-prepend">
+    <div style="margin: 20px 0!important;" class="input-group mb-3 mx-auto col-12">
+      <!-- <div class="input-group-prepend">
         <span class="input-group-text">{{ 'register.mobile' | translate }}</span>
-      </div>
+      </div> -->
+      <span style="margin-right: 5px;margin-top: 3px;"><img src="../../../assets/image/head.png" style="height: 30px;width: 30px;" /></span>
       <input type="number" class="form-control text-center" [class.is-invalid]="getValue('mobile').invalid"
              [placeholder]="'tip.input' | translate:{value:'register.mobile'|translate}" formControlName="mobile"/>
 
@@ -69,14 +75,15 @@
     </div>
 
     <!--    邮箱-->
-    <div class="input-group mb-3 mx-auto col-8">
-      <div class="input-group-prepend">
+    <div style="margin: 20px 0!important;" class="input-group mb-3 mx-auto col-12">
+      <!-- <div class="input-group-prepend">
         <span class="input-group-text">{{ 'register.email' | translate }}</span>
-      </div>
+      </div> -->
+      <span style="margin-right: 5px;margin-top: 3px;"><img src="../../../assets/image/head.png" style="height: 30px;width: 30px;" /></span>
       <input type="text" class="form-control text-center"
              [placeholder]="'tip.input' | translate:{value:'register.email'|translate}" formControlName="email"
              [class.is-invalid]="getValue('email').invalid"/>
-      <select class="custom-select" formControlName="emailType">
+      <select class="custom-select form-control" style="margin-left: 10px;" formControlName="emailType">
         <option value="">{{'tip.select'|translate:{value: 'register.email_type'|translate} }}</option>
         <option *ngFor="let item of (emailType$|async)?.emailTypeList" [value]="item.suffix">{{item.name}}</option>
 
@@ -87,12 +94,12 @@
       </div>
     </div>
 
-    <div class="col-7 mx-auto text-center mb-3">
+    <div class="col-12 mx-auto text-right mb-3" style="margin: 10px 0!important;">
       <!--    注册按钮-->
-      <button type="button" (click)="register()" [disabled]="form().invalid"
+      <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)="register()" [disabled]="form().invalid"
               class="btn btn-primary btn-lg">{{ 'button.register' | translate }}</button>
       <!--    返回登陆按钮-->
-      <button type="button" [routerLink]="['/login']"
+      <button style="background: rgb(45, 135, 210);border: rgb(45, 135, 210);padding: 4px 40px;margin-right: 20px;" type="button" [routerLink]="['/login']"
               class="btn btn-info btn-lg ml-3">{{ 'button.backLogin' | translate }}</button>
     </div>
 

src/app/account/register/register.component.scss

@@ -0,0 +1,9 @@
+#register{
+    .form-control{
+        // color: #fff;
+        background: rgb(242, 242, 242);
+        border-radius: 19px!important;
+        border: none;
+        outline: none;
+    }
+}

src/app/account/resetpwd/resetpwd.component.html

@@ -1,11 +1,15 @@
 <!--设置高度，添加bootstrap样式类d-flex align-items-center 使表单垂直居中，justify-content-center水平居中-->
-<div [style]="height" class="d-flex align-items-center justify-content-center">
-  <form [formGroup]="resetForm" class="col-6">
+<div id="resetpwd" [style]="height" class="align-items-center justify-content-center">
+  <div style="color: #fff;" class="col-12">
+    <div style="font-size: 40px;font-weight: 700;text-align: center;margin: 10px 0 30px;">Pocket community</div>
+  </div>
+  <form [formGroup]="resetForm" class="col-5" style="margin: 0 auto;padding: 50px 40px;background: #fff;border-radius: 5px;">
     <!--    管理员名-->
-    <div class="input-group mb-3 mx-auto col-7" [class.d-none]="step===3">
-      <div class="input-group-prepend">
+    <div  style="margin: 20px 0!important;" class="input-group mb-3 mx-auto col-12" [class.d-none]="step===3">
+      <!-- <div class="input-group-prepend">
         <span class="input-group-text">{{ 'login.manager_name' | translate }}</span>
-      </div>
+      </div> -->
+      <span style="margin-right: 5px;margin-top: 3px;"><img src="../../../assets/image/head.png" style="height: 30px;width: 30px;" /></span>
       <input type="text" class="form-control text-center disabled" [class.is-invalid]="getValue('managerName').invalid"
              [placeholder]="'tip.input' | translate:{value:'login.manager_name'|translate}"
              formControlName="managerName"/>
@@ -15,14 +19,15 @@
     </div>
 
     <!--    邮箱 -->
-    <div class="input-group mb-3 mx-auto col-8" [class.col-8]="step===1" [class.col-9]="step===2" *ngIf="step!==3">
-      <div class="input-group-prepend">
+    <div  style="margin: 20px 0!important;" class="input-group mb-3 mx-auto col-12" [class.col-8]="step===1" [class.col-9]="step===2" *ngIf="step!==3">
+      <!-- <div class="input-group-prepend">
         <span class="input-group-text">{{ 'register.email' | translate }}</span>
-      </div>
+      </div> -->
+      <span style="margin-right: 5px;margin-top: 3px;"><img src="../../../assets/image/head.png" style="height: 30px;width: 30px;" /></span>
       <input type="text" class="form-control text-center"
              [placeholder]="'tip.input' | translate:{value:'register.email'|translate}" formControlName="email"
              [class.is-invalid]="getValue('email').invalid"/>
-      <select class="custom-select" formControlName="emailType">
+      <select style="margin-left: 10px;" class="custom-select form-control" formControlName="emailType">
         <option value="">{{'tip.select'|translate:{value: 'register.email_type'|translate} }}</option>
         <option *ngFor="let item of (emailType$|async)?.emailTypeList" [value]="item.suffix">{{item.name}}</option>
 
@@ -41,10 +46,11 @@
     </div>
 
     <!--    新密码-->
-    <div class="input-group mb-3 mx-auto col-7" *ngIf="step===3">
-      <div class="input-group-prepend">
+    <div style="margin: 20px 0!important;" class="input-group mb-3 mx-auto col-12" *ngIf="step===3">
+      <!-- <div class="input-group-prepend">
         <span class="input-group-text">{{ 'reset_pwd.new_pwd' | translate }}</span>
-      </div>
+      </div> -->
+      <span style="margin-right: 5px;margin-top: 3px;"><img src="../../../assets/image/head.png" style="height: 30px;width: 30px;" /></span>
       <input type="password" class="form-control text-center disabled" [class.is-invalid]="getValue('password').invalid"
              [placeholder]="'tip.input' | translate:{value:'reset_pwd.new_pwd'|translate}"
              formControlName="password"/>
@@ -54,10 +60,11 @@
     </div>
 
     <!--    确认新密码-->
-    <div class="input-group mb-3 mx-auto col-7" *ngIf="step===3">
-      <div class="input-group-prepend">
+    <div style="margin: 20px 0!important;" class="input-group mb-3 mx-auto col-12" *ngIf="step===3">
+      <!-- <div class="input-group-prepend">
         <span class="input-group-text">{{ 'reset_pwd.confirm_pwd' | translate }}</span>
-      </div>
+      </div> -->
+      <span style="margin-right: 5px;margin-top: 3px;"><img src="../../../assets/image/head.png" style="height: 30px;width: 30px;" /></span>
       <input type="password" class="form-control text-center disabled"
              [class.is-invalid]="getValue('confirmPassword').invalid"
              [placeholder]="'tip.input' | translate:{value:'reset_pwd.confirm_pwd'|translate}"
@@ -74,10 +81,11 @@
     </div>
 
     <!--    验证码-->
-    <div class="input-group mb-3 mx-auto col-7" *ngIf="step===2">
-      <div class="input-group-prepend">
+    <div style="margin: 20px 0!important;" class="input-group mb-3 mx-auto col-12" *ngIf="step===2">
+      <!-- <div class="input-group-prepend">
         <span class="input-group-text">{{ 'reset_pwd.code' | translate }}</span>
-      </div>
+      </div> -->
+      <span style="margin-right: 5px;margin-top: 3px;"><img src="../../../assets/image/head.png" style="height: 30px;width: 30px;" /></span>
       <input type="text" class="form-control text-center"
              [placeholder]="'tip.input' | translate:{value:'reset_pwd.code'|translate}"
              [class.is-invalid]="getValue('verificationCode').invalid"

src/app/account/resetpwd/resetpwd.component.scss

@@ -0,0 +1,9 @@
+#resetpwd{
+    .form-control{
+        // color: #fff;
+        background: rgb(242, 242, 242);
+        border-radius: 19px!important;
+        border: none;
+        outline: none;
+    }
+}

src/app/app.component.html

@@ -1,30 +1,35 @@
 <nav class="navbar navbar-expand-lg navbar-light bg-light">
-  <span class="navbar-text">
+  <!-- <span class="navbar-text">
     {{ 'APP_TITLE' | translate }}
-  </span>
-
-
+  </span> -->
   <div class="collapse navbar-collapse" id="navbarSupportedContent">
-    <ng-container *ngIf="isLogin">
-      <ul class="navbar-nav mx-auto">
-        <li class="nav-item" routerLinkActive="active">
-          <a class="nav-link" [routerLink]="['/forum']">{{ 'forum.name' | translate }}</a>
-        </li>
-        <li class="nav-item" routerLinkActive="active">
-          <a class="nav-link" [routerLink]="['/visitor']">{{ 'visitor.name' | translate }}</a>
-        </li>
-        <li class="nav-item" routerLinkActive="active">
-          <a class="nav-link" [routerLink]="['/score']">{{ 'score.name' | translate }}</a>
-        </li>
-      </ul>
-    </ng-container>
-
-    <div class="dropdown">
+    <div *ngIf="isLogin" style="background: rgb(141, 198, 248);width: 100%;height: 200px;">
+      <div style="color: #fff!important;font-family: 'Times new roman'!important;padding-left: 30px;" class="col-12">
+        <div style="font-size: 40px;font-weight: 700;margin-top: 30px;">POCKET COMMUNITY</div>
+        <nav class="navbar text-left navbar-light" style="display: block;font-size: 22px;color: #fff!important;font-weight: 400;">
+          <span class="navbar-text mr-3" [innerHTML]="'tip.HELLO'|translate:{value:managerName}|html" *ngIf="isLogin"></span>
+          <a (click)="logout()" *ngIf="isLogin">{{'button.logout'|translate}}</a>
+        </nav>
+      </div>
+      <ng-container>
+        <ul class="navbar-nav mx-auto text-center" style="display: block;">
+          <li class="nav-item" routerLinkActive="active" style="">
+            <a class="nav-link" [routerLink]="['/forum']">{{ 'forum.name' | translate }}</a>
+          </li>
+          <li class="nav-item" routerLinkActive="active">
+            <a class="nav-link" [routerLink]="['/visitor']">{{ 'visitor.name' | translate }}</a>
+          </li>
+          <li class="nav-item" routerLinkActive="active">
+            <a class="nav-link" [routerLink]="['/score']">{{ 'score.name' | translate }}</a>
+          </li>
+        </ul>
+      </ng-container>
+    </div>
+    <div class="dropdown switch">
       <a class="btn btn-secondary dropdown-toggle" href="#" role="button" id="dropdownMenuLink" data-toggle="dropdown"
          aria-haspopup="true" aria-expanded="false">
         {{ 'language' | translate }}
       </a>
-
       <div class="dropdown-menu" aria-labelledby="dropdownMenuLink">
         <a class="dropdown-item" (click)="translate.use('zh-CN')">{{ 'chinese' | translate }}</a>
         <a class="dropdown-item" (click)="translate.use('en-US')">{{ 'english' | translate }}</a>
@@ -33,11 +38,6 @@
   </div>
 </nav>
 
-<nav class="navbar navbar-light bg-light justify-content-end">
-  <span class="navbar-text mr-3" [innerHTML]="'tip.HELLO'|translate:{value:managerName}|html" *ngIf="isLogin">
 
-  </span>
-  <button class="btn btn-info" (click)="logout()" *ngIf="isLogin">{{'button.logout'|translate}}</button>
-</nav>
 
 <router-outlet></router-outlet>

src/app/app.component.scss

@@ -1,3 +1,47 @@
 .manager {
   color: red;
 }
+.navbar{
+  padding: 0;
+}
+.switch{
+  position: absolute;
+  right: 20px;
+  top: 20px;
+  padding: 0px 20px;
+  background-color: #ffffff;
+  border-radius: 5px;
+  .btn-secondary{
+    background: none;
+    border: none;
+    color: rgb(80, 138, 202);
+  }
+  .btn-secondary:focus, .btn-secondary.focus{
+    box-shadow: none;
+  }
+  .dropdown-toggle::after{
+    border: none;
+    margin: 0;
+    content: none;
+  }
+  .dropdown-menu{
+    padding: 10px 40px;
+    right: 0;
+    left: -50px!important;
+    a{
+      line-height: 30px;
+      cursor: pointer;
+      &:hover{
+        background: none;
+      }
+    }
+  }
+}
+.navbar-light span {
+  color: #ffffff!important;
+  font-size: 22px!important;
+  font-family: 'Times new roman'!important;
+}
+.navbar-light a{
+  cursor: pointer;
+}

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

@@ -1,5 +1,6 @@
 <!--公告轮播-->
 <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>

src/styles.scss

@@ -1,2 +1,6 @@
 /* You can add global styles to this file, and also import other style files */
 @import '../node_modules/bootstrap/scss/bootstrap';
+
+body{
+    background: rgb(80, 138, 202);
+}