[完善]完善遮罩层

package-lock.json

@@ -241,16 +241,16 @@
       "integrity": "sha1-jSuFLFJzvMFh0T+C+q81ZqtWKVE="
     },
     "@angular/cdk": {
-      "version": "9.0.0",
-      "resolved": "https://registry.npm.taobao.org/@angular/cdk/download/@angular/cdk-9.0.0.tgz",
-      "integrity": "sha1-VzSBeulwRPkNME+g8lycGn+gv5Y=",
+      "version": "9.2.4",
+      "resolved": "https://registry.npmmirror.com/@angular/cdk/download/@angular/cdk-9.2.4.tgz",
+      "integrity": "sha1-hBOVi9J15MNL47lvVkRGcd0wupM=",
       "requires": {
         "parse5": "^5.0.0"
       },
       "dependencies": {
         "parse5": {
           "version": "5.1.1",
-          "resolved": "https://registry.npm.taobao.org/parse5/download/parse5-5.1.1.tgz?cache=0&sync_timestamp=1573036762880&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fparse5%2Fdownload%2Fparse5-5.1.1.tgz",
+          "resolved": "https://registry.nlark.com/parse5/download/parse5-5.1.1.tgz",
           "integrity": "sha1-9o5OW6GFKsLK3AD0VV//bCq7YXg=",
           "optional": true
         }

package.json

@@ -12,7 +12,7 @@
   "private": true,
   "dependencies": {
     "@angular/animations": "^9.0.0",
-    "@angular/cdk": "^9.0.0",
+    "@angular/cdk": "^9.2.4",
     "@angular/common": "~9.0.0",
     "@angular/compiler": "~9.0.0",
     "@angular/core": "~9.0.0",

src/app/pages/pages.module.ts

@@ -51,7 +51,7 @@ import { NzModalModule } from 'ng-zorro-antd/modal';
     NzDatePickerModule,
     NzIconModule,
     NzGridModule,
-    // NzModalModule
+    NzModalModule
   ]
 })
 export class PagesModule { }

src/app/pages/today-warning/today-warning.component.html

@@ -81,12 +81,12 @@
       </div>
       <div nz-col nzSpan="2">
         <button nz-button (click)="showModal()">查看</button>
-        <!-- <nz-modal [(nzVisible)]="isVisible" nzTitle="The first Modal" (nzOnCancel)="handleCancel()" (nzOnOk)="handleOk()">
+        <nz-modal [nzBodyStyle]="{ background: 'red' }" nzWrapClassName="vertical-center-modal" [(nzVisible)]="isVisible" [nzMaskClosable]="false" (nzOnCancel)="handleCancel()" (nzOnOk)="handleOk()" [nzFooter]="null">
           <p>Content one</p>
           <p>Content two</p>
           <p>Content three</p>
           <p>Content three</p>
-        </nz-modal> -->
+        </nz-modal>
       </div>
     </div>
   </div>

src/app/pages/today-warning/today-warning.component.scss

