[完善] 登录页面完成, 删除多余图片

src/app/pages/lockscreen/lockscreen.component.html

@@ -1,13 +1,18 @@
 <div class="content">
-  <h1 class="header">考试系统</h1>
+  <div class="leftBox"></div>
 
   <div class="loginBox">
     <div class="center">
       <form (ngSubmit)="onSubmit(form.value)" #form="ngForm" class="example-container">
 
+        <div class="input">
+          <img src="../../../assets/images/loginHeader.png">
+          <h1>消防救援单位信息考核系统</h1>
+        </div>
+
         <div class="input" style="margin-bottom: 50px;">
-          <label class="role" [ngClass]="{'isCheck': roleType=='2'}" (click)='toggle(2)'>学员</label>
-          <label class="role" [ngClass]="{'isCheck': roleType=='1'}" (click)='toggle(1)'>教员</label>
+          <label class="role" [ngClass]="{'isCheck': roleType=='2'}" (click)='toggle(2)'>考官</label>
+          <label class="role" [ngClass]="{'isCheck': roleType=='1'}" (click)='toggle(1)'>考生</label>
         </div>
 
         <div class="input">
@@ -20,20 +25,13 @@
             <input id="password" name="password" type='password' required ngModel placeholder="请输入登录密码" maxlength="20">
         </div>
 
-        <div class="forget">
-          <label (click)='forget()'>忘记密码?</label>
-        </div>
-        
-        <div *ngIf="errmsg" class="alert-danger">
-          {{errmsg}}
-        </div>
-  
+        <div class="forget"><label (click)='forget()'>忘记密码?</label></div>
+        <div *ngIf="errmsg" class="alert-danger">{{errmsg}}</div>
         <button type="submit" [disabled]="!form.form.valid" class="loginBtn" mat-raised-button>登录</button>
+        <label class="toAdmin" (click)='toAdminLogin()'>管理员登录</label>
+
       </form>
     </div>
-    <img src="../../../assets/images/login.png" class="loginBackground">
   </div>
 
-  <p class="toLogin" title="管理员登录" (click)='toAdminLogin()'><mat-icon>arrow_drop_down_circle</mat-icon></p>
-  <p class="footer">Copyright <mat-icon style="vertical-align: top; font-size: 20px;">copyright</mat-icon> 2019 北京安信科创软件有限公司出品</p>
 </div>

src/app/pages/lockscreen/lockscreen.component.scss

