update 一层温度

src/components/Common/BlueRect/index.jsx

@@ -0,0 +1,26 @@
+import cls from "./index.module.css";
+
+function BlueRect(props) {
+  const title = props.title || "DEFAULT";
+  const value = props.value || "0℃";
+  return (
+    <div className={`${cls.blueRect} ${cls[title]}`} style={{}}>
+      <span
+        className="title"
+        style={{
+          fontSize: "18px",
+          lineHeight: "24px",
+          color: props.blue ? "#40afb8" : "#fff",
+          fontWeight: 600,
+        }}
+      >
+        {title}
+      </span>
+      <span className="value" style={{ fontSize: "22px" }}>
+        {value}
+      </span>
+    </div>
+  );
+}
+
+export default BlueRect;

src/components/Common/BlueRect/index.module.css

@@ -0,0 +1,268 @@
+.blueRect {
+  display: inline-block;
+  width: 106px;
+  height: 68px;
+  position: absolute;
+  top: 0;
+  left: 0;
+  padding: 6px 0;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  color: #fff;
+  background: #0a426820;
+  border-radius: 4px;
+}
+
+.blueRect::before {
+  content: "";
+  display: inline-block;
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 3px;
+  background: linear-gradient(
+    to right,
+    transparent 0%,
+    transparent 50%,
+    #24aebb 100%
+  );
+  border-radius: 3px;
+}
+
+.blueRect::after {
+  content: "";
+  display: inline-block;
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  width: 100%;
+  height: 3px;
+  background: linear-gradient(
+    to right,
+    #24aebb 0%,
+    transparent 50%,
+    transparent 100%
+  );
+  border-radius: 3px;
+}
+
+/** left **/
+
+.TE271 {
+  top: 160px;
+  left: 80px;
+}
+.TE272 {
+  top: 254px; /* +94px */
+  left: 80px;
+}
+.TE273 {
+  top: 348px; /* +94px */
+  left: 80px;
+}
+.TE274 {
+  top: 442px;
+  left: 80px;
+}
+.TE279 {
+  top: 536px;
+  left: 80px;
+}
+.TE275 {
+  top: 160px;
+  left: 216px;
+}
+.TE276 {
+  top: 254px;
+  left: 216px; /* +136px */
+}
+.TE277 {
+  top: 348px; /* +94px */
+  left: 216px; /* +136px */
+}
+.TE278 {
+  top: 442px; /* +94px */
+  left: 216px; /* +136px */
+}
+.TE280 {
+  top: 536px; /* +94px */
+  left: 216px; /* +136px */
+}
+
+/** center top **/
+.TE227 {
+  top: 128px;
+  left: 616px;
+}
+.TE229 {
+  top: 128px;
+  left: 736px; /* +120px */
+}
+.TE231 {
+  top: 128px;
+  left: 856px;
+}
+.TE233 {
+  top: 128px;
+  left: 976px;
+}
+.TE235 {
+  top: 128px;
+  left: 1096px;
+}
+.TE237 {
+  top: 128px;
+  left: 1216px;
+}
+.TE239 {
+  top: 128px;
+  left: 1336px;
+}
+.TE241 {
+  top: 128px;
+  left: 1456px;
+}
+
+/** center bottom **/
+.TE228 {
+  top: 620px;
+  left: 588px;
+}
+.TE230 {
+  top: 620px;
+  left: 710px;
+}
+.TE232 {
+  top: 620px;
+  left: 830px;
+}
+.TE234 {
+  top: 620px;
+  left: 950px;
+}
+.TE236 {
+  top: 620px;
+  left: 1070px;
+}
+.TE238 {
+  top: 620px;
+  left: 1190px;
+}
+.TE240 {
+  top: 620px;
+  left: 1310px;
+}
+.TE242 {
+  top: 620px;
+  left: 1430px;
+}
+
+/** center middle **/
+.TE201 {
+  top: 390px;
+  left: 450px;
+}
+.TE202 {
+  top: 390px;
+  left: 580px;
+}
+.TE203 {
+  top: 390px;
+  left: 710px;
+}
+.TE204 {
+  top: 390px;
+  left: 840px;
+}
+.TE205 {
+  top: 390px;
+  left: 970px;
+}
+.TE206 {
+  top: 390px;
+  left: 1100px;
+}
+.TE207 {
+  top: 340px;
+  left: 1260px;
+}
+.TE208 {
+  top: 390px;
+  left: 1260px;
+}
+.TE209 {
+  top: 480px;
+  left: 1260px;
+}
+.TE210 {
+  top: 390px;
+  left: 1390px;
+}
+.TE211 {
+  top: 390px;
+  left: 1530px;
+}
+.TE212 {
+  top: 390px;
+  left: 1660px;
+}
+.TE213 {
+  top: 390px;
+  left: 1790px;
+}
+
+/** right **/
+.TE214 {
+  top: 160px;
+  left: 2000px;
+}
+.TE215 {
+  top: 265px;
+  left: 2020px;
+}
+.TE216 {
+  top: 400px;
+  left: 2030px;
+}
+.TE217 {
+  top: 535px;
+  left: 2050px;
+}
+.TE218 {
+  top: 670px;
+  left: 2080px;
+}
+.TE219 {
+  top: 160px;
+  left: 2120px;
+}
+.TE220 {
+  top: 265px;
+  left: 2140px;
+}
+.TE221 {
+  top: 400px;
+  left: 2150px;
+}
+.TE222 {
+  top: 535px;
+  left: 2170px;
+}
+.TE223 {
+  top: 670px;
+  left: 2200px;
+}
+.TE224 {
+  top: 265px;
+  left: 2240px;
+}
+.TE225 {
+  top: 400px;
+  left: 2310px;
+}
+.TE226 {
+  top: 535px;
+  left: 2280px;
+}

src/components/Common/TemperatureTop/index.jsx

@@ -0,0 +1,26 @@
+import BlueRect from "../BlueRect";
+import { useSelector } from "react-redux";
+
+function TemperatureTop(props) {
+  const tempTop = useSelector((state) => state.temperature.top);
+
+  return (
+    <div
+      className="temperature-top"
+      style={{
+        position: "absolute",
+        top: "0",
+        left: "0",
+        width: "100%",
+        height: "95vh",
+        background: "#ccc3",
+      }}
+    >
+      {Object.keys(tempTop).map((d) => (
+        <BlueRect title={d} value={tempTop[d]} />
+      ))}
+    </div>
+  );
+}
+
+export default TemperatureTop;