update rightbar

src/components/Common/Energy/EnergeCostRealtime/index.jsx

@@ -6,22 +6,36 @@ const EnergyCostRealtime = () => {
 
   return (
     <div className={`${cls.cost__info} flex`}>
-      <div
-        className={`${cls.info__item} flex flex-col justify-center items-center`}
-        style={{ width: "112px", padding: 0 }}
-      >
-        <span
-          style={{
-            fontSize: "20px",
-            letterSpacing: "2px",
-            lineHeight: 1.5,
-          }}
-        >
-          余热发电
-        </span>
-        <span style={{ fontSize: "20px", color: "#3ce8ff", lineHeight: 1.5 }}>
-          {(+energyInfo?.elecQty1)?.toFixed(2) || 0}kWh
-        </span>
+      <div className={`${cls.info__item_groups_col1}`}>
+        <div className={cls.info__item}>
+          <i
+            style={{
+              fontSize: "18px",
+              fontStyle: "normal",
+              paddingRight: "6px",
+            }}
+          >
+            余热发电(实时)
+          </i>
+          <span style={{ fontSize: "17px", color: "#3ce8ff" }}>
+            {(+energyInfo?.elecQty2)?.toFixed(2) || 0}kWh
+          </span>
+        </div>
+
+        <div className={cls.info__item}>
+          <i
+            style={{
+              fontSize: "18px",
+              fontStyle: "normal",
+              paddingRight: "6px",
+            }}
+          >
+            余热发电(总量)
+          </i>
+          <span style={{ fontSize: "17px", color: "#3ce8ff" }}>
+            {(+energyInfo?.elecQty1)?.toFixed(2) || 0}kWh
+          </span>
+        </div>
       </div>
       <div className={cls.info__item_groups}>
         <div className={cls.info__item}>

src/components/Common/Energy/EnergeCostRealtime/index.module.scss

@@ -1,24 +1,20 @@
 .cost__info {
   margin-top: 4px;
   margin-bottom: 12px;
-
-  div {
-    flex-grow: 1;
-  }
 }
 
 .info__item {
   border-radius: 2px;
   color: hsl(0, 0%, 100%, 0.9);
   box-shadow: inset 0 0 17px 0px hsla(0, 0%, 100%, 0.15);
-  // min-width: 190px;
-  // height: 43px;
   font-size: 14px;
-  // letter-spacing: 1.43px;
-  line-height: 40px;
+  line-height: 28px;
   padding-left: 12px;
-  // text-align: center;
+  padding: 8px 0;
   user-select: none;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
 }
 
 .hAuto {
@@ -26,8 +22,16 @@
 }
 
 .info__item_groups {
+  flex: 2;
   margin-left: 8px;
   display: grid;
   grid-template-columns: 1fr 1fr;
   gap: 8px;
 }
+
+.info__item_groups_col1 {
+  flex: 1;
+  display: grid;
+  grid-template-rows: 1fr 1fr;
+  gap: 8px;
+}

src/components/Common/Energy/index.module.scss

@@ -2,7 +2,7 @@
 	background: url(../../../assets/energy.png) no-repeat;
 	background-size: 100% 100%;
 	width: 626px;
-	height: 400px;
+	height: 460px;
 }
 
 .cost__info {
@@ -18,13 +18,9 @@
 	border-radius: 2px;
 	color: hsl(0, 0%, 100%, 0.9);
 	box-shadow: inset 0 0 17px 0px hsla(0, 0%, 100%, 0.15);
-	// min-width: 190px;
-	// height: 43px;
 	font-size: 14px;
-	// letter-spacing: 1.43px;
 	line-height: 40px;
 	padding-left: 12px;
-	// text-align: center;
 	user-select: none;
 }