From 2eb8e042c24470ec5f4767d9ab21463c3677ed27 Mon Sep 17 00:00:00 2001 From: SHAOJIAHAO <55341701@qq.com> Date: Sat, 30 Oct 2021 10:26:26 +0800 Subject: [PATCH] =?UTF-8?q?[=E5=AE=8C=E5=96=84]=E5=AE=8C=E5=96=84=E8=83=8C?= =?UTF-8?q?=E6=99=AF=E8=89=B2?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- package-lock.json | 2 +- .../criminal-records.component.html | 79 ++++++++++++++++++- .../criminal-records.component.scss | 75 ++++++++++++++++++ .../criminal-records.component.ts | 28 ++++++- src/app/pages/home/home.component.scss | 66 ++++++++-------- .../today-warning.component.html | 7 +- .../today-warning.component.scss | 20 ++++- src/app/ui/title/title.component.html | 8 ++ src/app/ui/title/title.component.scss | 34 ++++++++ src/app/ui/title/title.component.ts | 15 ++++ src/app/ui/ui.module.ts | 5 +- src/styles.scss | 14 ++-- src/theme.less | 28 ++++--- 13 files changed, 317 insertions(+), 64 deletions(-) create mode 100644 src/app/ui/title/title.component.html create mode 100644 src/app/ui/title/title.component.scss create mode 100644 src/app/ui/title/title.component.ts diff --git a/package-lock.json b/package-lock.json index 764fbb5..0b71120 100644 --- a/package-lock.json +++ b/package-lock.json @@ -250,7 +250,7 @@ "dependencies": { "parse5": { "version": "5.1.1", - "resolved": "https://registry.nlark.com/parse5/download/parse5-5.1.1.tgz", + "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", "integrity": "sha1-9o5OW6GFKsLK3AD0VV//bCq7YXg=", "optional": true } diff --git a/src/app/pages/criminal-records/criminal-records.component.html b/src/app/pages/criminal-records/criminal-records.component.html index b10e20f..9af66e9 100644 --- a/src/app/pages/criminal-records/criminal-records.component.html +++ b/src/app/pages/criminal-records/criminal-records.component.html @@ -1 +1,78 @@ -

违规记录

+
+
+ +
+
+
+ +
+
+
+ +
+
+ +
+ +
+
+
+
+ +
+
+ +
+
+
+
+
diff --git a/src/app/pages/criminal-records/criminal-records.component.scss b/src/app/pages/criminal-records/criminal-records.component.scss index e69de29..82fffbd 100644 --- a/src/app/pages/criminal-records/criminal-records.component.scss +++ b/src/app/pages/criminal-records/criminal-records.component.scss @@ -0,0 +1,75 @@ +.recordsbox { + width: 100%; + height: 100%; + display: flex; + flex-direction: column; +} + +.content { + flex: 1; + // background-image: radial-gradient(circle,#004078, #012b57, #00142f); + + .title { + margin-bottom: 15px; + width: 100%; + height: 64px; + box-sizing: border-box; + padding: 0 28px; + } + .chartsbox{ + width: 100%; + display: flex; + justify-content: center; + .charts{ + width: 98%; + height: 300px; + border: 1px solid white; + } + } +} + +.search { + box-sizing: border-box; + padding: 0 36px; + width: 100%; + height: 32px; + margin: 20px 0px; + + 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 { + background-color: #013064; + border: 1px solid #4c8ac8; + color: #86bff3; + } + + .reset { + background-color: #010d26; + border: 1px solid #4c8ac8; + color: #86bff3; + } +} diff --git a/src/app/pages/criminal-records/criminal-records.component.ts b/src/app/pages/criminal-records/criminal-records.component.ts index 5976dfc..ac3370d 100644 --- a/src/app/pages/criminal-records/criminal-records.component.ts +++ b/src/app/pages/criminal-records/criminal-records.component.ts @@ -1,15 +1,37 @@ import { Component, OnInit } from '@angular/core'; - +import { FormBuilder, FormGroup, Validators } from '@angular/forms'; @Component({ selector: 'app-criminal-records', templateUrl: './criminal-records.component.html', styleUrls: ['./criminal-records.component.scss'] }) export class CriminalRecordsComponent implements OnInit { - - constructor() { } + validateForm!: FormGroup; + constructor(private fb: FormBuilder) { } ngOnInit(): void { + this.validateForm = this.fb.group({ + level: [null], + type: [null], + site: [null], + datePicker: [null] + }); + } + submitForm(): void { + for (const i in this.validateForm.controls) { + 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(); + } } } diff --git a/src/app/pages/home/home.component.scss b/src/app/pages/home/home.component.scss index 94ba1c5..f0bedd7 100644 --- a/src/app/pages/home/home.component.scss +++ b/src/app/pages/home/home.component.scss @@ -1,36 +1,38 @@ - -.box{ - width: 100%; - height: 100%; - overflow: hidden; - background: #01122e; - display: flex; - flex-direction: column; - // overflow: hidden; +.box { + width: 100%; + height: 100%; + overflow: hidden; + background-image: radial-gradient(closest-side at 50% 55%,#03447c, #02325c, #002046); + display: flex; + flex-direction: column; } -.menu{ + +.menu { + height: 52px; + width: 100%; + display: flex; + justify-content: center; + align-items: center; + font-size: 17px; + + li { + width: 10%; height: 52px; - width: 100%; - display: flex; - justify-content: center; - align-items: center; - font-size: 17px; - li{ - width: 10%; - height: 52px; - line-height: 52px; - text-align: center; - cursor: pointer; - font-family: sybold; - color: #EBFAFF; - } - + 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; + +.content { + flex: 1; + overflow: hidden; + +} + +.router-link-active { + background-image: linear-gradient(to right, #052D5A, #0B416F, #136B93, #1F7C93, #136B93, #0B416F, #052D5A); } -.router-link-active{ - background-image: linear-gradient(to right, #052D5A , #0B416F,#136B93,#1F7C93,#136B93,#0B416F,#052D5A); -} \ No newline at end of file diff --git a/src/app/pages/today-warning/today-warning.component.html b/src/app/pages/today-warning/today-warning.component.html index 442781e..927cbf8 100644 --- a/src/app/pages/today-warning/today-warning.component.html +++ b/src/app/pages/today-warning/today-warning.component.html @@ -81,11 +81,8 @@
- -

Content one

-

Content two

-

Content three

-

Content three

+ +
diff --git a/src/app/pages/today-warning/today-warning.component.scss b/src/app/pages/today-warning/today-warning.component.scss index 48b526d..fa8ba71 100644 --- a/src/app/pages/today-warning/today-warning.component.scss +++ b/src/app/pages/today-warning/today-warning.component.scss @@ -84,10 +84,8 @@ .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; @@ -110,12 +108,30 @@ } } + +//遮罩层 ::ng-deep .vertical-center-modal { display: flex; align-items: center; justify-content: center; } +::ng-deep .ant-modal-body { + background: #072549; + height: 660px; + padding: 5px; + // border: 1px solid #8eb9e3; + box-shadow: 0 0 3px #8eb9e3; + color: #fff; +} + +::ng-deep .ant-modal-close-x { + width: 36px; + height: 36px; + line-height: 36px; + color: white; +} + ::ng-deep .vertical-center-modal .ant-modal { top: 0; } diff --git a/src/app/ui/title/title.component.html b/src/app/ui/title/title.component.html new file mode 100644 index 0000000..62f2cd2 --- /dev/null +++ b/src/app/ui/title/title.component.html @@ -0,0 +1,8 @@ +
+ +
+
+ 违规类型统计 +
+
+
\ No newline at end of file diff --git a/src/app/ui/title/title.component.scss b/src/app/ui/title/title.component.scss new file mode 100644 index 0000000..90de46d --- /dev/null +++ b/src/app/ui/title/title.component.scss @@ -0,0 +1,34 @@ +.titlebox { + width: 100%; + height: 100%; + display: flex; + align-items: center; + + img { + max-width: 46px; + max-height: 46px; + } + + .content { + flex: 1; + height: 46px; + display: flex; + align-items: center; + background-image: linear-gradient(to right, #002147, #033565, #064e8e, #064e8e, #033565, #002147); + + .contentitem { + width: 100%; + height: 33px; + line-height: 33px; + background-image: linear-gradient(to right, #002147, #0f5ca0, #1c88e6, #1c88e6, #0f5ca0, #002147); + + span { + margin-left: 20px; + color: #bce0ff; + font-size: 20px; + font-family: titlefont; + } + } + + } +} diff --git a/src/app/ui/title/title.component.ts b/src/app/ui/title/title.component.ts new file mode 100644 index 0000000..4a46919 --- /dev/null +++ b/src/app/ui/title/title.component.ts @@ -0,0 +1,15 @@ +import { Component, OnInit } from '@angular/core'; + +@Component({ + selector: 'app-title', + templateUrl: './title.component.html', + styleUrls: ['./title.component.scss'] +}) +export class TitleComponent implements OnInit { + + constructor() { } + + ngOnInit(): void { + } + +} diff --git a/src/app/ui/ui.module.ts b/src/app/ui/ui.module.ts index 9abf87f..ed55c4d 100644 --- a/src/app/ui/ui.module.ts +++ b/src/app/ui/ui.module.ts @@ -18,8 +18,9 @@ import { PaginatorModule } from './paginator/paginator.module'; import { TabbarComponent } from './tabbar/tabbar.component'; import { NzDropDownModule } from 'ng-zorro-antd/dropdown'; +import { TitleComponent } from './title/title.component'; @NgModule({ - declarations: [TabbarComponent,UserdataComponent, ChangepasswordComponent, IsnoPipe, ConfirmpswDirective, TimePipe, EditUser], + declarations: [TabbarComponent,UserdataComponent, ChangepasswordComponent, IsnoPipe, ConfirmpswDirective, TimePipe, EditUser, TitleComponent], imports: [ CommonModule, @@ -37,7 +38,7 @@ import { NzDropDownModule } from 'ng-zorro-antd/dropdown'; NzDropDownModule ], - exports:[TabbarComponent] + exports:[TabbarComponent,TitleComponent] }) export class UiModule { } diff --git a/src/styles.scss b/src/styles.scss index d1fe1e0..82a670a 100644 --- a/src/styles.scss +++ b/src/styles.scss @@ -3,14 +3,17 @@ 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%; @@ -18,7 +21,7 @@ body { margin: 0 auto; padding: 0; overflow: hidden; - font-family: synormal!important; + font-family: synormal !important; } ul, @@ -101,10 +104,11 @@ h1 { //滚动条样式 ::-webkit-scrollbar { - width: 5px; - background-color: white; + width: 10px; } - ::-webkit-scrollbar-thumb { - background-color: #999; + background-image: linear-gradient(#2495f8, #1c73c2,#0a3d6a, #061d3c); +} +::-webkit-scrollbar-track { + background-color: #061d3c; } diff --git a/src/theme.less b/src/theme.less index 8bdb3f5..2f4ac7f 100644 --- a/src/theme.less +++ b/src/theme.less @@ -6,25 +6,27 @@ @border-color-base: #8aacce; -@select-background:#002552; +@select-background: #002552; -.ant-select-single:not(.ant-select-customize-input) .ant-select-selector,.ant-picker,.ant-btn{ - border-radius: 0px; +.ant-select-single:not(.ant-select-customize-input) .ant-select-selector, +.ant-picker, +.ant-btn { + border-radius: 0px; } //日期选择器 @input-placeholder-color: #8aacce; -.ant-picker-suffix{ - color: #8aacce; - + +.ant-picker-suffix { + color: #8aacce; + } -.ant-picker-input > input{ - color: #fff; + +.ant-picker-input>input { + color: #fff; } + //弹窗遮罩层 -.ant-modal-mask{ - background: rgba(0,0,0,0.05); +.ant-modal-mask { + background: rgba(0, 0, 0, 0.05); } -.ant-modal-content{ - box-shadow: 0px 0px 4px #fff; -} \ No newline at end of file