index.html 2.9 KB

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