feats

src/components/ScreenBox/ScreenHeader/Attchment.jsx

@@ -0,0 +1,21 @@
+import React, { useMemo } from 'react';
+import classNames from 'classnames';
+import Styles from './style.less';
+
+export default (props) => {
+  const classList = useMemo(() => {
+    return classNames(
+      Styles.attchment,
+      Styles['bt-border'],
+      Styles['bt-pointer'],
+      Styles['bt-slash'],
+      {
+        [Styles['rht-pointer']]: props.direct === 'left',
+        [Styles['attchment-right']]: props.direct === 'right',
+        [Styles['rht-slash']]: props.direct === 'right',
+      },
+    );
+  }, [props.direct]);
+
+  return <div className={classList}>{props.title}</div>;
+};

src/components/ScreenBox/ScreenHeader/index.jsx

@@ -1,11 +1,18 @@
+import Attchment from './Attchment';
 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-left']}>
+        <Attchment direct="left" title="数据概览" />
+      </div>
+      <div className={Styles['screen-header-left']}>{/* 只负责占位 */}</div>
       <div className={Styles['screen-header-content']}></div>
-      <div className={Styles['screen-header-right']}></div>
+      <div className={Styles['screen-header-right']}>{/* 只负责占位 */}</div>
+      <div className={Styles['screen-header-right']}>
+        <Attchment direct="right" title="多云21-28°C" />
+      </div>
     </div>
   );
 };

src/components/ScreenBox/ScreenHeader/style.less

@@ -1,5 +1,7 @@
 .screen-header-box {
   display: flex;
+  align-items: center;
+  justify-content: center;
 
   .screen-header-left,
   .screen-header-right {
@@ -9,4 +11,68 @@
   .screen-header-content {
     flex: 6;
   }
+
+  .attchment {
+    color: #fff;
+    font-size: 12px;
+    line-height: 2em;
+
+    &.attchment-right {
+      text-align: right;
+    }
+  }
+
+  .bt-border {
+    margin-bottom: 10px;
+    padding-right: 1em;
+    padding-left: 1em;
+    border-bottom: 2px solid #3d81f0;
+  }
+
+  .bt-slash {
+    position: relative;
+    &::before {
+      position: absolute;
+      bottom: -3px;
+      left: 0;
+      z-index: 10;
+      width: 10px;
+      height: 10px;
+      border-bottom: 2px solid #3d81f0;
+      transform: rotate(60deg);
+      transform-origin: top center;
+      content: ' ';
+    }
+  }
+
+  .rht-slash {
+    &::before {
+      right: 0;
+      left: auto;
+      transform: rotate(120deg);
+      transform-origin: right center;
+    }
+  }
+
+  .bt-pointer {
+    position: relative;
+    &::after {
+      position: absolute;
+      bottom: -3px;
+      left: 0;
+      z-index: 10;
+      width: 6px;
+      height: 4px;
+      background: #fffa00;
+      border-radius: 50%;
+      content: ' ';
+    }
+  }
+
+  .rht-pointer {
+    &::after {
+      right: 0;
+      left: auto;
+    }
+  }
 }

src/pages/MonitoringScreen/hook.js

@@ -20,6 +20,7 @@ export function useFullScreen() {
 
   const onFullScreen = useCallback((e) => {
     document.documentElement.requestFullscreen();
+    setIsFullScreen(true);
   }, []);
 
   useResize((w, h) => {
@@ -37,6 +38,11 @@ export function useFullScreen() {
 
   useEffect(() => {
     calcStyle();
+
+    //
+    window.addEventListener('onFullScreenChange', (e) => {
+      console.log('-------onFullScreenChange----->', e);
+    });
   }, []);
 
   return { style, isFullScreen, onFullScreen };

src/pages/MonitoringScreen/index.jsx

@@ -23,25 +23,27 @@ export default (props) => {
       }
     >
       <div
-        className={classNames(Styles['screen-page'], { [Styles['full-screen']]: isFullScreen })}
+        className={classNames(Styles['screen-page'], Styles['pd-lr-40'], {
+          [Styles['full-screen']]: isFullScreen,
+        })}
         style={style}
       >
         <div className={Styles['grail-layout']}>
           <div className={Styles['grail-header']}>
             <ScreenHeader weather="多云 21-28 °C" />
           </div>
-          <div className={Styles['grail-container']}>
+          <div className={classNames(Styles['grail-container'], Styles['mg-tp-40'])}>
             <div className={Styles['grail-left']}>
               <SquareBox>asdfasdf</SquareBox>
             </div>
-            <div className={Styles['grail-content']}>
+            <div className={classNames(Styles['grail-content'], Styles['pd-lr-40'])}>
               <DateCommponets />
             </div>
             <div className={Styles['grail-right']}>
               <SquareBox>asdfasdf</SquareBox>
             </div>
           </div>
-          <div className={Styles['grail-footer']}></div>
+          <div className={classNames(Styles['grail-footer'], Styles['mg-tp-40'])}></div>
         </div>
       </div>
     </PageHeaderWrapper>

src/pages/MonitoringScreen/style.less

@@ -39,10 +39,11 @@
   }
 }
 
-.demo {
-  font-size: 3em;
-  font-family: 'hyzlsJ';
-  background-image: linear-gradient(#3bd6e8, #0c49c6);
-  background-clip: text;
-  -webkit-text-fill-color: transparent;
+.pd-lr-40 {
+  padding-right: 40px;
+  padding-left: 40px;
+}
+
+.mg-tp-40 {
+  margin-top: 40px;
 }