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;
+}

src/pages/index.jsx

@@ -2,12 +2,13 @@ import { useEffect, useState } from 'react';
 import './global.less';
 import './index.less';
 import Header from '../components/yx-dark/Header';
-import LeftBar from '../components/LeftBar';
+// import LeftBar from '../components/LeftBar';
-import BottomBar from '../components/BottomBar';
+// import BottomBar from '../components/BottomBar';
-import RightBar from '../components/RightBar';
+// import RightBar from '../components/RightBar';
-import CenterTopData from '../components/CenterTopData';
+// import CenterTopData from '../components/CenterTopData';
 import Slider from '../components/Slider';
 import { SocketContextProvider } from '../store/socket-data-provider';
+import MainContainer from '../components/yx-dark/MainContainer';
 
 export default function index() {
 	const [value, setValue] = useState(50);
@@ -45,8 +46,9 @@ export default function index() {
 		<SocketContextProvider>
 			<div id="FullScreen" style={styles}>
 				<Header />
-				<div className="Main">
+				<MainContainer />
-					{/* <LeftBar />
+				{/* <div className="Main">
+					<LeftBar />
 					<div className="Center">
 						<div className="CenterData">
 							<CenterTopData />
@@ -56,8 +58,8 @@ export default function index() {
 							<BottomBar />
 						</div>
 					</div>
-					<RightBar /> */}
+					<RightBar />
-				</div>
+				</div> */}
 			</div>
 			<Slider handleSlide={setValue} />
 		</SocketContextProvider>

src/pages/index.less

@@ -1,11 +1,13 @@
 #FullScreen {
 	width: 4320px;
 	height: 1080px;
-	background: url(../assets/yx-dark/bg.png) 100% / cover no-repeat;
+	background: url(../components/yx-dark/images/bg.png) 100% / cover no-repeat;
 	display: flex;
 	flex-direction: column;
+	position: relative;
 
 	.Main {
+		margin-top: 100px;
 		// background: #a935355f;
 		width: 4320px;
 		height: 1px;
@@ -15,9 +17,9 @@
 		flex-direction: row;
 
 		.Center {
-			margin: 22px;
+			height: 100%;
-			width: 2472px;
+			width: 1px;
-			height: 940px;
+			flex: 1;
 
 			.CenterData {
 				position: absolute;