diff --git a/src/app/pages/home/home.component.html b/src/app/pages/home/home.component.html
index b85b4b2..749c038 100644
--- a/src/app/pages/home/home.component.html
+++ b/src/app/pages/home/home.component.html
@@ -13,7 +13,7 @@
             违规记录
         </li>
     </div>
-    <div>
+    <div class="content">
         <router-outlet></router-outlet>
     </div>
 </div>
\ No newline at end of file
diff --git a/src/app/pages/home/home.component.scss b/src/app/pages/home/home.component.scss
index 297370f..94ba1c5 100644
--- a/src/app/pages/home/home.component.scss
+++ b/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);
diff --git a/src/app/pages/pages.module.ts b/src/app/pages/pages.module.ts
index 506d526..aa17bbf 100644
--- a/src/app/pages/pages.module.ts
+++ b/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 { }
diff --git a/src/app/pages/today-warning/today-warning.component.html b/src/app/pages/today-warning/today-warning.component.html
index 7820ed0..ab6cbc8 100644
--- a/src/app/pages/today-warning/today-warning.component.html
+++ b/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>
diff --git a/src/app/pages/today-warning/today-warning.component.scss b/src/app/pages/today-warning/today-warning.component.scss
index 562e280..c303717 100644
--- a/src/app/pages/today-warning/today-warning.component.scss
+++ b/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;
+                }
+            }
+        }
+
+    }
 }
\ No newline at end of file
diff --git a/src/app/pages/today-warning/today-warning.component.ts b/src/app/pages/today-warning/today-warning.component.ts
index a6f9579..fa520aa 100644
--- a/src/app/pages/today-warning/today-warning.component.ts
+++ b/src/app/pages/today-warning/today-warning.component.ts
@@ -23,7 +23,30 @@ export class TodayWarningComponent implements OnInit {
       this.validateForm.controls[i].markAsDirty();
       this.validateForm.controls[i].updateValueAndValidity();
     }
-    
+
     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'}
+  ]
 }
diff --git a/src/assets/font-family/sybold.OTF b/src/assets/font-family/sybold.OTF
new file mode 100644
index 0000000..4b3429a
Binary files /dev/null and b/src/assets/font-family/sybold.OTF differ
diff --git a/src/assets/font-family/synormal.OTF b/src/assets/font-family/synormal.OTF
new file mode 100644
index 0000000..091f56d
Binary files /dev/null and b/src/assets/font-family/synormal.OTF differ
diff --git a/src/assets/font-family/titlefont.TTF b/src/assets/font-family/titlefont.TTF
new file mode 100644
index 0000000..3729151
Binary files /dev/null and b/src/assets/font-family/titlefont.TTF differ
diff --git a/src/index.html b/src/index.html
index 1bb7efe..f451d0c 100644
--- a/src/index.html
+++ b/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>
diff --git a/src/styles.scss b/src/styles.scss
index c265462..d1fe1e0 100644
--- a/src/styles.scss
+++ b/src/styles.scss
@@ -1,12 +1,26 @@
 // @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%;
-	height: 100%;
-	margin: 0 auto;
-	padding: 0;
-	overflow: hidden;
+  width: 100%;
+  height: 100%;
+  margin: 0 auto;
+  padding: 0;
+  overflow: hidden;
+  font-family: synormal!important;
 }
+
 ul,
 ol,
 dl,
@@ -33,9 +47,10 @@ time,
 mark,
 main,
 canvas {
-	margin: 0;
-	padding: 0;
+  margin: 0;
+  padding: 0;
 }
+
 b,
 strong,
 i,
@@ -46,42 +61,50 @@ h3,
 h4,
 h5,
 h6 {
-	font-weight: 500;
-	font-style: normal;
+  font-weight: 500;
+  font-style: normal;
 }
+
 img {
-	border: none;
+  border: none;
 }
+
 a {
-	text-decoration: none;
-	color: #000;
+  text-decoration: none;
+  color: #000;
 }
+
 ul,
 ol,
 li {
-	list-style: none;
-	overflow-x: hidden;
+  list-style: none;
+  overflow-x: hidden;
 }
+
 .clearfn:after {
-	content: "";
-	clear: both;
-	display: block;
-	overflow: hidden;
-	height: 0;
-	visibility: hidden;
+  content: "";
+  clear: both;
+  display: block;
+  overflow: hidden;
+  height: 0;
+  visibility: hidden;
 }
+
 //root标签
 app-root {
-	height: 100%;
+  height: 100%;
 }
+
 h1 {
-	font-size: 16px;
+  font-size: 16px;
 }
+
 //滚动条样式
 ::-webkit-scrollbar {
-	width: 5px;
-	background-color: white;
+  width: 5px;
+  background-color: white;
 }
+
 ::-webkit-scrollbar-thumb {
-	background-color: #999;
+  background-color: #999;
 }
diff --git a/src/theme.less b/src/theme.less
index 35eab55..aa86b34 100644
--- a/src/theme.less
+++ b/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;
 }
\ No newline at end of file