update Home Element Position

src/components/Common/VideoMonitor/index.jsx

@@ -0,0 +1,16 @@
+// import cls from "./index.module.css";
+import "./video-monitor.css";
+
+function VideoMonitor(props) {
+  return (
+    <div className="video-monitor">
+      <h2>泡界线监控</h2>
+      <div className="video-container">
+        <div></div>
+        <div></div>
+      </div>
+    </div>
+  );
+}
+
+export default VideoMonitor;

src/components/Common/VideoMonitor/video-monitor.css

@@ -0,0 +1,30 @@
+.video-monitor {
+  display: flex;
+  flex-direction: column;
+  margin-left: 80px;
+  height: 200px;
+  width: 500px;
+}
+
+.video-monitor > h2 {
+  margin: 0;
+  padding: 10px 0;
+  background: #16253c;
+  color: #fff;
+  font-weight: 400;
+  letter-spacing: 2px;
+  font-size: 18px;
+  text-align: center;
+}
+
+.video-monitor > .video-container {
+  display: flex;
+  gap: 8px;
+  flex: 1;
+}
+
+.video-container > div {
+  flex: 1;
+  height: 100%;
+  background: #ccc1;
+}

src/components/Modules/Home/CenterTop/index.jsx

@@ -1,6 +1,7 @@
 import React from 'react';
 import Item2 from './RightTable';
-import Item1 from '../../../Common/TimeFireDir';
+// import Item1 from '../../../Common/TimeFireDir';
+import Item1 from '../../../Common/VideoMonitor';
 
 import cls from './index.module.scss';
 

src/pages/Home/index.jsx

@@ -13,6 +13,7 @@ import QualityCheckRight from "../../components/Modules/QualityCheck/RightSide";
 import { useSelector } from "react-redux";
 import { useEffect, useRef } from "react";
 import useRefresh from "../../hooks/useRefresh";
+import TimeFireDir from "../../components/Common/TimeFireDir";
 
 import WarnAlert from "../../components/Common/WarnAlert";
 
@@ -35,7 +36,11 @@ export default function Home({ active }) {
 
   return (
     <div className="Main">
-      {active == "窑炉总览" && <WarnAlert />}
+      {active == "窑炉总览" && (
+        <div style={{ position: "fixed", top: "210px", left: "50%", transform: 'translateX(-40%)' }}>
+          <TimeFireDir />
+        </div>
+      )}
       {active != "窑炉总览" && <div className="bgDitu"></div>}
       {active == "窑炉总览" && <div className="bgOverview"></div>}
       <AnimatePresence mode="wait">