add bottom

This commit is contained in:
lb 2023-09-10 17:54:29 +08:00
parent d56573acbb
commit e83594bbbc
13 changed files with 29 additions and 15 deletions

View File

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

View File

@ -1,5 +1 @@
.bottomBarItem {
background: url(../../../assets/bg-bottom-item.png) no-repeat;
background-size: 100% 100%;
width: 600px;
}

View File

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

View File

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

View File

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

View File

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

View File

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

Binary file not shown.

After

Width:  |  Height:  |  Size: 5.8 MiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 252 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 294 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 218 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 284 KiB

View File

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