add layout

src/components/LeftBar/index.module.less

@@ -1,9 +1,8 @@
 .leftBar {
 	width: 625px;
-	height: 966px;
+	height: 100%;
 	margin-left: 40px;
-
 	display: flex;
 	flex-direction: column;
-	justify-content: space-between;
+	gap: 22px;
 }

src/components/yx-dark/Bottom.jsx

@@ -0,0 +1,5 @@
+import './styles/bottom.module.css';
+
+export default (props) => {
+	return <div className={`bottom ${props.className}`}>bottom</div>;
+};

src/components/yx-dark/Header.jsx

@@ -1,5 +1,5 @@
 import React, { useEffect, useState, useRef } from 'react';
-import './header.module.css';
+import './styles/header.module.css';
 import moment from 'moment';
 
 export default (props) => {

src/components/yx-dark/LeftContent.jsx

@@ -0,0 +1,5 @@
+import './styles/left.module.css';
+
+export default (props) => {
+	return <div className={`left-content ${props.className}`}></div>;
+};

src/components/yx-dark/MainContainer.jsx

@@ -0,0 +1,19 @@
+import Bottom from './Bottom';
+import LeftContent from './LeftContent';
+import RightContent from './RightContent';
+import './styles/main.module.css';
+
+export default (props) => {
+	return (
+		<div className="main-container">
+			<LeftContent className="left"></LeftContent>
+			<div className="main-center"></div>
+			<Bottom title="产线缺陷统计" className="bottom-1"></Bottom>
+			<Bottom title="产线当日缺陷分类" className="bottom-2"></Bottom>
+			<Bottom title="天然气流量" className="bottom-3"></Bottom>
+			<Bottom title="助燃风流量" className="bottom-4"></Bottom>
+			<Bottom title="当前产线生产风格" className="bottom-5"></Bottom>
+			<RightContent className="right"></RightContent>
+		</div>
+	);
+};

src/components/yx-dark/RightContent.jsx

@@ -0,0 +1,5 @@
+import './styles/right.module.css';
+
+export default (props) => {
+	return <div className={`right-content ${props.className}`}> </div>;
+};

src/components/yx-dark/styles/bottom.module.css

@@ -0,0 +1,3 @@
+.bottom {
+    background: #f0f3;
+}

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

@@ -1,9 +1,9 @@
 header {
 	height: 121px;
 	width: 100%;
-	position: relative;
+	position: absolute;
 	z-index: 10000;
-	background: url(../../assets/yx-dark/header.png) 100% 100% / contain no-repeat;
+	background: url(../images/header.png) 100% 100% / contain no-repeat;
 	display: grid;
 	place-content: center;
 }
@@ -16,7 +16,7 @@ header > div .header--logo {
 	margin-top: 12px;
 	width: 48px;
 	height: 67px;
-	background: url(../../assets/yx-dark/logo.png) center/contain no-repeat;
+	background: url(../images/logo.png) center/contain no-repeat;
 }
 
 header h1 {

src/components/yx-dark/styles/left.module.css

@@ -0,0 +1,7 @@
+.left-content {
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+    gap: 20px;
+    background: #fcc3;
+}

src/components/yx-dark/styles/main.module.css

@@ -0,0 +1,47 @@
+.main-container {
+	height: 1px;
+	flex: 1;
+	background: #ccc4;
+	display: grid;
+	grid-template-columns: 626px 576px 580px 626px 626px 450px 626px;
+	grid-template-rows: 600px 306px;
+	gap: 20px;
+	grid-template-areas:
+		'left    main    main    main    main    main    right' 
+		'left    bottom1 bottom2 bottom3 bottom4 bottom5 right';
+	place-content: end center;
+	margin-bottom: 20px;
+}
+
+.main-center {
+	grid-area: main;
+	background: #0f93;
+}
+
+.left {
+	grid-area: left;
+}
+
+.bottom-1 {
+	grid-area: bottom1;
+}
+
+.bottom-2 {
+	grid-area: bottom2;
+}
+
+.bottom-3 {
+	grid-area: bottom3;
+}
+
+.bottom-4 {
+	grid-area: bottom4;
+}
+
+.bottom-5 {
+	grid-area: bottom5;
+}
+
+.right {
+	grid-area: right;
+}

src/components/yx-dark/styles/right.module.css

@@ -0,0 +1,3 @@
+.right {
+    background: #03f3;
+}