add layout

This commit is contained in:
lb 2023-09-10 16:02:37 +08:00
parent 6c1435c7ff
commit b619c8b90b
18 changed files with 116 additions and 19 deletions

View File

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

View File

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

View File

@ -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) => {

View File

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

View File

@ -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>
);
};

View File

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

View File

Before

Width:  |  Height:  |  Size: 1.2 MiB

After

Width:  |  Height:  |  Size: 1.2 MiB

View File

Before

Width:  |  Height:  |  Size: 32 KiB

After

Width:  |  Height:  |  Size: 32 KiB

View File

Before

Width:  |  Height:  |  Size: 6.3 KiB

After

Width:  |  Height:  |  Size: 6.3 KiB

View File

Before

Width:  |  Height:  |  Size: 309 KiB

After

Width:  |  Height:  |  Size: 309 KiB

View File

Before

Width:  |  Height:  |  Size: 8.2 KiB

After

Width:  |  Height:  |  Size: 8.2 KiB

View File

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

View File

@ -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 {

View File

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

View File

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

View File

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

View File

@ -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>

View File

@ -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;