@@ -0,0 +1,20 @@ | |||||
// import cls from "./index.module.css"; | |||||
import "./warn-alert.css"; | |||||
import AlertIcon from "./warn-icon.png"; | |||||
function WarnAlert(props) { | |||||
return ( | |||||
<div className="warn-alert"> | |||||
<h1 className=""> | |||||
<img src={AlertIcon} width={24} alt="icon" /> | |||||
{props.title || "test"} | |||||
</h1> | |||||
<p> | |||||
{props.content || | |||||
"Lorem ipsum dolor sit amet consectetur."} | |||||
</p> | |||||
</div> | |||||
); | |||||
} | |||||
export default WarnAlert; |
@@ -0,0 +1,58 @@ | |||||
.warn-alert { | |||||
position: fixed; | |||||
top: 200px; | |||||
left: 200px; | |||||
/* height: 72px; */ | |||||
z-index: 10000; | |||||
display: inline-block; | |||||
/* background: url(../../../assets/warn-bg.png) 0 0 / 116px 100% repeat-x; */ | |||||
background: url(./3.png) 0 0 / 116px 100% repeat-x; | |||||
box-shadow: 0 0 24px 6px rgba(0, 0, 0, 0.5); | |||||
user-select: none; | |||||
transform: scale(.64); | |||||
} | |||||
.warn-alert::before { | |||||
box-sizing: border-box; | |||||
content: ""; | |||||
position: absolute; | |||||
top: 0; | |||||
left: -24px; | |||||
width: 24px; | |||||
height: 100%; | |||||
display: inline-block; | |||||
border: 12px solid transparent; | |||||
border-right-color: #ff2c2c; | |||||
} | |||||
.warn-alert::after { | |||||
box-sizing: border-box; | |||||
content: ""; | |||||
position: absolute; | |||||
top: 0; | |||||
right: -24px; | |||||
width: 24px; | |||||
height: 100%; | |||||
display: inline-block; | |||||
border: 12px solid transparent; | |||||
border-left-color: #ff2c2c; | |||||
} | |||||
.warn-alert > h1 { | |||||
display: flex; | |||||
margin: 8px 0 0; | |||||
align-items: center; | |||||
color: #fff; | |||||
font-size: 16px; | |||||
text-transform: uppercase; | |||||
} | |||||
.warn-alert > h1 img { | |||||
padding-top: 3px; | |||||
margin-left: 10px; | |||||
} | |||||
.warn-alert > p { | |||||
color: #fff; | |||||
margin: 0 22px 16px 14px; | |||||
font-size: 14px; | |||||
} |
@@ -14,6 +14,8 @@ 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 WarnAlert from "../../components/Common/WarnAlert"; | |||||
export default function Home({ active }) { | export default function Home({ active }) { | ||||
useRefresh(true); | useRefresh(true); | ||||
@@ -33,6 +35,7 @@ export default function Home({ active }) { | |||||
return ( | return ( | ||||
<div className="Main"> | <div className="Main"> | ||||
{active == "窑炉总览" && <WarnAlert />} | |||||
{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"> | ||||
@@ -103,38 +106,6 @@ export default function Home({ active }) { | |||||
)} | )} | ||||
</div> | </div> | ||||
{/* {fireDir && fireDir == "东火" && ( | |||||
<video | |||||
src="/video/fire_little_top.webm" | |||||
muted | |||||
autoPlay | |||||
loop | |||||
width={4200} | |||||
style={{ | |||||
position: "absolute", | |||||
top: "-160px", | |||||
left: "-910px", | |||||
zIndex: -1, | |||||
}} | |||||
></video> | |||||
)} | |||||
{fireDir && fireDir == "西火" && ( | |||||
<video | |||||
src="/video/fire_little_down.webm" | |||||
muted | |||||
autoPlay | |||||
loop | |||||
width={4200} | |||||
style={{ | |||||
position: "absolute", | |||||
top: "-180px", | |||||
left: "-910px", | |||||
zIndex: -1, | |||||
}} | |||||
></video> | |||||
)} */} | |||||
<div key="bottom-bar" className="Button"> | <div key="bottom-bar" className="Button"> | ||||
<BottomBar /> | <BottomBar /> | ||||
</div> | </div> | ||||