add warn-alert

src/components/Common/WarnAlert/index.jsx

@@ -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;

src/components/Common/WarnAlert/warn-alert.css

@@ -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;
+}

src/pages/Home/index.jsx

@@ -14,6 +14,8 @@ import { useSelector } from "react-redux";
 import { useEffect, useRef } from "react";
 import useRefresh from "../../hooks/useRefresh";
 
+import WarnAlert from "../../components/Common/WarnAlert";
+
 export default function Home({ active }) {
   useRefresh(true);
 
@@ -33,6 +35,7 @@ export default function Home({ active }) {
 
   return (
     <div className="Main">
+      {active == "窑炉总览" && <WarnAlert />}
       {active != "窑炉总览" && <div className="bgDitu"></div>}
       {active == "窑炉总览" && <div className="bgOverview"></div>}
       <AnimatePresence mode="wait">
@@ -103,38 +106,6 @@ export default function Home({ active }) {
               )}
             </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">
               <BottomBar />
             </div>