feats

src/components/ScreenBox/ScreenHeader/index.jsx

+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

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

src/components/ScreenBox/SquareBox/style.less

 .SquareBox-box {
   position: relative;
-  display: inline-block;
 }
 .SquareBox-body {
   padding: 20px;

src/pages/MonitoringScreen/index.jsx

 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();
         </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>