登录模块

src/app/layout/layout.module.ts

@@ -24,7 +24,7 @@ import { NzSpinModule } from 'ng-zorro-antd/spin';
 import { NzSwitchModule } from 'ng-zorro-antd/switch';
 import { NzTimelineModule } from 'ng-zorro-antd/timeline';
 import { NzToolTipModule } from 'ng-zorro-antd/tooltip';
-
+import { NzGridModule } from 'ng-zorro-antd/grid';
 import { LayoutPassportComponent } from './passport/passport.component';
 import { PRO_COMPONENTS } from './pro/index';
 
@@ -56,6 +56,7 @@ const COMPONENTS: Array<Type<any>> = [...PRO_COMPONENTS, LayoutPassportComponent
     NoticeIconModule,
     ThemeBtnModule,
     ScrollbarModule,
+    NzGridModule,
     NzMessageModule
   ],
   declarations: COMPONENTS,

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

@@ -1,13 +1,17 @@
-<div class="container">
-  <!-- <pro-langs class="langs" btnClass></pro-langs> -->
-  <div class="wrap">
-    <div class="top">
-      <div class="head">
-        <img class="logo" src="./assets/logo-color.svg">
-        <span class="title">ng-alain pro</span>
+<nz-layout class="layout">
+  <nz-header>
+    <div nz-row>
+      <div nz-col nzSpan="8" style="display: flex;align-items: center;">
+        <img width="95" height="32" src="./assets/images/user/logo.png" [routerLink]="['/']" />
+      </div>
+      <div nz-col nzSpan="8" class="text-center">
+        <label class="title">运营管理平台</label>
       </div>
-      <div class="desc">武林中最有影响力的《葵花宝典》；欲练神功，挥刀自宫</div>
     </div>
-    <router-outlet></router-outlet>
-  </div>
-</div>
+  </nz-header>
+  <nz-content class="content">
+    <div class="inner-content">
+      <router-outlet></router-outlet>
+    </div>
+  </nz-content>
+</nz-layout>

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

@@ -1,74 +1,21 @@
 @import '~@delon/theme/index';
+
 :host {
   ::ng-deep {
-    .container {
-      display: flex;
-      flex-direction: column;
-      min-height: 100%;
-      background: #f0f2f5;
-    }
-    .langs {
-      width: 100%;
-      height: 40px;
-      line-height: 44px;
-      text-align: right;
-      .ant-dropdown-trigger {
-        display: inline-block;
-      }
-      .anticon {
-        margin-top: 24px;
-        margin-right: 24px;
-        font-size: 14px;
-        vertical-align: top;
-        cursor: pointer;
-      }
-    }
-    .wrap {
-      flex: 1;
-      padding: 32px 0;
-    }
-    .ant-form-item {
-      margin-bottom: 24px;
+    .layout {
+      height: 100%;
     }
 
-    @media (min-width: @screen-md-min) {
-      .container {
-        background-image: url('https://gw.alipayobjects.com/zos/rmsportal/TVYTbAXWheQpRcWDaDMu.svg');
-        background-repeat: no-repeat;
-        background-position: center 110px;
-        background-size: 100%;
-      }
-      .wrap {
-        padding: 32px 0 24px;
-      }
-    }
-    .top {
-      text-align: center;
-    }
-    .header {
-      height: 44px;
-      line-height: 44px;
-      a {
-        text-decoration: none;
-      }
-    }
-    .logo {
-      height: 44px;
-      margin-right: 16px;
-    }
-    .title {
-      position: relative;
-      color: @heading-color;
-      font-weight: 600;
-      font-size: 33px;
-      font-family: 'Myriad Pro', 'Helvetica Neue', Arial, Helvetica, sans-serif;
-      vertical-align: middle;
-    }
-    .desc {
-      margin-top: 12px;
-      margin-bottom: 40px;
-      color: @text-color-secondary;
-      font-size: @font-size-base;
+    .ant-layout-header {
+      background: #ffffff;
+      box-shadow: 0px 5px 5px #d1d1d1;
     }
   }
 }
+
+.title {
+  color      : #1890ff;
+  font-weight: 800;
+  font-size  : 28px;
+  text-align : center;
+}

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

@@ -7,21 +7,6 @@ import { DA_SERVICE_TOKEN, ITokenService } from '@delon/auth';
   styleUrls: ['./passport.component.less']
 })
 export class LayoutPassportComponent implements OnInit {
-  links = [
-    {
-      title: '帮助',
-      href: ''
-    },
-    {
-      title: '隐私',
-      href: ''
-    },
-    {
-      title: '条款',
-      href: ''
-    }
-  ];
-
   constructor(@Inject(DA_SERVICE_TOKEN) private tokenService: ITokenService) {}
 
   ngOnInit(): void {