update good rate part

src/components/Container.jsx

@@ -1,23 +1,31 @@
-import cls from './container.module.less'
+import { useEffect, useRef } from 'react';
 
-import IconStack from '../assets/Icon/icon-stack.png'
+import cls from './container.module.less';
+
+import IconStack from '../assets/Icon/icon-stack.png';
+import IconGood from '../assets/Icon/icon-good.png';
+
+const Container = (props) => {
+	let icon = useRef(null);
 
-const Container = props => {
-  let icon = null
 	switch (props.icon) {
 		case 'kiln':
-      icon = IconStack
+			icon.current = IconStack;
+			break;
+		case 'good': // 良品率
+			icon.current = IconGood;
+			break;
 	}
 
-  return <div className={`${cls.container} ${props.className}`}>
+	return (
+		<div className={`${cls.container} ${props.className}`}>
 			<div className={cls.container__head}>
-      <img src={icon} alt="#" />
+				<img src={icon.current} alt="#" />
 				<h2>{props.title}</h2>
 			</div>
-    <div className={cls.container__content}>
+			<div className={cls.container__content}>{props.children}</div>
-      {props.children}
 		</div>
-  </ div>
+	);
-}
+};
 
-export default Container
+export default Container;

src/components/LeftBar/GoodProduction.jsx

@@ -1,6 +1,19 @@
+import cls from './good.module.less';
+import Container from '../Container';
+import TodayTableData from './substitutionCharts/TodayTableData';
+import GoodRateChart from './substitutionCharts/GoodRateChart';
+import TechSplitline from './substitutionCharts/TechSplitline';
 
 const GoodProduction = () => {
-  return <div></div>
+	return (
-}
+		<Container icon="good" title="本日生产良品率" className={cls.goodProd}>
+			<div className="goodProd__content">
+				<TodayTableData />
+				<TechSplitline />
+				<GoodRateChart />
+			</div>
+		</Container>
+	);
+};
 
 export default GoodProduction;

src/components/LeftBar/Kiln.jsx

@@ -52,7 +52,7 @@ export default function Kiln() {
 		<Container title="窑炉信息" icon="kiln" className={cls.leftBar__top}>
 			<div className={cls.leftBar__top__content}>
 				{infos.map((item) => (
-					<div className={cls.info__item}>
+					<div key={item.label} className={cls.info__item}>
 						{item.label}: {item.value}
 					</div>
 				))}

src/components/LeftBar/good.module.less

@@ -0,0 +1,9 @@
+.goodProd {
+	background: url(../../assets/good.png) no-repeat, #9f84;
+	background-size: 100% 100%;
+	width: 625px;
+	// height: 626px;
+	flex: 1;
+	height: 1px;
+	margin-top: 24px;
+}

src/components/LeftBar/substitutionCharts/GoodRateChart/index.jsx

@@ -0,0 +1,7 @@
+import cls from './index.module.less';
+
+const GoodRateChart = (props) => {
+	return <div className={cls.GoodRateChart}>good rate chart</div>;
+};
+
+export default GoodRateChart;

src/components/LeftBar/substitutionCharts/TechSplitline/index.jsx

@@ -0,0 +1,7 @@
+import cls from './index.module.less';
+
+const TechSplitline = (props) => {
+	return <div className={cls.techSplitline}></div>;
+};
+
+export default TechSplitline;

src/components/LeftBar/substitutionCharts/TechSplitline/index.module.less

@@ -0,0 +1,5 @@
+.techSplitline {
+	height: 2px;
+	width: 100%;
+	background: radial-gradient(#3ce7ff, #3ce8ff92, #3ce8ff32, transparent);
+}

src/components/LeftBar/substitutionCharts/TodayTableData/index.jsx

@@ -0,0 +1,7 @@
+import cls from './index.module.less';
+
+const TodayTableData = (props) => {
+	return <div className={cls.todayTableData}>today table data</div>;
+};
+
+export default TodayTableData;

src/components/container.module.less

@@ -10,9 +10,10 @@
 		align-items: center;
 
 		h2 {
-      font-family: "微软雅黑", "Microsoft YaHei UI", -apple-system, BlinkMacSystemFont, "Helvetica Neue",
+			font-family: '微软雅黑', 'Microsoft YaHei UI', -apple-system,
-        "PingFang SC", "Microsoft YaHei", "Source Han Sans SC", "Noto Sans CJK SC",
+				BlinkMacSystemFont, 'Helvetica Neue', 'PingFang SC', 'Microsoft YaHei',
-        "WenQuanYi Micro Hei", sans-serif;
+				'Source Han Sans SC', 'Noto Sans CJK SC', 'WenQuanYi Micro Hei',
+				sans-serif;
 			margin: 0;
 			margin-left: 6px;
 			font-size: 18px;
@@ -21,6 +22,12 @@
 			font-weight: 500;
 		}
 	}
+
+	.container__content {
+		height: 1px;
+		flex: 1;
+		background: #25a78672;
+	}
 }
 
 .bgKiln {