feat: 大屏

src/components/Yidian/Yidian.tsx

@@ -158,6 +158,7 @@ import {
   FundProjectionScreenOutlined,
   HomeOutlined,
 } from "@ant-design/icons";
+import { BigScreen } from "../../screen/bigscreen/bigscreen";
 
 interface Props {
   className?: string;
@@ -2779,7 +2780,7 @@ export const Yidian: FC<Props> = memo(function Yidian(props = {}) {
               </div>
             </div>
           )}
-          {currentPage == "bigscreen" && <div> 驾驶舱 </div>}
+          {currentPage == "bigscreen" && <BigScreen></BigScreen>}
         </div>
         <div className={classes.header}>
           <div className={classes.headerFrame}></div>

src/screen/bigscreen/bigscreen.module.css

@@ -0,0 +1,54 @@
+.screen {
+	/* position: fixed; */
+	/* z-index: 9099; */
+	/* top: 0; */
+	/* left: 0; */
+	width: 1920px;
+	height: 1080px;
+	position: absolute;
+    top: 85px;
+	left: 10px;
+	transform: scale(calc(1695/1920));
+	transform-origin: 0 0;
+	/* overflow: scroll; */
+}
+.pop{
+	position: absolute;
+	width: 140px;
+	height: 60px;
+	z-index: 1;
+	cursor: pointer;
+	/* background: red; */
+}
+.pop img{
+	display: none;
+	position: absolute;
+	top: 100%;
+	left: -120px;
+	width: 374px;
+	height:462px;
+}
+.pop:hover img {
+	display: block;
+}
+/* img {
+	position: absolute;
+	top: 0;
+	left: 0;
+	z-index: 1;
+	padding-top: 100px;
+	width: 374px;
+	height:462px;
+}
+img::before{
+	content: "";
+	position: absolute;
+	top: 100px;
+	left: 0;
+	width: 100px;
+	height: 100px;
+
+}
+img:hover{
+	display: none;
+} */

src/screen/bigscreen/bigscreen.tsx

@@ -0,0 +1,79 @@
+import { FC } from "react";
+
+import bg from "./大屏.png";
+import popAnhui from "./弹窗安徽.png";
+import popJiangsu from "./弹窗江苏.png";
+import popShanghai from "./弹窗上海.png";
+import popZhejiang from "./弹窗浙江.png";
+
+import classes from "./bigscreen.module.css";
+
+export const BigScreen: FC<{}> = () => {
+  return (
+    <div
+      className={classes.screen}
+      style={{
+        background: `url(${bg})`,
+      }}
+    >
+      <div
+        className={classes.pop}
+        style={{
+          top: "662px",
+          left: "533px",
+        }}
+      >
+        <img src={popAnhui}></img>
+      </div>
+      <div
+        className={classes.pop}
+        style={{
+          top: "252px",
+          left: "503px",
+        }}
+      >
+        <img src={popJiangsu}></img>
+      </div>
+      <div
+        className={classes.pop}
+        style={{
+          top: "380px",
+          left: "303px",
+        }}
+      >
+        <img src={popAnhui}></img>
+      </div>
+      <div
+        className={classes.pop}
+        style={{
+          top: "480px",
+          left: "650px",
+        }}
+      >
+        <img src={popShanghai}></img>
+      </div>
+
+      {/* <img
+        style={{
+          top: "250px",
+          left: "410px",
+        }}
+        src={popJiangsu}
+      ></img>
+      <img
+        style={{
+          top: "650px",
+          left: "450px",
+        }}
+        src={popShanghai}
+      ></img>
+      <img
+        style={{
+          top: "650px",
+          left: "450px",
+        }}
+        src={popZhejiang}
+      ></img> */}
+    </div>
+  );
+};