fix ui

src/components/Common/Feeder/index.jsx

@@ -1,5 +1,6 @@
 import { useSelector } from "react-redux";
 import { motion } from "framer-motion";
+import "./feeder.css";
 
 function FeederStatus(props) {
   const feeder = useSelector((state) => state.feeder);
@@ -10,13 +11,15 @@ function FeederStatus(props) {
       className="feeder"
       style={{
         position: "absolute",
-        bottom: "128px",
+        bottom: "56px",
         left: "740px",
-        width: "300px",
-        height: "80px",
+        width: "400px",
+        height: "128px",
         zIndex: "-1",
         display: "flex",
-        gap: "20px",
+        gap: "8px",
+        paddingTop: "12px",
+        justifyContent: "center",
         ...props.style,
       }}
       animate={{
@@ -26,34 +29,74 @@ function FeederStatus(props) {
     >
       <span
         style={{
-          color: "#fff",
-          border: "1px solid #fff",
-          padding: "12px",
-          background:
-            leftFeeder == "运行"
-              ? "#0f03"
-              : leftFeeder == "故障"
-              ? "#f003"
-              : "#da33",
+          position: "absolute",
+          color: "#6be1e1",
+          top: "-32px",
+          left: "20px",
+          fontSize: "22px",
         }}
       >
-        投料机1 : {leftFeeder}
+        1#投料{" "}
+        <b
+          style={{
+            fontWeight: 400,
+            color:
+              leftFeeder == "故障"
+                ? "#f83a35"
+                : leftFeeder == "运行"
+                ? "#9af72b"
+                : "#ccc",
+          }}
+        >
+          {leftFeeder}
+        </b>
       </span>
       <span
         style={{
-          color: "#fff",
-          border: "1px solid #fff",
-          padding: "12px",
-          background:
-            rightFeeder == "运行"
-              ? "#0f03"
-              : rightFeeder == "故障"
-              ? "#f003"
-              : "#da33",
+          position: "absolute",
+          color: "#6be1e1",
+          top: "-32px",
+          left: "230px",
+          fontSize: "22px",
         }}
       >
-        投料机2 : {rightFeeder}
+        2#投料{" "}
+        <b
+          style={{
+            fontWeight: 400,
+            color:
+              rightFeeder == "故障"
+                ? "#f83a35"
+                : rightFeeder == "运行"
+                ? "#9af72b"
+                : "#ccc",
+          }}
+        >
+          {rightFeeder}
+        </b>
       </span>
+      <span
+        className={`
+        feeder ${
+          leftFeeder == "运行"
+            ? "feeder-running"
+            : leftFeeder == "故障"
+            ? "feeder-error"
+            : "feeder-stop"
+        }
+        `}
+      ></span>
+      <span
+        className={`
+          feeder ${
+            rightFeeder == "运行"
+              ? "feeder-running"
+              : rightFeeder == "故障"
+              ? "feeder-error"
+              : "feeder-stop"
+          }
+          `}
+      ></span>
     </motion.div>
   );
 }