edit

src/app/layout/passport/a.scss

@@ -0,0 +1,126 @@
+body {
+    background     : radial-gradient(ellipse at bottom, #1b2735 0%, #090a0f 100%);
+    height         : 100vh;
+    overflow       : hidden;
+    display        : flex;
+    font-family    : 'Anton', sans-serif;
+    justify-content: center;
+    align-items    : center;
+}
+
+$shooting-time: 3000ms;
+
+.night {
+    position    : relative;
+    width       : 100%;
+    height      : 100%;
+    transform   : rotateZ(45deg);
+    // animation: sky 200000ms linear infinite;
+}
+
+.shooting_star {
+    position     : absolute;
+    left         : 50%;
+    top          : 50%;
+    // width: 100px;
+    height       : 2px;
+    background   : linear-gradient(-45deg, rgba(95, 145, 255, 1), rgba(0, 0, 255, 0));
+    border-radius: 999px;
+    filter       : drop-shadow(0 0 6px rgba(105, 155, 255, 1));
+    animation    :
+        tail $shooting-time ease-in-out infinite,
+        shooting $shooting-time ease-in-out infinite;
+
+    &::before {
+        content      : '';
+        position     : absolute;
+        top          : calc(50% - 1px);
+        right        : 0;
+        // width: 30px;
+        height       : 2px;
+        background   : linear-gradient(-45deg, rgba(0, 0, 255, 0), rgba(95, 145, 255, 1), rgba(0, 0, 255, 0));
+        transform    : translateX(50%) rotateZ(45deg);
+        border-radius: 100%;
+        animation    : shining $shooting-time ease-in-out infinite;
+    }
+
+    &::after {
+        // CodePen Error
+        // @extend .shooting_star::before;
+
+        content      : '';
+        position     : absolute;
+        top          : calc(50% - 1px);
+        right        : 0;
+        // width: 30px;
+        height       : 2px;
+        background   : linear-gradient(-45deg, rgba(0, 0, 255, 0), rgba(95, 145, 255, 1), rgba(0, 0, 255, 0));
+        transform    : translateX(50%) rotateZ(45deg);
+        border-radius: 100%;
+        animation    : shining $shooting-time ease-in-out infinite;
+        transform    : translateX(50%) rotateZ(-45deg);
+    }
+
+    @for $i from 1 through 20 {
+        &:nth-child(#{$i}) {
+            $delay         : random(9999) + 0ms;
+            top            : calc(50% - #{random(400) - 200px});
+            left           : calc(50% - #{random(300) + 0px});
+            // animation-delay: $delay;
+            // opacity: random(50) / 100 + 0.5;
+
+            &::before,
+            &::after {
+                // animation-delay: $delay;
+            }
+        }
+    }
+}
+
+@keyframes tail {
+    0% {
+        width: 0;
+    }
+
+    30% {
+        width: 100px;
+    }
+
+    100% {
+        width: 0;
+    }
+}
+
+@keyframes shining {
+    0% {
+        width: 0;
+    }
+
+    50% {
+        width: 30px;
+    }
+
+    100% {
+        width: 0;
+    }
+}
+
+@keyframes shooting {
+    0% {
+        transform: translateX(0);
+    }
+
+    100% {
+        transform: translateX(300px);
+    }
+}
+
+@keyframes sky {
+    0% {
+        transform: rotate(45deg);
+    }
+
+    100% {
+        transform: rotate(45 + 360deg);
+    }
+}

src/app/layout/passport/d.scss

@@ -0,0 +1,64 @@
+$n: 20; // 流星數量
+
+
+$shadow: ();
+
+
+@for $i from 1 through $n {
+    $v: random(90) + 9; // left
+    $h: random(150) + 10; // top
+    $d: random(70)/10 + 12; // 秒數
+
+    .meteor-#{$i} {
+        position        : fixed;
+        top             : $h + px;
+        left            : $v*1%;
+        width           : 130px;
+        height          : 1px;
+        transform       : rotate(-45deg);
+        background-image: linear-gradient(to right, #fff, rgba(255, 255, 255, 0));
+        animation       : meteor $d+s linear infinite;
+
+        &:before {
+            content      : "";
+            position     : fixed;
+            width        : 4px;
+            height       : 5px;
+            border-radius: 50%;
+            margin-top   : -2px;
+            background   : rgba(#fff, .7);
+            box-shadow   : 0 0 15px 3px #fff;
+        }
+
+    }
+}
+
+@keyframes meteor {
+    0% {
+        opacity     : 1;
+        margin-top  : -300px;
+        margin-right: -300px;
+    }
+
+    12% {
+        opacity: 0;
+    }
+
+    13% {
+        margin-top     : 600px;
+        margin-left    : -900px;
+        opacity        : 0.6;
+        animation-delay: 2000ms;
+    }
+
+    15% {
+        opacity: 0;
+    }
+
+
+    100% {
+        margin-top : 700px;
+        margin-left: -900px;
+        opacity    : 0;
+    }
+}

src/app/layout/passport/particle.ts

@@ -0,0 +1,325 @@
+export default class Particle {
+  getLimitedRandom = function (min: number, max: number, roundToInteger?: any) {
+    var number = Math.random() * (max - min) + min;
+    if (roundToInteger) {
+      number = Math.round(number);
+    }
+    return number;
+  };
+
+  returnRandomArrayitem = function (array: string | any[]) {
+    return array[Math.floor(Math.random() * array.length)];
+  };
+
+  constructor() {}
+
+  init() {
+    var ParticleNetworkAnimation: any, PNA: any;
+    ParticleNetworkAnimation = PNA = function () {};
+
+    PNA.prototype.init = function (element: any) {
+      console.log(this);
+      this.$el = document.getElementsByClassName(element);
+
+      this.container = element;
+      this.canvas = document.createElement('canvas');
+      this.sizeCanvas();
+      this.container.appendChild(this.canvas);
+      this.ctx = this.canvas.getContext('2d');
+      this.particleNetwork = new ParticleNetwork(this);
+
+      this.bindUiActions();
+
+      return this;
+    };
+
+    PNA.prototype.bindUiActions = function () {
+      (window as any).on('resize', () => {
+        // this.sizeContainer();
+        this.ctx.clearRect(0, 0, this.canvas.width, this.canvas.height);
+        this.sizeCanvas();
+        this.particleNetwork.createParticles();
+      });
+    };
+
+    PNA.prototype.sizeCanvas = function () {
+      this.canvas.width = this.container.offsetWidth;
+      this.canvas.height = this.container.offsetHeight;
+    };
+
+    console.log(PNA);
+
+    const Particle: any = function (parent: any, x?: any, y?: any) {
+      // this.network = parent;
+      // this.canvas = parent.canvas;
+      // this.ctx = parent.ctx;
+      // this.particleColor = ;
+      // this.radius = ;
+      // this.opacity = 0;
+      // this.x = x || Math.random() * this.canvas.width;
+      // this.y = y || Math.random() * this.canvas.height;
+      // this.velocity = {
+      //   x: (Math.random() - 0.5) * parent.options.velocity,
+      //   y: (Math.random() - 0.5) * parent.options.velocity
+      // };
+      return {
+        network: parent,
+        canvas: parent.canvas,
+        ctx: parent.ctx,
+        // particleColor: this.returnRandomArrayitem(parent.options.particleColors),
+        // radius: this.getLimitedRandom(1.5, 2.5),
+        opacity: 0,
+        x: x || Math.random() * parent.canvas.width,
+        y: y || Math.random() * parent.canvas.height,
+        velocity: {
+          x: (Math.random() - 0.5) * parent.options.velocity,
+          y: (Math.random() - 0.5) * parent.options.velocity
+        }
+      };
+    };
+    console.log(new Particle(this));
+
+    Particle.prototype.update = function () {
+      if (this.opacity < 1) {
+        this.opacity += 0.01;
+      } else {
+        this.opacity = 1;
+      }
+      // Change dir if outside map
+      if (this.x > this.canvas.width + 100 || this.x < -100) {
+        this.velocity.x = -this.velocity.x;
+      }
+      if (this.y > this.canvas.height + 100 || this.y < -100) {
+        this.velocity.y = -this.velocity.y;
+      }
+
+      // Update position
+      this.x += this.velocity.x;
+      this.y += this.velocity.y;
+    };
+
+    Particle.prototype.draw = function () {
+      // Draw particle
+      this.ctx.beginPath();
+      this.ctx.fillStyle = this.particleColor;
+      this.ctx.globalAlpha = this.opacity;
+      this.ctx.arc(this.x, this.y, this.radius, 0, 2 * Math.PI);
+      this.ctx.fill();
+    };
+
+    var ParticleNetwork: any = function (this: any, parent: { canvas: any; ctx: any }) {
+      this.options = {
+        velocity: 1, // the higher the faster
+        density: 15000, // the lower the denser
+        netLineDistance: 200,
+        netLineColor: '#929292',
+        particleColors: ['#aaa'] // ['#6D4E5C', '#aaa', '#FFC458' ]
+      };
+      this.canvas = parent.canvas;
+      this.ctx = parent.ctx;
+
+      this.init();
+    };
+
+    ParticleNetwork.prototype.init = function () {
+      // Create particle objects
+      this.createParticles(true);
+
+      // Update canvas
+      this.animationFrame = requestAnimationFrame(this.update.bind(this));
+
+      this.bindUiActions();
+    };
+
+    ParticleNetwork.prototype.createParticles = function (isInitial: any) {
+      // Initialise / reset particles
+      var me = this;
+      this.particles = [];
+      var quantity = (this.canvas.width * this.canvas.height) / this.options.density;
+
+      if (isInitial) {
+        var counter = 0;
+        clearInterval(this.createIntervalId);
+        this.createIntervalId = setInterval(() => {
+          if (counter < quantity - 1) {
+            // Create particle object
+            this.particles.push(new Particle(this));
+          } else {
+            clearInterval(me.createIntervalId);
+          }
+          counter++;
+        }, 50);
+      } else {
+        // Create particle objects
+        for (var i = 0; i < quantity; i++) {
+          this.particles.push(new Particle(this));
+        }
+      }
+    };
+
+    ParticleNetwork.prototype.createInteractionParticle = function () {
+      // Add interaction particle
+      this.interactionParticle = new Particle(this);
+      this.interactionParticle.velocity = {
+        x: 0,
+        y: 0
+      };
+      this.particles.push(this.interactionParticle);
+      return this.interactionParticle;
+    };
+
+    ParticleNetwork.prototype.removeInteractionParticle = function () {
+      // Find it
+      var index = this.particles.indexOf(this.interactionParticle);
+      if (index > -1) {
+        // Remove it
+        this.interactionParticle = undefined;
+        this.particles.splice(index, 1);
+      }
+    };
+
+    ParticleNetwork.prototype.update = function () {
+      if (this.canvas) {
+        this.ctx.clearRect(0, 0, this.canvas.width, this.canvas.height);
+        this.ctx.globalAlpha = 1;
+
+        // Draw connections
+        for (var i = 0; i < this.particles.length; i++) {
+          for (var j = this.particles.length - 1; j > i; j--) {
+            var distance,
+              p1 = this.particles[i],
+              p2 = this.particles[j];
+
+            // check very simply if the two points are even a candidate for further measurements
+            distance = Math.min(Math.abs(p1.x - p2.x), Math.abs(p1.y - p2.y));
+            if (distance > this.options.netLineDistance) {
+              continue;
+            }
+
+            // the two points seem close enough, now let's measure precisely
+            distance = Math.sqrt(Math.pow(p1.x - p2.x, 2) + Math.pow(p1.y - p2.y, 2));
+            if (distance > this.options.netLineDistance) {
+              continue;
+            }
+
+            this.ctx.beginPath();
+            this.ctx.strokeStyle = this.options.netLineColor;
+            this.ctx.globalAlpha = ((this.options.netLineDistance - distance) / this.options.netLineDistance) * p1.opacity * p2.opacity;
+            this.ctx.lineWidth = 0.7;
+            this.ctx.moveTo(p1.x, p1.y);
+            this.ctx.lineTo(p2.x, p2.y);
+            this.ctx.stroke();
+          }
+        }
+
+        // Draw particles
+        for (var i = 0; i < this.particles.length; i++) {
+          this.particles[i].update();
+          this.particles[i].draw();
+        }
+
+        if (this.options.velocity !== 0) {
+          this.animationFrame = requestAnimationFrame(this.update.bind(this));
+        }
+      } else {
+        cancelAnimationFrame(this.animationFrame);
+      }
+    };
+
+    ParticleNetwork.prototype.bindUiActions = function () {
+      // Mouse / touch event handling
+      this.spawnQuantity = 3;
+      this.mouseIsDown = false;
+      this.touchIsMoving = false;
+
+      this.onMouseMove = (e: { offsetX: any; offsetY: any }) => {
+        if (!this.interactionParticle) {
+          this.createInteractionParticle();
+        }
+        this.interactionParticle.x = e.offsetX;
+        this.interactionParticle.y = e.offsetY;
+      };
+
+      this.onTouchMove = (e: { preventDefault: () => void; changedTouches: { clientX: any; clientY: any }[] }) => {
+        e.preventDefault();
+        this.touchIsMoving = true;
+        if (!this.interactionParticle) {
+          this.createInteractionParticle();
+        }
+        this.interactionParticle.x = e.changedTouches[0].clientX;
+        this.interactionParticle.y = e.changedTouches[0].clientY;
+      };
+
+      this.onMouseDown = () => {
+        this.mouseIsDown = true;
+        var counter = 0;
+        var quantity = this.spawnQuantity;
+        var intervalId = setInterval(() => {
+          if (this.mouseIsDown) {
+            if (counter === 1) {
+              quantity = 1;
+            }
+            for (var i = 0; i < quantity; i++) {
+              if (this.interactionParticle) {
+                this.particles.push(new Particle(this, this.interactionParticle.x, this.interactionParticle.y));
+              }
+            }
+          } else {
+            clearInterval(intervalId);
+          }
+          counter++;
+        }, 50);
+      };
+
+      this.onTouchStart = (e: { preventDefault: () => void; changedTouches: { clientX: any; clientY: any }[] }) => {
+        e.preventDefault();
+        setTimeout(() => {
+          if (!this.touchIsMoving) {
+            for (var i = 0; i < this.spawnQuantity; i++) {
+              this.particles.push(new Particle(this, e.changedTouches[0].clientX, e.changedTouches[0].clientY));
+            }
+          }
+        }, 200);
+      };
+
+      this.onMouseUp = () => {
+        this.mouseIsDown = false;
+      };
+
+      this.onMouseOut = function () {
+        this.removeInteractionParticle();
+      };
+
+      this.onTouchEnd = function (e: { preventDefault: () => void }) {
+        e.preventDefault();
+        this.touchIsMoving = false;
+        this.removeInteractionParticle();
+      };
+
+      // this.canvas.addEventListener('mousemove', this.onMouseMove);
+      // this.canvas.addEventListener('touchmove', this.onTouchMove);
+      // this.canvas.addEventListener('mousedown', this.onMouseDown);
+      // this.canvas.addEventListener('touchstart', this.onTouchStart);
+      // this.canvas.addEventListener('mouseup', this.onMouseUp);
+      // this.canvas.addEventListener('mouseout', this.onMouseOut);
+      // this.canvas.addEventListener('touchend', this.onTouchEnd);
+    };
+
+    ParticleNetwork.prototype.unbindUiActions = function () {
+      if (this.canvas) {
+        // this.canvas.removeEventListener('mousemove', this.onMouseMove);
+        // this.canvas.removeEventListener('touchmove', this.onTouchMove);
+        // this.canvas.removeEventListener('mousedown', this.onMouseDown);
+        // this.canvas.removeEventListener('touchstart', this.onTouchStart);
+        // this.canvas.removeEventListener('mouseup', this.onMouseUp);
+        // this.canvas.removeEventListener('mouseout', this.onMouseOut);
+        // this.canvas.removeEventListener('touchend', this.onTouchEnd);
+      }
+    };
+
+    const pna = new PNA();
+    console.log(pna);
+
+    pna.init(document.getElementsByClassName('particle-network-animation')[0]);
+  }
+}

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

@@ -1,15 +1,67 @@
 <nz-layout class="layout">
-  <nz-header>
+  <!-- <nz-header style="z-index: 999;">
     <div nz-row>
       <div nz-col nzSpan="24" style="display: flex;align-items: center;">
         <img width="32" height="32" src="./assets/images/user/logo.svg" [routerLink]="['/']" />
         <label class="title ml-sm">运多星网络货运管理平台</label>
       </div>
     </div>
-  </nz-header>
-  <nz-content class="content">
-    <div class="inner-content">
-      <router-outlet></router-outlet>
-    </div>
+  </nz-header> -->
+  <nz-content class="content" id="content">
+    <nz-row>
+      <nz-col nzXs="0" nzSm="0" nzMd="0" nzLg="14" nzXl="14" nzXXl="14" style="z-index: 9999;">
+        <div style="width: 100%;height: 100%;display: flex;align-items: center;padding: 60px;">
+          <div class="earth-box">
+            <div class="earth" style="width: 100%;height: 100%;"></div>
+          </div>
+        </div>
+      </nz-col>
+      <nz-col nzXs="24" nzSm="24" nzMd="24" nzLg="9" nzXl="8" nzXXl="7" style="z-index: 9999; ">
+        <router-outlet></router-outlet>
+      </nz-col>
+    </nz-row>
+    <div class="meteor-1"></div>
+    <div class="meteor-2"></div>
+    <div class="meteor-3"></div>
+    <div class="meteor-4"></div>
+    <div class="meteor-5"></div>
+    <div class="meteor-6"></div>
+    <div class="meteor-7"></div>
+    <div class="meteor-8"></div>
+    <div class="meteor-9"></div>
+    <div class="meteor-10"></div>
+    <div class="meteor-11"></div>
+    <div class="meteor-12"></div>
+    <div class="meteor-13"></div>
+    <div class="meteor-14"></div>
+    <div class="meteor-15"></div>
+    <div class="meteor-16"></div>
+    <div class="meteor-17"></div>
+    <div class="meteor-18"></div>
+    <div class="meteor-19"></div>
+    <div class="meteor-20"></div>
+    <div  class=" particle-network-animation"></div>
+    <!-- <div class="night">
+      <div class="shooting_star"></div>
+      <div class="shooting_star"></div>
+      <div class="shooting_star"></div>
+      <div class="shooting_star"></div>
+      <div class="shooting_star"></div>
+      <div class="shooting_star"></div>
+      <div class="shooting_star"></div>
+      <div class="shooting_star"></div>
+      <div class="shooting_star"></div>
+      <div class="shooting_star"></div>
+      <div class="shooting_star"></div>
+      <div class="shooting_star"></div>
+      <div class="shooting_star"></div>
+      <div class="shooting_star"></div>
+      <div class="shooting_star"></div>
+      <div class="shooting_star"></div>
+      <div class="shooting_star"></div>
+      <div class="shooting_star"></div>
+      <div class="shooting_star"></div>
+      <div class="shooting_star"></div>
+    </div> -->
   </nz-content>
 </nz-layout>

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

@@ -7,11 +7,71 @@
     }
 
     .ant-layout-header {
-      background: #ffffff;
-      box-shadow: 0px 5px 5px #d1d1d1;
+      background   : #ffffff;
+      // box-shadow: 0px 5px 5px #d1d1d1;
+    }
+
+    nz-content {
+      background     : url('../../../assets/images/login/login-bg.jpg') 100% 100% no-repeat;
+      background-size: cover;
+      // overflow       : auto;
+    }
+
+    passport-login {
+      background: transparent;
+    }
+
+    .earth-box {
+      background         : url('../../../assets/images/login/4-界面背景.png') 100% 100% no-repeat;
+      background-size    : cover;
+      background-position: center;
+      // overflow       : hidden;
+      width              : 100%;
+      height             : 100%;
+    }
+
+    .earth {
+      // animation        : eatthAnimation 60s linear infinite;
+      // -webkit-animation: eatthAnimation 60s linear infinite;
+      max-width              : 100%;
+      height                 : 100%;
+      // margin-top          : -50px;
+      // max-height       : calc(100% - 64px);
+      // border-radius       : 40%;
+    }
+
+    .logo {
+      position: absolute;
+      left    : calc(50% - 82px);
+      width   : 164px;
+      top     : calc(50% - 82px);
+    }
+
+    .earth:hover {
+      animation-play-state        : paused;
+      -webkit-animation-play-state: paused;
+    }
+
+    @keyframes eatthAnimation {
+      0% {
+        transform: rotate(0deg);
+      }
+
+      100% {
+        transform: rotate(360deg);
+      }
+    }
+
+    @-webkit-keyframes eatthAnimation {
+      0% {
+        transform: rotate(0deg);
+      }
+
+      100% {
+        transform: rotate(360deg);
+      }
     }
 
-   
   }
 }
 

src/app/layout/passport/passport.component.ts

@@ -1,15 +1,35 @@
 import { Component, Inject, OnInit } from '@angular/core';
 import { DA_SERVICE_TOKEN, ITokenService } from '@delon/auth';
+import Particle from './particle';
 
 @Component({
   selector: 'layout-passport',
   templateUrl: './passport.component.html',
-  styleUrls: ['./passport.component.less']
+  styleUrls: ['./passport.component.less', './d.scss']
 })
 export class LayoutPassportComponent implements OnInit {
   constructor() {}
 
   ngOnInit(): void {
     // this.tokenService.clear();
+    // this.loadJS();
+
+    const particle = new Particle();
+    particle.init();
+  }
+
+  loadJS() {
+    var script = document.createElement('script');
+    script.type = 'text/javascript';
+    script.src = './assets/login/js/script.js';
+    script.id = 'particle';
+    document.getElementsByTagName('head')[0].appendChild(script);
+
+    setTimeout(() => {
+      var content = document.getElementById('content');
+      if (content) {
+        content.style.overflow = 'auto';
+      }
+    }, 100);
   }
 }

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

@@ -13,138 +13,89 @@
   <div></div>
   <div>
     <div class="box-content d-flex">
-      <img src="./assets/images/user/login-image.png" class="login-logo" alt="" />
+      <!-- <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 class="login-logo" src="./assets/images/login/运多星logo-01.png" alt="" > -->
+          <nz-tabset (nzSelectChange)="switch($event)" class=" 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
-                      type="text"
-                      nz-input
-                      [ngModel]="i.value"
-                      (ngModelChange)="i.setValue($event)"
-                      (keyup.enter)="submit()"
-                      placeholder="请输入手机号"
-                    />
+                    <input type="text" nz-input [ngModel]="i.value" (ngModelChange)="i.setValue($event)"
+                      (keyup.enter)="submit()" placeholder="手机号码" />
                   </nz-input-group>
                   <ng-template #inputClearTpl>
-                    <i
-                      nz-icon
-                      class="ant-input-clear-icon"
-                      nzTheme="fill"
-                      nzType="close-circle"
-                      *ngIf="i.value"
-                      style="font-size: 16px"
-                      (click)="i.setValue(null)"
-                    ></i>
+                    <i nz-icon 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
-                      [type]="isPasswordType ? 'password' : 'text'"
-                      nz-input
-                      [ngModel]="i.value"
-                      (ngModelChange)="i.setValue($event)"
-                      placeholder="请输入密码"
-                      (keyup.enter)="submit()"
-                    />
+                    <input [type]="isPasswordType ? 'password' : 'text'" nz-input [ngModel]="i.value"
+                      (ngModelChange)="i.setValue($event)" placeholder="密码" (keyup.enter)="submit()" />
                   </nz-input-group>
                   <ng-template #inputClearTpl>
-                    <i
-                      *ngIf="i.value && isPasswordType"
-                      nz-icon
-                      class="ant-input-clear-icon"
-                      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>
+                    <i *ngIf="isPasswordType" nz-icon class="ant-input-clear-icon" style="font-size: 22px" nzType="eye"
+                      nzTheme="fill" (click)="isPasswordType = false"></i>
+                    <i *ngIf="!isPasswordType" nz-icon class="ant-input-clear-icon" style="font-size: 22px"
+                      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
-                      type="text"
-                      nz-input
-                      [ngModel]="i.value"
-                      (ngModelChange)="i.setValue($event)"
-                      (keyup.enter)="submit()"
-                      placeholder="请输入手机号"
-                    />
+                    <input type="text" nz-input [ngModel]="i.value" (ngModelChange)="i.setValue($event)"
+                      (keyup.enter)="submit()" placeholder="手机号码" />
                   </nz-input-group>
                   <ng-template #inputClearTpl>
-                    <i
-                      nz-icon
-                      class="ant-input-clear-icon"
-                      nzTheme="fill"
-                      nzType="close-circle"
-                      *ngIf="i.value"
-                      style="font-size: 16px"
-                      (click)="i.setValue(null)"
-                    ></i>
+                    <i nz-icon 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
-                      nz-input
-                      type="text"
-                      [maxLength]="6"
-                      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()"
-                    />
+                    <input nz-input type="text" [maxLength]="6" 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
-            nz-button
-            type="button"
-            nzType="primary"
-            nzSize="large"
-            (click)="submit()"
-            [nzLoading]="userSrv?.http?.loading"
-            nzBlock
-            class="mt-md"
-          >
+          <p style="margin: -6px 0 0;" class="text-right mb-sm">
+            <a class="forgetPwd" routerLink="/passport/retrieve-password">忘记密码？重置</a>
+          </p>
+          <button nz-button type="button" nzType="primary" nzSize="large" (click)="submit()"
+            [nzLoading]="userSrv?.http?.loading" nzBlock class="but">
             登录
           </button>
-          <p class="forgetPwd mt-xl" routerLink="/passport/retrieve-password">忘记密码</p>
-          <p class="agreement">
+          <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="text-center"  style="margin: 0;">
+            <a class="forgetPwd" routerLink="/passport/retrieve-password">还没有账号？免费注册</a>
+          </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>
+  <div>
+    <!-- 深圳市怡亚通供应链股份有限公司 版权所有
+    <p [innerHTML]="copyright"></p> -->
   </div>
 </div>
 
@@ -153,4 +104,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

@@ -1,23 +1,24 @@
 .body-box {
-  display               : flex;
-  -webkit-flex-direction: column;
-  -ms-flex-direction    : column;
-  flex-direction        : column;
-  justify-content       : space-between;
-  width                 : 100%;
-  max-width             : 960px;
-  height                : calc(100vh - 64px);
-  margin                : auto;
-  -webkit-box-orient    : vertical;
+  display                  : flex;
+  -webkit-flex-direction   : column;
+  -ms-flex-direction       : column;
+  flex-direction           : column;
+  justify-content          : space-between;
+  width                    : 100%;
+  max-width                : 270px;
+  // height                : calc(100vh - 64px);
+  margin                   : auto;
+  -webkit-box-orient       : vertical;
 
   .box-content {
-    width        : 100%;
-    height       : 600px;
-    border-radius: 0px 16px 16px 0px;
+    width           : 100%;
+    height          : 340px;
+    border-radius   : 0px 16px 16px 0px;
+    // margin-top   : 64px;
 
     .login-logo {
-      width : 310px;
-      height: 600px;
+      width : 130px;
+      margin: auto;
     }
 
     .login-box {
@@ -25,9 +26,14 @@
       background-color: #fff;
 
       .login-box-content {
-        max-width: 434px;
-        margin   : auto;
-        padding  : 88px 0 38px;
+        max-width : 210px;
+        margin    : auto;
+        padding   : 0;
+        text-align: center;
+
+        .ant-tabs {
+          margin-top: 16px
+        }
       }
     }
 
@@ -63,7 +69,6 @@
 
 .forgetPwd {
   font-weight: 400;
-  color      : #26282A;
   font-size  : 14px;
   text-align : center;
   cursor     : pointer;
@@ -86,7 +91,7 @@
   }
 
   .pro-passport {
-    min-height: calc(100vh - 64px);
+    // min-height: calc(100vh - 64px);
   }
 }
 
@@ -107,7 +112,7 @@
     width: 281px;
 
     .ant-tabs-tab-btn {
-      font-size  : 24px;
+      font-size  : 15px;
       color      : #86909C;
       font-weight: 500;
     }
@@ -119,20 +124,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       : 40px;
     font-size    : 14px;
     border-radius: 4px;
     border-color : #E5E6EB;
@@ -152,7 +162,7 @@
   }
 
   .ant-form-item {
-    margin-bottom: 32px;
+    margin-bottom: 20px;
   }
 
   .ant-form-item-with-help {
@@ -161,8 +171,19 @@
 
   .ant-form-item-explain,
   .ant-form-item-extra {
-    min-height : 32px;
-    line-height: 2;
+    min-height   : 20px;
+    line-height  : 2;
+    margin-top   : -2px;
+    margin-bottom: -2px;
+  }
+
+  .ant-form-item-explain,
+  .ant-form-item-extra {
+    font-size: 12px;
+  }
+
+  .ant-divider-horizontal {
+    margin: 12px 0 8px;
   }
 
   // 按钮样式修改
@@ -170,24 +191,86 @@
     padding: 0 16px 12px;
   }
 
+  .but {
+    font-size  : 13px;
+    line-height: 40px;
+    height     : 40px;
+    color      : #86909C;
+  }
+
   .ant-btn-primary {
-    color        : #fff;
-    background   : #26282A;
-    border-color : #26282A;
-    font-size    : 14px;
-    line-height  : 40px;
-    height       : 44px;
+    color           : #fff;
+    // background   : #26282A;
+    // border-color : #26282A;
+
     border-radius: 4px
   }
+
+  @media (max-width: 1500px) {
+    .login-box .login-box-content {
+      max-width : 271px;
+      margin    : auto;
+      padding   : 34px 0 0;
+      text-align: center;
+
+      .ant-tabs {
+        margin-top: 0;
+
+        .ant-tabs-nav-list {
+          .ant-tabs-tab {
+            padding: 4px 0 14px;
+          }
+
+          .ant-tabs-tab-btn {
+            font-size: 15px;
+          }
+        }
+      }
+
+      .ant-tabs-top>.ant-tabs-nav {
+        margin: 0 0 16px 0;
+      }
+
+      .ant-tabs-tab+.ant-tabs-tab {
+        margin: 0 0 0 68px;
+      }
+    }
+
+  }
 }
 
