This commit is contained in:
lb 2023-12-01 14:26:47 +08:00
parent 04a15dc14c
commit 69dcea7909
5 changed files with 83 additions and 68 deletions

View File

@ -52,73 +52,73 @@
.TE271 { .TE271 {
top: 160px; top: 160px;
left: 80px; left: 70px;
} }
.TE272 { .TE272 {
top: 254px; /* +94px */ top: 254px; /* +94px */
left: 80px; left: 70px;
} }
.TE273 { .TE273 {
top: 348px; /* +94px */ top: 348px; /* +94px */
left: 80px; left: 70px;
} }
.TE274 { .TE274 {
top: 442px; top: 442px;
left: 80px; left: 70px;
} }
.TE279 { .TE279 {
top: 536px; top: 536px;
left: 80px; left: 70px;
} }
.TE275 { .TE275 {
top: 160px; top: 160px;
left: 216px; left: 206px;
} }
.TE276 { .TE276 {
top: 254px; top: 254px;
left: 216px; /* +136px */ left: 206px; /* +136px */
} }
.TE277 { .TE277 {
top: 348px; /* +94px */ top: 348px; /* +94px */
left: 216px; /* +136px */ left: 206px; /* +136px */
} }
.TE278 { .TE278 {
top: 442px; /* +94px */ top: 442px; /* +94px */
left: 216px; /* +136px */ left: 206px; /* +136px */
} }
.TE280 { .TE280 {
top: 536px; /* +94px */ top: 536px; /* +94px */
left: 216px; /* +136px */ left: 206px; /* +136px */
} }
/** center top **/ /** center top **/
.TE227 { .TE227 {
top: 128px; top: 128px;
left: 616px; left: 660px;
} }
.TE229 { .TE229 {
top: 128px; top: 128px;
left: 736px; /* +120px */ left: 776px; /* +120px */
} }
.TE231 { .TE231 {
top: 128px; top: 128px;
left: 856px; left: 896px;
} }
.TE233 { .TE233 {
top: 128px; top: 128px;
left: 976px; left: 1006px;
} }
.TE235 { .TE235 {
top: 128px; top: 128px;
left: 1096px; left: 1119px;
} }
.TE237 { .TE237 {
top: 128px; top: 128px;
left: 1216px; left: 1236px;
} }
.TE239 { .TE239 {
top: 128px; top: 128px;
left: 1336px; left: 1346px;
} }
.TE241 { .TE241 {
top: 128px; top: 128px;
@ -128,70 +128,70 @@
/** center bottom **/ /** center bottom **/
.TE228 { .TE228 {
top: 620px; top: 620px;
left: 588px; left: 628px;
} }
.TE230 { .TE230 {
top: 620px; top: 620px;
left: 710px; left: 750px;
} }
.TE232 { .TE232 {
top: 620px; top: 620px;
left: 836px; left: 870px;
} }
.TE234 { .TE234 {
top: 620px; top: 620px;
left: 965px; left: 995px;
} }
.TE236 { .TE236 {
top: 620px; top: 620px;
left: 1090px; left: 1120px;
} }
.TE238 { .TE238 {
top: 620px; top: 620px;
left: 1215px; left: 1245px;
} }
.TE240 { .TE240 {
top: 620px; top: 620px;
left: 1340px; left: 1370px;
} }
.TE242 { .TE242 {
top: 620px; top: 620px;
left: 1460px; left: 1480px;
} }
/** center middle **/ /** center middle **/
.TE201 { .TE201 {
top: 410px; top: 410px;
transform: rotate(-1deg); transform: rotate(-1deg);
left: 450px; left: 480px;
} }
.TE202 { .TE202 {
top: 410px; top: 410px;
transform: rotate(-1deg); transform: rotate(-1deg);
left: 580px; left: 610px;
} }
.TE203 { .TE203 {
top: 410px; top: 410px;
transform: rotate(-1deg); transform: rotate(-1deg);
left: 710px; left: 740px;
} }
.TE204 { .TE204 {
top: 410px; top: 410px;
transform: rotate(-1deg); transform: rotate(-1deg);
left: 840px; left: 870px;
} }
.TE205 { .TE205 {
top: 410px; top: 410px;
transform: rotate(-1deg); transform: rotate(-1deg);
left: 970px; left: 1000px;
} }
.TE206 { .TE206 {
top: 410px; top: 410px;
transform: rotate(-1deg); transform: rotate(-1deg);
left: 1100px; left: 1130px;
} }
.TE207 { .TE207 {
top: 335px; top: 330px;
transform: rotate(-1deg); transform: rotate(-1deg);
left: 1260px; left: 1260px;
} }
@ -213,58 +213,58 @@
.TE211 { .TE211 {
top: 410px; top: 410px;
transform: rotate(-1deg); transform: rotate(-1deg);
left: 1530px; left: 1520px;
} }
.TE212 { .TE212 {
top: 410px; top: 410px;
transform: rotate(-1deg); transform: rotate(-1deg);
left: 1660px; left: 1650px;
} }
.TE213 { .TE213 {
top: 410px; top: 410px;
transform: rotate(-1deg); transform: rotate(-1deg);
left: 1790px; left: 1780px;
} }
/** right **/ /** right **/
.TE214 { .TE214 {
top: 160px; top: 168px;
left: 2000px; left: 2000px;
} }
.TE215 { .TE215 {
top: 265px; top: 265px;
left: 2020px; left: 2030px;
} }
.TE216 { .TE216 {
top: 400px; top: 400px;
left: 2030px;
}
.TE217 {
top: 535px;
left: 2050px; left: 2050px;
} }
.TE217 {
top: 520px;
left: 2070px;
}
.TE218 { .TE218 {
top: 670px; top: 640px;
left: 2080px; left: 2090px;
} }
.TE219 { .TE219 {
top: 160px; top: 168px;
left: 2120px; left: 2120px;
} }
.TE220 { .TE220 {
top: 265px; top: 265px;
left: 2140px; left: 2135px;
} }
.TE221 { .TE221 {
top: 400px; top: 400px;
left: 2150px;
}
.TE222 {
top: 535px;
left: 2170px; left: 2170px;
} }
.TE222 {
top: 520px;
left: 2180px;
}
.TE223 { .TE223 {
top: 670px; top: 640px;
left: 2200px; left: 2200px;
} }
.TE224 { .TE224 {
@ -273,9 +273,9 @@
} }
.TE225 { .TE225 {
top: 400px; top: 400px;
left: 2310px; left: 2290px;
} }
.TE226 { .TE226 {
top: 535px; top: 520px;
left: 2280px; left: 2290px;
} }

View File

@ -26,7 +26,7 @@ function TemperatureTop(props) {
top: "0", top: "0",
left: "0", left: "0",
width: "100%", width: "100%",
height: "95vh", height: "80vh",
background: "#ccc3", background: "#ccc3",
zIndex: "-1", zIndex: "-1",
...props.style ...props.style

View File

@ -2,7 +2,7 @@ import { motion, AnimatePresence } from "framer-motion";
import { useRef, useEffect, useMemo, useCallback, useState } from "react"; import { useRef, useEffect, useMemo, useCallback, useState } from "react";
import cls from "../index.module.css"; import cls from "../index.module.css";
// import SocketContext from '../../../../../store/socket-data-provider'; // import SocketContext from '../../../../../store/socket-data-provider';
import { useContext } from "react"; import TemperatureTop from "../../../../Common/TemperatureTop";
function EnterToFloorOne(props) { function EnterToFloorOne(props) {
// const ctx = useContext(SocketContext); // const ctx = useContext(SocketContext);
@ -83,6 +83,14 @@ function EnterToFloorOne(props) {
transition: { duration: 0.3, delay: 2 }, transition: { duration: 0.3, delay: 2 },
}} }}
></motion.div> */} ></motion.div> */}
{/* <TemperatureTop
style={{
top: "208px",
left: "638px",
width: "2380px",
zIndex: 0,
}}
/> */}
</motion.div> </motion.div>
)} )}
</AnimatePresence> </AnimatePresence>

