Skip to content

R
report-html-template
Commit 3b35a0b7 by 呼呼啦啦
Options

兼容大屏

parent b96a9596
正在显示 包含 56 行增加 和 6 行删除
lushan-report/report.css
html,
body,
.wrap {
height: 100%;
}
body {
background: linear-gradient(to bottom, #162235, #0d192e);
}
* {
margin: 0;
padding: 0;
......@@ -19,6 +24,10 @@ body,
background: url(./assets/bg.png) no-repeat;
background-size: 100% 100%;
color: #fff;
transform-origin: 0 0;
position: absolute;
left: 50%;
top: 50%;
}
.top-title {
height: 60px;
......@@ -41,9 +50,11 @@ body,
}
.content {
height: calc(100% - 70px);
max-width: 900px;
max-width: 60%;
overflow: auto;
margin: auto;
padding-top: 20px;
box-sizing: border-box;
}
.content::-webkit-scrollbar {
display: none;
......@@ -238,7 +249,7 @@ body,
}
.mask {
background-color: #2c3849;
background-color: #0c0e14;
display: flex;
flex-direction: column;
align-items: center;
......@@ -358,22 +369,26 @@ body,
height: 6px;
}
.repair-require-chart {
width: 80px;
height: 80px;
width: 86px;
height: 86px;
background: url(./assets/repair-require-bg.png) no-repeat;
background-size: 100% 100%;
padding: 6px;
position: relative;
top: -7px;
}
.repair-require-chart-wrapper,
.contract-chart-wrapper {
height: 100%;
}
.contract-chart {
width: 80px;
height: 80px;
width: 86px;
height: 86px;
background: url(./assets/contract-bg.png) no-repeat;
background-size: 100% 100%;
padding: 6px;
position: relative;
top: -7px;
}
.advise-info .content-wrap {
......
lushan-report/report.html
......@@ -12,6 +12,11 @@
<script src="https://cdn.bootcss.com/echarts/4.6.0/echarts.min.js"></script>
-->
<link rel="stylesheet" href="report.css" />
<script>
console.log(window.innerWidth, window.innerHeight)
</script>
</head>
<body>
......@@ -355,6 +360,36 @@
</div>
</div>
<script>
window.onload = function () {
windowResize();
}
window.addEventListener("resize", windowResize);
function windowResize() {
let targetX = 1920;
let targetY = 1080;
let currentX =
document.documentElement.clientWidth || document.body.clientWidth;
let currentY =
document.documentElement.clientHeight || document.body.clientHeight;
const wrapDom = document.querySelector(".wrap");
if(currentX <= 768){
return wrapDom.style = `position: static`;
}
const scale =
(currentX / currentY) <
(targetX / targetY)
?
(currentX / targetX)
:
(currentY / targetY)
wrapDom.style = `width:${targetX}px; height:${targetY}px;transform: scale(${scale}) translate(-50%, -50%);`;
}
</script>
<script type="text/javascript">
let myChart, myChart2, companyTypeChart, investChart;
......
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论