update 一层温度

src/components/Common/TemperatureTop/index.jsx

@@ -1,11 +1,25 @@
 import BlueRect from "../BlueRect";
 import { useSelector } from "react-redux";
+import { motion, AnimatePresence } from "framer-motion";
+
+const blueTe = [
+  "TE271",
+  "TE272",
+  "TE273",
+  "TE274",
+  "TE275",
+  "TE276",
+  "TE277",
+  "TE278",
+  "TE279",
+  "TE280",
+];
 
 function TemperatureTop(props) {
   const tempTop = useSelector((state) => state.temperature.top);
 
   return (
-    <div
+    <motion.div
       className="temperature-top"
       style={{
         position: "absolute",
@@ -14,12 +28,18 @@ function TemperatureTop(props) {
         width: "100%",
         height: "95vh",
         background: "#ccc3",
+        zIndex: "-1",
+        ...props.style
+      }}
+      animate={{
+        opacity: [0, 0, 0, 0.6, 1],
+        transition: { duration: 0.3, delay: 2 },
       }}
     >
       {Object.keys(tempTop).map((d) => (
-        <BlueRect title={d} value={tempTop[d]} />
+        <BlueRect title={d} value={tempTop[d]} blue={blueTe.includes(d)} />
       ))}
-    </div>
+    </motion.div>
   );
 }