[完善]完善字体样式

src/app/pages/home/home.component.html

@@ -13,7 +13,7 @@
             违规记录
         </li>
     </div>
-    <div>
+    <div class="content">
         <router-outlet></router-outlet>
     </div>
 </div>

src/app/pages/home/home.component.scss

@@ -1,8 +1,12 @@
+
 .box{
     width: 100%;
     height: 100%;
     overflow: hidden;
-    background: #001f3e;
+    background: #01122e;
+    display: flex;
+    flex-direction: column;
+    // overflow: hidden;
 }
 .menu{
     height: 52px;
@@ -17,7 +21,15 @@
         line-height: 52px;
         text-align: center;
         cursor: pointer;
+        font-family: sybold;
+        color: #EBFAFF;
+    }
+ 
 }
+.content{
+    flex: 1;
+    // background-image: radial-gradient(#004987,#03447c,#02325c,#012341,#01122e);
+    // background: red;
 }
 .router-link-active{
     background-image: linear-gradient(to right, #052D5A , #0B416F,#136B93,#1F7C93,#136B93,#0B416F,#052D5A);

src/app/pages/pages.module.ts

@@ -61,6 +61,7 @@ import { CriminalRecordsComponent } from './criminal-records/criminal-records.co
 import { NzSelectModule } from 'ng-zorro-antd/select';
 import { NzDatePickerModule } from 'ng-zorro-antd/date-picker';
 import { NzIconModule } from 'ng-zorro-antd/icon';
+import { NzGridModule } from 'ng-zorro-antd/grid';
 @NgModule({
   declarations: [LoginComponent, RegisterComponent, HomeComponent, PlanComponent, TodayWarningComponent, CriminalRecordsComponent,],
   imports: [
@@ -82,7 +83,8 @@ import { NzIconModule } from 'ng-zorro-antd/icon';
     NzButtonModule,
     NzSelectModule,
     NzDatePickerModule,
-    NzIconModule
+    NzIconModule,
+    NzGridModule
   ]
 })
 export class PagesModule { }

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

@@ -48,11 +48,40 @@
 
       <nz-form-item class="btn">
         <nz-form-control>
-          <button nz-button type="button" class="reset"><i nz-icon [nzType]="'sync'"></i>重置</button>
+          <button nz-button type="button" class="reset"
+          (click)="resetForm($event)"
+          ><i nz-icon [nzType]="'sync'"></i>重置</button>
         </nz-form-control>
       </nz-form-item>
     </form>
   </div>
 
-  
+  <div class="warningnumber">
+    <span class="num">39</span>
+    <span class="today">今日违规</span>
+  </div>
+  <div class="listbox">
+    <div nz-row class="listitem" *ngFor="let item of list">
+      <div nz-col nzSpan="4">
+        <span *ngIf="item.level === 1">Ⅰ级违法事件</span>
+        <span *ngIf="item.level === 2">Ⅱ级违法事件</span>
+        <span *ngIf="item.level === 3">Ⅲ级违法事件</span>
+      </div>
+      <div nz-col nzSpan="4">
+        编号:{{item.num}}
+      </div>
+      <div nz-col nzSpan="5">
+        违规行为:{{item.content}}
+      </div>
+      <div nz-col nzSpan="4">
+        违规地点:{{item.site}}
+      </div>
+      <div nz-col nzSpan="5">
+        违规时间:{{item.time}}
+      </div>
+      <div nz-col nzSpan="2">
+        <button nz-button>查看</button>
+      </div>
+    </div>
+  </div>
 </div>

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

@@ -1,19 +1,44 @@
 .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: 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{
@@ -27,4 +52,44 @@
             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;
+                }
+            }
+        }
+
+    }
 }

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

@@ -26,4 +26,27 @@ export class TodayWarningComponent implements OnInit {
 
     console.log(this.validateForm)
   }
