<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width,initial-scale=1.0" /> <title>新烽光电工程作业及监控系统</title> <link rel="stylesheet" href="http://223.220.58.86:6081/arcgis_js_v329_api/arcgis_js_api/library/3.29/3.29/esri/css/esri.css" /> <script src="http://223.220.58.86:6081/arcgis_js_v329_api/arcgis_js_api/library/3.29/3.29/init.js"></script> </head> <body> <!-- <span class="ChangeBGC">换色</span> --> <div id="app"> <!-- <img src="./static/img/BGIMG.png" alt="" id="BGIMG"> --> </div> <!-- built files will be auto injected --> </body> <script> //author:caibaojian //website:http://caibaojian.com //weibo:http:weibo.com/kujian //兼容UC竖屏转横屏出现的BUG //自定义设计稿的宽度:designWidth //最大宽度:maxWidth //这段js的最后面有两个参数记得要设置,一个为设计稿实际宽度,一个为制作稿最大宽度,例如设计稿为750,最大宽度为750,则为(750,750) (function(designWidth, maxWidth) { var doc = document, win = window, docEl = doc.documentElement, remStyle = document.createElement("style"), tid; function refreshRem() { var width = docEl.getBoundingClientRect().width; maxWidth = maxWidth || 540; width > maxWidth && (width = maxWidth); var rem = (width * 100) / designWidth; remStyle.innerHTML = "html{font-size:" + rem + "px;}"; } if (docEl.firstElementChild) { docEl.firstElementChild.appendChild(remStyle); } else { var wrap = doc.createElement("div"); wrap.appendChild(remStyle); doc.write(wrap.innerHTML); wrap = null; } //要等 wiewport 设置好后才能执行 refreshRem,不然 refreshRem 会执行2次; refreshRem(); win.addEventListener( "resize", function() { clearTimeout(tid); //防止执行两次 tid = setTimeout(refreshRem, 300); }, false ); win.addEventListener( "pageshow", function(e) { if (e.persisted) { // 浏览器后退的时候重新计算 clearTimeout(tid); tid = setTimeout(refreshRem, 300); } }, false ); if (doc.readyState === "complete") { doc.body.style.fontSize = "16px"; } else { doc.addEventListener( "DOMContentLoaded", function(e) { doc.body.style.fontSize = "16px"; }, false ); } })(1920, 1920); // let ChangeBGC = document.querySelector(".ChangeBGC"); // let body = document.querySelector("body"); // console.log(ChangeBGC); // ChangeBGC.addEventListener("click", () => { // if (this.value == "换色") { // body.style.background = `url("./static/img/white.png") 100% 100%`; // this.value = `黑色`; // } else { // body.style.background = `url("./static/img/BGIMG.png") 100% 100%`; // this.value = `换色`; // } // }); </script> <style> html { width: 100%; height: 100%; padding: 0; margin: 0; } body { position: relative; width: 100%; height: 100%; padding: 0; margin: 0; background: url("./static/img/BGIMG.jpg") 100% 100%; /* background: url("./static/img/tu.JPG") 100% 100%; */ /* background-color: black; */ } /* .ChangeBGC { position: absolute; top: 9px; right: 230px; z-index: 9999; background-color: #000; color: #fff; cursor: pointer; } */ /* #BGIMG { width: 100%; height: 100%; position: absolute; z-index: 9999; } */ </style> </html>