add bottom
This commit is contained in:
parent
d56573acbb
commit
e83594bbbc
@ -6,7 +6,7 @@ function BottomBarItem(props) {
|
|||||||
<Container
|
<Container
|
||||||
icon={props.icon}
|
icon={props.icon}
|
||||||
title={props.title}
|
title={props.title}
|
||||||
className={`${cls.bottomBarItem} ${props.className}`}
|
className={`${props.className}`}
|
||||||
>
|
>
|
||||||
{props.children}
|
{props.children}
|
||||||
</Container>
|
</Container>
|
||||||
|
@ -1,5 +1 @@
|
|||||||
.bottomBarItem {
|
|
||||||
background: url(../../../assets/bg-bottom-item.png) no-repeat;
|
|
||||||
background-size: 100% 100%;
|
|
||||||
width: 600px;
|
|
||||||
}
|
|
||||||
|
@ -4,13 +4,14 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
.faultTotal {
|
.faultTotal {
|
||||||
|
height: 100%;
|
||||||
position: relative;
|
position: relative;
|
||||||
}
|
}
|
||||||
|
|
||||||
.headWidget {
|
.headWidget {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
/* background: #00ee33; */
|
/* background: #00ee33; */
|
||||||
top: 20px;
|
top: 28px;
|
||||||
right: 24px;
|
right: 24px;
|
||||||
height: 32px;
|
height: 32px;
|
||||||
width: 190px;
|
width: 190px;
|
||||||
|
@ -38,11 +38,11 @@ function FaultType(props) {
|
|||||||
},
|
},
|
||||||
textStyle: {
|
textStyle: {
|
||||||
color: '#DFF1FE',
|
color: '#DFF1FE',
|
||||||
fontSize: 18,
|
fontSize: 16,
|
||||||
rich: {
|
rich: {
|
||||||
sub: {
|
sub: {
|
||||||
color: '#fff9',
|
color: '#fff9',
|
||||||
fontSize: 18,
|
fontSize: 16,
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
@ -109,7 +109,7 @@ function FaultType(props) {
|
|||||||
<Radio.Button
|
<Radio.Button
|
||||||
key={l.label}
|
key={l.label}
|
||||||
value={l.value}
|
value={l.value}
|
||||||
className="radio-group__item"
|
className={`radio-group__item ${cls['radio-group__item']}`}
|
||||||
>
|
>
|
||||||
{l.label}
|
{l.label}
|
||||||
</Radio.Button>
|
</Radio.Button>
|
||||||
|
@ -4,11 +4,12 @@
|
|||||||
|
|
||||||
.faultType {
|
.faultType {
|
||||||
position: relative;
|
position: relative;
|
||||||
|
height: 100%;
|
||||||
}
|
}
|
||||||
|
|
||||||
.headWidget {
|
.headWidget {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
top: 20px;
|
top: 28px;
|
||||||
right: 24px;
|
right: 24px;
|
||||||
height: 32px;
|
height: 32px;
|
||||||
width: 340px;
|
width: 340px;
|
||||||
@ -32,3 +33,7 @@
|
|||||||
color: #fff !important;
|
color: #fff !important;
|
||||||
background: #03233c !important;
|
background: #03233c !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.radio-group__item {
|
||||||
|
padding: 0 8px;
|
||||||
|
}
|
@ -1,5 +1,5 @@
|
|||||||
import './styles/bottom.module.css';
|
import './styles/bottom.module.css';
|
||||||
|
|
||||||
export default (props) => {
|
export default (props) => {
|
||||||
return <div className={`bottom ${props.className}`}>bottom</div>;
|
return <div className={`bottom ${props.className}`}>{props.children}</div>;
|
||||||
};
|
};
|
||||||
|
@ -3,13 +3,20 @@ import LeftContent from './LeftContent';
|
|||||||
import RightContent from './RightContent';
|
import RightContent from './RightContent';
|
||||||
import './styles/main.module.css';
|
import './styles/main.module.css';
|
||||||
|
|
||||||
|
import FaultTotal from '../BottomBar/FaultTotal';
|
||||||
|
import FaultType from '../BottomBar/FaultType';
|
||||||
|
|
||||||
export default (props) => {
|
export default (props) => {
|
||||||
return (
|
return (
|
||||||
<div className="main-container">
|
<div className="main-container">
|
||||||
<LeftContent className="left"></LeftContent>
|
<LeftContent className="left"></LeftContent>
|
||||||
<div className="main-center"></div>
|
<div className="main-center"></div>
|
||||||
<Bottom title="产线缺陷统计" className="bottom-1"></Bottom>
|
<Bottom title="产线缺陷统计" className="bottom-1">
|
||||||
<Bottom title="产线当日缺陷分类" className="bottom-2"></Bottom>
|
<FaultTotal />
|
||||||
|
</Bottom>
|
||||||
|
<Bottom title="产线当日缺陷分类" className="bottom-2">
|
||||||
|
<FaultType />
|
||||||
|
</Bottom>
|
||||||
<Bottom title="天然气流量" className="bottom-3"></Bottom>
|
<Bottom title="天然气流量" className="bottom-3"></Bottom>
|
||||||
<Bottom title="助燃风流量" className="bottom-4"></Bottom>
|
<Bottom title="助燃风流量" className="bottom-4"></Bottom>
|
||||||
<Bottom title="当前产线生产风格" className="bottom-5"></Bottom>
|
<Bottom title="当前产线生产风格" className="bottom-5"></Bottom>
|
||||||
|
BIN
src/components/yx-dark/images/3d.png
Normal file
BIN
src/components/yx-dark/images/3d.png
Normal file
Binary file not shown.
After Width: | Height: | Size: 5.8 MiB |
BIN
src/components/yx-dark/images/fenlei-bg.png
Normal file
BIN
src/components/yx-dark/images/fenlei-bg.png
Normal file
Binary file not shown.
After Width: | Height: | Size: 252 KiB |
BIN
src/components/yx-dark/images/gas-bg.png
Normal file
BIN
src/components/yx-dark/images/gas-bg.png
Normal file
Binary file not shown.
After Width: | Height: | Size: 294 KiB |
BIN
src/components/yx-dark/images/spec-bg.png
Normal file
BIN
src/components/yx-dark/images/spec-bg.png
Normal file
Binary file not shown.
After Width: | Height: | Size: 218 KiB |
BIN
src/components/yx-dark/images/tongji-bg.png
Normal file
BIN
src/components/yx-dark/images/tongji-bg.png
Normal file
Binary file not shown.
After Width: | Height: | Size: 284 KiB |
@ -15,7 +15,7 @@
|
|||||||
|
|
||||||
.main-center {
|
.main-center {
|
||||||
grid-area: main;
|
grid-area: main;
|
||||||
background: #0f93;
|
background: url(../images/3d.png) 100% 100% / contain no-repeat;
|
||||||
}
|
}
|
||||||
|
|
||||||
.left {
|
.left {
|
||||||
@ -24,22 +24,27 @@
|
|||||||
|
|
||||||
.bottom-1 {
|
.bottom-1 {
|
||||||
grid-area: bottom1;
|
grid-area: bottom1;
|
||||||
|
background: url('../images/tongji-bg.png') 100% / contain no-repeat;
|
||||||
}
|
}
|
||||||
|
|
||||||
.bottom-2 {
|
.bottom-2 {
|
||||||
grid-area: bottom2;
|
grid-area: bottom2;
|
||||||
|
background: url('../images/fenlei-bg.png') 100% / contain no-repeat;
|
||||||
}
|
}
|
||||||
|
|
||||||
.bottom-3 {
|
.bottom-3 {
|
||||||
grid-area: bottom3;
|
grid-area: bottom3;
|
||||||
|
background: url('../images/gas-bg.png') 100% / contain no-repeat;
|
||||||
}
|
}
|
||||||
|
|
||||||
.bottom-4 {
|
.bottom-4 {
|
||||||
grid-area: bottom4;
|
grid-area: bottom4;
|
||||||
|
background: url('../images/gas-bg.png') 100% / contain no-repeat;
|
||||||
}
|
}
|
||||||
|
|
||||||
.bottom-5 {
|
.bottom-5 {
|
||||||
grid-area: bottom5;
|
grid-area: bottom5;
|
||||||
|
background: url('../images/spec-bg.png') 100% / contain no-repeat;
|
||||||
}
|
}
|
||||||
|
|
||||||
.right {
|
.right {
|
||||||
|
Loading…
Reference in New Issue
Block a user