add bottom

src/components/BottomBar/BottomBarItem/index.jsx

@@ -6,7 +6,7 @@ function BottomBarItem(props) {
 		<Container
 			icon={props.icon}
 			title={props.title}
-			className={`${cls.bottomBarItem} ${props.className}`}
+			className={`${props.className}`}
 		>
 			{props.children}
 		</Container>

src/components/BottomBar/BottomBarItem/index.module.css

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

src/components/BottomBar/FaultTotal/index.module.css

@@ -4,13 +4,14 @@
 }
 
 .faultTotal {
+	height: 100%;
 	position: relative;
 }
 
 .headWidget {
 	position: absolute;
 	/* background: #00ee33; */
-	top: 20px;
+	top: 28px;
 	right: 24px;
 	height: 32px;
 	width: 190px;

src/components/BottomBar/FaultType/index.jsx

@@ -38,11 +38,11 @@ function FaultType(props) {
 			},
 			textStyle: {
 				color: '#DFF1FE',
-				fontSize: 18,
+				fontSize: 16,
 				rich: {
 					sub: {
 						color: '#fff9',
-						fontSize: 18,
+						fontSize: 16,
 					},
 				},
 			},
@@ -109,7 +109,7 @@ function FaultType(props) {
 						<Radio.Button
 							key={l.label}
 							value={l.value}
-							className="radio-group__item"
+							className={`radio-group__item ${cls['radio-group__item']}`}
 						>
 							{l.label}
 						</Radio.Button>

src/components/BottomBar/FaultType/index.module.css

@@ -4,11 +4,12 @@
 
 .faultType {
 	position: relative;
+	height: 100%;
 }
 
 .headWidget {
 	position: absolute;
-	top: 20px;
+	top: 28px;
 	right: 24px;
 	height: 32px;
 	width: 340px;
@@ -32,3 +33,7 @@
 	color: #fff !important;
 	background: #03233c !important;
 }
+
+.radio-group__item {
+	padding: 0 8px;
+}

src/components/yx-dark/Bottom.jsx

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

src/components/yx-dark/MainContainer.jsx

@@ -3,13 +3,20 @@ import LeftContent from './LeftContent';
 import RightContent from './RightContent';
 import './styles/main.module.css';
 
+import FaultTotal from '../BottomBar/FaultTotal';
+import FaultType from '../BottomBar/FaultType';
+
 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-1">
+				<FaultTotal />
+			</Bottom>
+			<Bottom title="产线当日缺陷分类" className="bottom-2">
+				<FaultType />
+			</Bottom>
 			<Bottom title="天然气流量" className="bottom-3"></Bottom>
 			<Bottom title="助燃风流量" className="bottom-4"></Bottom>
 			<Bottom title="当前产线生产风格" className="bottom-5"></Bottom>

src/components/yx-dark/styles/main.module.css

@@ -15,7 +15,7 @@
 
 .main-center {
 	grid-area: main;
-	background: #0f93;
+	background: url(../images/3d.png) 100% 100% / contain no-repeat;
 }
 
 .left {
@@ -24,22 +24,27 @@
 
 .bottom-1 {
 	grid-area: bottom1;
+	background: url('../images/tongji-bg.png') 100% / contain no-repeat;
 }
 
 .bottom-2 {
 	grid-area: bottom2;
+	background: url('../images/fenlei-bg.png') 100% / contain no-repeat;
 }
 
 .bottom-3 {
 	grid-area: bottom3;
+	background: url('../images/gas-bg.png') 100% / contain no-repeat;
 }
 
 .bottom-4 {
 	grid-area: bottom4;
+	background: url('../images/gas-bg.png') 100% / contain no-repeat;
 }
 
 .bottom-5 {
 	grid-area: bottom5;
+	background: url('../images/spec-bg.png') 100% / contain no-repeat;
 }
 
 .right {