92 lines
2.6 KiB
JavaScript
92 lines
2.6 KiB
JavaScript
import React, {useEffect, useState} from "react";
|
|
import less from "./HeadLayout.less";
|
|
import Flex from "../components/Flex";
|
|
import AppHelper from "@/utils/AppHelper";
|
|
|
|
const designWidth = 1280, designHeight = 720;
|
|
|
|
/**
|
|
* 获取头部高度
|
|
* @returns {number}
|
|
*/
|
|
export const getHeaderHeight = () => {
|
|
return 60;
|
|
};
|
|
|
|
export default ({children, location}) => {
|
|
const [screen, setScreen] = useState({width: designWidth, height: designHeight});
|
|
const [scale, setScale] = useState(1);
|
|
const [boxList, setBoxList] = useState([]);
|
|
|
|
useEffect(() => {
|
|
getList();
|
|
windowScale()
|
|
}, []);
|
|
|
|
///////////////////////////////////////// 逻辑方法
|
|
|
|
const getList = () => {
|
|
let tmpBoxList = [
|
|
{id: "/home", name: "首页"},
|
|
{id: "/vehicle", name: "智慧交通"},
|
|
]
|
|
setBoxList(tmpBoxList);
|
|
};
|
|
|
|
/**
|
|
* 屏幕比例适配
|
|
*/
|
|
const windowScale = () => {
|
|
let tmpWidth = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;
|
|
let tmpHeight = window.innerHeight || document.documentElement.clientWidth || document.body.clientHeight;
|
|
|
|
let ratio = tmpWidth / designWidth;
|
|
if (tmpWidth > tmpHeight) {
|
|
setScreen({width: tmpWidth / ratio, height: tmpHeight / ratio});
|
|
} else {
|
|
setScreen({width: designWidth, height: designHeight});
|
|
}
|
|
setScale(ratio);
|
|
};
|
|
|
|
window.onresize = windowScale;
|
|
|
|
///////////////////////////////////////// 页面渲染
|
|
|
|
return (
|
|
<Flex className={less.body} direction={"column"}>
|
|
<Flex
|
|
className={less.container} direction={"column"} id={"headerContainer"}
|
|
style={{
|
|
width: screen.width, height: screen.height,
|
|
transform: "scale(" + scale + ")",
|
|
}}
|
|
>
|
|
<Flex className={less.header}>
|
|
<img src={"./imgs/title.png"} className={less.logo}/>
|
|
|
|
<Flex className={less.module} alignItems={"center"}>
|
|
{boxList.map((it) => {
|
|
return (
|
|
<Flex
|
|
key={it.id} className={less.box}
|
|
justify={"center"} alignItems={"center"}
|
|
style={{
|
|
backgroundImage: it.id == location.pathname ? "url(./imgs/module_active.png)" : "url(./imgs/module_normal.png)",
|
|
}}
|
|
onClick={() => AppHelper.routerPush(it.id)}
|
|
>
|
|
{it.name}
|
|
</Flex>
|
|
);
|
|
})}
|
|
</Flex>
|
|
</Flex>
|
|
|
|
<Flex itemGrow={1} className={less.content} direction={"column"}>{children}</Flex>
|
|
|
|
</Flex>
|
|
</Flex>
|
|
);
|
|
};
|