From 26efdd150211c431a09cb7dcac3e4fcf948ada0f Mon Sep 17 00:00:00 2001 From: cpf <1105965053@qq.com> Date: Mon, 8 Nov 2021 11:03:04 +0800 Subject: [PATCH] =?UTF-8?q?=E5=B7=A6=E4=BE=A7=E7=BB=84=E4=BB=B6=E5=AE=8C?= =?UTF-8?q?=E5=96=84?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../left-domain/left-domain.component.html | 1 + .../left-domain/left-domain.component.scss | 0 .../left-domain/left-domain.component.ts | 15 +++++ src/app/pages/pages.module.ts | 3 +- src/app/pages/plan/plan.component.html | 11 ++++ src/app/pages/plan/plan.component.scss | 56 ++++++++++++++++++- src/styles.scss | 4 +- 7 files changed, 86 insertions(+), 4 deletions(-) create mode 100644 src/app/pages/left-domain/left-domain.component.html create mode 100644 src/app/pages/left-domain/left-domain.component.scss create mode 100644 src/app/pages/left-domain/left-domain.component.ts diff --git a/src/app/pages/left-domain/left-domain.component.html b/src/app/pages/left-domain/left-domain.component.html new file mode 100644 index 0000000..3c1d0af --- /dev/null +++ b/src/app/pages/left-domain/left-domain.component.html @@ -0,0 +1 @@ +

left-domain works!

diff --git a/src/app/pages/left-domain/left-domain.component.scss b/src/app/pages/left-domain/left-domain.component.scss new file mode 100644 index 0000000..e69de29 diff --git a/src/app/pages/left-domain/left-domain.component.ts b/src/app/pages/left-domain/left-domain.component.ts new file mode 100644 index 0000000..b814f02 --- /dev/null +++ b/src/app/pages/left-domain/left-domain.component.ts @@ -0,0 +1,15 @@ +import { Component, OnInit } from '@angular/core'; + +@Component({ + selector: 'app-left-domain', + templateUrl: './left-domain.component.html', + styleUrls: ['./left-domain.component.scss'] +}) +export class LeftDomainComponent implements OnInit { + + constructor() { } + + ngOnInit(): void { + } + +} diff --git a/src/app/pages/pages.module.ts b/src/app/pages/pages.module.ts index ddab50b..2401970 100644 --- a/src/app/pages/pages.module.ts +++ b/src/app/pages/pages.module.ts @@ -31,8 +31,9 @@ import { NzMessageModule } from 'ng-zorro-antd/message'; import { NzSpinModule } from 'ng-zorro-antd/spin'; import { TodayWarningAdminComponent } from './today-warning-admin/today-warning-admin.component'; import { CriminalRecordsAdminComponent } from './criminal-records-admin/criminal-records-admin.component'; +import { LeftDomainComponent } from './left-domain/left-domain.component'; @NgModule({ - declarations: [LoginComponent, RegisterComponent, HomeComponent, PlanComponent, TodayWarningComponent, CriminalRecordsComponent, TodayWarningAdminComponent, CriminalRecordsAdminComponent,], + declarations: [LoginComponent, RegisterComponent, HomeComponent, PlanComponent, TodayWarningComponent, CriminalRecordsComponent, TodayWarningAdminComponent, CriminalRecordsAdminComponent, LeftDomainComponent,], imports: [ PagesRoutingModule, CommonModule, diff --git a/src/app/pages/plan/plan.component.html b/src/app/pages/plan/plan.component.html index f526646..4fd0425 100644 --- a/src/app/pages/plan/plan.component.html +++ b/src/app/pages/plan/plan.component.html @@ -15,6 +15,17 @@
+ +
+
+
+

{{allFence[selectFence]}}

+
+
+
+
+ +
diff --git a/src/app/pages/plan/plan.component.scss b/src/app/pages/plan/plan.component.scss index 11fe2a3..0364b27 100644 --- a/src/app/pages/plan/plan.component.scss +++ b/src/app/pages/plan/plan.component.scss @@ -62,6 +62,60 @@ .selectRightTopFast { border: 1px solid #fff; } //选种样式 } +//左侧子组件 +.leftChildComponent{ + width: 300px; + height: 90%; + position: absolute; + left: 3%; + top: 0; + bottom: 0; + margin: auto;/*这行代码是关键*/ + z-index: 10; + box-sizing: border-box; + padding: 5px; + color: #fff; + background: linear-gradient(360deg, #000D21 0%, rgba(0, 59, 110, 0.8) 100%); + display: flex; + flex-direction: column; + .leftChildHeader{ + display: flex; + width: 95%; + height: 30px; + line-height: 30px; + margin: 10px auto; + background: linear-gradient(270deg, rgba(35, 153, 255, 0) 0%, rgba(35, 153, 255, 0.8) 50%, rgba(35, 153, 255, 0) 100%); + div:first-child{ + width: 30px; + height: 30px; + border: 1px solid #2399FF; + box-shadow: 0px 2px 8px #2399FF; + border-radius: 50%; + text-align: center; + } + div:nth-child(2){ + box-sizing: border-box; + margin: 0 10px; + font-weight: 900; + font-size: 16px; + letter-spacing: 3px; + font-style: italic; + flex: 1; + } + div:last-child{ + width: 30px; + height: 30px; + text-align: center; + cursor: pointer; + .anticon{ color: #91CCFF; } //字体图标 + } + } + .leftChildCenter{ + flex: 1; + overflow: hidden; + } +} + //左侧建筑 .showLeftBuilding{ width: 30px; @@ -90,7 +144,7 @@ transition: margin-left 0.5s; display: flex; flex-direction: column; - .hideLeft { text-align: right; color: #fff; padding: 3px 5px; z-index: 10; } + .hideLeft { text-align: right; color: #fff; padding: 3px 5px; z-index: 1; } .leftHeader { overflow: hidden; text-align: center; diff --git a/src/styles.scss b/src/styles.scss index 92c1a83..e52ce64 100644 --- a/src/styles.scss +++ b/src/styles.scss @@ -107,10 +107,10 @@ h1 { width: 10px; } ::-webkit-scrollbar-thumb { - background-image: linear-gradient(#2495f8, #1c73c2,#0a3d6a, #061d3c); + background-image: inear-gradient(180deg, #2399FF 0%, rgba(0, 13, 33, 0.4) 100%); } ::-webkit-scrollbar-track { - background-color: #061d3c; + background-color: rgba(0, 13, 33, 0.41); }