feats

src/pages/MonitoringScreen/index.jsx

@@ -23,7 +23,15 @@ export default (props) => {
         className={classNames(Styles['screen-page'], { [Styles['full-screen']]: isFullScreen })}
         style={style}
       >
-        <div className={Styles.demo}>邓州</div>
+        <div className={Styles['grail-layout']}>
+          <div className={Styles['grail-header']}></div>
+          <div className={Styles['grail-container']}>
+            <div className={Styles['grail-left']}></div>
+            <div className={Styles['grail-content']}></div>
+            <div className={Styles['grail-right']}></div>
+          </div>
+          <div className={Styles['grail-footer']}></div>
+        </div>
       </div>
     </PageHeaderWrapper>
   );

src/pages/MonitoringScreen/style.less

@@ -4,6 +4,9 @@
   height: 100%;
 
   background-color: #021222;
+  background-image: url('~@/assets/images/screen/bg.png');
+  background-repeat: no-repeat;
+  background-size: 100% 100%;
 
   &.full-screen {
     position: fixed;
@@ -11,6 +14,29 @@
     left: 0;
     z-index: 1000;
   }
+
+  .grail-layout {
+    height: 100%;
+
+    .grail-header,
+    .grail-footer {
+      //
+    }
+
+    .grail-container {
+      display: flex;
+      height: 100%;
+
+      .grail-left,
+      .grail-right {
+        flex: 1;
+      }
+
+      .grail-content {
+        flex: 2;
+      }
+    }
+  }
 }
 
 .demo {