修改

src/components/Common/crownTe/Kiln.jsx

@@ -0,0 +1,27 @@
+import cls from "./kiln.module.scss";
+import Container from "../../Container";
+import { useSelector } from "react-redux";
+import { stateNameMap } from "../../../store/features/kilnSlice";
+
+export default function Kiln() {
+  const kilnInfo = useSelector((state) => state.kiln);
+
+  const infos = Object.keys(kilnInfo).map((key) => ({
+    label: stateNameMap[key],
+    value: kilnInfo[key],
+  }));
+
+  return (
+    <Container title="窑炉信息" icon="kiln" className={cls.leftBar__top}>
+      <div className={cls.leftBar__top__content}>
+        {infos.map((item) => (
+          <div key={item.label} className={cls.info__item}>
+            <span className={cls.label}>{item.label}</span>
+            <span className={cls.value}>{item.value}</span>
+            {/* {item.label}: {item.value} */}
+          </div>
+        ))}
+      </div>
+    </Container>
+  );
+}

src/components/Common/crownTe/kiln.module.scss

@@ -0,0 +1,42 @@
+.leftBar__top {
+	width: 625px;
+	// height: 305px;
+	height: 300px;
+	background: url('../../../assets/ItemBg.png') no-repeat;
+	background-size: 100% 100%;
+
+	.leftBar__top__content {
+		flex: 1;
+		height: 1px;
+		display: grid;
+		grid-template-columns: 1fr 1fr;
+		gap: 10px;
+		padding-top: 18px;
+
+		.info__item {
+			border-radius: 2px;
+			color: hsl(0, 0%, 100%, 0.9);
+			box-shadow: inset 0 0 17px 0px hsla(0, 0%, 100%, 0.15);
+			// width: 288px;
+			height: 43px;
+			font-size: 20px;
+			letter-spacing: 1.43px;
+			line-height: 40px;
+			text-align: center;
+			user-select: none;
+			display: flex;
+			align-items: center;
+			gap: 12px;
+
+			.label {
+				flex: 6;
+				text-align: right;
+			}
+			
+			.value {
+				flex: 4;
+				text-align: left;
+			}
+		}
+	}
+}