diff --git a/src/app/layout/passport/d.scss b/src/app/layout/passport/d.scss
index f383b8e8..d562ba53 100644
--- a/src/app/layout/passport/d.scss
+++ b/src/app/layout/passport/d.scss
@@ -10,7 +10,7 @@ $shadow: ();
     $d: random(70)/10 + 12; // 秒數
 
     .meteor-#{$i} {
-        position        : absolute;
+        position        : fixed;
         top             : $h + px;
         left            : $v*1%;
         width           : 130px;
@@ -21,7 +21,7 @@ $shadow: ();
 
         &:before {
             content      : "";
-            position     : absolute;
+            position     : fixed;
             width        : 4px;
             height       : 5px;
             border-radius: 50%;
diff --git a/src/app/layout/passport/particle.ts b/src/app/layout/passport/particle.ts
index 38c23fd6..bd8cd20b 100644
--- a/src/app/layout/passport/particle.ts
+++ b/src/app/layout/passport/particle.ts
@@ -1,7 +1,4 @@
 export default class Particle {
-  ParticleNetworkAnimation: any;
-  PNA: any;
-
   getLimitedRandom = function (min: number, max: number, roundToInteger?: any) {
     var number = Math.random() * (max - min) + min;
     if (roundToInteger) {
@@ -14,41 +11,75 @@ export default class Particle {
     return array[Math.floor(Math.random() * array.length)];
   };
 
-  constructor() {
-    this.ParticleNetworkAnimation = this.PNA = function () {};
-  }
+  constructor() {}
 
   init() {
-    this.PNA = {
-      init: function (element: any) {
-        this.$el = document.getElementsByClassName(element);
+    var ParticleNetworkAnimation: any, PNA: any;
+    ParticleNetworkAnimation = PNA = function () {};
 
-        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);
+    PNA.prototype.init = function (element: any) {
+      console.log(this);
+      this.$el = document.getElementsByClassName(element);
 
-        this.bindUiActions();
+      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);
 
-        return this;
-      },
-      bindUiActions: function () {
-        (window as any).on('resize', () => {
-          this.ctx.clearRect(0, 0, this.canvas.width, this.canvas.height);
-          // this.sizeContainer();
-          this.sizeCanvas();
-          this.particleNetwork.createParticles();
-        });
-      },
-      sizeCanvas: function () {
-        this.canvas.width = this.container.offsetWidth;
-        this.canvas.height = this.container.offsetHeight;
-      }
+      this.bindUiActions();
+
+      return this;
     };
 
-    var Particle = (parent: any, x: any, y: any) => {
+    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;
+    };
+
+    // PNA = {
+    //   init: function (element: any) {
+    //     console.log(element);
+
+    //     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;
+    //   },
+    //   bindUiActions: function () {
+    //     (window as any).on('resize', () => {
+    //       this.ctx.clearRect(0, 0, this.canvas.width, this.canvas.height);
+    //       // this.sizeContainer();
+    //       this.sizeCanvas();
+    //       this.particleNetwork.createParticles();
+    //     });
+    //   },
+    //   sizeCanvas: function () {
+    //     this.canvas.width = this.container.offsetWidth;
+    //     this.canvas.height = this.container.offsetHeight;
+    //   }
+    // };
+    console.log(PNA);
+
+    var Particle: any = (parent: any, x: any, y: any) => {
       const network = parent;
       const canvas = parent.canvas;
       return {
@@ -64,8 +95,9 @@ export default class Particle {
         }
       };
     };
+    // console.log(Particle);
 
-    Particle.prototype.update = function () {
+    Particle.update = function () {
       if (this.opacity < 1) {
         this.opacity += 0.01;
       } else {
@@ -84,7 +116,7 @@ export default class Particle {
       this.y += this.velocity.y;
     };
 
-    Particle.prototype.draw = function () {
+    Particle.draw = function () {
       // Draw particle
       this.ctx.beginPath();
       this.ctx.fillStyle = this.particleColor;
@@ -93,19 +125,18 @@ export default class Particle {
       this.ctx.fill();
     };
 
-    var ParticleNetwork = (parent: { canvas: any; ctx: any }) => {
-      this.init();
-      return {
-        options: {
-          velocity: 1, // the higher the faster
-          density: 15000, // the lower the denser
-          netLineDistance: 200,
-          netLineColor: '#929292',
-          particleColors: ['#aaa'] // ['#6D4E5C', '#aaa', '#FFC458' ]
-        },
-        canvas: parent.canvas,
-        ctx: parent.ctx
+    var ParticleNetwork: any = function (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 () {
@@ -118,7 +149,7 @@ export default class Particle {
       this.bindUiActions();
     };
 
-    ParticleNetwork.prototype.createParticles = function (isInitial: any) {
+    ParticleNetwork.prototype.createParticles = function (isInitial) {
       // Initialise / reset particles
       var me = this;
       this.particles = [];
@@ -127,15 +158,18 @@ export default class Particle {
       if (isInitial) {
         var counter = 0;
         clearInterval(this.createIntervalId);
-        this.createIntervalId = setInterval(() => {
-          if (counter < quantity - 1) {
-            // Create particle object
-            this.particles.push(new Particle(me, me.canvas.width, me.canvas.height));
-          } else {
-            clearInterval(me.createIntervalId);
-          }
-          counter++;
-        }, 50);
+        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++) {
@@ -219,15 +253,15 @@ export default class Particle {
       this.mouseIsDown = false;
       this.touchIsMoving = false;
 
-      this.onMouseMove = (e: { offsetX: any; offsetY: any }) => {
+      this.onMouseMove = function (e) {
         if (!this.interactionParticle) {
           this.createInteractionParticle();
         }
         this.interactionParticle.x = e.offsetX;
         this.interactionParticle.y = e.offsetY;
-      };
+      }.bind(this);
 
-      this.onTouchMove = (e: { preventDefault: () => void; changedTouches: { clientX: any[]; clientY: any }[] }) => {
+      this.onTouchMove = function (e) {
         e.preventDefault();
         this.touchIsMoving = true;
         if (!this.interactionParticle) {
@@ -235,14 +269,14 @@ export default class Particle {
         }
         this.interactionParticle.x = e.changedTouches[0].clientX;
         this.interactionParticle.y = e.changedTouches[0].clientY;
-      };
+      }.bind(this);
 
-      this.onMouseDown =  () => {
+      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;
@@ -256,38 +290,38 @@ export default class Particle {
               clearInterval(intervalId);
             }
             counter++;
-          },
+          }.bind(this),
           50
         );
-      };
+      }.bind(this);
 
-      this.onTouchStart =  (e: { preventDefault: () => void; changedTouches: { clientY: any; }[]; }) => {
+      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 =  () => {
+      this.onMouseUp = function (e) {
         this.mouseIsDown = false;
-      };
+      }.bind(this);
 
-      this.onMouseOut = function () {
+      this.onMouseOut = function (e) {
         this.removeInteractionParticle();
-      };
+      }.bind(this);
 
-      this.onTouchEnd =  (e: { preventDefault: () => void; }) => {
+      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);
@@ -309,5 +343,10 @@ export default class Particle {
         // this.canvas.removeEventListener('touchend', this.onTouchEnd);
       }
     };
+
+    const pna = new PNA();
+    console.log(pna);
+
+    pna.init(document.getElementsByClassName('particle-network-animation')[0]);
   }
 }
diff --git a/src/app/layout/passport/passport.component.html b/src/app/layout/passport/passport.component.html
index bd54d788..72d08eec 100644
--- a/src/app/layout/passport/passport.component.html
+++ b/src/app/layout/passport/passport.component.html
@@ -7,16 +7,16 @@
       </div>
     </div>
   </nz-header> -->
-  <nz-content class="content">
+  <nz-content class="content" id="content">
     <nz-row>
-      <nz-col nzSm="0" nzMd="0" nzLg="14" nzXl="14" nzXXl="14">
-        <div style="width: 100%;height: 100%;display: flex;align-items: center;min-height: 700px;padding: 60px;">
+      <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; padding-top    : 64px;">
+      <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>
@@ -40,6 +40,7 @@
     <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>
diff --git a/src/app/layout/passport/passport.component.less b/src/app/layout/passport/passport.component.less
index 252439ff..7cc4a60a 100644
--- a/src/app/layout/passport/passport.component.less
+++ b/src/app/layout/passport/passport.component.less
@@ -14,7 +14,7 @@
     nz-content {
       background     : url('../../../assets/images/login/login-bg.jpg') 100% 100% no-repeat;
       background-size: cover;
-      overflow       : auto;
+      // overflow       : auto;
     }
 
     passport-login {
diff --git a/src/app/layout/passport/passport.component.ts b/src/app/layout/passport/passport.component.ts
index 359c8a8d..e84f0301 100644
--- a/src/app/layout/passport/passport.component.ts
+++ b/src/app/layout/passport/passport.component.ts
@@ -11,5 +11,24 @@ export class LayoutPassportComponent implements OnInit {
 
   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);
   }
 }
diff --git a/src/app/routes/passport/components/login/login.component.html b/src/app/routes/passport/components/login/login.component.html
index b3e694c3..88def649 100644
--- a/src/app/routes/passport/components/login/login.component.html
+++ b/src/app/routes/passport/components/login/login.component.html
@@ -16,7 +16,7 @@
       <!-- <img src="./assets/images/user/login-image.png" class="login-logo" alt="" /> -->
       <div class="login-box">
         <div class="login-box-content">
-          <img class="login-logo" src="./assets/images/login/运多星logo-01.png" alt="" >
+          <!-- <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'">
@@ -87,7 +87,7 @@
       </div>
     </div>
   </div>
-  <div class="box-footer">
+  <div >
     <!-- 深圳市怡亚通供应链股份有限公司 版权所有
     <p [innerHTML]="copyright"></p> -->
   </div>
diff --git a/src/app/routes/passport/components/login/login.component.less b/src/app/routes/passport/components/login/login.component.less
index 87c424f6..dae53019 100644
--- a/src/app/routes/passport/components/login/login.component.less
+++ b/src/app/routes/passport/components/login/login.component.less
@@ -5,16 +5,16 @@
   flex-direction        : column;
   justify-content       : space-between;
   width                 : 100%;
-  max-width             : 473px;
-  height                : calc(100vh - 64px);
+  max-width             : 403px;
+  // height                : calc(100vh - 64px);
   margin                : auto;
   -webkit-box-orient    : vertical;
 
   .box-content {
     width        : 100%;
-    height       : 630px;
+    height       : 500px;
     border-radius: 0px 16px 16px 0px;
-    margin-top   : 64px;
+    // margin-top   : 64px;
 
     .login-logo {
       width : 130px;
@@ -26,9 +26,9 @@
       background-color: #fff;
 
       .login-box-content {
-        max-width : 380px;
+        max-width : 310px;
         margin    : auto;
-        padding   : 46px 0 38px;
+        padding   : 28px 0 38px;
         text-align: center;
 
         .ant-tabs {
@@ -92,7 +92,7 @@
   }
 
   .pro-passport {
-    min-height: calc(100vh - 64px);
+    // min-height: calc(100vh - 64px);
   }
 }
 
@@ -143,7 +143,7 @@
 
   // input 框样式修改
   nz-input-group {
-    height       : 48px;
+    height       : 40px;
     font-size    : 14px;
     border-radius: 4px;
     border-color : #E5E6EB;
@@ -188,8 +188,8 @@
 
   .but {
     font-size  : 14px;
-    line-height: 48px;
-    height     : 48px;
+    line-height: 40px;
+    height     : 40px;
     color      : #86909C;
   }
 
@@ -203,7 +203,7 @@
 
   @media (max-width: 1500px) {
     .login-box .login-box-content {
-      max-width : 300px;
+      max-width : 271px;
       margin    : auto;
       padding   : 34px 0 0;
       text-align: center;
@@ -217,7 +217,7 @@
           }
 
           .ant-tabs-tab-btn {
-            font-size: 17px;
+            font-size: 15px;
           }
         }
       }
@@ -238,10 +238,10 @@
 
 @media (max-width: 1500px) {
   .body-box {
-    max-width: 422px;
+    max-width: 360px;
 
     .box-content {
-      height: 550px;
+      height: 450px;
 
 
       .login-logo {
@@ -250,7 +250,7 @@
       }
 
       .login-box .login-box-content {
-        max-width : 345px;
+        max-width : 270px;
         margin    : auto;
         padding   : 34px 0 0;
         text-align: center;
@@ -259,7 +259,7 @@
           margin-top: 0;
 
           .ant-tabs-nav-list .ant-tabs-tab-btn {
-            font-size: 17px;
+            font-size: 16px;
           }
         }
       }
diff --git a/src/assets/images/login/4-界面背景.png b/src/assets/images/login/4-界面背景.png
index 4c823eea..f4f55071 100644
Binary files a/src/assets/images/login/4-界面背景.png and b/src/assets/images/login/4-界面背景.png differ
diff --git a/src/assets/images/login/5-地球元素.png b/src/assets/images/login/5-地球元素.png
deleted file mode 100644
index dc12bc4a..00000000
Binary files a/src/assets/images/login/5-地球元素.png and /dev/null differ
diff --git a/src/index.html b/src/index.html
index d6cc2932..1aa6bf2c 100644
--- a/src/index.html
+++ b/src/index.html
@@ -61,8 +61,6 @@
           class="ant-spin-dot-item"></i><i class="ant-spin-dot-item"></i></span>
     </div>
   </div>
-  <div class='particle-network-animation'></div>
-  <script type="text/javascript" src="./assets/login/js/script.js"></script>
 </body>
 
 </html>
diff --git a/src/styles.less b/src/styles.less
index 04f9272b..fc6d582c 100644
--- a/src/styles.less
+++ b/src/styles.less
@@ -106,8 +106,3 @@ nz-range-picker {
 }
 
 
-html,
-body {
-    height  : 100%;
-    overflow: hidden;
-}
\ No newline at end of file
diff --git a/src/styles/compact.less b/src/styles/compact.less
index 1fb4892b..f5ab5c52 100644
--- a/src/styles/compact.less
+++ b/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: 305px !important;
+
+    // height                : calc(100vh - 64px);
+    .box-content {
+        width : 100%;
+        height: 380px!important;
+
+        .login-box {
+
+            .login-box-content {
+                max-width: 260px  !important;
+                padding  : 10px 0 0 !important;
+
+                .ant-tabs {
+                    margin-top: 16px
+                }
+            }
+        }
+
+    }
+
+    .ant-divider-horizontal {
+        margin: 12px 0;
+    }
+
 }
\ No newline at end of file