e

src/app/layout/passport/d.scss

@@ -0,0 +1,56 @@
+$n: 20; // 流星數量
+
+
+$shadow: ();
+
+
+@for $i from 1 through $n {
+    $v: random(90) + 9; // left
+    $h: random(250) + 10; // top
+    $d: random(70)/10 + 9; // 秒數
+
+    .meteor-#{$i} {
+        position        : absolute;
+        top             : $h + px;
+        left            : $v*1%;
+        width           : 300px;
+        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     : absolute;
+            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;
+    }
+
+    15% {
+        margin-top : 700px;
+        margin-left: -900px;
+        opacity    : 0;
+    }
+
+    100% {
+        opacity: 0;
+    }
+}

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

@@ -1,25 +1,43 @@
 <nz-layout class="layout">
-  <nz-header style="z-index: 999;">
+  <!-- <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-header> -->
   <nz-content class="content">
     <nz-row>
-      <nz-col nzSpan="14"  style="max-height       : calc(100% - 64px);">
+      <nz-col nzSpan="14" style="max-height       : calc(100% - 64px);">
         <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>
       </nz-col>
-      <nz-col nzSpan="7" style="z-index: 9999;">
+      <nz-col nzSpan="7" style="z-index: 9999; padding-top    : 64px;">
         <router-outlet></router-outlet>
       </nz-col>
     </nz-row>
-    <!-- <div class="inner-content">
+    <div class="meteor-1"></div>
-     
+    <div class="meteor-2"></div>
-    </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>
   </nz-content>
 </nz-layout>

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

@@ -7,7 +7,7 @@
     }
 
     .ant-layout-header {
-      background: #ffffff;
+      background   : #ffffff;
       // box-shadow: 0px 5px 5px #d1d1d1;
     }
 
@@ -28,12 +28,19 @@
     }
 
     .earth {
-      animation        : eatthAnimation 60s linear infinite;
+      // animation        : eatthAnimation 60s linear infinite;
-      -webkit-animation: eatthAnimation 60s linear infinite;
+      // -webkit-animation: eatthAnimation 60s linear infinite;
-      max-width        : 100%;
+      max-width           : 100%;
-      margin-top       : -50px;
+      margin-top          : -50px;
-      max-height       : calc(100% - 64px);
+      // max-height       : calc(100% - 64px);
-      border-radius    : 40%;
+      border-radius       : 40%;
+    }
+
+    .logo {
+      position: absolute;
+      left    : calc(50% - 82px);
+      width   : 164px;
+      top     : calc(50% - 82px);
     }
 
     .earth:hover {

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

@@ -4,7 +4,7 @@ import { DA_SERVICE_TOKEN, ITokenService } from '@delon/auth';
 @Component({
   selector: 'layout-passport',
   templateUrl: './passport.component.html',
-  styleUrls: ['./passport.component.less']
+  styleUrls: ['./passport.component.less', './d.scss']
 })
 export class LayoutPassportComponent implements OnInit {
   constructor() {}

src/styles.less

@@ -103,4 +103,11 @@ nz-range-picker {
             cursor: not-allowed;
         }
     }
+}
+
+
+html,
+body {
+    height  : 100%;
+    overflow: hidden;
 }