update energe layout

src/pages/EnergyCostAnalysis/index.jsx

@@ -1,63 +1,69 @@
-import cls from './index.module.css';
-import SmokeHandle from '../../components/Modules/EnergyCostAnalysis/SmokeHandle';
-import Energy from '../../components/Modules/EnergyCostAnalysis/Energy';
-import NO from '../../components/Modules/EnergyCostAnalysis/NO';
-import NO2 from '../../components/Modules/EnergyCostAnalysis/NO2';
-import SO2 from '../../components/Modules/EnergyCostAnalysis/SO2';
-import Oxygen from '../../components/Modules/EnergyCostAnalysis/O';
-import NatGas from '../../components/Modules/EnergyCostAnalysis/NatGas';
-import ElecCost from '../../components/Modules/EnergyCostAnalysis/ElectricityCost';
-import WaterCost from '../../components/Modules/EnergyCostAnalysis/WaterCost';
-import RestHeat from '../../components/Modules/EnergyCostAnalysis/RestHeat';
-import Gas from '../../components/Modules/EnergyCostAnalysis/BadGas';
+import cls from "./index.module.css";
+import SmokeHandle from "../../components/Modules/EnergyCostAnalysis/SmokeHandle";
+import Energy from "../../components/Modules/EnergyCostAnalysis/Energy";
+import NO from "../../components/Modules/EnergyCostAnalysis/NO";
+import NO2 from "../../components/Modules/EnergyCostAnalysis/NO2";
+import SO2 from "../../components/Modules/EnergyCostAnalysis/SO2";
+import Oxygen from "../../components/Modules/EnergyCostAnalysis/O";
+import NatGas from "../../components/Modules/EnergyCostAnalysis/NatGas";
+import ElecCost from "../../components/Modules/EnergyCostAnalysis/ElectricityCost";
+import WaterCost from "../../components/Modules/EnergyCostAnalysis/WaterCost";
+import RestHeat from "../../components/Modules/EnergyCostAnalysis/RestHeat";
+import Gas from "../../components/Modules/EnergyCostAnalysis/BadGas";
 
 function EnergyAnalysis(props) {
-	return (
-		<div className={cls.grid}>
-			<div className={cls.bgDitu}></div>
-			<div className={cls.vgrid + ' col-1'}>
-				<SmokeHandle />
-				<Oxygen />
-				<NO />
-			</div>
+  return (
+    <div className={cls.grid}>
+      <div className={cls.bgDitu}></div>
+      <div className={cls.vgrid + " col-1"}>
+        {/* <SmokeHandle /> */}
+        <div style={{ gridRow: "1 / 3" }}>
+          <Oxygen />
+        </div>
+        <div style={{ gridRow: "3 / 4" }}>
+          <NO />
+        </div>
+      </div>
 
-			<div className={cls.vgrid + ' col-2'}>
-				<div style={{ gridRow: 3 }}>
-					<NO2 />
-				</div>
-				<div style={{ gridRow: 2 }}>
-					<SO2 />
-				</div>
-			</div>
+      <div className={cls.vgrid + " col-2"}>
+        <div style={{ gridRow: 3 }}>
+          <NO2 />
+        </div>
+        <div style={{ gridRow: 2 }}>
+          <SO2 />
+        </div>
+      </div>
 
-			<div className={' ' + cls.line}></div>
+      {/* <div className={" " + cls.line}></div> */}
 
-			<div className={cls.vgrid + ' col-3'}>
-				<div style={{ gridRow: 2 }}>
-					<RestHeat />
-				</div>
-				<div style={{ gridRow: 3 }}>
-					<WaterCost />
-				</div>
-			</div>
+      <div className={cls.vgrid + " col-3"}>
+        <div style={{ gridRow: 2 }}>
+          {/* <RestHeat /> */}
+          <NatGas />
+        </div>
+        <div style={{ gridRow: 3 }}>
+          {/* <WaterCost /> */}
+          <Gas />
+        </div>
+      </div>
 
-			<div className={cls.vgrid + ' col-4'}>
-				{/* <div className="bgray energy"></div> */}
-				<Energy />
-				<div className={cls.vvgrid}>
-					<div className=" electronic">
-						<ElecCost />
-					</div>
-					<div className=" gas">
-						<NatGas />
-					</div>
-					<div className=" mgas">
-						<Gas />
-					</div>
-				</div>
-			</div>
-		</div>
-	);
+      <div className={cls.vvgrid + " col-4"}>
+        {/* <div className="bgray energy"></div> */}
+        {/* <Energy /> */}
+        <div className=" electronic">
+          <Energy />
+        </div>
+        <div className=" gas">
+          {/* <NatGas /> */}
+          <SmokeHandle />
+        </div>
+        <div style={{ height: "100%" }}>
+          <ElecCost />
+          {/* <Gas /> */}
+        </div>
+      </div>
+    </div>
+  );
 }
 
 export default EnergyAnalysis;

src/pages/EnergyCostAnalysis/index.module.css

@@ -2,7 +2,7 @@
 	display: grid;
 	justify-content: center;
 	gap: 24px;
-	grid-template-columns: 900px 900px 16px 900px 900px;
+	grid-template-columns: 900px 900px 900px 900px;
 	/* grid-template-rows: 128px 389px 389px; */
 	/* height: 100%; */
 	/* overflow: hidden; */
@@ -26,11 +26,10 @@
 	gap: 24px;
 	grid-template-rows: 128px 389px 389px;
 }
-
 .vvgrid {
 	display: grid;
 	gap: 24px;
-	grid-template-rows: repeat(3, 253px);
+	grid-template-rows: 258px 258px 389px;
 }
 
 .shadowBorder {
@@ -50,10 +49,4 @@
 
 .line {
 	background: url(../../assets/line.png) 0 60% no-repeat;
-}
-
-.oxygen {
-}
-
-.no {
-}
+}