View File

@ -2,11 +2,11 @@ import { motion, AnimatePresence } from "framer-motion";
import { useRef, useEffect, useMemo, useState } from "react"; import { useRef, useEffect, useMemo, useState } from "react";
import cls from "../index.module.css"; import cls from "../index.module.css";
// import SocketContext from '../../../../../store/socket-data-provider'; // import SocketContext from '../../../../../store/socket-data-provider';
import { useContext } from "react"; // import { useContext } from "react";
import TemperatureTop from "../../../../../components/Common/TemperatureTop";
function FloorOneToTwo(props) { function FloorOneToTwo(props) {
// const ctx = useContext(SocketContext);
const ctx = null; const ctx = null;
const fireDir = ctx?.runState?.fireDirection || null; const fireDir = ctx?.runState?.fireDirection || null;
@ -74,7 +74,7 @@ function FloorOneToTwo(props) {
></video> ></video>
)} )}
<motion.div {/* <motion.div
className={cls.videoLayer2} className={cls.videoLayer2}
key="1to2div" key="1to2div"
style={{ style={{
@ -87,7 +87,15 @@ function FloorOneToTwo(props) {
opacity: [0, 0, 0, 0.6, 1], opacity: [0, 0, 0, 0.6, 1],
transition: { duration: 0.3, delay: 2 }, transition: { duration: 0.3, delay: 2 },
}} }}
></motion.div> ></motion.div> */}
<TemperatureTop
style={{
top: "208px",
left: "638px",
width: "2380px",
zIndex: 0,
}}
/>
</motion.div> </motion.div>
)} )}
</AnimatePresence> </AnimatePresence>

View File

@ -87,16 +87,15 @@ function FloorTwoToOne(props) {
transition: { duration: 0.3, delay: 2 }, transition: { duration: 0.3, delay: 2 },
}} }}
></motion.div> */} ></motion.div> */}
<TemperatureTop
style={{
top: "208px",
left: "638px",
width: "2380px",
zIndex: 0
}}
/>
</motion.div> </motion.div>
)} )}
{/* style={{
top: "208px",
left: "638px",
width: "2380px",
zIndex: 0,
}} */}
{/* <TemperatureTop /> */}
</AnimatePresence> </AnimatePresence>
); );
} }