index.html 9.8 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343
  1. <!DOCTYPE html>
  2. <html lang="zh_CN" id="htmlRoot">
  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="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=0" />
  8. <title><%= title %></title>
  9. <link rel="icon" id="faviconIcon" href="/logo.png" />
  10. <!-- 全局配置 -->
  11. <script src="/js/config.js"></script>
  12. <script src="/js/liveplayer-lib.min.js"></script>
  13. <script src="/js/webrtcstreamer.js"></script>
  14. <script src="/js/adapter.min.js"></script>
  15. <script type="text/javascript" src="http://182.92.126.35:9050/web-apps/apps/api/documents/api.js"></script>
  16. </head>
  17. <body>
  18. <script>
  19. (() => {
  20. var htmlRoot = document.getElementById('htmlRoot');
  21. var theme = window.localStorage.getItem('__APP__DARK__MODE__');
  22. if (htmlRoot && theme) {
  23. htmlRoot.setAttribute('data-theme', theme);
  24. theme = htmlRoot = null;
  25. }
  26. })();
  27. </script>
  28. <div id="app">
  29. <style lang="less">
  30. html[data-theme='dark'] .app-loading {
  31. background-color: #2c344a;
  32. }
  33. html[data-theme='dark'] .app-loading .app-loading-title {
  34. color: rgba(255, 255, 255, 0.85);
  35. }
  36. body{
  37. background-color: var(--vent-base-color)
  38. }
  39. .app-loading {
  40. display: flex;
  41. width: 100%;
  42. height: 100%;
  43. justify-content: center;
  44. align-items: center;
  45. flex-direction: column;
  46. /* background-color: #f4f7f9; */
  47. background-image: url('./src/assets/images/vent/loading-bg.png');
  48. background-size: cover;
  49. background-repeat: no-repeat;
  50. background-color: var(--vent-base-color);
  51. }
  52. .app-loading .app-loading-wrap {
  53. position: absolute;
  54. top: 50%;
  55. left: 50%;
  56. display: flex;
  57. -webkit-transform: translate3d(-50%, -50%, 0);
  58. transform: translate3d(-50%, -50%, 0);
  59. justify-content: center;
  60. align-items: center;
  61. flex-direction: column;
  62. }
  63. .app-loading .dots {
  64. display: flex;
  65. padding: 98px;
  66. justify-content: center;
  67. align-items: center;
  68. }
  69. .app-loading .app-loading-title {
  70. display: flex;
  71. margin-top: 30px;
  72. font-size: 30px;
  73. color: rgba(255, 255, 255, 0.85);
  74. justify-content: center;
  75. align-items: center;
  76. }
  77. .app-loading .app-loading-logo {
  78. display: block;
  79. width: 90px;
  80. margin: 0 auto;
  81. margin-bottom: 20px;
  82. }
  83. .dot {
  84. position: relative;
  85. display: inline-block;
  86. width: 48px;
  87. height: 48px;
  88. margin-top: 30px;
  89. font-size: 32px;
  90. transform: rotate(45deg);
  91. box-sizing: border-box;
  92. animation: antRotate 1.2s infinite linear;
  93. }
  94. .dot i {
  95. position: absolute;
  96. display: block;
  97. width: 20px;
  98. height: 20px;
  99. background-color: #0065cc;
  100. border-radius: 100%;
  101. opacity: 0.3;
  102. transform: scale(0.75);
  103. animation: antSpinMove 1s infinite linear alternate;
  104. transform-origin: 50% 50%;
  105. }
  106. .dot i:nth-child(1) {
  107. top: 0;
  108. left: 0;
  109. }
  110. .dot i:nth-child(2) {
  111. top: 0;
  112. right: 0;
  113. -webkit-animation-delay: 0.4s;
  114. animation-delay: 0.4s;
  115. }
  116. .dot i:nth-child(3) {
  117. right: 0;
  118. bottom: 0;
  119. -webkit-animation-delay: 0.8s;
  120. animation-delay: 0.8s;
  121. }
  122. .dot i:nth-child(4) {
  123. bottom: 0;
  124. left: 0;
  125. -webkit-animation-delay: 1.2s;
  126. animation-delay: 1.2s;
  127. }
  128. @keyframes antRotate {
  129. to {
  130. -webkit-transform: rotate(405deg);
  131. transform: rotate(405deg);
  132. }
  133. }
  134. @-webkit-keyframes antRotate {
  135. to {
  136. -webkit-transform: rotate(405deg);
  137. transform: rotate(405deg);
  138. }
  139. }
  140. @keyframes antSpinMove {
  141. to {
  142. opacity: 1;
  143. }
  144. }
  145. @-webkit-keyframes antSpinMove {
  146. to {
  147. opacity: 1;
  148. }
  149. }
  150. #cssLoader1.main-wrap .child-common {
  151. width: 8px;
  152. height: 50px;
  153. margin-right: 5px;
  154. /* margin-right: 3px; */
  155. background-color: #3df7ff;
  156. -webkit-animation: animate1 1s infinite;
  157. animation: animate1 1s infinite;
  158. float: left;
  159. }
  160. #cssLoader1.main-wrap .child1 {
  161. margin-right: 5px;
  162. }
  163. #cssLoader1.main-wrap .child10 {
  164. -webkit-animation-delay: 0.9s;
  165. animation-delay: 0.9s;
  166. }
  167. #cssLoader1.main-wrap .child9 {
  168. -webkit-animation-delay: 0.8s;
  169. animation-delay: 0.8s;
  170. }
  171. #cssLoader1.main-wrap .child8 {
  172. -webkit-animation-delay: 0.7s;
  173. animation-delay: 0.7s;
  174. }
  175. #cssLoader1.main-wrap .child7 {
  176. -webkit-animation-delay: 0.6s;
  177. animation-delay: 0.6s;
  178. }
  179. #cssLoader1.main-wrap .child6 {
  180. -webkit-animation-delay: 0.5s;
  181. animation-delay: 0.5s;
  182. }
  183. #cssLoader1.main-wrap .child5 {
  184. -webkit-animation-delay: 0.4s;
  185. animation-delay: 0.4s;
  186. }
  187. #cssLoader1.main-wrap .child4 {
  188. -webkit-animation-delay: 0.3s;
  189. animation-delay: 0.3s;
  190. }
  191. #cssLoader1.main-wrap .child3 {
  192. -webkit-animation-delay: 0.2s;
  193. animation-delay: 0.2s;
  194. }
  195. #cssLoader1.main-wrap .child2 {
  196. -webkit-animation-delay: 0.1s;
  197. animation-delay: 0.1s;
  198. }
  199. @-webkit-keyframes animate1 {
  200. 50% {
  201. -ms-transform: scaleY(0);
  202. -webkit-transform: scaleY(0);
  203. transform: scaleY(0);
  204. }
  205. }
  206. @keyframes animate1 {
  207. 50% {
  208. -ms-transform: scaleY(0);
  209. -webkit-transform: scaleY(0);
  210. transform: scaleY(0);
  211. }
  212. }
  213. /*loader1 css ends*/
  214. cssLoader17 {
  215. position: relative;
  216. width: 2.5em;
  217. height: 2.5em;
  218. transform: rotate(165deg);
  219. }
  220. .cssLoader17:before,
  221. .cssLoader17:after {
  222. content: '';
  223. position: absolute;
  224. top: 50%;
  225. left: 50%;
  226. display: block;
  227. width: 0.5em;
  228. height: 0.5em;
  229. border-radius: 0.25em;
  230. transform: translate(-50%, -50%);
  231. }
  232. .cssLoader17:before {
  233. animation: before 2s infinite;
  234. }
  235. .cssLoader17:after {
  236. animation: after 2s infinite;
  237. }
  238. @keyframes before {
  239. 0% {
  240. width: 0.5em;
  241. box-shadow: 1em -0.5em rgba(225, 20, 98, 0.75), -1em 0.5em rgba(111, 202, 220, 0.75);
  242. }
  243. 35% {
  244. width: 2.5em;
  245. box-shadow: 0 -0.5em rgba(225, 20, 98, 0.75), 0 0.5em rgba(111, 202, 220, 0.75);
  246. }
  247. 70% {
  248. width: 0.5em;
  249. box-shadow: -1em -0.5em rgba(225, 20, 98, 0.75), 1em 0.5em rgba(111, 202, 220, 0.75);
  250. }
  251. 100% {
  252. box-shadow: 1em -0.5em rgba(225, 20, 98, 0.75), -1em 0.5em rgba(111, 202, 220, 0.75);
  253. }
  254. }
  255. @keyframes after {
  256. 0% {
  257. height: 0.5em;
  258. box-shadow: 0.5em 1em rgba(61, 184, 143, 0.75), -0.5em -1em rgba(233, 169, 32, 0.75);
  259. }
  260. 35% {
  261. height: 2.5em;
  262. box-shadow: 0.5em 0 rgba(61, 184, 143, 0.75), -0.5em 0 rgba(233, 169, 32, 0.75);
  263. }
  264. 70% {
  265. height: 0.5em;
  266. box-shadow: 0.5em -1em rgba(61, 184, 143, 0.75), -0.5em 1em rgba(233, 169, 32, 0.75);
  267. }
  268. 100% {
  269. box-shadow: 0.5em 1em rgba(61, 184, 143, 0.75), -0.5em -1em rgba(233, 169, 32, 0.75);
  270. }
  271. }
  272. </style>
  273. <div class="app-loading">
  274. <div class="app-loading-wrap">
  275. <!-- <img src="/resource/img/logo.png" class="app-loading-logo" alt="Logo" /> -->
  276. <!-- <div class="app-loading-dots">
  277. <span class="dot dot-spin"><i></i><i></i><i></i><i></i></span>
  278. </div> -->
  279. <div id="cssLoader1" class="main-wrap">
  280. <div class="child-common child1"></div>
  281. <div class="child-common child2"></div>
  282. <div class="child-common child3"></div>
  283. <div class="child-common child4"></div>
  284. <div class="child-common child5"></div>
  285. <div class="child-common child6"></div>
  286. <div class="child-common child7"></div>
  287. <div class="child-common child8"></div>
  288. <div class="child-common child9"></div>
  289. <div class="child-common child10"></div>
  290. </div>
  291. <div class="app-loading-title"><%= title %></div>
  292. </div>
  293. </div>
  294. </div>
  295. <script type="module" src="/src/main.ts"></script>
  296. <script>
  297. // var _hmt = _hmt || [];
  298. // (function() {
  299. // var hm = document.createElement("script");
  300. // hm.src = "https://hm.baidu.com/hm.js?0febd9e3cacb3f627ddac64d52caac39";
  301. // var s = document.getElementsByTagName("script")[0];
  302. // s.parentNode.insertBefore(hm, s);
  303. // })();
  304. </script>
  305. <script>
  306. var _hmt = _hmt || [];
  307. (function() {
  308. var hm = document.createElement("script");
  309. const ip = window.location.origin.split(':')[0]
  310. hm.src = ip + ":9050/web-apps/apps/api/documents/api.js";
  311. var s = document.getElementsByTagName("script")[0];
  312. s.parentNode.insertBefore(hm, s);
  313. })();
  314. </script>
  315. </body>
  316. </html>