main
zhangqun 2 years ago
parent bf7b45d7df
commit 53a7cfa4bd
  1. 25
      src/layouts/CommandPlatformLayout.js
  2. 6
      src/layouts/CommandPlatformLayout.less
  3. 4
      src/pages/CommandPlatform/One.js
  4. 15
      src/pages/CommandPlatform/One.less

@ -129,7 +129,32 @@ class CommandPlatformLayout extends React.PureComponent {
}); */ }); */
return `${currRouterData.name}`; return `${currRouterData.name}`;
}; };
setRemPc = () => {
var docEl = document.documentElement,
resizeEvt = "orientationchange" in window ? "orientationchange" : "resize",
recalc = function () {
var clientWidth = docEl.clientWidth;
if (!clientWidth) return;
if (location.href.indexOf("express") > -1) {
docEl.style.fontSize = "";
} else if (clientWidth >= 7680) {
docEl.style.fontSize = "100px"; //1rem = 100px
} else {
docEl.style.fontSize = 100 * (clientWidth / 1920) + "px";
}
};
if (!document.addEventListener) return;
window.addEventListener(resizeEvt, recalc, false);
document.addEventListener("DOMContentLoaded", recalc, false);
// var whdef = 100 / 7680;
// var bodyWidth = document.body.clientWidth;
// var rem = bodyWidth * whdef;
// document.getElementsByTagName('html')[0].style.fontSize = rem + 'px';
}
componentDidMount(){
this.setRemPc()
}
render() { render() {
const { const {
children, children,

@ -1,6 +1,8 @@
html, body{ html, body{
width: 7680px; min-height: 1280px;
height: 2160px; min-width: 1920px;
// width: 100%;
// height: 100%;
} }
.defaulthiew{ .defaulthiew{
height: auto; height: auto;

@ -23,7 +23,7 @@ class One extends React.PureComponent {
render() { render() {
return ( return (
<div className={styles.container}> <div className={styles.container}>
<div className={styles.left}> {/* <div className={styles.left}>
<div style={{ width: 540 }}> <div style={{ width: 540 }}>
<Congestion /> <Congestion />
<Rank /> <Rank />
@ -46,7 +46,7 @@ class One extends React.PureComponent {
<Baseline /> <Baseline />
<Opinion/> <Opinion/>
</div> </div>
</div> </div> */}
</div> </div>
); );
} }

@ -1,14 +1,18 @@
// @import '../themes/default.less'; // @import '../themes/default.less';
.container { .container {
width: 100%;
height: 100%;
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
padding: 0 24px; padding: 0 0.3rem;
background: url(../../assets/CommandPlatform/background.png); background: url(../../assets/CommandPlatform/background.png);
background-size: 100% 100%; background-size: 100% 100%;
background-repeat: no-repeat; background-repeat: no-repeat;
.left { .left {
width: 1270px; width: 21.36rem;
padding: 0 76px 0 30px; height: 20.64rem;
padding: 0 0.76rem 0 1.5rem;
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
@ -23,8 +27,9 @@
} }
.right { .right {
width: 1270px; width: 21.31rem;
padding: 0 88px 0 28px; height: 20.55rem;
padding: 0 1.6rem 0 0.6rem;
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;

Loading…
Cancel
Save