From b619c8b90b4b20b2d45f0061231e5a55f3d9a192 Mon Sep 17 00:00:00 2001
From: lb <liubin_9396@163.com>
Date: Sun, 10 Sep 2023 16:02:37 +0800
Subject: [PATCH] add layout

---
 src/components/LeftBar/index.module.less      |   5 +-
 src/components/yx-dark/Bottom.jsx             |   5 ++
 src/components/yx-dark/Header.jsx             |   2 +-
 src/components/yx-dark/LeftContent.jsx        |   5 ++
 src/components/yx-dark/MainContainer.jsx      |  19 +++++++
 src/components/yx-dark/RightContent.jsx       |   5 ++
 .../yx-dark/images}/bg.png                    | Bin
 .../yx-dark/images}/company.png               | Bin
 .../yx-dark/images}/date.png                  | Bin
 .../yx-dark/images}/header.png                | Bin
 .../yx-dark/images}/logo.png                  | Bin
 .../yx-dark/styles/bottom.module.css          |   3 ++
 .../yx-dark/{ => styles}/header.module.css    |   6 +--
 src/components/yx-dark/styles/left.module.css |   7 +++
 src/components/yx-dark/styles/main.module.css |  47 ++++++++++++++++++
 .../yx-dark/styles/right.module.css           |   3 ++
 src/pages/index.jsx                           |  18 ++++---
 src/pages/index.less                          |  10 ++--
 18 files changed, 116 insertions(+), 19 deletions(-)
 create mode 100644 src/components/yx-dark/Bottom.jsx
 create mode 100644 src/components/yx-dark/LeftContent.jsx
 create mode 100644 src/components/yx-dark/MainContainer.jsx
 create mode 100644 src/components/yx-dark/RightContent.jsx
 rename src/{assets/yx-dark => components/yx-dark/images}/bg.png (100%)
 rename src/{assets/yx-dark => components/yx-dark/images}/company.png (100%)
 rename src/{assets/yx-dark => components/yx-dark/images}/date.png (100%)
 rename src/{assets/yx-dark => components/yx-dark/images}/header.png (100%)
 rename src/{assets/yx-dark => components/yx-dark/images}/logo.png (100%)
 create mode 100644 src/components/yx-dark/styles/bottom.module.css
 rename src/components/yx-dark/{ => styles}/header.module.css (80%)
 create mode 100644 src/components/yx-dark/styles/left.module.css
 create mode 100644 src/components/yx-dark/styles/main.module.css
 create mode 100644 src/components/yx-dark/styles/right.module.css

diff --git a/src/components/LeftBar/index.module.less b/src/components/LeftBar/index.module.less
index b00435f..8c7f29b 100644
--- a/src/components/LeftBar/index.module.less
+++ b/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;
 }
diff --git a/src/components/yx-dark/Bottom.jsx b/src/components/yx-dark/Bottom.jsx
new file mode 100644
index 0000000..f622b72
--- /dev/null
+++ b/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>;
+};
diff --git a/src/components/yx-dark/Header.jsx b/src/components/yx-dark/Header.jsx
index 4228652..9075e01 100644
--- a/src/components/yx-dark/Header.jsx
+++ b/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) => {
diff --git a/src/components/yx-dark/LeftContent.jsx b/src/components/yx-dark/LeftContent.jsx
new file mode 100644
index 0000000..554db57
--- /dev/null
+++ b/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>;
+};
diff --git a/src/components/yx-dark/MainContainer.jsx b/src/components/yx-dark/MainContainer.jsx
new file mode 100644
index 0000000..aae92f5
--- /dev/null
+++ b/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>
+	);
+};
diff --git a/src/components/yx-dark/RightContent.jsx b/src/components/yx-dark/RightContent.jsx
new file mode 100644
index 0000000..ba59082
--- /dev/null
+++ b/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>;
+};
diff --git a/src/assets/yx-dark/bg.png b/src/components/yx-dark/images/bg.png
similarity index 100%
rename from src/assets/yx-dark/bg.png
rename to src/components/yx-dark/images/bg.png
diff --git a/src/assets/yx-dark/company.png b/src/components/yx-dark/images/company.png
similarity index 100%
rename from src/assets/yx-dark/company.png
rename to src/components/yx-dark/images/company.png
diff --git a/src/assets/yx-dark/date.png b/src/components/yx-dark/images/date.png
similarity index 100%
rename from src/assets/yx-dark/date.png
rename to src/components/yx-dark/images/date.png
diff --git a/src/assets/yx-dark/header.png b/src/components/yx-dark/images/header.png
similarity index 100%
rename from src/assets/yx-dark/header.png
rename to src/components/yx-dark/images/header.png
diff --git a/src/assets/yx-dark/logo.png b/src/components/yx-dark/images/logo.png
similarity index 100%
rename from src/assets/yx-dark/logo.png
rename to src/components/yx-dark/images/logo.png
diff --git a/src/components/yx-dark/styles/bottom.module.css b/src/components/yx-dark/styles/bottom.module.css
new file mode 100644
index 0000000..9810bc6
--- /dev/null
+++ b/src/components/yx-dark/styles/bottom.module.css
@@ -0,0 +1,3 @@
+.bottom {
+    background: #f0f3;
+}
\ No newline at end of file
diff --git a/src/components/yx-dark/header.module.css b/src/components/yx-dark/styles/header.module.css
similarity index 80%
rename from src/components/yx-dark/header.module.css
rename to src/components/yx-dark/styles/header.module.css
index d088d95..95008a3 100644
--- a/src/components/yx-dark/header.module.css
+++ b/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 {
diff --git a/src/components/yx-dark/styles/left.module.css b/src/components/yx-dark/styles/left.module.css
new file mode 100644
index 0000000..0c314c9
--- /dev/null
+++ b/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;
+}
\ No newline at end of file
diff --git a/src/components/yx-dark/styles/main.module.css b/src/components/yx-dark/styles/main.module.css
new file mode 100644
index 0000000..0cdc2c6
--- /dev/null
+++ b/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;
+}
diff --git a/src/components/yx-dark/styles/right.module.css b/src/components/yx-dark/styles/right.module.css
new file mode 100644
index 0000000..ba4b4a3
--- /dev/null
+++ b/src/components/yx-dark/styles/right.module.css
@@ -0,0 +1,3 @@
+.right {
+    background: #03f3;
+}
\ No newline at end of file
diff --git a/src/pages/index.jsx b/src/pages/index.jsx
index 8c51113..a6ef0ef 100644
--- a/src/pages/index.jsx
+++ b/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 BottomBar from '../components/BottomBar';
-import RightBar from '../components/RightBar';
-import CenterTopData from '../components/CenterTopData';
+// import LeftBar from '../components/LeftBar';
+// import BottomBar from '../components/BottomBar';
+// import RightBar from '../components/RightBar';
+// 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">
-					{/* <LeftBar />
+				<MainContainer />
+				{/* <div className="Main">
+					<LeftBar />
 					<div className="Center">
 						<div className="CenterData">
 							<CenterTopData />
@@ -56,8 +58,8 @@ export default function index() {
 							<BottomBar />
 						</div>
 					</div>
-					<RightBar /> */}
-				</div>
+					<RightBar />
+				</div> */}
 			</div>
 			<Slider handleSlide={setValue} />
 		</SocketContextProvider>
diff --git a/src/pages/index.less b/src/pages/index.less
index 22c4db8..7e036c7 100644
--- a/src/pages/index.less
+++ b/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;
-			width: 2472px;
-			height: 940px;
+			height: 100%;
+			width: 1px;
+			flex: 1;
 
 			.CenterData {
 				position: absolute;