fix style

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",

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();
+      }
+    }
+    
   }
 }

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<Event> {
+    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<Event> {
+    //const theme = this.currentTheme;
+    const theme = 'assets/style.compact';
+    if (firstLoad) {
+      document.documentElement.classList.add(theme);
+    }
+    return new Promise<Event>((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<Event> {
+    this.currentTheme = this.reverseTheme(this.currentTheme);
+    return this.loadTheme(false);
+  }
+}

src/index.html

@@ -15,13 +15,13 @@
   <meta charset="utf-8" />
   <title>运多星运营平台</title>
   <base href="/" />
-  <meta name="viewport" content="width=device-width, initial-scale=1" />
+  <!-- <meta name="viewport" content="width=device-width, initial-scale=0.3" /> -->
   <meta http-equiv="x-ua-compatible" content="ie=edge" />
   <link rel="icon" type="image/x-icon" href="favicon.ico" />
   <link rel="stylesheet" href="https://at.alicdn.com/t/font_3153207_udngwyp35db.css" />
   <!-- Apple Touch Icon -->
   <!-- <link rel="apple-touch-icon" href="custom-icon.png"> -->
-  <style type="text/css">
+  <style type="text/css" id="css">
     .preloader {
       position: fixed;
       top: 0;
@@ -66,18 +66,20 @@
   }
 
   var zoom = window.devicePixelRatio || window.screen.deviceXDPI / window.screen.logicalXDPI;
-  if (!!window.ActiveXObject || "ActiveXObject" in window) {
-    if (zoom != 1 && zoom != 2 && zoom != 3) {
-      alert('系统检测到您的设备对显示进行放大，可能导致页面显示不全,请调整后打开/或使用其他浏览器！')
-    }
-  } else {
-    if (document.body.clientWidth >= 1280) {
-      if (zoom != 1 && zoom != 2 && zoom != 3) {
-        var c = document.querySelector('body');
-        c.style.zoom = -0.62 * zoom + 1.65;
-      }
-    }
-  }
+
+  // if (!!window.ActiveXObject || "ActiveXObject" in window) {
+  //   if (zoom != 1 && zoom != 2 && zoom != 3) {
+  //     alert('系统检测到您的设备对显示进行放大，可能导致页面显示不全,请调整后打开/或使用其他浏览器！')
+  //   }
+  // } else {
+  //   if (document.body.clientWidth >= 1280) {
+  //     if (zoom != 1 && zoom != 2 && zoom != 3) {
+  //       var c = document.querySelector('body');
+  //       // c.style.zoom = -0.62 * zoom + 1.65;
+
+  //     }
+  //   }
+  // }
 </script>
 <!-- <script type="text/javascript" src='//webapi.amap.com/maps?v=2.0&key=63f9573ca55fef2b92d4ffe0c85dea8f'></script>
 <script src="//webapi.amap.com/ui/1.1/main.js?v=1.1.1"></script> -->

src/styles/compact.less

@@ -0,0 +1,25 @@
+.alain-pro__sider-logo h1{
+    font-size: 15px;
+}
+.page-header__title{
+    font-size: 14px;
+    display: none;
+}
+.alain-pro__body{
+    margin: 0  !important;
+}
+.alain-pro__page-header-content{
+    margin: 8px 8px 0px !important;
+}
+.ant-card-body{
+    padding: 6px !important;
+}
+.ant-card {
+    margin-bottom: 8px !important;
+}
+.ant-table tfoot>tr>td, .ant-table tfoot>tr>th, .ant-table-tbody>tr>td, .ant-table-thead>tr>th{
+    padding: 6px 4px !important;
+}
+.alain-pro__page-header-wrapper{
+    margin: 0 !important
+}

src/styles/default.less

@@ -0,0 +1,2 @@
+@import '../app/layout/pro/styles/theme-default.less';
+@import './fix/theme-default.less';

src/styles/fix/theme-compact.less

@@ -1 +1,2 @@
 @import './theme-default.less';
+

src/styles/index.less

@@ -1,3 +1,9 @@
 /* You can add global styles to this file, and also import other style files */
 
 @import './fix/index';
+.error-color {
+    color: #ff4d4f;
+}
+
+@primary-color: #F5222D;
+@font-size-base: 15px;