feats

src/components/ScreenBox/ScreenHeader/Attchment.jsx

@@ -1,21 +0,0 @@
-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,17 +1,19 @@
-import Attchment from './Attchment';
+import titleImg from '@/assets/images/screen/header-title.png';
 import Styles from './style.less';
 
-export default () => {
+export default (props) => {
   return (
     <div className={Styles['screen-header-box']}>
       <div className={Styles['screen-header-left']}>
-        <Attchment direct="left" title="数据概览" />
+        <div>数据概览</div>
       </div>
       <div className={Styles['screen-header-left']}>{/* 只负责占位 */}</div>
-      <div className={Styles['screen-header-content']}></div>
+      <div className={Styles['screen-header-content']}>
+        <img src={titleImg} alt="" />
+      </div>
       <div className={Styles['screen-header-right']}>{/* 只负责占位 */}</div>
       <div className={Styles['screen-header-right']}>
-        <Attchment direct="right" title="多云21-28°C" />
+        <div>{props.weather}</div>
       </div>
     </div>
   );

src/components/ScreenBox/ScreenHeader/style.less

@@ -1,15 +1,43 @@
 .screen-header-box {
   display: flex;
-  align-items: center;
-  justify-content: center;
+  align-items: stretch;
+  height: 5%;
+  min-height: 60px;
+
+  padding-right: 1.5em;
+  padding-left: 1.5em;
+  color: #fff;
+  font-size: 12px;
+  background-image: url('~@/assets/images/screen/header-bg.png');
+  background-repeat: no-repeat;
+  background-size: 100% 100%;
 
   .screen-header-left,
   .screen-header-right {
+    display: grid;
     flex: 1;
+    letter-spacing: 2px;
+    text-align: left;
+    place-items: center;
+
+    & > div {
+      width: 100%;
+    }
+  }
+
+  .screen-header-right {
+    text-align: right;
   }
 
   .screen-header-content {
+    display: flex;
     flex: 6;
+    align-items: center;
+    justify-content: center;
+
+    & > img {
+      height: 50%;
+    }
   }
 
   .attchment {
@@ -21,58 +49,4 @@
       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;
-    }
-  }
 }