index.html 2.8 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124
  1. <!DOCTYPE html>
  2. <html lang="en">
  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"
  8. content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=0,viewport-fit=cover" />
  9. <title></title>
  10. <!-- <link rel="icon" href="/favicon.ico" /> -->
  11. <script src="//res.wx.qq.com/open/js/jweixin-1.6.0.js"></script>
  12. <style>
  13. body {
  14. -webkit-text-size-adjust: 100% !important;
  15. }
  16. </style>
  17. <script>
  18. window.process = {};
  19. (function () {
  20. if (typeof WeixinJSBridge == "object" && typeof WeixinJSBridge.invoke == "function") {
  21. handleFontSize();
  22. } else {
  23. if (document.addEventListener) {
  24. document.addEventListener("WeixinJSBridgeReady", handleFontSize, false);
  25. } else if (document.attachEvent) {
  26. document.attachEvent("WeixinJSBridgeReady", handleFontSize);
  27. document.attachEvent("onWeixinJSBridgeReady", handleFontSize);
  28. }
  29. }
  30. function handleFontSize() {
  31. // 设置网页字体为默认大小
  32. WeixinJSBridge.invoke('setFontSizeCallback', {
  33. 'fontSize': 0
  34. });
  35. // 重写设置网页字体大小的事件
  36. WeixinJSBridge.on('menu:setfont', function () {
  37. WeixinJSBridge.invoke('setFontSizeCallback', {
  38. 'fontSize': 0
  39. });
  40. });
  41. }
  42. })();
  43. </script>
  44. </head>
  45. <body>
  46. <div id="app">
  47. <style>
  48. html,
  49. body,
  50. #app {
  51. position: relative;
  52. display: flex;
  53. align-items: center;
  54. justify-content: center;
  55. width: 100%;
  56. height: 100%;
  57. overflow: hidden;
  58. }
  59. .loader,
  60. .loader::before,
  61. .loader::after {
  62. width: 2.5em;
  63. height: 2.5em;
  64. border-radius: 50%;
  65. animation: load-animation 1.8s infinite ease-in-out;
  66. animation-fill-mode: both;
  67. }
  68. .loader {
  69. position: relative;
  70. top: 0;
  71. margin: 80px auto;
  72. font-size: 10px;
  73. color: #406eeb;
  74. text-indent: -9999em;
  75. transform: translateZ(0);
  76. transform: translate(-50%, 0);
  77. animation-delay: -0.16s;
  78. }
  79. .loader::before,
  80. .loader::after {
  81. position: absolute;
  82. top: 0;
  83. content: "";
  84. }
  85. .loader::before {
  86. left: -3.5em;
  87. animation-delay: -0.32s;
  88. }
  89. .loader::after {
  90. left: 3.5em;
  91. }
  92. @keyframes load-animation {
  93. 0%,
  94. 80%,
  95. 100% {
  96. box-shadow: 0 2.5em 0 -1.3em;
  97. }
  98. 40% {
  99. box-shadow: 0 2.5em 0 0;
  100. }
  101. }
  102. </style>
  103. <div class="loader"></div>
  104. </div>
  105. <script type="module" src="/src/main.ts"></script>
  106. </body>
  107. </html>