79 lines
2.0 KiB
JavaScript
79 lines
2.0 KiB
JavaScript
import React from 'react';
|
|
import { useEffect, useState } from 'react';
|
|
|
|
import './global.less';
|
|
import './index.less';
|
|
import Head from '../components/Head';
|
|
import LeftBar from '../components/LeftBar';
|
|
import BottomBar from '../components/BottomBar';
|
|
import RightBar from '../components/RightBar';
|
|
import CenterTopData from '../components/CenterTopData';
|
|
import Slider from '../components/Slider';
|
|
|
|
import V3DBG from '../assets/V3DBG.png';
|
|
|
|
import V3D from './V3D';
|
|
|
|
import { SocketContextProvider } from '../store/socket-data-provider';
|
|
|
|
export default function index() {
|
|
const [width, setWidth] = useState(window.innerWidth);
|
|
const [value, setValue] = useState(100);
|
|
|
|
const v = (value / 100).toFixed(2);
|
|
const styles = {
|
|
transform: `scale(${v})`,
|
|
// transform: `scale(${v * 24 / 33}, ${v})`,
|
|
transformOrigin: 'top left',
|
|
};
|
|
|
|
useEffect(() => {
|
|
let fn = (e) => {
|
|
console.log('add fn');
|
|
if (e.shiftKey && e.key === 'L') {
|
|
document.getElementById('slider').classList.toggle('show');
|
|
}
|
|
};
|
|
let fn2 = () => {
|
|
console.log('add fn2');
|
|
setTimeout(() => {
|
|
document.getElementById('slider').classList.remove('show');
|
|
}, 200);
|
|
};
|
|
|
|
document.addEventListener('keydown', fn);
|
|
document.getElementById('slider').addEventListener('mouseleave', fn2);
|
|
|
|
return () => {
|
|
console.log('remove fn, fn2');
|
|
document.removeEventListener('keydown', fn);
|
|
document.getElementById('slider').removeEventListener('mouseleave', fn2);
|
|
};
|
|
}, [value]);
|
|
|
|
return (
|
|
// <FullScreenContainer>
|
|
<SocketContextProvider>
|
|
<div id="FullScreen" style={styles}>
|
|
<Head />
|
|
<div className="Main">
|
|
<LeftBar />
|
|
<div className="Center">
|
|
<div className="CenterData">
|
|
<CenterTopData />
|
|
</div>
|
|
<img src={V3DBG} alt="图片加载错误" className="V3DBG" />
|
|
<div className="V3DBorder">{/* <V3D /> */}</div>
|
|
<div className="Button">
|
|
<BottomBar />
|
|
</div>
|
|
</div>
|
|
<RightBar />
|
|
</div>
|
|
</div>
|
|
<Slider handleSlide={setValue} />
|
|
</SocketContextProvider>
|
|
// </FullScreenContainer>
|
|
);
|
|
}
|