From 9b22d9769661194d0ef459680568d63f038eff31 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E6=BD=98=E6=99=93=E4=BA=91?= Date: Fri, 4 Mar 2022 17:43:35 +0800 Subject: [PATCH 1/7] - --- .../assigned-car-bulk/assigned-car-bulk.component.ts | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/src/app/routes/supply-management/components/assigned-car-bulk/assigned-car-bulk.component.ts b/src/app/routes/supply-management/components/assigned-car-bulk/assigned-car-bulk.component.ts index 19d3e353..9dcc07d7 100644 --- a/src/app/routes/supply-management/components/assigned-car-bulk/assigned-car-bulk.component.ts +++ b/src/app/routes/supply-management/components/assigned-car-bulk/assigned-car-bulk.component.ts @@ -144,30 +144,30 @@ export class SupplyManagementBulkAssignedCarComponent implements OnInit { title: '司机姓名', index: 'name', className: 'text-center', - width: '80px' + width: '20%' }, { title: '手机号', index: 'telephone', className: 'text-center', - width: '100px' + width: '15%' }, { title: '车队长', render: 'captain', className: 'text-center', - width: '200px' + width: '30%' }, { title: '指定车辆', render: 'carNo', className: 'text-center', - width: '100px' + width: '15%' }, { title: '操作', className: 'text-center', - width: '80px', + width: '20%', buttons: [ { text: '移除', From c402fedde39f0a434786861bf63af7ed8d74f1b0 Mon Sep 17 00:00:00 2001 From: Lingzi Date: Fri, 4 Mar 2022 18:04:03 +0800 Subject: [PATCH 2/7] fix style --- angular.json | 13 +++++- src/app/app.component.ts | 13 +++++- src/app/theme.service.ts | 73 +++++++++++++++++++++++++++++++ src/index.html | 30 +++++++------ src/styles/compact.less | 25 +++++++++++ src/styles/default.less | 2 + src/styles/fix/theme-compact.less | 1 + src/styles/index.less | 8 +++- 8 files changed, 148 insertions(+), 17 deletions(-) create mode 100644 src/app/theme.service.ts create mode 100644 src/styles/compact.less create mode 100644 src/styles/default.less diff --git a/angular.json b/angular.json index 9b9432c4..a59093a6 100644 --- a/angular.json +++ b/angular.json @@ -35,8 +35,19 @@ "styles": [ "node_modules/perfect-scrollbar/css/perfect-scrollbar.css", "node_modules/quill/dist/quill.snow.css", - "src/styles.less" + "src/styles.less", + { + "input": "src/styles/default.less", + "bundleName": "default", + "inject": false + }, + { + "input": "src/styles/compact.less", + "bundleName": "compact", + "inject": false + } ], + "scripts": [ "node_modules/quill/dist/quill.min.js", "node_modules/perfect-scrollbar/dist/perfect-scrollbar.js", diff --git a/src/app/app.component.ts b/src/app/app.component.ts index 9ed3961e..7b66e545 100644 --- a/src/app/app.component.ts +++ b/src/app/app.component.ts @@ -5,6 +5,7 @@ import { environment } from '@env/environment'; import { NzIconService } from 'ng-zorro-antd/icon'; import { NzModalService } from 'ng-zorro-antd/modal'; import { VERSION as VERSION_ZORRO } from 'ng-zorro-antd/version'; +import { ThemeService } from './theme.service'; @Component({ selector: 'app-root', @@ -17,7 +18,8 @@ export class AppComponent implements OnInit { private router: Router, private titleSrv: TitleService, private modalSrv: NzModalService, - private iconService: NzIconService + private iconService: NzIconService, + private themeService: ThemeService ) { renderer.setAttribute(el.nativeElement, 'ng-alain-version', VERSION_ALAIN.full); renderer.setAttribute(el.nativeElement, 'ng-zorro-version', VERSION_ZORRO.full); @@ -47,5 +49,14 @@ export class AppComponent implements OnInit { this.modalSrv.closeAll(); } }); + const screen: any = window.screen + var zoom = window.devicePixelRatio || screen.deviceXDPI / screen?.logicalXDPI; + console.log(zoom) + if (document.body.clientWidth >= 1280) { + if (zoom != 1 && zoom != 2 && zoom != 3) { + this.themeService.toggleTheme().then(); + } + } + } } diff --git a/src/app/theme.service.ts b/src/app/theme.service.ts new file mode 100644 index 00000000..fd40476a --- /dev/null +++ b/src/app/theme.service.ts @@ -0,0 +1,73 @@ +import { Injectable } from '@angular/core'; + +enum ThemeType { + compact = 'compact', + default = 'default', +} + +@Injectable({ + providedIn: 'root', +}) +export class ThemeService { + currentTheme = ThemeType.default; + + constructor() {} + + private reverseTheme(theme: string): ThemeType { + return theme === ThemeType.compact ? ThemeType.default : ThemeType.compact; + } + + private removeUnusedTheme(theme: ThemeType): void { + document.documentElement.classList.remove(theme); + const removedThemeStyle = document.getElementById(theme); + if (removedThemeStyle) { + document.head.removeChild(removedThemeStyle); + } + } + + private loadCss(href: string, id: string): Promise { + return new Promise((resolve, reject) => { + const style01 = document.createElement('link'); + style01.rel = 'stylesheet'; + style01.href = 'compact.css'; + style01.onload = resolve; + style01.onerror = reject; + document.body.after(style01); + + const style = document.createElement('link'); + style.rel = 'stylesheet'; + style.href = href; + style.onload = resolve; + style.onerror = reject; + document.body.after(style); + + + }); + + } + + public loadTheme(firstLoad = true): Promise { + //const theme = this.currentTheme; + const theme = 'assets/style.compact'; + if (firstLoad) { + document.documentElement.classList.add(theme); + } + return new Promise((resolve, reject) => { + this.loadCss(`${theme}.css`, theme).then( + (e) => { + if (!firstLoad) { + document.documentElement.classList.add(theme); + } + this.removeUnusedTheme(this.reverseTheme(theme)); + resolve(e); + }, + (e) => reject(e) + ); + }); + } + + public toggleTheme(): Promise { + this.currentTheme = this.reverseTheme(this.currentTheme); + return this.loadTheme(false); + } +} diff --git a/src/index.html b/src/index.html index ca137d18..3afb9aef 100644 --- a/src/index.html +++ b/src/index.html @@ -15,13 +15,13 @@ 运多星运营平台 - + -