index.html 1.9 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596
  1. <!--
  2. * @Author: Gui
  3. * @Date: 2023-03-01 19:20:44
  4. * @LastEditors:
  5. * @LastEditTime: 2023-10-24 11:08:55
  6. * @Description: tel files
  7. * @filePath:
  8. -->
  9. <!DOCTYPE html>
  10. <html lang="en">
  11. <head>
  12. <meta charset="UTF-8" />
  13. <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
  14. <meta name="renderer" content="webkit" />
  15. <meta name="viewport"
  16. content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=0" />
  17. <title>支付即会员,消费即股东</title>
  18. <link rel="icon" href="/favicon.ico" />
  19. <script>
  20. window.process = {};
  21. </script>
  22. </head>
  23. <body>
  24. <div id="app">
  25. <style>
  26. html,
  27. body,
  28. #app {
  29. width: 100%;
  30. height: 100%;
  31. display: flex;
  32. position: relative;
  33. justify-content: center;
  34. align-items: center;
  35. overflow: hidden;
  36. }
  37. .loader,
  38. .loader:before,
  39. .loader:after {
  40. border-radius: 50%;
  41. width: 2.5em;
  42. height: 2.5em;
  43. animation-fill-mode: both;
  44. animation: loadAnimation 1.8s infinite ease-in-out;
  45. }
  46. .loader {
  47. color: #406eeb;
  48. font-size: 10px;
  49. margin: 80px auto;
  50. position: relative;
  51. text-indent: -9999em;
  52. transform: translateZ(0);
  53. animation-delay: -0.16s;
  54. top: 0;
  55. transform: translate(-50%, 0);
  56. }
  57. .loader:before,
  58. .loader:after {
  59. content: "";
  60. position: absolute;
  61. top: 0;
  62. }
  63. .loader:before {
  64. left: -3.5em;
  65. animation-delay: -0.32s;
  66. }
  67. .loader:after {
  68. left: 3.5em;
  69. }
  70. @keyframes loadAnimation {
  71. 0%,
  72. 80%,
  73. 100% {
  74. box-shadow: 0 2.5em 0 -1.3em;
  75. }
  76. 40% {
  77. box-shadow: 0 2.5em 0 0;
  78. }
  79. }
  80. </style>
  81. <div class="loader"></div>
  82. </div>
  83. <script type="module" src="/src/main.ts"></script>
  84. </body>
  85. </html>