merge bugfix

src/components/Modules/EnergyCostAnalysis/Energy/index.jsx

@@ -2,33 +2,40 @@ import cls from "./index.module.css";
 import GradientText from "../../../Common/GradientText";
 import { useSelector } from "react-redux";
 import { useEffect, useState } from "react";
+import eIcon1 from "../../../../assets/Icon/dontknowwhatitis.png";
+import eIcon2 from "../../../../assets/Icon/lightnen.png";
 
 function Energy(props) {
-  const [isPage1, setIsPage1] = useState(true);
+  const [isPage1] = useState(props.page === 1);
   const energyInfo = useSelector((state) => state.energy?.info);
 
-  useEffect(() => {
-    const timer = setInterval(() => {
-      setIsPage1((pre) => !pre);
-    }, 10000);
+  // useEffect(() => {
+  //   const timer = setInterval(() => {
+  //     setIsPage1((pre) => !pre);
+  //   }, 10000);
 
-    return () => {
-      clearInterval(timer);
-    }
-  }, []);
+  //   return () => {
+  //     clearInterval(timer);
+  //   }
+  // }, []);
 
   return (
     <div className={" " + cls.layout} style={{ color: "#fff" }}>
       <span
-        className={cls.shadowBorder}
+        className={`${cls.shadowBorder} ${cls.border}`}
         style={{
           gridRow: "1 / 3",
-          paddingTop: "104px",
-          paddingLeft: "32px",
           userSelect: "none",
+          textAlign: "center",
+          paddingTop: "96px",
         }}
       >
-        <GradientText text="能源" />
+        {isPage1 ? (
+          <img src={eIcon1} width={32} alt="eicon1" />
+        ) : (
+          <img src={eIcon2} width={32} alt="eicon2" />
+        )}
+        <GradientText text={"\u2002\u2002能源"} />
       </span>
       {!isPage1 && (
         <div
@@ -65,7 +72,9 @@ function Energy(props) {
               {(+energyInfo?.elecQty7)?.toFixed(2) || 0}
             </span>
           </div>
-          <div className={cls.shadowBorder + " " + cls.infoText}>
+          <div
+            className={cls.shadowBorder + " " + cls.infoText + " " + cls.border}
+          >
             <span style={{ lineHeight: 1.5 }}>智慧能源光伏发电(总量)/kWh</span>
             <span
               style={{
@@ -77,7 +86,9 @@ function Energy(props) {
               {(+energyInfo?.elecQty4)?.toFixed(2) || 0}
             </span>
           </div>
-          <div className={cls.shadowBorder + " " + cls.infoText}>
+          <div
+            className={cls.shadowBorder + " " + cls.infoText + " " + cls.border}
+          >
             <span style={{ lineHeight: 1.5 }}>许昌安彩光伏发电(总量)/kWh</span>
             <span
               style={{
@@ -118,7 +129,9 @@ function Energy(props) {
             </div>
             <div
               style={{ flex: 1 }}
-              className={cls.shadowBorder + " " + cls.infoText}
+              className={
+                cls.shadowBorder + " " + cls.infoText + " " + cls.border
+              }
             >
               <span style={{ lineHeight: 1.5 }}>余热发电(总量)/kWh</span>
               <span
@@ -144,13 +157,17 @@ function Energy(props) {
               {energyInfo?.ngQty1?.replace("Nm³", "") || "0Nm³"}
             </span>
           </span>
-          <span className={cls.shadowBorder + " " + cls.infoText}>
+          <span
+            className={cls.shadowBorder + " " + cls.infoText + " " + cls.border}
+          >
             <span style={{ lineHeight: 1.5 }}>电耗量/kWh</span>
             <span style={{ lineHeight: 1.5 }}>
               {(+energyInfo?.elecQty2)?.toFixed(2) || 0}
             </span>
           </span>
-          <span className={cls.shadowBorder + " " + cls.infoText}>
+          <span
+            className={cls.shadowBorder + " " + cls.infoText + " " + cls.border}
+          >
             <span style={{ lineHeight: 1.5 }}>天然气II/Nm³</span>
             <span style={{ lineHeight: 1.5 }}>
               {energyInfo?.ngQty2?.replace("Nm³", "") || "0Nm³"}

src/components/Modules/EnergyCostAnalysis/Energy/index.module.css

@@ -4,7 +4,8 @@
   /* grid-template-columns: 133px 158px 292px 292px; */
   grid-template-columns: 125px 250px 250px 250px;
   /* grid-template-rows: 60px 60px; */
-  grid-template-rows: 129px 129px;
+  grid-template-rows: auto;
+  height: 100%;
 }
 
 .shadowBorder {
@@ -13,6 +14,29 @@
   padding: 4px;
 }
 
+.shadowBorder.border {
+  position: relative;
+  border-bottom: 2px solid #00fff7;
+}
+
+.shadowBorder.border::before,
+.shadowBorder.border::after {
+  content: "";
+  position: absolute;
+  bottom: 0;
+  display: inline-block;
+  height: 100%;
+  width: 2px;
+  background: linear-gradient(to top, #00fff7, #00fff708, transparent);
+}
+
+.shadowBorder.border::before {
+  left: 0;
+}
+.shadowBorder.border::after {
+  right: 0;
+}
+
 .infoText {
   text-align: center;
   font-size: 22px;
@@ -27,6 +51,6 @@
 }
 
 .infoText > span:last-child {
-  color: #00FFF7;
+  color: #00fff7;
   font-size: 24px;
 }