index.html 4.2 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151
  1. <!doctype html>
  2. <html lang="en">
  3. <head>
  4. <script src="https://g.alicdn.com/dingding/dinglogin/0.0.5/ddLogin.js"></script>
  5. <script type="text/javascript" src="/js/base64.min.js"></script>
  6. <script src="https://api.map.baidu.com/api?v=3.0&ak=c0crhdxQ5H7WcqbcazGr7mnHrLa4GmO0"></script>
  7. <script src="/js/jessibuca-pro/jessibuca-pro.js"></script>
  8. <script type="text/javascript" src="/js/EasyWasmPlayer.js"></script>
  9. <meta charset="UTF-8" />
  10. <link rel="icon" href="/favicon.ico" />
  11. <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  12. <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  13. <meta name="keywords" content="DeepOil" />
  14. <meta name="description" content="DeepOil" />
  15. <title>%VITE_APP_TITLE%</title>
  16. </head>
  17. <body>
  18. <div id="app">
  19. <style>
  20. .app-loading {
  21. display: flex;
  22. width: 100%;
  23. height: 100%;
  24. justify-content: center;
  25. align-items: center;
  26. flex-direction: column;
  27. background: #f0f2f5;
  28. }
  29. .app-loading .app-loading-wrap {
  30. position: absolute;
  31. top: 50%;
  32. left: 50%;
  33. display: flex;
  34. -webkit-transform: translate3d(-50%, -50%, 0);
  35. transform: translate3d(-50%, -50%, 0);
  36. justify-content: center;
  37. align-items: center;
  38. flex-direction: column;
  39. }
  40. .app-loading .app-loading-title {
  41. margin-bottom: 30px;
  42. font-size: 20px;
  43. font-weight: bold;
  44. text-align: center;
  45. }
  46. .app-loading .app-loading-logo {
  47. width: 100px;
  48. margin: 0 auto 15px auto;
  49. }
  50. .app-loading .app-loading-item {
  51. position: relative;
  52. display: inline-block;
  53. width: 60px;
  54. height: 60px;
  55. vertical-align: middle;
  56. border-radius: 50%;
  57. }
  58. .app-loading .app-loading-outter {
  59. position: absolute;
  60. width: 100%;
  61. height: 100%;
  62. border: 4px solid #2d8cf0;
  63. border-bottom: 0;
  64. border-left-color: transparent;
  65. border-radius: 50%;
  66. animation: loader-outter 1s cubic-bezier(0.42, 0.61, 0.58, 0.41) infinite;
  67. }
  68. .app-loading .app-loading-inner {
  69. position: absolute;
  70. top: calc(50% - 20px);
  71. left: calc(50% - 20px);
  72. width: 40px;
  73. height: 40px;
  74. border: 4px solid #87bdff;
  75. border-right: 0;
  76. border-top-color: transparent;
  77. border-radius: 50%;
  78. animation: loader-inner 1s cubic-bezier(0.42, 0.61, 0.58, 0.41) infinite;
  79. }
  80. @-webkit-keyframes loader-outter {
  81. 0% {
  82. -webkit-transform: rotate(0deg);
  83. transform: rotate(0deg);
  84. }
  85. 100% {
  86. -webkit-transform: rotate(360deg);
  87. transform: rotate(360deg);
  88. }
  89. }
  90. @keyframes loader-outter {
  91. 0% {
  92. -webkit-transform: rotate(0deg);
  93. transform: rotate(0deg);
  94. }
  95. 100% {
  96. -webkit-transform: rotate(360deg);
  97. transform: rotate(360deg);
  98. }
  99. }
  100. @-webkit-keyframes loader-inner {
  101. 0% {
  102. -webkit-transform: rotate(0deg);
  103. transform: rotate(0deg);
  104. }
  105. 100% {
  106. -webkit-transform: rotate(-360deg);
  107. transform: rotate(-360deg);
  108. }
  109. }
  110. @keyframes loader-inner {
  111. 0% {
  112. -webkit-transform: rotate(0deg);
  113. transform: rotate(0deg);
  114. }
  115. 100% {
  116. -webkit-transform: rotate(-360deg);
  117. transform: rotate(-360deg);
  118. }
  119. }
  120. </style>
  121. <div class="app-loading">
  122. <div class="app-loading-wrap">
  123. <div class="app-loading-title">
  124. <img src="/logo.gif" class="app-loading-logo" alt="Logo" />
  125. <div class="app-loading-title">%VITE_APP_TITLE%</div>
  126. </div>
  127. <div class="app-loading-item">
  128. <div class="app-loading-outter"></div>
  129. <div class="app-loading-inner"></div>
  130. </div>
  131. </div>
  132. </div>
  133. </div>
  134. <script type="module" src="/src/main.ts"></script>
  135. </body>
  136. </html>