update Home Element Position
This commit is contained in:
parent
43635ff398
commit
e796a07e66
16
src/components/Common/VideoMonitor/index.jsx
Normal file
16
src/components/Common/VideoMonitor/index.jsx
Normal file
@ -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;
|
30
src/components/Common/VideoMonitor/video-monitor.css
Normal file
30
src/components/Common/VideoMonitor/video-monitor.css
Normal file
@ -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;
|
||||||
|
}
|
@ -1,6 +1,7 @@
|
|||||||
import React from 'react';
|
import React from 'react';
|
||||||
import Item2 from './RightTable';
|
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';
|
import cls from './index.module.scss';
|
||||||
|
|
||||||
|
@ -13,6 +13,7 @@ import QualityCheckRight from "../../components/Modules/QualityCheck/RightSide";
|
|||||||
import { useSelector } from "react-redux";
|
import { useSelector } from "react-redux";
|
||||||
import { useEffect, useRef } from "react";
|
import { useEffect, useRef } from "react";
|
||||||
import useRefresh from "../../hooks/useRefresh";
|
import useRefresh from "../../hooks/useRefresh";
|
||||||
|
import TimeFireDir from "../../components/Common/TimeFireDir";
|
||||||
|
|
||||||
import WarnAlert from "../../components/Common/WarnAlert";
|
import WarnAlert from "../../components/Common/WarnAlert";
|
||||||
|
|
||||||
@ -35,7 +36,11 @@ export default function Home({ active }) {
|
|||||||
|
|
||||||
return (
|
return (
|
||||||
<div className="Main">
|
<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="bgDitu"></div>}
|
||||||
{active == "窑炉总览" && <div className="bgOverview"></div>}
|
{active == "窑炉总览" && <div className="bgOverview"></div>}
|
||||||
<AnimatePresence mode="wait">
|
<AnimatePresence mode="wait">
|
||||||
|
Loading…
Reference in New Issue
Block a user