update一层温度

src/components/Common/TemperatureBottom/index.jsx

@@ -0,0 +1,41 @@
+import BlueRect from "../BlueRect";
+import { useSelector } from "react-redux";
+import { motion, AnimatePresence } from "framer-motion";
+
+const blueTe = [
+  "TE401",
+  "TE402",
+  "TE403",
+  "PE401",
+  "PE402",
+  "PE403",
+];
+
+function TemperatureBottom(props) {
+  const tempBottom = useSelector((state) => state.temperature.bottom);
+
+  return (
+    <motion.div
+      className="temperature-bottom"
+      style={{
+        position: "absolute",
+        top: "0",
+        left: "0",
+        width: "100%",
+        height: "80vh",
+        zIndex: "-1",
+        ...props.style
+      }}
+      animate={{
+        opacity: [0, 0, 0, 0.6, 1],
+        transition: { duration: 0.3, delay: 2 },
+      }}
+    >
+      {Object.keys(tempBottom).map((d) => (
+        <BlueRect title={d} value={tempBottom[d]} blue={blueTe.includes(d)} />
+      ))}
+    </motion.div>
+  );
+}
+
+export default TemperatureBottom;