部分移动端适配问题解决

huajian123 · Dec 12, 2021 · 9f6b3aa · 9f6b3aa
1 parent 938779a
commit 9f6b3aa
Show file tree

Hide file tree

Showing 5 changed files with 52 additions and 26 deletions.
diff --git a/src/app/pages/dashboard/monitor/monitor.component.html b/src/app/pages/dashboard/monitor/monitor.component.html
@@ -66,9 +66,9 @@
     <div nz-col [nzXXl]="12" [nzXl]="12" [nzLg]="24" [nzMd]="24" [nzSm]="24" [nzXs]="24">
       <nz-card nzTitle="各品类占比">
         <div nz-row>
-          <div nz-col class="pipe-height center" nzSpan="8" id="ringProgress1"></div>
-          <div nz-col class="pipe-height center" nzSpan="8" id="ringProgress2"></div>
-          <div nz-col class="pipe-height center" nzSpan="8" id="ringProgress3"></div>
+          <div nz-col class="pipe-height center"  [nzXXl]="8" [nzXl]="8" [nzLg]="8" [nzMd]="8" [nzSm]="8" [nzXs]="24" id="ringProgress1"></div>
+          <div nz-col class="pipe-height center"  [nzXXl]="8" [nzXl]="8" [nzLg]="8" [nzMd]="8" [nzSm]="8" [nzXs]="24" id="ringProgress2"></div>
+          <div nz-col class="pipe-height center"  [nzXXl]="8" [nzXl]="8" [nzLg]="8" [nzMd]="8" [nzSm]="8" [nzXs]="24" id="ringProgress3"></div>
         </div>
       </nz-card>
     </div>

diff --git a/src/app/pages/form/step/step.component.html b/src/app/pages/form/step/step.component.html
@@ -3,19 +3,19 @@
 
 <div class="normal-table-wrap">
   <nz-card>
-    <section class="page-wrap">
+    <section class="page-wrap" [class.p-0]="stepDirection==='vertical'">
       <app-water-mark></app-water-mark>
       <section class="step-wrap">
-        <nz-steps [nzCurrent]="currentStep-1">
+        <nz-steps [nzDirection]="stepDirection" [nzCurrent]="currentStep-1">
           <nz-step nzTitle="填写转账信息"></nz-step>
           <nz-step nzTitle="确认转账信息"></nz-step>
           <nz-step nzTitle="完成"></nz-step>
         </nz-steps>
       </section>
 
-      <section>
+      <section >
         <ng-container *ngIf="currentStep===1">
-          <form class="form-wrap p-b-0 center-row" nz-form [formGroup]="validateForm" (ngSubmit)="submitForm()">
+          <form [class.p-0]="stepDirection==='vertical'" class="form-wrap p-b-0 center-row" nz-form [formGroup]="validateForm" (ngSubmit)="submitForm()">
             <nz-form-item>
               <nz-form-label [nzSm]="6" [nzXs]="24" nzRequired nzFor="title">付款账户</nz-form-label>
               <nz-form-control [nzSm]="14" [nzXs]="24" nzErrorTip="请输入标题">
@@ -53,14 +53,15 @@
               </nz-form-control>
             </nz-form-item>
             <nz-form-item nz-row class="register-area">
-              <nz-form-control [nzSpan]="14" [nzOffset]="6">
+              <div nz-col [nzSpan]="6" ></div>
+              <nz-form-control [nzSm]="14" [nzXs]="24">
                 <button nz-button nzType="primary" (click)="currentStep=currentStep+1">下一步</button>
               </nz-form-control>
             </nz-form-item>
           </form>
 
           <nz-divider></nz-divider>
-          <section class="desc-wrap">
+          <section class="desc-wrap"  [class.p-0]="stepDirection==='vertical'">
             <h3 nz-typography nzType="secondary">说明</h3>
             <h4 nz-typography nzType="secondary">转账到支付宝账户</h4>
             <p nz-typography nzType="secondary">
@@ -115,10 +116,10 @@ <h4 nz-typography nzType="secondary">转账到银行卡</h4>
               <button nz-button>查看账单</button>
             </div>
           </nz-result>
-          <div nz-result-content class="desc-bg center">
+          <div nz-result-content class="desc-bg center"  [class.p-l-16]="stepDirection==='vertical'">
             <div class="determine-wrap p-b-0">
 
-              <nz-descriptions class="m-t-20">
+              <nz-descriptions class="m-t-20 p-0" >
                 <nz-descriptions-item nzTitle="付款账户">ant-design@alipay.com</nz-descriptions-item>
                 <nz-descriptions-item nzTitle="收款账户">test@example.com</nz-descriptions-item>
                 <nz-descriptions-item nzTitle="收款人姓名">Alex</nz-descriptions-item>

diff --git 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<PageHeaderType> = {
     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/...components/layout-components/layout-head-right-menu/layout-head-right-menu.component.html b/...components/layout-components/layout-head-right-menu/layout-head-right-menu.component.html
@@ -1,11 +1,11 @@
 <ng-container *ngTemplateOutlet="headRight"></ng-container>
 <ng-template #headRight>
   <div class="bst-header-wrap">
-          <span (click)="showSearchModal()" *appScreenLessHidden="'375'" class="bst-header-icon" nz-tooltip nzTooltipTitle="搜索"
+          <span (click)="showSearchModal()" *appScreenLessHidden="'320'" class="bst-header-icon" nz-tooltip nzTooltipTitle="搜索"
                 nzTooltipPlacement="bottom">
               <i nz-icon nzType="search" nzTheme="outline"></i>
           </span>
-    <span *appScreenLessHidden="'320'" class="bst-header-icon" nz-tooltip nzTooltipTitle="OnChat的帮助文档"
+    <span *appScreenLessHidden="'375'" class="bst-header-icon" nz-tooltip nzTooltipTitle="OnChat的帮助文档"
           nzTooltipPlacement="bottom">
             <a href="https://docs.chat.hypergo.net/docs/intro/" target="_blank"><i nz-icon nzType="question-circle"
                                                                                     nzTheme="outline"></i></a>

diff --git 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 {