Newer
Older
DH_Apicture / index.html
@wudi wudi 17 days ago 6 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. <!-- 引入大华视频 插件模式 -->
  31. <script type="text/javascript" src="/static/DH/videoPlayer.js"></script>
  32.  
  33. <style>
  34. html,
  35. body,
  36. #app {
  37. height: 100%;
  38. margin: 0px;
  39. padding: 0px;
  40. }
  41.  
  42. .chromeframe {
  43. margin: 0.2em 0;
  44. background: #ccc;
  45. color: #000;
  46. padding: 0.2em 0;
  47. }
  48.  
  49. #loader-wrapper {
  50. position: fixed;
  51. top: 0;
  52. left: 0;
  53. width: 100%;
  54. height: 100%;
  55. z-index: 999999;
  56. }
  57.  
  58. #loader {
  59. display: block;
  60. position: relative;
  61. left: 50%;
  62. top: 40%;
  63. width: 8rem;
  64. height: 8rem;
  65. margin: -75px 0 0 -4rem;
  66. border-radius: 50%;
  67. border: 3px solid transparent;
  68. border-top-color: #fff;
  69. -webkit-animation: spin 2s linear infinite;
  70. -ms-animation: spin 2s linear infinite;
  71. -moz-animation: spin 2s linear infinite;
  72. -o-animation: spin 2s linear infinite;
  73. animation: spin 2s linear infinite;
  74. z-index: 1001;
  75. }
  76.  
  77. #loader:before {
  78. content: '';
  79. position: absolute;
  80. top: 2rem;
  81. left: 2rem;
  82. right: 2rem;
  83. bottom: 2rem;
  84. border-radius: 50%;
  85. border: 3px solid transparent;
  86. border-top-color: #fff;
  87. -webkit-animation: spin 3s linear infinite;
  88. -moz-animation: spin 3s linear infinite;
  89. -o-animation: spin 3s linear infinite;
  90. -ms-animation: spin 3s linear infinite;
  91. animation: spin 3s linear infinite;
  92. }
  93.  
  94. #loader:after {
  95. content: '';
  96. position: absolute;
  97. top: 15px;
  98. left: 15px;
  99. right: 15px;
  100. bottom: 15px;
  101. border-radius: 50%;
  102. border: 3px solid transparent;
  103. border-top-color: #fff;
  104. -moz-animation: spin 1.5s linear infinite;
  105. -o-animation: spin 1.5s linear infinite;
  106. -ms-animation: spin 1.5s linear infinite;
  107. -webkit-animation: spin 1.5s linear infinite;
  108. animation: spin 1.5s linear infinite;
  109. }
  110.  
  111. @-webkit-keyframes spin {
  112. 0% {
  113. -webkit-transform: rotate(0deg);
  114. -ms-transform: rotate(0deg);
  115. transform: rotate(0deg);
  116. }
  117.  
  118. 100% {
  119. -webkit-transform: rotate(360deg);
  120. -ms-transform: rotate(360deg);
  121. transform: rotate(360deg);
  122. }
  123. }
  124.  
  125. @keyframes spin {
  126. 0% {
  127. -webkit-transform: rotate(0deg);
  128. -ms-transform: rotate(0deg);
  129. transform: rotate(0deg);
  130. }
  131.  
  132. 100% {
  133. -webkit-transform: rotate(360deg);
  134. -ms-transform: rotate(360deg);
  135. transform: rotate(360deg);
  136. }
  137. }
  138.  
  139. #loader-wrapper .loader-section {
  140. position: fixed;
  141. top: 0;
  142. width: 51%;
  143. height: 100%;
  144. background: #7171c6;
  145. z-index: 1000;
  146. -webkit-transform: translateX(0);
  147. -ms-transform: translateX(0);
  148. transform: translateX(0);
  149. }
  150.  
  151. #loader-wrapper .loader-section.section-left {
  152. left: 0;
  153. }
  154.  
  155. #loader-wrapper .loader-section.section-right {
  156. right: 0;
  157. }
  158.  
  159. .loaded #loader-wrapper .loader-section.section-left {
  160. -webkit-transform: translateX(-100%);
  161. -ms-transform: translateX(-100%);
  162. transform: translateX(-100%);
  163. -webkit-transition: all 0.7s 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
  164. transition: all 0.7s 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
  165. }
  166.  
  167. .loaded #loader-wrapper .loader-section.section-right {
  168. -webkit-transform: translateX(100%);
  169. -ms-transform: translateX(100%);
  170. transform: translateX(100%);
  171. -webkit-transition: all 0.7s 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
  172. transition: all 0.7s 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
  173. }
  174.  
  175. .loaded #loader {
  176. opacity: 0;
  177. -webkit-transition: all 0.3s ease-out;
  178. transition: all 0.3s ease-out;
  179. }
  180.  
  181. .loaded #loader-wrapper {
  182. visibility: hidden;
  183. -webkit-transform: translateY(-100%);
  184. -ms-transform: translateY(-100%);
  185. transform: translateY(-100%);
  186. -webkit-transition: all 0.3s 1s ease-out;
  187. transition: all 0.3s 1s ease-out;
  188. }
  189.  
  190. .no-js #loader-wrapper,
  191. .l7-control-logo {
  192. display: none;
  193. }
  194.  
  195. .no-js h1 {
  196. color: #222222;
  197. }
  198.  
  199. #loader-wrapper .load_title {
  200. font-family: 'Open Sans';
  201. color: #fff;
  202. font-size: 0.8rem;
  203. width: 100%;
  204. text-align: center;
  205. z-index: 9999999999999;
  206. position: absolute;
  207. top: 60%;
  208. opacity: 1;
  209. line-height: 30px;
  210. }
  211.  
  212. #loader-wrapper .load_title span {
  213. font-weight: normal;
  214. font-style: italic;
  215. font-size: 1rem;
  216. color: #fff;
  217. opacity: 0.5;
  218. }
  219.  
  220. .l7-popup-content{
  221. background:rgba(0,0,0,0) !important;
  222. }
  223. </style>
  224. </head>
  225.  
  226. <body style="font-size: 0">
  227. <div id="app">
  228. <div id="loader-wrapper">
  229. <div id="loader"></div>
  230. <div class="loader-section section-left"></div>
  231. <div class="loader-section section-right"></div>
  232. <div class="load_title">正在加载系统资源,请耐心等待</div>
  233. </div>
  234. </div>
  235. <script type="module" src="/src/main.js"></script>
  236. </body>
  237. </html>
  238.  
  239. <script src="https://supermap6.wh-nf.cn:8090/resource/v4/init.js" newfiber></script>
  240. <script src="//api.map.baidu.com/api?type=webgl&v=1.0&ak=V6pnSILC0g5Al0ue5KzqD9Hd7mqXoi6N"></script>