You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
63 lines
2.0 KiB
63 lines
2.0 KiB
import { useState, useEffect, useContext, useRef } from 'react'
|
|
import GlobalContext from '../../utils/GlobalContext';
|
|
import './index.less';
|
|
import Header from './Header';
|
|
import Content from './Content';
|
|
import { useSize } from 'ahooks'
|
|
export default function Main(props) {
|
|
const { siteTitle } = useContext(GlobalContext);
|
|
// const rootRef = useRef();
|
|
useEffect(() => {
|
|
if (siteTitle) {
|
|
document.title = siteTitle;
|
|
}
|
|
}, [siteTitle])
|
|
|
|
const [style, setStyle] = useState();
|
|
const rootRef = useRef();
|
|
const size = useSize(rootRef)
|
|
|
|
useEffect(() => {
|
|
// let screenSize = defaultSize;
|
|
// if (!screenSize) {
|
|
let screenSize = [1920, 1080]
|
|
// }
|
|
// screenSize[1] = (document.body.offsetHeight / document.body.offsetWidth) * screenSize[0];
|
|
screenSize[0] = (document.body.offsetWidth / document.body.offsetHeight) * screenSize[1];
|
|
// console.log(rootRef?.current?.offsetWidth / rootRef?.current?.offsetHeight)
|
|
if (size) {
|
|
const { width, height } = size;
|
|
const resw = screenSize[0] / width;
|
|
const resh = screenSize[1] / height;
|
|
let res = Math.max(resw, resh);
|
|
|
|
let scale = 1 / res;
|
|
|
|
const realWidth = screenSize[0] * scale;
|
|
const realHeight = screenSize[1] * scale;
|
|
|
|
let left = (width - realWidth) / 2;
|
|
let top = (height - realHeight) / 2;
|
|
setStyle({
|
|
transform: `scale(${scale})`,
|
|
left: left,
|
|
top: top,
|
|
scale,
|
|
width: screenSize[0],
|
|
height: screenSize[1],
|
|
transformOrigin: '0 0'
|
|
})
|
|
}
|
|
}, [size]);
|
|
|
|
return <div className='main' ref={rootRef}>
|
|
{style && <div className='layout-v' style={style}>
|
|
<div className='header layout-h'>
|
|
<Header rootRef={rootRef} />
|
|
</div>
|
|
<div className='fill h0'>
|
|
<Content />
|
|
</div>
|
|
</div>}
|
|
</div>;
|
|
} |