+  resetForm(e: MouseEvent): void {
+    e.preventDefault();
+    this.validateForm.reset();
+    for (const key in this.validateForm.controls) {
+      this.validateForm.controls[key].markAsPristine();
+      this.validateForm.controls[key].updateValueAndValidity();
+    }
+  }
+
+  list: any = [
+    {level:1,num:'DFHDUF54545SDS5D45SD4',content:'工作人员倚靠加油机或者立柱',site:'加油区2号摄像头',time:'2021-10-12  09:28:13'},
+    {level:2,num:'DFHDUF54545SDS5D45SD4',content:'工作人员倚靠加油机或者立柱',site:'加油区2号摄像头',time:'2021-10-12  09:28:13'},
+    {level:3,num:'DFHDUF54545SDS5D45SD4',content:'工作人员倚靠加油机或者立柱',site:'加油区2号摄像头',time:'2021-10-12  09:28:13'},
+    {level:1,num:'DFHDUF54545SDS5D45SD4',content:'工作人员倚靠加油机或者立柱',site:'加油区2号摄像头',time:'2021-10-12  09:28:13'},
+    {level:1,num:'DFHDUF54545SDS5D45SD4',content:'工作人员倚靠加油机或者立柱',site:'加油区2号摄像头',time:'2021-10-12  09:28:13'},
+    {level:1,num:'DFHDUF54545SDS5D45SD4',content:'工作人员倚靠加油机或者立柱',site:'加油区2号摄像头',time:'2021-10-12  09:28:13'},
+    {level:1,num:'DFHDUF54545SDS5D45SD4',content:'工作人员倚靠加油机或者立柱',site:'加油区2号摄像头',time:'2021-10-12  09:28:13'},
+    {level:1,num:'DFHDUF54545SDS5D45SD4',content:'工作人员倚靠加油机或者立柱',site:'加油区2号摄像头',time:'2021-10-12  09:28:13'},
+    {level:1,num:'DFHDUF54545SDS5D45SD4',content:'工作人员倚靠加油机或者立柱',site:'加油区2号摄像头',time:'2021-10-12  09:28:13'},
+    {level:1,num:'DFHDUF54545SDS5D45SD4',content:'工作人员倚靠加油机或者立柱',site:'加油区2号摄像头',time:'2021-10-12  09:28:13'},
+    {level:1,num:'DFHDUF54545SDS5D45SD4',content:'工作人员倚靠加油机或者立柱',site:'加油区2号摄像头',time:'2021-10-12  09:28:13'},
+    {level:1,num:'DFHDUF54545SDS5D45SD4',content:'工作人员倚靠加油机或者立柱',site:'加油区2号摄像头',time:'2021-10-12  09:28:13'}
+  ]
 }

src/index.html

@@ -6,7 +6,6 @@
   <base href="/">
   <meta name="viewport" content="width=device-width, initial-scale=1">
   <link rel="icon" type="image/x-icon" href="favicon.ico">
-  <link href='./assets/icon/material-icons.css' rel="stylesheet">
 </head>
 <body>
   <app-root></app-root>

src/styles.scss

@@ -1,4 +1,16 @@
 // @import "~ng-zorro-antd/ng-zorro-antd.min.css";
+@font-face {
+  font-family: titlefont;
+  src: url("./assets/font-family/titlefont.TTF");
+}
+@font-face {
+  font-family: sybold;
+  src: url("./assets/font-family/sybold.OTF");
+}
+@font-face {
+  font-family: synormal;
+  src: url("./assets/font-family/synormal.OTF");
+}
 html,
 body {
   width: 100%;
@@ -6,7 +18,9 @@ body {
   margin: 0 auto;
   padding: 0;
   overflow: hidden;
+  font-family: synormal!important;
 }
+
 ul,
 ol,
 dl,
@@ -36,6 +50,7 @@ canvas {
   margin: 0;
   padding: 0;
 }
+
 b,
 strong,
 i,
@@ -49,19 +64,23 @@ h6 {
   font-weight: 500;
   font-style: normal;
 }
+
 img {
   border: none;
 }
+
 a {
   text-decoration: none;
   color: #000;
 }
+
 ul,
 ol,
 li {
   list-style: none;
   overflow-x: hidden;
 }
+
 .clearfn:after {
   content: "";
   clear: both;
@@ -70,18 +89,22 @@ li {
   height: 0;
   visibility: hidden;
 }
+
 //root标签
 app-root {
   height: 100%;
 }
+
 h1 {
   font-size: 16px;
 }
+
 //滚动条样式
 ::-webkit-scrollbar {
   width: 5px;
   background-color: white;
 }
+
 ::-webkit-scrollbar-thumb {
   background-color: #999;
 }

src/theme.less

@@ -13,7 +13,10 @@
 }
 
 //日期选择器
-// @input-placeholder-color: #8aacce;
+@input-placeholder-color: #8aacce;
 .ant-picker-suffix{
     color: #8aacce;
 }
+.ant-picker-input > input{
+    color: #fff;
+}