add layout
@ -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;
|
||||
}
|
||||
|
5
src/components/yx-dark/Bottom.jsx
Normal file
@ -0,0 +1,5 @@
|
||||
import './styles/bottom.module.css';
|
||||
|
||||
export default (props) => {
|
||||
return <div className={`bottom ${props.className}`}>bottom</div>;
|
||||
};
|
@ -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) => {
|
||||
|
5
src/components/yx-dark/LeftContent.jsx
Normal file
@ -0,0 +1,5 @@
|
||||
import './styles/left.module.css';
|
||||
|
||||
export default (props) => {
|
||||
return <div className={`left-content ${props.className}`}></div>;
|
||||
};
|
19
src/components/yx-dark/MainContainer.jsx
Normal 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>
|
||||
);
|
||||
};
|
5
src/components/yx-dark/RightContent.jsx
Normal file
@ -0,0 +1,5 @@
|
||||
import './styles/right.module.css';
|
||||
|
||||
export default (props) => {
|
||||
return <div className={`right-content ${props.className}`}> </div>;
|
||||
};
|
Before Width: | Height: | Size: 1.2 MiB After Width: | Height: | Size: 1.2 MiB |
Before Width: | Height: | Size: 32 KiB After Width: | Height: | Size: 32 KiB |
Before Width: | Height: | Size: 6.3 KiB After Width: | Height: | Size: 6.3 KiB |
Before Width: | Height: | Size: 309 KiB After Width: | Height: | Size: 309 KiB |
Before Width: | Height: | Size: 8.2 KiB After Width: | Height: | Size: 8.2 KiB |
3
src/components/yx-dark/styles/bottom.module.css
Normal file
@ -0,0 +1,3 @@
|
||||
.bottom {
|
||||
background: #f0f3;
|
||||
}
|
@ -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 {
|
7
src/components/yx-dark/styles/left.module.css
Normal file
@ -0,0 +1,7 @@
|
||||
.left-content {
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 20px;
|
||||
background: #fcc3;
|
||||
}
|
47
src/components/yx-dark/styles/main.module.css
Normal 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;
|
||||
}
|
3
src/components/yx-dark/styles/right.module.css
Normal file
@ -0,0 +1,3 @@
|
||||
.right {
|
||||
background: #03f3;
|
||||
}
|
@ -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>
|
||||
|
@ -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;
|
||||
|