index.html 2.7 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8" />
  5. <link rel="icon" href="/favicon.ico" />
  6. <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  7. <title>睿图接口平台1.0</title>
  8. <!-- 引入Cesium -->
  9. <link rel="stylesheet" type="text/css" href="./public/ThirdParty/Cesium-1.93/Widgets/widgets.css" />
  10. <script src="./ThirdParty/Cesium-1.93/Cesium.js"></script>
  11. <!-- 引入生成热力图 -->
  12. <!-- <script src="./ThirdParty/CesiumHeatmap.js"></script> -->
  13. <script src="/src/jtMap3d/index.js"></script>
  14. </head>
  15. <body>
  16. <div id="app"></div>
  17. <script type="module" src="/src/main.js"></script>
  18. <script type="text/javascript">
  19. (function(designWidth, maxWidth) {
  20. var doc = document,
  21. win = window,
  22. docEl = doc.documentElement,
  23. remStyle = document.createElement("style"),
  24. tid;
  25. function refreshRem() {
  26. var width = docEl.getBoundingClientRect().width;
  27. console.log('宽度', width)
  28. maxWidth = maxWidth || 540;
  29. width < 1000 && (width = 1000);
  30. width > maxWidth && (width = 1920);
  31. var rem = width * 1 / designWidth;
  32. remStyle.innerHTML = 'html{font-size:' + rem + 'px;}';
  33. }
  34. if (docEl.firstElementChild) {
  35. docEl.firstElementChild.appendChild(remStyle);
  36. } else {
  37. var wrap = doc.createElement("div");
  38. wrap.appendChild(remStyle);
  39. doc.write(wrap.innerHTML);
  40. wrap = null;
  41. }
  42. //要等 wiewport 设置好后才能执行 refreshRem,不然 refreshRem 会执行2次;
  43. refreshRem();
  44. win.addEventListener("resize", function() {
  45. clearTimeout(tid); //防止执行两次
  46. tid = setTimeout(refreshRem, 300);
  47. }, false);
  48. win.addEventListener("pageshow", function(e) {
  49. if (e.persisted) { // 浏览器后退的时候重新计算
  50. clearTimeout(tid);
  51. tid = setTimeout(refreshRem, 300);
  52. }
  53. }, false);
  54. if (doc.readyState === "complete") {
  55. doc.body.style.fontSize = "16rem";
  56. } else {
  57. doc.addEventListener("DOMContentLoaded", function(e) {
  58. doc.body.style.fontSize = "16rem";
  59. }, false);
  60. }
  61. })(1920, 1920);
  62. </script>
  63. </body>
  64. </html>
  65. <style>
  66. /*定义滚动条宽高及背景,宽高分别对应横竖滚动条的尺寸*/
  67. ::-webkit-scrollbar {
  68. /*对垂直流动条有效*/
  69. width: 6px;
  70. /*对水平流动条有效*/
  71. height: 6px;
  72. }
  73. /*定义滚动条的轨道颜色、内阴影及圆角*/
  74. ::-webkit-scrollbar-track {
  75. background-color: rgb(0 0 0 / 5%);
  76. }
  77. /*定义滑块颜色、内阴影及圆角*/
  78. ::-webkit-scrollbar-thumb {
  79. background-color: rgb(144 147 153 / 30%);
  80. border-radius: 2px;
  81. box-shadow: inset 0 0 6px rgb(0 0 0 / 20%);
  82. }
  83. /*定义滑块悬停变化颜色、内阴影及圆角*/
  84. ::-webkit-scrollbar-thumb:hover {
  85. background-color: #b6b7b9;
  86. }
  87. </style>