@@ -1,95 +1,121 @@
-.warningbox{
+.warningbox {
+  width: 100%;
+  height: 100%;
+  position: relative;
+  display: flex;
+  flex-direction: column;
+
+  .title {
+    box-sizing: border-box;
+    padding: 0 20PX;
+    width: 100%;
+    height: 50px;
+    line-height: 50px;
+    font-family: titlefont;
+    font-size: 26px;
+    color: #D0EAFF;
+  }
+
+  .search {
+    box-sizing: border-box;
+    padding: 0 36px;
     width: 100%;
-    height: 100%;
-    position: relative;
-    display: flex;
-    flex-direction: column;
-    .title{
-        box-sizing: border-box;
-        padding: 0 20PX;
-        width: 100%;
-        height: 50px;
-        line-height: 50px;
-        font-family: titlefont;
-        font-size: 26px;
-        color: #D0EAFF;
+    height: 32px;
+
+    // margin-bottom: 18px;
+    form {
+      width: 100%;
+      height: 32px;
+      display: flex;
+      justify-content: space-around;
+
+      .searchParams {
+        width: 22%;
+      }
+
+      .btn {
+        width: 5%;
+      }
+
+      nz-select {
+        color: #fff;
+      }
+
+      nz-date-picker {
+
+        background-color: #002552;
+        width: 145%;
+      }
+
     }
-    .search{
-        box-sizing: border-box;
-        padding: 0 36px;
-        width: 100%;
-        height: 32px;
-        // margin-bottom: 18px;
-        form{
-            width: 100%;
-            height: 32px;
-            display: flex;
-            justify-content: space-around;
-            .searchParams{
-                width: 22%;
-            }
-            .btn{
-                width: 5%;
-            }
-            nz-select{
-                color: #fff;
-            }
-            nz-date-picker{
-                
-                background-color: #002552;
-                width: 145%;
-            }
-            
-        }
-        .submit{
-            background-color: #013064;
-            border: 1px solid #4c8ac8;
-            color: #86bff3;
-        }
-        .reset{
-            background-color: #010d26;
-            border: 1px solid #4c8ac8;
-            color: #86bff3;
-        }
+
+    .submit {
+      background-color: #013064;
+      border: 1px solid #4c8ac8;
+      color: #86bff3;
     }
-    .warningnumber{
-        position: absolute;
-        left: 23px;
-        top: -60px;
-        .num{
-            font-size: 50px;
-            text-shadow: 0px 0px 6px #8df; 
-            color: white;
-            font-weight: 600;
-        }
-        .today{
-            font-size: 18px;
-            font-family: titlefont;
-            color: #D0EAFF;
-        }
+
+    .reset {
+      background-color: #010d26;
+      border: 1px solid #4c8ac8;
+      color: #86bff3;
     }
-    .listbox{
-        flex: 1;
-        overflow-y: auto;
-        background-image: radial-gradient(#004987,#03447c,#02325c,#012341,#01122e);
-        box-sizing: border-box;
-        padding: 20px 47px 20px 39px;
-        .listitem{
-            width: 100%;
-            height: 75px;
-            line-height: 75px;
-            border: 1px solid #4c8ac8;
-            color: #86bff3;
-            margin-bottom: 12px;
-            div{
-                text-align: center;
-                button{
-                    background-color: #013064;
-                    border: 1px solid #4c8ac8;
-                    color: #86bff3;
-                }
-            }
-        }
+  }
+
+  .warningnumber {
+    position: absolute;
+    left: 23px;
+    top: -60px;
 
+    .num {
+      font-size: 50px;
+      text-shadow: 0px 0px 6px #8df;
+      color: white;
+      font-weight: 600;
     }
-}
+
+    .today {
+      font-size: 18px;
+      font-family: titlefont;
+      color: #D0EAFF;
+    }
+  }
+
+  .listbox {
+    flex: 1;
+    overflow-y: auto;
+    background-image: radial-gradient(#004987, #03447c, #02325c, #012341, #01122e);
+    box-sizing: border-box;
+    padding: 20px 47px 20px 39px;
+
+    .listitem {
+      width: 100%;
+      height: 75px;
+      line-height: 75px;
+      border: 1px solid #4c8ac8;
+      color: #86bff3;
+      margin-bottom: 12px;
+
+      div {
+        text-align: center;
+
+        button {
+          background-color: #013064;
+          border: 1px solid #4c8ac8;
+          color: #86bff3;
+        }
+      }
+    }
+
+  }
+}
+
+::ng-deep .vertical-center-modal {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+::ng-deep .vertical-center-modal .ant-modal {
+  top: 0;
+}

src/theme.less

@@ -16,7 +16,15 @@
 @input-placeholder-color: #8aacce;
 .ant-picker-suffix{
     color: #8aacce;
+    
 }
 .ant-picker-input > input{
     color: #fff;
+}
+//弹窗遮罩层
+.ant-modal-mask{
+    background: rgba(0,0,0,0.05);
+}
+.ant-modal-content{
+    box-shadow: 0px 0px 4px #fff; 
 }