index.html 3.2 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125
  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. <link rel="stylesheet" href="/css/loading.css">
  8. <link rel="stylesheet" href="/cdn/iconfont/iconfont.css">
  9. <link rel="stylesheet" href="/cdn/animate/3.5.1/animate.css">
  10. <script src="/components.js"></script>
  11. <script src="/config.js"></script>
  12. <script src="/cdn/staticfile/FileSaver.min.js"></script>
  13. <script src="/cdn/staticfile/xlsx.full.min.js"></script>
  14. <script src="/cdn/staticfile/jszip.min.js"></script>
  15. <script src="/cdn/html2canvas/html2canvas.min.js"></script>
  16. <script src="/cdn/qrious.min.js"></script>
  17. <script src="/cdn/jquery.min.js"></script>
  18. <script src="/cdn/echarts/5.4.0/echarts.min.js"></script>
  19. <script src="/cdn/echarts-wordcloud.min.js"></script>
  20. <script src="/cdn/echarts-gl.min.js"></script>
  21. <style>
  22. html,
  23. body,
  24. #app {
  25. height: 100%;
  26. margin: 0px;
  27. padding: 0px;
  28. }
  29. #loader-wrapper {
  30. position: fixed;
  31. top: 0;
  32. left: 0;
  33. width: 100%;
  34. height: 100%;
  35. z-index: 99999;
  36. background-color: #151a26;
  37. }
  38. #loader-wrapper .loader-box {
  39. position: fixed;
  40. left: calc(50% - 250px);
  41. top: calc(50% - 100px);
  42. margin: 0 auto;
  43. width: 500px;
  44. height: 200px;
  45. text-align: center;
  46. vertical-align: center;
  47. font-weight: bold;
  48. color: #87888E;
  49. font-size: 35px;
  50. }
  51. #loader-wrapper .loader-box>span {
  52. opacity: 0.4;
  53. display: inline-block;
  54. animation: bouncingLoader 1s infinite alternate;
  55. }
  56. #loader-wrapper .loader-box>span:nth-child(2) {
  57. animation-delay: 0.1s;
  58. }
  59. #loader-wrapper .loader-box>span:nth-child(3) {
  60. animation-delay: 0.15s;
  61. }
  62. #loader-wrapper .loader-box>span:nth-child(4) {
  63. animation-delay: 0.2s;
  64. }
  65. #loader-wrapper .loader-box>span:nth-child(5) {
  66. animation-delay: 0.25s;
  67. }
  68. #loader-wrapper .loader-box>span:nth-child(6) {
  69. animation-delay: 0.3s;
  70. }
  71. #loader-wrapper .loader-box>span:nth-child(7) {
  72. animation-delay: 0.35s;
  73. }
  74. #loader-wrapper .loader-box>span:nth-child(8) {
  75. animation-delay: 0.4s;
  76. }
  77. @keyframes bouncingLoader {
  78. 0% {
  79. transform: translateY(0);
  80. }
  81. 50% {
  82. transform: translateY(25px);
  83. }
  84. 100% {
  85. transform: translateY(0);
  86. }
  87. }
  88. #loader-wrapper .load_title {
  89. font-weight: bold;
  90. z-index: 1002;
  91. position: absolute;
  92. top: 50%;
  93. margin-top: 15px;
  94. color: #87888E;
  95. font-size: 18px;
  96. width: 100%;
  97. height: 30px;
  98. text-align: center;
  99. opacity: 0.4;
  100. line-height: 30px;
  101. }
  102. </style>
  103. </head>
  104. <body>
  105. <div id="app">
  106. <div id="loader-wrapper">
  107. <div class="loader-box">
  108. <span>JNPF</span>
  109. <span>智</span>
  110. <span>慧</span>
  111. <span>可</span>
  112. <span>视</span>
  113. <span>化</span>
  114. <span>大</span>
  115. <span>屏</span>
  116. </div>
  117. <div class="load_title">加载中…</div>
  118. </div>
  119. </div>
  120. <script type="module" src="/src/main.js"></script>
  121. </body>
  122. </html>