适配

src/layouts/CommandPlatformLayout.js

@@ -129,7 +129,32 @@ class CommandPlatformLayout extends React.PureComponent {
     }); */
     return `${currRouterData.name}`;
   };
+  setRemPc = () => {
+    var docEl = document.documentElement,
+    resizeEvt = "orientationchange" in window ? "orientationchange" : "resize",
+    recalc = function () {
+      var clientWidth = docEl.clientWidth;
+      if (!clientWidth) return;
+      if (location.href.indexOf("express") > -1) {
+        docEl.style.fontSize = "";
+      } else if (clientWidth >= 7680) {
+        docEl.style.fontSize = "100px"; //1rem  = 100px
+      } else {
+        docEl.style.fontSize = 100 * (clientWidth / 1920) + "px";
+      }
+    };
+    if (!document.addEventListener) return;
+    window.addEventListener(resizeEvt, recalc, false);
+    document.addEventListener("DOMContentLoaded", recalc, false);
+    // var whdef = 100 / 7680;
+    // var bodyWidth = document.body.clientWidth;
+    // var rem = bodyWidth * whdef;
+    // document.getElementsByTagName('html')[0].style.fontSize = rem + 'px';
+  }
 
+  componentDidMount(){
+    this.setRemPc()
+  }
   render() {
     const {
       children,
@@ -141,7 +166,7 @@ class CommandPlatformLayout extends React.PureComponent {
         <ContainerQuery query={query} className={styles.main}>
           {params => (
             <Context.Provider value={{ ...this.getContext(), ...params }}>
-              <div className={classNames({ ...params, defaulthiew: true })} style={{ overflowX: scroll}}>{children}</div>
+              <div className={classNames({ ...params, defaulthiew: true })} style={{ overflowX: scroll }}>{children}</div>
             </Context.Provider>
           )}
         </ContainerQuery>

src/layouts/CommandPlatformLayout.less

@@ -1,6 +1,8 @@
 html, body{
-    width: 7680px;
-    height: 2160px;
+    min-height: 1280px;
+    min-width: 1920px;
+    // width: 100%;
+    // height: 100%;
 }
 .defaulthiew{
     height: auto;

src/pages/CommandPlatform/One.js

@@ -23,7 +23,7 @@ class One extends React.PureComponent {
     render() {
         return (
             <div className={styles.container}>
-                <div className={styles.left}>
+                {/* <div className={styles.left}>
                     <div style={{ width: 540 }}>
                         <Congestion />
                         <Rank />
@@ -46,7 +46,7 @@ class One extends React.PureComponent {
                        <Baseline />
                        <Opinion/>
                     </div>
-                </div>
+                </div> */}
             </div>
         );
     }

src/pages/CommandPlatform/One.less

@@ -1,14 +1,18 @@
 // @import '../themes/default.less';
 .container {
+  width: 100%;
+  height: 100%;
   display: flex;
   justify-content: space-between;
-  padding: 0 24px;
+  padding: 0 0.3rem;
   background: url(../../assets/CommandPlatform/background.png);
   background-size: 100% 100%;
   background-repeat: no-repeat;
+
   .left {
-    width: 1270px;
-    padding: 0 76px 0 30px;
+    width: 21.36rem;
+    height: 20.64rem;
+    padding: 0 0.76rem 0 1.5rem;
     display: flex;
     justify-content: space-between;
 
@@ -23,8 +27,9 @@
   }
 
   .right {
-    width: 1270px;
-    padding: 0 88px 0 28px;
+    width: 21.31rem;
+    height: 20.55rem;
+    padding: 0 1.6rem 0 0.6rem;
     display: flex;
     justify-content: space-between;