[完善]完善遮罩层

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