From 9f6b3aa27e62a3afc8ddfc5db6b1bd2973422762 Mon Sep 17 00:00:00 2001 From: huajian <287643967@qq.com> Date: Sun, 12 Dec 2021 16:57:36 +0800 Subject: [PATCH] =?UTF-8?q?=E9=83=A8=E5=88=86=E7=A7=BB=E5=8A=A8=E7=AB=AF?= =?UTF-8?q?=E9=80=82=E9=85=8D=E9=97=AE=E9=A2=98=E8=A7=A3=E5=86=B3?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../dashboard/monitor/monitor.component.html | 6 ++-- src/app/pages/form/step/step.component.html | 17 +++++----- src/app/pages/form/step/step.component.ts | 20 ++++++++++-- .../layout-head-right-menu.component.html | 4 +-- .../footer-submit/footer-submit.component.ts | 31 +++++++++++++------ 5 files changed, 52 insertions(+), 26 deletions(-) diff --git a/src/app/pages/dashboard/monitor/monitor.component.html b/src/app/pages/dashboard/monitor/monitor.component.html index 7884b706..f645e139 100644 --- a/src/app/pages/dashboard/monitor/monitor.component.html +++ b/src/app/pages/dashboard/monitor/monitor.component.html @@ -66,9 +66,9 @@
-
-
-
+
+
+
diff --git a/src/app/pages/form/step/step.component.html b/src/app/pages/form/step/step.component.html index 8ea6caff..3b1711ec 100644 --- a/src/app/pages/form/step/step.component.html +++ b/src/app/pages/form/step/step.component.html @@ -3,19 +3,19 @@
-
+
- +
-
+
-
+ 付款账户 @@ -53,14 +53,15 @@ - +
+
-
+

说明

转账到支付宝账户

@@ -115,10 +116,10 @@

转账到银行卡

-
+
- + ant-design@alipay.com test@example.com Alex diff --git a/src/app/pages/form/step/step.component.ts b/src/app/pages/form/step/step.component.ts index 2240b994..e6585410 100644 --- a/src/app/pages/form/step/step.component.ts +++ b/src/app/pages/form/step/step.component.ts @@ -1,7 +1,8 @@ -import {ChangeDetectionStrategy, Component, OnInit} from '@angular/core'; +import {ChangeDetectionStrategy, ChangeDetectorRef, Component, OnInit} from '@angular/core'; import {FormBuilder, FormControl, FormGroup, Validators} from '@angular/forms'; import {NzFormTooltipIcon} from 'ng-zorro-antd/form'; import {PageHeaderType} from '../../../shared/components/page-header/page-header.component'; +import {BreakpointObserver} from "@angular/cdk/layout"; @Component({ selector: 'app-step', @@ -10,7 +11,7 @@ import {PageHeaderType} from '../../../shared/components/page-header/page-header changeDetection: ChangeDetectionStrategy.OnPush, }) export class StepComponent implements OnInit { - + stepDirection: 'horizontal' | 'vertical' = 'horizontal'; pageHeaderInfo: Partial = { title: '分步表单', desc: '将一个冗长或用户不熟悉的表单任务分成多个步骤，指导用户完成。', @@ -49,7 +50,7 @@ export class StepComponent implements OnInit { e.preventDefault(); } - constructor(private fb: FormBuilder) { + constructor(private fb: FormBuilder, private breakpointObserver: BreakpointObserver, private cdr: ChangeDetectorRef) { } ngOnInit(): void { @@ -65,5 +66,18 @@ export class StepComponent implements OnInit { title: [null], payWay: ['zhifubao'], }); + + this.breakpointObserver.observe(['(max-width: 770px)']).subscribe(result => { + let tempDir: 'vertical' | 'horizontal' = 'vertical'; + if (result.matches) { + tempDir = 'vertical'; + } else { + tempDir = 'horizontal'; + } + if (tempDir !== this.stepDirection) { + this.stepDirection = tempDir; + this.cdr.markForCheck(); + } + }); } } diff --git a/src/app/shared/biz-components/layout-components/layout-head-right-menu/layout-head-right-menu.component.html b/src/app/shared/biz-components/layout-components/layout-head-right-menu/layout-head-right-menu.component.html index 3194b2c1..9a65c48b 100644 --- a/src/app/shared/biz-components/layout-components/layout-head-right-menu/layout-head-right-menu.component.html +++ b/src/app/shared/biz-components/layout-components/layout-head-right-menu/layout-head-right-menu.component.html @@ -1,11 +1,11 @@
- - diff --git a/src/app/shared/components/footer-submit/footer-submit.component.ts b/src/app/shared/components/footer-submit/footer-submit.component.ts index 70ac699b..187ebd40 100644 --- a/src/app/shared/components/footer-submit/footer-submit.component.ts +++ b/src/app/shared/components/footer-submit/footer-submit.component.ts @@ -14,24 +14,35 @@ export class FooterSubmitComponent implements OnInit { themesOptions$ = this.themesService.getThemesMode(); isNightTheme$ = this.themesService.getIsNightTheme(); isCollapsed$ = this.themesService.getIsCollapsed(); + isOverMode$ = this.themesService.getIsOverMode(); isCollapsed = false; hasLeftNav = true; constructor(private themesService: ThemeService, private rd2: Renderer2, private el: ElementRef) { } + setWidth(width: number): void { + const dom = this.el.nativeElement.querySelector('.ant-pro-footer-bar'); + this.rd2.setStyle(dom, 'width', `calc(100% - ${width}px)`); + } + subTheme(): void { - this.themesOptions$.pipe(switchMap(themesOptions => { - this.hasLeftNav = themesOptions.hasNavArea; - return this.isCollapsed$; - })).subscribe(isCollapsed => { - let width = 0; - const dom = this.el.nativeElement.querySelector('.ant-pro-footer-bar'); - if (this.hasLeftNav) { - width = isCollapsed ? 48 : 208; + this.isOverMode$.subscribe(res => { + if (res) { + this.setWidth(0); + } else { + this.themesOptions$.pipe(switchMap(themesOptions => { + this.hasLeftNav = themesOptions.hasNavArea; + return this.isCollapsed$; + })).subscribe(isCollapsed => { + let width = 0; + if (this.hasLeftNav) { + width = isCollapsed ? 48 : 208; + } + this.setWidth(width); + }); } - this.rd2.setStyle(dom, 'width', `calc(100% - ${width}px)`); - }); + }) } ngOnInit(): void {