[完善]完善遮罩层

package-lock.json

@@ -241,16 +241,16 @@
       "integrity": "sha1-jSuFLFJzvMFh0T+C+q81ZqtWKVE="
     },
     "@angular/cdk": {
-      "version": "9.0.0",
+      "version": "9.2.4",
-      "resolved": "https://registry.npm.taobao.org/@angular/cdk/download/@angular/cdk-9.0.0.tgz",
+      "resolved": "https://registry.npmmirror.com/@angular/cdk/download/@angular/cdk-9.2.4.tgz",
-      "integrity": "sha1-VzSBeulwRPkNME+g8lycGn+gv5Y=",
+      "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

@@ -4,6 +4,7 @@
   position: relative;
   display: flex;
   flex-direction: column;
+
   .title {
     box-sizing: border-box;
     padding: 0 20PX;
@@ -14,26 +15,32 @@
     font-size: 26px;
     color: #D0EAFF;
   }
+
   .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;
@@ -41,39 +48,46 @@
       }
 
     }
+
     .submit {
       background-color: #013064;
       border: 1px solid #4c8ac8;
       color: #86bff3;
     }
+
     .reset {
       background-color: #010d26;
       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;
@@ -81,8 +95,10 @@
       border: 1px solid #4c8ac8;
       color: #86bff3;
       margin-bottom: 12px;
+
       div {
         text-align: center;
+
         button {
           background-color: #013064;
           border: 1px solid #4c8ac8;
@@ -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; 
+}