Newer
Older
DH_Apicture / index.html
@wudi wudi 16 days ago 7 KB 1
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="utf-8" />
  5. <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
  6. <meta name="renderer" content="webkit" />
  7. <meta name="referrer" content="no-referrer" />
  8. <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" />
  9.  
  10. <link rel="icon" href="/favicon.ico" />
  11. <title>东湖高新智慧水务大脑</title>
  12. <!--[if lt IE 11
  13. ]><script>
  14. window.location.href = '/html/ie.html';
  15. </script><!
  16. [endif]-->
  17.  
  18. <!-- 引入gis地图服务 -->
  19. <!-- <script
  20. src="https://newfiber-cloud-1255570142.cos.ap-chengdu.myqcloud.com/chanpinhua/gismap/init_v1.js"
  21. author="wudi"
  22. ></script>-->
  23.  
  24. <!-- 引入海康视频插件 -->
  25. <script type="text/javascript" src="/static/hik/jquery-1.12.4.min.js"></script>
  26. <script type="text/javascript" src="/static/hik/jsWebControl-1.0.0.min.js"></script>
  27. <script type="text/javascript" src="/static/hik/jsencrypt.min.js"></script>
  28. <script type="text/javascript" src="/static/peojecTconfiguration/peojecTconfiguration.js"></script>
  29.  
  30. <style>
  31. html,
  32. body,
  33. #app {
  34. height: 100%;
  35. margin: 0px;
  36. padding: 0px;
  37. }
  38.  
  39. .chromeframe {
  40. margin: 0.2em 0;
  41. background: #ccc;
  42. color: #000;
  43. padding: 0.2em 0;
  44. }
  45.  
  46. #loader-wrapper {
  47. position: fixed;
  48. top: 0;
  49. left: 0;
  50. width: 100%;
  51. height: 100%;
  52. z-index: 999999;
  53. }
  54.  
  55. #loader {
  56. display: block;
  57. position: relative;
  58. left: 50%;
  59. top: 40%;
  60. width: 8rem;
  61. height: 8rem;
  62. margin: -75px 0 0 -4rem;
  63. border-radius: 50%;
  64. border: 3px solid transparent;
  65. border-top-color: #fff;
  66. -webkit-animation: spin 2s linear infinite;
  67. -ms-animation: spin 2s linear infinite;
  68. -moz-animation: spin 2s linear infinite;
  69. -o-animation: spin 2s linear infinite;
  70. animation: spin 2s linear infinite;
  71. z-index: 1001;
  72. }
  73.  
  74. #loader:before {
  75. content: '';
  76. position: absolute;
  77. top: 2rem;
  78. left: 2rem;
  79. right: 2rem;
  80. bottom: 2rem;
  81. border-radius: 50%;
  82. border: 3px solid transparent;
  83. border-top-color: #fff;
  84. -webkit-animation: spin 3s linear infinite;
  85. -moz-animation: spin 3s linear infinite;
  86. -o-animation: spin 3s linear infinite;
  87. -ms-animation: spin 3s linear infinite;
  88. animation: spin 3s linear infinite;
  89. }
  90.  
  91. #loader:after {
  92. content: '';
  93. position: absolute;
  94. top: 15px;
  95. left: 15px;
  96. right: 15px;
  97. bottom: 15px;
  98. border-radius: 50%;
  99. border: 3px solid transparent;
  100. border-top-color: #fff;
  101. -moz-animation: spin 1.5s linear infinite;
  102. -o-animation: spin 1.5s linear infinite;
  103. -ms-animation: spin 1.5s linear infinite;
  104. -webkit-animation: spin 1.5s linear infinite;
  105. animation: spin 1.5s linear infinite;
  106. }
  107.  
  108. @-webkit-keyframes spin {
  109. 0% {
  110. -webkit-transform: rotate(0deg);
  111. -ms-transform: rotate(0deg);
  112. transform: rotate(0deg);
  113. }
  114.  
  115. 100% {
  116. -webkit-transform: rotate(360deg);
  117. -ms-transform: rotate(360deg);
  118. transform: rotate(360deg);
  119. }
  120. }
  121.  
  122. @keyframes spin {
  123. 0% {
  124. -webkit-transform: rotate(0deg);
  125. -ms-transform: rotate(0deg);
  126. transform: rotate(0deg);
  127. }
  128.  
  129. 100% {
  130. -webkit-transform: rotate(360deg);
  131. -ms-transform: rotate(360deg);
  132. transform: rotate(360deg);
  133. }
  134. }
  135.  
  136. #loader-wrapper .loader-section {
  137. position: fixed;
  138. top: 0;
  139. width: 51%;
  140. height: 100%;
  141. background: #7171c6;
  142. z-index: 1000;
  143. -webkit-transform: translateX(0);
  144. -ms-transform: translateX(0);
  145. transform: translateX(0);
  146. }
  147.  
  148. #loader-wrapper .loader-section.section-left {
  149. left: 0;
  150. }
  151.  
  152. #loader-wrapper .loader-section.section-right {
  153. right: 0;
  154. }
  155.  
  156. .loaded #loader-wrapper .loader-section.section-left {
  157. -webkit-transform: translateX(-100%);
  158. -ms-transform: translateX(-100%);
  159. transform: translateX(-100%);
  160. -webkit-transition: all 0.7s 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
  161. transition: all 0.7s 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
  162. }
  163.  
  164. .loaded #loader-wrapper .loader-section.section-right {
  165. -webkit-transform: translateX(100%);
  166. -ms-transform: translateX(100%);
  167. transform: translateX(100%);
  168. -webkit-transition: all 0.7s 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
  169. transition: all 0.7s 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
  170. }
  171.  
  172. .loaded #loader {
  173. opacity: 0;
  174. -webkit-transition: all 0.3s ease-out;
  175. transition: all 0.3s ease-out;
  176. }
  177.  
  178. .loaded #loader-wrapper {
  179. visibility: hidden;
  180. -webkit-transform: translateY(-100%);
  181. -ms-transform: translateY(-100%);
  182. transform: translateY(-100%);
  183. -webkit-transition: all 0.3s 1s ease-out;
  184. transition: all 0.3s 1s ease-out;
  185. }
  186.  
  187. .no-js #loader-wrapper,
  188. .l7-control-logo {
  189. display: none;
  190. }
  191.  
  192. .no-js h1 {
  193. color: #222222;
  194. }
  195.  
  196. #loader-wrapper .load_title {
  197. font-family: 'Open Sans';
  198. color: #fff;
  199. font-size: 0.8rem;
  200. width: 100%;
  201. text-align: center;
  202. z-index: 9999999999999;
  203. position: absolute;
  204. top: 60%;
  205. opacity: 1;
  206. line-height: 30px;
  207. }
  208.  
  209. #loader-wrapper .load_title span {
  210. font-weight: normal;
  211. font-style: italic;
  212. font-size: 1rem;
  213. color: #fff;
  214. opacity: 0.5;
  215. }
  216.  
  217. .l7-popup-content{
  218. background:rgba(0,0,0,0) !important;
  219. }
  220. </style>
  221. </head>
  222.  
  223. <body style="font-size: 0">
  224. <div id="app">
  225. <div id="loader-wrapper">
  226. <div id="loader"></div>
  227. <div class="loader-section section-left"></div>
  228. <div class="loader-section section-right"></div>
  229. <div class="load_title">正在加载系统资源,请耐心等待</div>
  230. </div>
  231. </div>
  232. <script type="module" src="/src/main.js"></script>
  233. </body>
  234. </html>
  235. <!--<script async src="/static/libs/mapbox/gcoord.global.prod.js"></script>
  236. <script src="/static/libs/mapbox/mapbox-gl1.js"></script>
  237. <script src="/static/libs/mapbox/extend/CanvasLayer.js"></script>
  238. <script src="/static/libs/mapbox/extend/WMSLayer.js"></script>
  239. <script src="/static/libs/mapbox/extend/WMTSLayer.js"></script>
  240. <script src="/static/libs/mapbox/extend/XYZLayer.js"></script>
  241. <script src="/static/libs/mapbox/extend/XYZLayer1.js"></script>
  242. <script src="/static/libs/mapbox/extend/MeatureTool.js"></script>
  243. <script src="/static/libs/mapbox/extend/mapbox-gl-contextmenu.js"></script>
  244. <script src="/static/libs/mapbox/extend/mapbox-gl-draw.js"></script>
  245. <script src="/static/libs/mapbox/extend/TrackLayer.js"></script>
  246. <script src="/static/libs/mapbox/extend/RainsLayer.js"></script>
  247. <script src="/static/libs/mapbox/extend/RainfallEffect.js"></script>
  248. <script src="/static/libs/mapbox/libs/plotty.min.js"></script>
  249. <script src="/static/libs/mapbox/libs/tiff.min.js"></script>
  250. <script src="/static/libs/mapbox/libs/turf.min.js"></script>
  251. <script src="/static/libs/mapbox/libs/terraformer.js"></script>
  252. <script src="/static/libs/mapbox/libs/lodash.js"></script>-->
  253. <script src="https://supermap6.wh-nf.cn:8090/resource/v4/init.js" newfiber></script>
  254. <script src="//api.map.baidu.com/api?type=webgl&v=1.0&ak=V6pnSILC0g5Al0ue5KzqD9Hd7mqXoi6N"></script>