edit

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

@@ -9,13 +9,14 @@
   </nz-header> -->
   <nz-content class="content">
     <nz-row>
-      <nz-col nzSpan="14" style="max-height       : calc(100% - 64px);">
+      <nz-col nzSm="0" nzMd="16" nzLg="14" nzXl="14" >
+        <div style="width: 100%;height: 100%;display: flex;align-items: center;min-height: 700px;">
           <div class="earth-box">
-          <img class="earth" src="./assets/images/login/earth.png" alt="">
-          <img class="logo" src="./assets/images/login/运多星logo反白.png" alt="">
+            <div class="earth" style="width: 100%;height: 100%;"></div>
+          </div>
         </div>
       </nz-col>
-      <nz-col nzSpan="7" style="z-index: 9999; padding-top    : 64px;">
+      <nz-col nzXs="24" nzSm="24" nzMd="8" nzLg="8" nzXl="7"  style="z-index: 9999; padding-top    : 64px;">
         <router-outlet></router-outlet>
       </nz-col>
     </nz-row>

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       : hidden;
+      overflow       : auto;
     }
 
     passport-login {
@@ -22,18 +22,22 @@
     }
 
     .earth-box {
-      background     : url('../../../assets/images/login/5-地球元素02.png') 100% 100% no-repeat;
-      background-size: cover;
-      overflow       : hidden;
+      background         : url('../../../assets/images/login/5-地球元素.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%;
-      margin-top          : -50px;
+      height                 : 100%;
+      // margin-top          : -50px;
       // max-height       : calc(100% - 64px);
-      border-radius       : 40%;
+      // border-radius       : 40%;
     }
 
     .logo {

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

@@ -10,9 +10,7 @@
 -->
 
 <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="" /> -->

src/assets/login/css/style.css

@@ -4,7 +4,7 @@
   top: 0;
   left: 0;
   right: 0;
-  height: calc( 100% - 64px );
+  height: 100%;
   /* background-color: #171717; */
 }
 .particle-network-animation::before {

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>
-  <script type="text/javascript" src="./assets/login/js/script.js"></script>
+  <!-- <div class='particle-network-animation'></div>
+  <script type="text/javascript" src="./assets/login/js/script.js"></script> -->
 </body>
 
 </html>