-@media (max-width: 990px) {
-  .box-content {
+@media (max-width: 990px) {}
 
-    .login-logo {
-      width : 0px !important;
-      height: 0px !important;
+@media (max-width: 1500px) {
+  .body-box {
+    max-width: 250px;
+
+    .box-content {
+      height: 330px;
+
+
+      .login-logo {
+        width : 110px;
+        margin: auto;
+      }
+
+      .login-box .login-box-content {
+        max-width : 210px;
+        margin    : auto;
+        padding   : 24px 0 0;
+        text-align: center;
+
+        .ant-tabs {
+          margin-top: 0;
+
+          .ant-tabs-nav-list .ant-tabs-tab-btn {
+            font-size: 15px;
+          }
+        }
+      }
     }
   }
 
-}
+}
+
+@media (max-width: 1600px) {}

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/css/style.css

@@ -0,0 +1,77 @@
+@charset "utf-8";
+.particle-network-animation {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  height: 100%;
+  /* background-color: #171717; */
+}
+.particle-network-animation::before {
+  z-index: -2;
+  content: '';
+  position: absolute;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  background-size: cover;
+  opacity: 0.2;
+}
+
+.glow {
+  z-index: -1;
+  position: fixed;
+  top: 50%;
+  left: 50%;
+  background-image: radial-gradient(circle closest-side, rgba(255, 255, 255, 0.025), transparent);
+}
+
+.glow-1 {
+  width: 150vw;
+  height: 150vh;
+  margin-top: -75vh;
+  margin-left: -75vw;
+  animation: glow-1-move 25s linear infinite both;
+}
+
+@keyframes glow-1-move {
+  from {
+    transform: translate(-100%, 100%);
+  }
+  to {
+    transform: translate(100%, -100%);
+  }
+}
+.glow-2 {
+  width: 100vw;
+  height: 100vh;
+  margin-top: -50vh;
+  margin-left: -50vw;
+  animation: glow-2-move 25s linear 8.3333333333s infinite both;
+}
+
+@keyframes glow-2-move {
+  from {
+    transform: translate(-100%, 0%);
+  }
+  to {
+    transform: translate(100%, 100%);
+  }
+}
+.glow-3 {
+  width: 120vw;
+  height: 120vh;
+  margin-top: -60vh;
+  margin-left: -60vw;
+  animation: glow-3-move 25s linear 16.6666666667s infinite both;
+}
+
+@keyframes glow-3-move {
+  from {
+    transform: translate(100%, 100%);
+  }
+  to {
+    transform: translate(0%, -100%);
+  }
+}

src/assets/login/js/script.js

@@ -0,0 +1,310 @@
+(function() {
+
+	var ParticleNetworkAnimation, PNA;
+	ParticleNetworkAnimation = PNA = function() {};
+
+	PNA.prototype.init = function(element) {
+		console.log(this);
+		this.$el =  document.getElementsByClassName(element);
+
+		this.container = element;
+		this.canvas = document.createElement('canvas');
+		this.sizeCanvas();
+		this.container.appendChild(this.canvas);
+		this.ctx = this.canvas.getContext('2d');
+		this.particleNetwork = new ParticleNetwork(this);
+
+		this.bindUiActions();
+
+		return this;
+	};
+
+	PNA.prototype.bindUiActions = function() {
+		$(window).on('resize', function() {
+			// this.sizeContainer();
+			this.ctx.clearRect(0, 0, this.canvas.width, this.canvas.height);
+			this.sizeCanvas();
+			this.particleNetwork.createParticles();
+		}.bind(this));
+	};
+
+	PNA.prototype.sizeCanvas = function() {
+		this.canvas.width = this.container.offsetWidth;
+		this.canvas.height = this.container.offsetHeight;
+	};
+
+	var Particle = function(parent, x, y) {
+		this.network = parent;
+		this.canvas = parent.canvas;
+		this.ctx = parent.ctx;
+		this.particleColor = returnRandomArrayitem(this.network.options.particleColors);
+		this.radius = getLimitedRandom(1.5, 2.5);
+		this.opacity = 0;
+		this.x = x || Math.random() * this.canvas.width;
+		this.y = y || Math.random() * this.canvas.height;
+		this.velocity = {
+			x: (Math.random() - 0.5) * parent.options.velocity,
+			y: (Math.random() - 0.5) * parent.options.velocity
+		};
+	};
+
+	Particle.prototype.update = function() {
+		if (this.opacity < 1) {
+			this.opacity += 0.01;
+		} else {
+			this.opacity = 1;
+		}
+		// Change dir if outside map
+		if (this.x > this.canvas.width + 100 || this.x < -100) {
+			this.velocity.x = -this.velocity.x;
+		}
+		if (this.y > this.canvas.height + 100 || this.y < -100) {
+			this.velocity.y = -this.velocity.y;
+		}
+
+		// Update position
+		this.x += this.velocity.x;
+		this.y += this.velocity.y;
+	};
+
+	Particle.prototype.draw = function() {
+		// Draw particle
+		this.ctx.beginPath();
+		this.ctx.fillStyle = this.particleColor;
+		this.ctx.globalAlpha = this.opacity;
+		this.ctx.arc(this.x, this.y, this.radius, 0, 2 * Math.PI);
+		this.ctx.fill();
+	};
+
+	var ParticleNetwork = function(parent) {
+		this.options = {
+			velocity: 1, // the higher the faster
+			density: 15000, // the lower the denser
+			netLineDistance: 200,
+			netLineColor: '#929292',
+			particleColors: ['#aaa'] // ['#6D4E5C', '#aaa', '#FFC458' ]
+		};
+		this.canvas = parent.canvas;
+		this.ctx = parent.ctx;
+
+		this.init();
+	};
+
+	ParticleNetwork.prototype.init = function() {
+		// Create particle objects
+		this.createParticles(true);
+
+		// Update canvas
+		this.animationFrame = requestAnimationFrame(this.update.bind(this));
+
+		this.bindUiActions();
+	};
+
+	ParticleNetwork.prototype.createParticles = function(isInitial) {
+		// Initialise / reset particles
+		var me = this;
+		this.particles = [];
+		var quantity = this.canvas.width * this.canvas.height / this.options.density;
+
+		if (isInitial) {
+			var counter = 0;
+			clearInterval(this.createIntervalId);
+			this.createIntervalId = setInterval(function() {
+				if (counter < quantity - 1) {
+					// Create particle object
+					this.particles.push(new Particle(this));
+				}
+				else {
+					clearInterval(me.createIntervalId);
+				}
+				counter++;
+			}.bind(this), 50);
+		}
+		else {
+			// Create particle objects
+			for (var i = 0; i < quantity; i++) {
+				this.particles.push(new Particle(this));
+			}
+		}
+	};
+
+	ParticleNetwork.prototype.createInteractionParticle = function() {
+		// Add interaction particle
+		this.interactionParticle = new Particle(this);
+		this.interactionParticle.velocity = {
+			x: 0,
+			y: 0
+		};
+		this.particles.push(this.interactionParticle);
+		return this.interactionParticle;
+	};
+
+	ParticleNetwork.prototype.removeInteractionParticle = function() {
+		// Find it
+		var index = this.particles.indexOf(this.interactionParticle);
+		if (index > -1) {
+			// Remove it
+			this.interactionParticle = undefined;
+			this.particles.splice(index, 1);
+		}
+	};
+
+	ParticleNetwork.prototype.update = function() {
+		if (this.canvas) {
+
+			this.ctx.clearRect(0, 0, this.canvas.width, this.canvas.height);
+			this.ctx.globalAlpha = 1;
+
+			// Draw connections
+			for (var i = 0; i < this.particles.length; i++) {
+				for (var j = this.particles.length - 1; j > i; j--) {
+					var distance, p1 = this.particles[i], p2 = this.particles[j];
+
+					// check very simply if the two points are even a candidate for further measurements
+					distance = Math.min(Math.abs(p1.x - p2.x), Math.abs(p1.y - p2.y));
+					if (distance > this.options.netLineDistance) {
+						continue;
+					}
+
+					// the two points seem close enough, now let's measure precisely
+					distance = Math.sqrt(
+						Math.pow(p1.x - p2.x, 2) +
+						Math.pow(p1.y - p2.y, 2)
+					);
+					if (distance > this.options.netLineDistance) {
+						continue;
+					}
+
+					this.ctx.beginPath();
+					this.ctx.strokeStyle = this.options.netLineColor;
+					this.ctx.globalAlpha = (this.options.netLineDistance - distance) / this.options.netLineDistance * p1.opacity * p2.opacity;
+					this.ctx.lineWidth = 0.7;
+					this.ctx.moveTo(p1.x, p1.y);
+					this.ctx.lineTo(p2.x, p2.y);
+					this.ctx.stroke();
+				}
+			}
+
+			// Draw particles
+			for (var i = 0; i < this.particles.length; i++) {
+				this.particles[i].update();
+				this.particles[i].draw();
+			}
+
+			if (this.options.velocity !== 0) {
+				this.animationFrame = requestAnimationFrame(this.update.bind(this));
+			}
+
+		}
+		else {
+			cancelAnimationFrame(this.animationFrame);
+		}
+	};
+
+	ParticleNetwork.prototype.bindUiActions = function() {
+		// Mouse / touch event handling
+		this.spawnQuantity = 3;
+		this.mouseIsDown = false;
+		this.touchIsMoving = false;
+
+		this.onMouseMove = function(e) {
+			if (!this.interactionParticle) {
+				this.createInteractionParticle();
+			}
+			this.interactionParticle.x = e.offsetX;
+			this.interactionParticle.y = e.offsetY;
+		}.bind(this);
+
+		this.onTouchMove = function(e) {
+			e.preventDefault();
+			this.touchIsMoving = true;
+			if (!this.interactionParticle) {
+				this.createInteractionParticle();
+			}
+			this.interactionParticle.x = e.changedTouches[0].clientX;
+			this.interactionParticle.y = e.changedTouches[0].clientY;
+		}.bind(this);
+
+		this.onMouseDown = function(e) {
+			this.mouseIsDown = true;
+			var counter = 0;
+			var quantity = this.spawnQuantity;
+			var intervalId = setInterval(function() {
+				if (this.mouseIsDown) {
+					if (counter === 1) {
+						quantity = 1;
+					}
+					for (var i = 0; i < quantity; i++) {
+						if (this.interactionParticle) {
+							this.particles.push(new Particle(this, this.interactionParticle.x, this.interactionParticle.y));
+						}
+					}
+				}
+				else {
+					clearInterval(intervalId);
+				}
+				counter++;
+			}.bind(this), 50);
+		}.bind(this);
+
+		this.onTouchStart = function(e) {
+			e.preventDefault();
+			setTimeout(function() {
+				if (!this.touchIsMoving) {
+					for (var i = 0; i < this.spawnQuantity; i++) {
+						this.particles.push(new Particle(this, e.changedTouches[0].clientX, e.changedTouches[0].clientY));
+					}
+				}
+			}.bind(this), 200);
+		}.bind(this);
+
+		this.onMouseUp = function(e) {
+			this.mouseIsDown = false;
+		}.bind(this);
+
+		this.onMouseOut = function(e) {
+			this.removeInteractionParticle();
+		}.bind(this);
+
+		this.onTouchEnd = function(e) {
+			e.preventDefault();
+			this.touchIsMoving = false;
+			this.removeInteractionParticle();
+		}.bind(this);
+
+		// this.canvas.addEventListener('mousemove', this.onMouseMove);
+		// this.canvas.addEventListener('touchmove', this.onTouchMove);
+		// this.canvas.addEventListener('mousedown', this.onMouseDown);
+		// this.canvas.addEventListener('touchstart', this.onTouchStart);
+		// this.canvas.addEventListener('mouseup', this.onMouseUp);
+		// this.canvas.addEventListener('mouseout', this.onMouseOut);
+		// this.canvas.addEventListener('touchend', this.onTouchEnd);
+	};
+
+	ParticleNetwork.prototype.unbindUiActions = function() {
+		if (this.canvas) {
+			// this.canvas.removeEventListener('mousemove', this.onMouseMove);
+			// this.canvas.removeEventListener('touchmove', this.onTouchMove);
+			// this.canvas.removeEventListener('mousedown', this.onMouseDown);
+			// this.canvas.removeEventListener('touchstart', this.onTouchStart);
+			// this.canvas.removeEventListener('mouseup', this.onMouseUp);
+			// this.canvas.removeEventListener('mouseout', this.onMouseOut);
+			// this.canvas.removeEventListener('touchend', this.onTouchEnd);
+		}
+	};
+
+	var getLimitedRandom = function(min, max, roundToInteger) {
+		var number = Math.random() * (max - min) + min;
+		if (roundToInteger) {
+			number = Math.round(number);
+		}
+		return number;
+	};
+
+	var returnRandomArrayitem = function(array) {
+		return array[Math.floor(Math.random()*array.length)];
+	};
+
+pna = new ParticleNetworkAnimation();	pna.init($('.particle-network-animation')[0]);
+
+}());

src/index.html

@@ -19,6 +19,10 @@
   <meta http-equiv="x-ua-compatible" content="ie=edge" />
   <link rel="icon" type="image/x-icon" href="favicon.ico" />
   <link rel="stylesheet" href="https://at.alicdn.com/t/font_3153207_udngwyp35db.css" />
+  <script type="text/javascript" src="./assets/login/js/jquery.min.js"></script>
+
+
+  <link type="text/css" href="./assets/login/css/style.css" rel="stylesheet" />
   <!-- Apple Touch Icon -->
   <!-- <link rel="apple-touch-icon" href="custom-icon.png"> -->
   <style type="text/css" id="css">

src/styles.less

@@ -103,4 +103,6 @@ nz-range-picker {
             cursor: not-allowed;
         }
     }
-}
+}
+
+

