feats

src/components/ScreenBox/ScreenHeader/index.jsx

@@ -0,0 +1,11 @@
+import Styles from './style.less';
+
+export default () => {
+  return (
+    <div className={Styles['screen-header-box']}>
+      <div className={Styles['screen-header-left']}></div>
+      <div className={Styles['screen-header-content']}></div>
+      <div className={Styles['screen-header-right']}></div>
+    </div>
+  );
+};

src/components/ScreenBox/ScreenHeader/style.less

@@ -0,0 +1,12 @@
+.screen-header-box {
+  display: flex;
+
+  .screen-header-left,
+  .screen-header-right {
+    flex: 1;
+  }
+
+  .screen-header-content {
+    flex: 6;
+  }
+}

src/components/ScreenBox/SquareBox/style.less

@@ -1,6 +1,5 @@
 .SquareBox-box {
   position: relative;
-  display: inline-block;
 }
 .SquareBox-body {
   padding: 20px;

src/pages/MonitoringScreen/index.jsx

@@ -9,6 +9,7 @@ import { useFullScreen } from './hook';
 import DateCommponets from './DateCommponets';
 import Styles from './style.less';
 import SquareBox from '@/components/ScreenBox/SquareBox';
+import ScreenHeader from '@/components/ScreenBox/ScreenHeader';
 
 export default (props) => {
   const { style, isFullScreen, onFullScreen } = useFullScreen();
@@ -21,23 +22,24 @@ export default (props) => {
         </Button>
       }
     >
-
-
       <div
         className={classNames(Styles['screen-page'], { [Styles['full-screen']]: isFullScreen })}
         style={style}
       >
         <div className={Styles['grail-layout']}>
           <div className={Styles['grail-header']}>
-            <SquareBox>asdfasdf</SquareBox>
+            <ScreenHeader weather="多云 21-28 °C" />
           </div>
           <div className={Styles['grail-container']}>
-            <div className={Styles['grail-left']}></div>
+            <div className={Styles['grail-left']}>
+              <SquareBox>asdfasdf</SquareBox>
+            </div>
             <div className={Styles['grail-content']}>
-
               <DateCommponets />
             </div>
-            <div className={Styles['grail-right']}></div>
+            <div className={Styles['grail-right']}>
+              <SquareBox>asdfasdf</SquareBox>
+            </div>
           </div>
           <div className={Styles['grail-footer']}></div>
         </div>