edit

src/app/layout/passport/passport.component.html

@@ -9,8 +9,8 @@
   </nz-header>
   <nz-content class="content">
     <nz-row>
-      <nz-col nzSpan="14">
+      <nz-col nzSpan="14"  style="max-height       : calc(100% - 64px);">
-        <div>
+        <div class="earth-box">
           <img class="earth" src="./assets/images/login/earth.png" alt="">
         </div>
       </nz-col>

src/app/layout/passport/passport.component.less

@@ -8,18 +8,25 @@
 
     .ant-layout-header {
       background: #ffffff;
-      box-shadow: 0px 5px 5px #d1d1d1;
+      // box-shadow: 0px 5px 5px #d1d1d1;
     }
 
     nz-content {
       background     : url('../../../assets/images/login/login-bg.jpg') 100% 100% no-repeat;
-      background-size: cover
+      background-size: cover;
+      overflow       : hidden;
     }
 
     passport-login {
       background: transparent;
     }
 
+    .earth-box {
+      background     : url('../../../assets/images/login/5-地球元素02.png') 100% 100% no-repeat;
+      background-size: cover;
+      overflow       : hidden;
+    }
+
     .earth {
       animation        : eatthAnimation 60s linear infinite;
       -webkit-animation: eatthAnimation 60s linear infinite;

src/app/routes/passport/components/login/login.component.html

@@ -10,141 +10,88 @@
 -->
 
 <div class="body-box">
-  <div></div>
+  <div>
+
+  </div>
   <div>
     <div class="box-content d-flex">
       <!-- <img src="./assets/images/user/login-image.png" class="login-logo" alt="" /> -->
       <div class="login-box">
         <div class="login-box-content">
-          <nz-tabset (nzSelectChange)="switch($event)">
+          <img src="./assets/images/login/运多星logo-01.png" alt="" style="width: 130px;margin: auto;">
+          <nz-tabset (nzSelectChange)="switch($event)" class="mt-md text-left">
             <nz-tab nzTitle="密码登录">
               <sf #accountSF [layout]="'vertical'" [schema]="accountSchema" [ui]="accountUI" [button]="'none'">
                 <ng-template sf-template="username" let-i let-ui="ui" let-schema="schema">
                   <nz-input-group [nzSuffix]="inputClearTpl">
-                    <input
+                    <input type="text" nz-input [ngModel]="i.value" (ngModelChange)="i.setValue($event)"
-                      type="text"
+                      (keyup.enter)="submit()" placeholder="手机号码" />
-                      nz-input
-                      [ngModel]="i.value"
-                      (ngModelChange)="i.setValue($event)"
-                      (keyup.enter)="submit()"
-                      placeholder="请输入手机号"
-                    />
                   </nz-input-group>
                   <ng-template #inputClearTpl>
-                    <i
+                    <i nz-icon class="ant-input-clear-icon" nzTheme="fill" nzType="close-circle" *ngIf="i.value"
-                      nz-icon
+                      style="font-size: 16px" (click)="i.setValue(null)"></i>
-                      class="ant-input-clear-icon"
-                      nzTheme="fill"
-                      nzType="close-circle"
-                      *ngIf="i.value"
-                      style="font-size: 16px"
-                      (click)="i.setValue(null)"
-                    ></i>
                   </ng-template>
                 </ng-template>
                 <ng-template sf-template="password" let-i let-ui="ui" let-schema="schema">
                   <nz-input-group [nzSuffix]="inputClearTpl">
-                    <input
+                    <input [type]="isPasswordType ? 'password' : 'text'" nz-input [ngModel]="i.value"
-                      [type]="isPasswordType ? 'password' : 'text'"
+                      (ngModelChange)="i.setValue($event)" placeholder="密码" (keyup.enter)="submit()" />
-                      nz-input
-                      [ngModel]="i.value"
-                      (ngModelChange)="i.setValue($event)"
-                      placeholder="请输入密码"
-                      (keyup.enter)="submit()"
-                    />
                   </nz-input-group>
                   <ng-template #inputClearTpl>
-                    <i
+                    <i *ngIf="isPasswordType" nz-icon class="ant-input-clear-icon" style="font-size: 22px"
-                      *ngIf="i.value && isPasswordType"
+                      nzType="eye" nzTheme="fill" (click)="isPasswordType = false"></i>
-                      nz-icon
+                    <i *ngIf="!isPasswordType" nz-icon class="ant-input-clear-icon" style="font-size: 22px"
-                      class="ant-input-clear-icon"
+                      nzType="eye-invisible" nzTheme="fill" (click)="isPasswordType = true"></i>
-                      style="font-size: 18px"
-                      nzType="eye"
-                      nzTheme="fill"
-                      (click)="isPasswordType = false"
-                    ></i>
-                    <i
-                      *ngIf="i.value && !isPasswordType"
-                      nz-icon
-                      class="ant-input-clear-icon"
-                      style="font-size: 18px"
-                      nzType="eye-invisible"
-                      nzTheme="fill"
-                      (click)="isPasswordType = true"
-                    ></i>
                   </ng-template>
                 </ng-template>
               </sf>
             </nz-tab>
-            <nz-tab nzTitle="验证码登录">
+            <nz-tab nzTitle="短信登录">
               <sf #captchaSF [layout]="'vertical'" [schema]="captchaSchema" [ui]="captchaUI" [button]="'none'">
                 <ng-template sf-template="phone" let-i let-ui="ui" let-schema="schema">
                   <nz-input-group [nzSuffix]="inputClearTpl">
-                    <input
+                    <input type="text" nz-input [ngModel]="i.value" (ngModelChange)="i.setValue($event)"
-                      type="text"
+                      (keyup.enter)="submit()" placeholder="手机号码" />
-                      nz-input
-                      [ngModel]="i.value"
-                      (ngModelChange)="i.setValue($event)"
-                      (keyup.enter)="submit()"
-                      placeholder="请输入手机号"
-                    />
                   </nz-input-group>
                   <ng-template #inputClearTpl>
-                    <i
+                    <i nz-icon class="ant-input-clear-icon" nzTheme="fill" nzType="close-circle" *ngIf="i.value"
-                      nz-icon
+                      style="font-size: 16px" (click)="i.setValue(null)"></i>
-                      class="ant-input-clear-icon"
-                      nzTheme="fill"
-                      nzType="close-circle"
-                      *ngIf="i.value"
-                      style="font-size: 16px"
-                      (click)="i.setValue(null)"
-                    ></i>
                   </ng-template>
                 </ng-template>
                 <ng-template sf-template="smsCode" let-me let-ui="ui" let-schema="schema">
                   <nz-input-group nzSearch [nzSuffix]="suffixTemplateInfo">
-                    <input
+                    <input nz-input type="text" [maxLength]="6" placeholder="验证码" [attr.id]="me.id"
-                      nz-input
+                      [disabled]="me.disabled" [attr.disabled]="me.disabled" [nzSize]="ui.size"
-                      type="text"
+                      [ngModel]="me.formProperty.value" (ngModelChange)="me.setValue($event)"
-                      [maxLength]="6"
+                      (keyup.enter)="submit()" />
-                      placeholder="验证码"
-                      [attr.id]="me.id"
-                      [disabled]="me.disabled"
-                      [attr.disabled]="me.disabled"
-                      [nzSize]="ui.size"
-                      [ngModel]="me.formProperty.value"
-                      (ngModelChange)="me.setValue($event)"
-                      (keyup.enter)="submit()"
-                    />
                   </nz-input-group>
                 </ng-template>
               </sf>
             </nz-tab>
           </nz-tabset>
-          <button
+          <button nz-button type="button" nzType="primary" nzSize="large" (click)="submit()"
-            nz-button
+            [nzLoading]="userSrv?.http?.loading" nzBlock class="but">
-            type="button"
-            nzType="primary"
-            nzSize="large"
-            (click)="submit()"
-            [nzLoading]="userSrv?.http?.loading"
-            nzBlock
-            class="mt-md"
-          >
             登录
           </button>
-          <p class="forgetPwd mt-xl" routerLink="/passport/retrieve-password">忘记密码</p>
+          <nz-divider></nz-divider>
+          <button nz-button type="button" nzSize="large" nzDanger nzBlock class="but">
+            还没有账号？免费注册
+          </button><br>
+          <button nz-button type="button" nzSize="large" nzDanger nzBlock class="but mt-md">
+            忘记密码？重置
+          </button>
+          <!-- <p class="forgetPwd mt-xl" routerLink="/passport/retrieve-password">忘记密码</p>
           <p class="agreement">
             登录即代表您同意 <a target="_blank" [routerLink]="['/passport/agreement']" [queryParams]="{ type: 1 }">《平台服务协议》</a>
             <a target="_blank" [queryParams]="{ type: 2 }" [routerLink]="['/passport/agreement']">《隐私政策》</a>
-          </p>
+          </p> -->
         </div>
       </div>
     </div>
   </div>
   <div class="box-footer">
-    深圳市怡亚通供应链股份有限公司 版权所有
+    <!-- 深圳市怡亚通供应链股份有限公司 版权所有
-    <p [innerHTML]="copyright"></p>
+    <p [innerHTML]="copyright"></p> -->
   </div>
 </div>
 
@@ -153,4 +100,4 @@
     <span class="msg-btn" style="color: #26282a; cursor: pointer; font-size: 14px" (click)="getCaptcha()">获取验证码</span>
   </ng-container>
   <ng-template #intervalTemplate> 请等待{{ count }}s </ng-template>
-</ng-template>
+</ng-template>

src/app/routes/passport/components/login/login.component.less

@@ -5,14 +5,14 @@
   flex-direction        : column;
   justify-content       : space-between;
   width                 : 100%;
-  max-width             : 960px;
+  max-width             : 473px;
   height                : calc(100vh - 64px);
   margin                : auto;
   -webkit-box-orient    : vertical;
 
   .box-content {
     width        : 100%;
-    height       : 600px;
+    height       : 630px;
     border-radius: 0px 16px 16px 0px;
 
     .login-logo {
@@ -25,9 +25,10 @@
       background-color: #fff;
 
       .login-box-content {
-        max-width: 434px;
+        max-width : 340px;
-        margin   : auto;
+        margin    : auto;
-        padding  : 88px 0 38px;
+        padding   : 46px 0 38px;
+        text-align: center;
       }
     }
 
@@ -107,7 +108,7 @@
     width: 281px;
 
     .ant-tabs-tab-btn {
-      font-size  : 24px;
+      font-size  : 20px;
       color      : #86909C;
       font-weight: 500;
     }
@@ -119,20 +120,25 @@
   }
 
   .ant-tabs-tab {
-    padding: 8px 0;
+    padding: 8px 0 20px;
+  }
+
+  .ant-tabs-tab+.ant-tabs-tab {
+    margin: 0 0 0 74px;
   }
 
   .ant-tabs-top>.ant-tabs-nav {
-    margin: 0 0 38px 0;
+    margin: 0 0 22px 0;
 
     .ant-tabs-ink-bar {
-      background: #26282A;
+      // background: #26282A;
+      height: 4px;
     }
   }
 
   // input 框样式修改
   nz-input-group {
-    height       : 44px;
+    height       : 48px;
     font-size    : 14px;
     border-radius: 4px;
     border-color : #E5E6EB;
@@ -152,7 +158,7 @@
   }
 
   .ant-form-item {
-    margin-bottom: 32px;
+    margin-bottom: 24px;
   }
 
   .ant-form-item-with-help {
@@ -161,24 +167,36 @@
 
   .ant-form-item-explain,
   .ant-form-item-extra {
-    min-height : 32px;
+    min-height : 24px;
     line-height: 2;
   }
 
+  .ant-form-item-explain,
+  .ant-form-item-extra {
+    font-size: 12px;
+  }
+
   // 按钮样式修改
   .ant-btn {
     padding: 0 16px 12px;
   }
 
+  .but {
+    font-size  : 14px;
+    line-height: 48px;
+    height     : 48px;
+    color      : #86909C;
+  }
+
   .ant-btn-primary {
-    color        : #fff;
+    color           : #fff;
-    background   : #26282A;
+    // background   : #26282A;
-    border-color : #26282A;
+    // border-color : #26282A;
-    font-size    : 14px;
+
-    line-height  : 40px;
-    height       : 44px;
     border-radius: 4px
   }
+
+
 }
 
 @media (max-width: 990px) {

src/app/routes/passport/passport.module.ts

@@ -25,7 +25,7 @@ import { ProPageModule } from 'src/app/layout/pro/shared/page';
 import { UserLoginComponent } from './components/login/login.component';
 import { OrderAgreementComponent } from './components/order-agreement/order-agreement.component';
 import { UserRetrievePasswordComponent } from './components/retrieve-password/retrieve-password.component';
-
+import { NzDividerModule } from 'ng-zorro-antd/divider';
 import { PassportRoutingModule } from './passport-routing.module';
 
 const COMPONENTS = [
@@ -54,6 +54,7 @@ const COMPONENTS = [
     NzToolTipModule,
     NzPopoverModule,
     NzProgressModule,
+    NzDividerModule,
     NzAvatarModule,
     SEModule,
     ResultModule,

src/assets/login/js/script.js

@@ -118,7 +118,7 @@
 					clearInterval(me.createIntervalId);
 				}
 				counter++;
-			}.bind(this), 250);
+			}.bind(this), 50);
 		}
 		else {
 			// Create particle objects