Skip to content

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

兼容大屏

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