edit

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

@@ -9,14 +9,14 @@
   </nz-header> -->
   <nz-content class="content">
     <nz-row>
-      <nz-col nzSm="0" nzMd="16" nzLg="14" nzXl="14" >
+      <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;">
+        <div style="width: 100%;height: 100%;display: flex;align-items: center;min-height: 700px;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="8" nzLg="8" nzXl="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; padding-top    : 64px;">
         <router-outlet></router-outlet>
       </nz-col>
     </nz-row>

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

@@ -22,7 +22,7 @@
     }
 
     .earth-box {
-      background         : url('../../../assets/images/login/5-地球元素.png') 100% 100% no-repeat;
+      background         : url('../../../assets/images/login/4-界面背景.png') 100% 100% no-repeat;
       background-size    : cover;
       background-position: center;
       // overflow       : hidden;

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

@@ -16,8 +16,8 @@
       <!-- <img src="./assets/images/user/login-image.png" class="login-logo" alt="" /> -->
       <div class="login-box">
         <div class="login-box-content">
-          <img src="./assets/images/login/运多星logo-01.png" alt="" style="width: 130px;margin: auto;">
+          <img class="login-logo" src="./assets/images/login/运多星logo-01.png" alt="" >
-          <nz-tabset (nzSelectChange)="switch($event)" class="mt-md text-left">
+          <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">

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

@@ -14,10 +14,11 @@
     width        : 100%;
     height       : 630px;
     border-radius: 0px 16px 16px 0px;
+    margin-top   : 64px;
 
     .login-logo {
-      width : 310px;
+      width : 130px;
-      height: 600px;
+      margin: auto;
     }
 
     .login-box {
@@ -25,10 +26,14 @@
       background-color: #fff;
 
       .login-box-content {
-        max-width : 340px;
+        max-width : 380px;
         margin    : auto;
         padding   : 46px 0 38px;
         text-align: center;
+
+        .ant-tabs {
+          margin-top: 16px
+        }
       }
     }
 
@@ -196,16 +201,71 @@
     border-radius: 4px
   }
 
+  @media (max-width: 1500px) {
+    .login-box .login-box-content {
+      max-width : 300px;
+      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: 17px;
+          }
+        }
+      }
+
+      .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) {
+@media (max-width: 990px) {}
-  .box-content {
 
-    .login-logo {
+@media (max-width: 1500px) {
-      width : 0px !important;
+  .body-box {
-      height: 0px !important;
+    max-width: 422px;
+
+    .box-content {
+      height: 550px;
+
+
+      .login-logo {
+        width : 110px;
+        margin: auto;
+      }
+
+      .login-box .login-box-content {
+        max-width : 345px;
+        margin    : auto;
+        padding   : 34px 0 0;
+        text-align: center;
+
+        .ant-tabs {
+          margin-top: 0;
+
+          .ant-tabs-nav-list .ant-tabs-tab-btn {
+            font-size: 17px;
+          }
+        }
+      }
     }
   }
 
-}
+}
+
+@media (max-width: 1600px) {}

src/assets/login/js/script.js

@@ -272,24 +272,24 @@
 			this.removeInteractionParticle();
 		}.bind(this);
 
-		this.canvas.addEventListener('mousemove', this.onMouseMove);
+		// this.canvas.addEventListener('mousemove', this.onMouseMove);
-		this.canvas.addEventListener('touchmove', this.onTouchMove);
+		// this.canvas.addEventListener('touchmove', this.onTouchMove);
-		this.canvas.addEventListener('mousedown', this.onMouseDown);
+		// this.canvas.addEventListener('mousedown', this.onMouseDown);
-		this.canvas.addEventListener('touchstart', this.onTouchStart);
+		// this.canvas.addEventListener('touchstart', this.onTouchStart);
-		this.canvas.addEventListener('mouseup', this.onMouseUp);
+		// this.canvas.addEventListener('mouseup', this.onMouseUp);
-		this.canvas.addEventListener('mouseout', this.onMouseOut);
+		// this.canvas.addEventListener('mouseout', this.onMouseOut);
-		this.canvas.addEventListener('touchend', this.onTouchEnd);
+		// this.canvas.addEventListener('touchend', this.onTouchEnd);
 	};
 
 	ParticleNetwork.prototype.unbindUiActions = function() {
 		if (this.canvas) {
-			this.canvas.removeEventListener('mousemove', this.onMouseMove);
+			// this.canvas.removeEventListener('mousemove', this.onMouseMove);
-			this.canvas.removeEventListener('touchmove', this.onTouchMove);
+			// this.canvas.removeEventListener('touchmove', this.onTouchMove);
-			this.canvas.removeEventListener('mousedown', this.onMouseDown);
+			// this.canvas.removeEventListener('mousedown', this.onMouseDown);
-			this.canvas.removeEventListener('touchstart', this.onTouchStart);
+			// this.canvas.removeEventListener('touchstart', this.onTouchStart);
-			this.canvas.removeEventListener('mouseup', this.onMouseUp);
+			// this.canvas.removeEventListener('mouseup', this.onMouseUp);
-			this.canvas.removeEventListener('mouseout', this.onMouseOut);
+			// this.canvas.removeEventListener('mouseout', this.onMouseOut);
-			this.canvas.removeEventListener('touchend', this.onTouchEnd);
+			// this.canvas.removeEventListener('touchend', this.onTouchEnd);
 		}
 	};
 

src/index.html

@@ -61,8 +61,8 @@
           class="ant-spin-dot-item"></i><i class="ant-spin-dot-item"></i></span>
     </div>
   </div>
-  <!-- <div class='particle-network-animation'></div>
+  <div class='particle-network-animation'></div>
-  <script type="text/javascript" src="./assets/login/js/script.js"></script> -->
+  <script type="text/javascript" src="./assets/login/js/script.js"></script>
 </body>
 
 </html>