add warn-alert
This commit is contained in:
parent
19ea3287ae
commit
43635ff398
BIN
src/assets/warn-bg.png
Normal file
BIN
src/assets/warn-bg.png
Normal file
Binary file not shown.
After Width: | Height: | Size: 2.0 KiB |
BIN
src/assets/warn-icon.png
Normal file
BIN
src/assets/warn-icon.png
Normal file
Binary file not shown.
After Width: | Height: | Size: 2.2 KiB |
BIN
src/components/Common/WarnAlert/3.png
Normal file
BIN
src/components/Common/WarnAlert/3.png
Normal file
Binary file not shown.
After Width: | Height: | Size: 1.3 KiB |
20
src/components/Common/WarnAlert/index.jsx
Normal file
20
src/components/Common/WarnAlert/index.jsx
Normal file
@ -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;
|
58
src/components/Common/WarnAlert/warn-alert.css
Normal file
58
src/components/Common/WarnAlert/warn-alert.css
Normal file
@ -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;
|
||||||
|
}
|
BIN
src/components/Common/WarnAlert/warn-icon.png
Normal file
BIN
src/components/Common/WarnAlert/warn-icon.png
Normal file
Binary file not shown.
After Width: | Height: | Size: 2.2 KiB |
@ -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>
|
||||||
|
Loading…
Reference in New Issue
Block a user