add header

src/components/yx-dark/Header.jsx

@@ -0,0 +1,26 @@
+import React, { useEffect, useState, useRef } from 'react';
+import './header.module.css';
+import moment from 'moment';
+
+export default (props) => {
+	let [today, setToday] = useState(new Date());
+	moment.locale('zh-cn');
+	setTimeout(() => {
+		setToday(new Date());
+	}, 1000);
+
+	return (
+		<header class="header">
+			<div>
+				<span class="header--logo"></span>
+				<h1>宜兴新能源生产线大数据指挥中心</h1>
+			</div>
+			<span class="header--wing absolute company">
+				设计单位：中建材智能自动化研究院
+			</span>
+			<span class="header--wing absolute datetime">
+				{moment(today).format('YYYY.M.D dddd HH:mm:ss')}
+			</span>
+		</header>
+	);
+};

src/components/yx-dark/header.module.css

@@ -0,0 +1,53 @@
+header {
+	height: 121px;
+	width: 100%;
+	position: relative;
+	z-index: 10000;
+	background: url(../../assets/yx-dark/header.png) 100% 100% / contain no-repeat;
+	display: grid;
+	place-content: center;
+}
+header > div {
+	display: flex;
+	align-items: center;
+	margin-bottom: 0;
+}
+header > div .header--logo {
+	margin-top: 12px;
+	width: 48px;
+	height: 67px;
+	background: url(../../assets/yx-dark/logo.png) center/contain no-repeat;
+}
+
+header h1 {
+	margin-bottom: 0;
+	margin-left: 36px;
+	font-size: 52px;
+	/* line-height: 97px; */
+	user-select: none;
+	letter-spacing: 9px;
+	font-weight: 400;
+	color: #6bf2ff;
+	font-family: '微软雅黑', sans-serif;
+}
+
+.header--wing {
+	left: 0;
+	bottom: -12px;
+	height: 48px;
+	font-size: 28px;
+	line-height: 48px;
+	color: #51f0ff;
+}
+
+.company {
+	margin-left: 960px;
+	letter-spacing: 1px;
+}
+
+.datetime {
+	text-align: center;
+	left: unset;
+	right: 1100px; 
+	letter-spacing: 1px;
+}