src/styles/compact.less

@@ -39,13 +39,13 @@
     margin-bottom: 4px !important;
 }
 
-.body-box {
-    max-width: 760px !important;
+// .body-box {
+//     max-width: 760px !important;
 
-    .box-content {
-        height: 77% !important;
-    }
-}
+//     .box-content {
+//         height: 77% !important;
+//     }
+// }
 
 .login-logo {
     width : 250px !important;
@@ -56,11 +56,11 @@
     font-size: 18px !important;
 }
 
-.login-box-content {
-    max-width: 300px !important;
-    height   : 100% !important;
-    padding  : 58px 0 38px !important;
-}
+// .login-box-content {
+//     max-width: 300px !important;
+//     height   : 100% !important;
+//     padding  : 58px 0 38px !important;
+// }
 
 .total-footer {
     bottom: 10px !important;
@@ -109,4 +109,32 @@ h2 {
         padding: 12px 0px !important;
         margin : 0 0 0 16px !important;
     }
+}
+
+.body-box {
+    max-width: 250px !important;
+
+    // height                : calc(100vh - 64px);
+    .box-content {
+        width : 100%;
+        height: 304px!important;
+
+        .login-box {
+
+            .login-box-content {
+                max-width: 210px  !important;
+                padding  : 6px 0 0 !important;
+
+                .ant-tabs {
+                    margin-top: 8px
+                }
+            }
+        }
+
+    }
+
+    .ant-divider-horizontal {
+        margin: 12px 0 8px;
+    }
+
 }