@@ -1,76 +1,31 @@
 .content {
   width: 100%;
   height: 100%;
-  max-height: 100%;
   display: flex;
-  justify-content:center;
-  align-items: center;
-  background: url('../../../assets//images/loginBGC.png');
-  background-repeat:no-repeat; 
-  background-size:100% 100%;
-  -moz-background-size:100% 100%;
-}
-
-.loginBox {
-  min-width: 1080px;
-  min-height: 610px;
-  margin: 0 auto;
-  width: 70%;
-  text-align: center;
+  overflow: hidden;
   box-sizing: border-box;
-  position: relative;
-
-  .loginBackground{
-    width: 100%;
-    height: 100%;
-    margin: 0 auto;
-  }
-  .center {
-    width: 30%;
-    box-sizing: border-box;
-    margin: 0 auto;
-    position: absolute;
-    top: 24%;
-    right: 16%;
+  padding: 1px;
+  .leftBox {
+    flex: 70%;
+    background: url('../../../assets/images/loginBackground.png');
+    background-size: 100% 100%;
   }
-}
-
-.header {
-  width: 100%;
-  text-align: center;
-  position: fixed;
-  top: 60px;
-  font-size: 46px;
-  font-weight: 800;
-  color: #fff;
-  font-family: 'NSimSun';
-}
-.footer {
-  width: 100%;
-  text-align: center;
-  position: fixed;
-  bottom: 35px;
-  font-size: 14px;
-  color: white;
-}
-.toLogin{
-  color: 	#B0B0B0;
-  transform: rotate(90deg);
-  transform-origin: center center;
-  position: fixed;
-  left: 1%;
-  bottom: 1%;
-  cursor:pointer;
-  mat-icon{
-    width: 36px;
-    height: 36px;
-    font-size: 36px;
-    cursor:pointer;
+  .loginBox {
+    flex: 30%;
+    position: relative;
+    display: flex;
+    // align-items: center;
+    background-color: #fff;
+    .center { 
+      width: 60%;
+      margin: 0 auto;
+      text-align: center;
+      box-sizing: border-box;
+      padding-top: 120px;
+     }
   }
 }
 
-
-
 // 表单内部样式
 .forget{
   width: 100%;
@@ -79,7 +34,7 @@
   label {
     box-sizing: border-box;
     font-size: 14px;
-    color: #2196f3;
+    color: #07CDCF;
     cursor:pointer;
   }
 }
@@ -93,7 +48,7 @@
   width: 100%;
   color: white;
   border-radius: 5px;
-  background:linear-gradient(to right,#4DA3FE,#52b9fe,#56cdff)
+  background:linear-gradient(to right,#07CDCF,#07CDCF,#0ad6da);
 }
 //input 框 + 字体图标
 .input {
@@ -102,14 +57,13 @@
   position: relative;
   .role{
     box-sizing: border-box;
-    margin: 0px 15px;
+    padding: 10px 0;
+    margin: 0 10px;
     display: inline-block;
-    width: 30%;
     text-align: center;
-    font-size: 26px;
-    font-weight: 800;
-    font-family: 'NSimSun';
-    color: #4DA1FE;
+    font-size: 18px;
+    font-weight: 550;
+    color: #07CDCF;
     cursor:pointer;
   }
   input {
@@ -119,6 +73,8 @@
     height: 36px;
     padding-left: 30px;
   }
+  img { width: 75px; height: 80px; }
+  h1 { font-size:28px; font-weight:700;  margin-top:25px; font-style:italic; }
 }
 .icon {
   width: 24px;
@@ -136,8 +92,20 @@
   top: 7px;
   left: 8px;
 }
+.toAdmin {
+  display: inline-block;
+  width: 100%;
+  text-align: center;
+  font-size: 14px;
+  font-weight: 550;
+  color: #07CDCF;
+  cursor:pointer;
+  position: absolute;
+  bottom: 25px;
+  left: 0;
+}
 
 //class名是否选中
 .isCheck {
-  border-bottom: 3px solid #4DA1FE;
+  border-bottom: 3px solid #07CDCF;
 }

src/app/pages/lockscreen/lockscreen.component.ts

@@ -36,11 +36,7 @@ export class LockscreenComponent implements OnInit {
       sessionStorage.setItem("token",data.token);
       sessionStorage.setItem("refreshToken",data.refreshToken);
       this.token.startUp(); //登陆成功启动定时器刷新token
-      const config = new MatSnackBarConfig();
-      config.verticalPosition = 'top';
-      config.duration = 3000
       this.router.navigate(['/home/createexam']) //登陆成功跳转页面
-      this.snackBar.open('登陆成功','确定',config);
     },(err) => {this.errmsg = err})
   }
 

src/app/pages/login/login.component.html

@@ -1,33 +1,31 @@
-<div class="content">
+<div class="login">
   <div class="loginBox">
-      <h1 class="header">灭火救援指挥培训系统 (管理员)</h1>
 
-      <div class="center">
-        <form (ngSubmit)="onSubmit(form.value)" #form="ngForm" class="example-container">
+    <div>
+      <div class="card">
 
+        <span class="cardheader">考核系统管理员登录页面</span>
+        <form (ngSubmit)="onSubmit(form.value)" #form="ngForm" class="example-container">
+  
           <div class="input">
             <mat-icon class="icon">account_box</mat-icon>
-              <input id="name" name="name" required ngModel placeholder="请输入用户名" maxlength="18">
+              <input id="name" name="name" required ngModel placeholder="请输入用户名" maxlength="20">
           </div>
     
           <div class="input">
             <mat-icon class="icon2">lock</mat-icon>
-              <input id="password" name="password" type='password' required ngModel placeholder="请输入登录密码" maxlength="18">
+              <input id="password" name="password" type='password' required ngModel placeholder="请输入登录密码" maxlength="20">
           </div>
+  
+          <div class="forget"><label (click)='forget()'>忘记密码?</label></div>
+          <div *ngIf="errmsg" class="alert-danger">{{errmsg}}</div>
+          <button type="submit" [disabled]="!form.form.valid" class="loginBtn" mat-raised-button>登录</button>
+          <label class="toAdmin" (click)='toAdminLogin()'>返回</label>
 
-          <div class="forget">
-            <label (click)='forget()'>忘记密码?</label>
-          </div>
-          
-          <div *ngIf="errmsg" class="alert-danger">
-            {{errmsg}}
-          </div>
-    
-          <button type="submit" [disabled]="!form.form.valid" class="loginBtn" mat-raised-button color="primary">登录</button>
         </form>
-      </div>
 
+      </div>
+    </div>
+    
   </div>
-  <p class="toLogin" title="教员学员登录" (click)='toAdminLogin()'><mat-icon>arrow_drop_down_circle</mat-icon></p>
-  <p class="footer">Copyright <mat-icon style="vertical-align: top; font-size: 20px;">copyright</mat-icon> 2019 北京安信科创软件有限公司出品</p>
 </div>

src/app/pages/login/login.component.scss

@@ -1,81 +1,66 @@
-.content {
+.login {
   width: 100%;
   height: 100%;
-  max-height: 100%;
-  background: url('../../../assets//images/loginBackground.jpg');
-  background-repeat:no-repeat; 
+  overflow: hidden;
+  box-sizing: border-box;
+  padding: 1px;
+  background: url('../../../assets/images/loginBackground.png');
   background-size:100% 100%;
-  -moz-background-size:100% 100%;
 }
-
 .loginBox {
-  margin: 0 auto;
-  width: 40%;
-  text-align: center;
-  box-sizing: border-box;
-  padding: 8% 0;
-  .header {
-    font-size: 34px;
-    font-weight: 650;
-    font-family: 'NSimSun';
-  }
-  .center {
-    padding: 100px 0;
-    width: 50%;
-    box-sizing: border-box;
-    margin: 0 auto;
-  }
-}
-.footer {
   width: 100%;
+  height: 100%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+.card {
+  width: 500px;
+  height: 355px;
+  border-radius: 10px;
+  padding-top: 30px;
+  background-color: #fff;
   text-align: center;
-  position: fixed;
-  bottom: 35px;
-  color: #858688;
-  font-size: 14px;
+  box-shadow:0px 0px  10px 5px #333;
+  position: relative;
+  .example-container { width: 60%; margin: 0 auto; }
 }
-.toLogin{
-  color: 	#B0B0B0;
-  transform: rotate(270deg);
-  transform-origin: center center;
-  position: fixed;
-  left: 1%;
-  bottom: 1%;
-  cursor:pointer;
-  mat-icon{
-    width: 36px;
-    height: 36px;
-    font-size: 36px;
-    cursor:pointer;
-  }
+.cardheader{
+  font-size: 26px;
+  font-weight: 700;  
+  font-style: italic;
+  color: #07CDCF;
 }
 
-
-
 // 表单内部样式
 .forget{
-  margin: 30px auto;
+  width: 100%;
+  text-align: right;
+  margin: 15px auto;
   label {
-    margin-left: 80%;
     box-sizing: border-box;
     font-size: 14px;
-    color: #2196f3;
+    color: #07CDCF;
     cursor:pointer;
   }
 }
 .alert-danger {
-  margin-bottom: 30px;
+  margin-bottom: 10px;
   text-align: left;
   font-size: 14px;
   color: red;
 }
 .loginBtn {
   width: 100%;
+  color: white;
+  border-radius: 5px;
+  background:linear-gradient(to right,#07CDCF,#07CDCF,#0ad6da);
 }
 //input 框 + 字体图标
 .input {
   width: 100%;
-  margin: 30px auto;
+  margin: 35px auto 0;
   position: relative;
   input {
     width: 90%;
@@ -100,4 +85,16 @@
   position: absolute;
   top: 7px;
   left: 8px;
+}
+.toAdmin {
+  display: inline-block;
+  width: 100%;
+  text-align: center;
+  font-size: 14px;
+  font-weight: 550;
+  color: #07CDCF;
+  cursor:pointer;
+  position: absolute;
+  bottom: 10px;
+  left: 0;
 }

src/app/pages/login/login.component.ts

@@ -36,11 +36,7 @@ export class LoginComponent implements OnInit {
       sessionStorage.setItem("token",data.token);
       sessionStorage.setItem("refreshToken",data.refreshToken);
       this.token.startUp(); //登陆成功启动定时器刷新token
-      const config = new MatSnackBarConfig();
-      config.verticalPosition = 'top';
-      config.duration = 3000
       this.router.navigate(['/home/createexam']) //登陆成功跳转页面
-      this.snackBar.open('登陆成功','确定',config);
     },(err) => {this.errmsg = err})
   }