index.html 9.7 KB

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