shaojiahao
/
Sinopec-Anxin
2
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

[完善]完善字体样式

dev
邵佳豪 3 years ago
parent
caaa96097d
commit
9a3b4b0a3b
12 changed files with 189 additions and 33 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 2
      src/app/pages/home/home.component.html
  2. 14
      src/app/pages/home/home.component.scss
  3. 4
      src/app/pages/pages.module.ts
  4. 33
      src/app/pages/today-warning/today-warning.component.html
  5. 65
      src/app/pages/today-warning/today-warning.component.scss
  6. 25
      src/app/pages/today-warning/today-warning.component.ts
  7. BIN
      src/assets/font-family/sybold.OTF
  8. BIN
      src/assets/font-family/synormal.OTF
  9. BIN
      src/assets/font-family/titlefont.TTF
  10. 1
      src/index.html
  11. 73
      src/styles.scss
  12. 5
      src/theme.less

2
src/app/pages/home/home.component.html
Unescape View File

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

14
src/app/pages/home/home.component.scss
Unescape View File

@ -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);

4
src/app/pages/pages.module.ts
Unescape View File

@ -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 { }

33
src/app/pages/today-warning/today-warning.component.html
Unescape View File

@ -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>

65
src/app/pages/today-warning/today-warning.component.scss
Unescape View File

@ -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;
}
}
}
}
}

25
src/app/pages/today-warning/today-warning.component.ts
Unescape View File

@ -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'}
]
}

BIN
src/assets/font-family/sybold.OTF
View File

Binary file not shown.

BIN
src/assets/font-family/synormal.OTF
View File

Binary file not shown.

BIN
src/assets/font-family/titlefont.TTF
View File

Binary file not shown.

1
src/index.html
Unescape View File

@ -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>

73
src/styles.scss
Unescape View File

@ -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;
}

5
src/theme.less
Unescape View File

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