orchestra.html 1.6 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8" />
  5. <!-- <link rel="icon" type="image/svg+xml" href="/vite.svg" /> -->
  6. <meta name="viewport"
  7. content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, viewport-fit=cover" />
  8. <title>管乐团云练习</title>
  9. <script>
  10. function _postMessage(data, callback) {
  11. const instance = window.ORCHESTRA || (window.webkit && window.webkit.messageHandlers && window.webkit.messageHandlers.ORCHESTRA)
  12. if (instance) {
  13. console.log('h5发送开启全屏loading')
  14. instance.postMessage(JSON.stringify(data))
  15. }
  16. }
  17. _postMessage({
  18. api: 'cloudLoading',
  19. content: {
  20. show: true,
  21. type: 'fullscreen',
  22. },
  23. })
  24. </script>
  25. <!-- <link rel="icon" href="/favicon.ico" /> -->
  26. <script src="/flexible.js" charset="UTF-8"></script>
  27. <script src="/helpers/lottie.min.js" charset="UTF-8"></script>
  28. <style>
  29. #loading {
  30. position: fixed;
  31. z-index: 100;
  32. top: 50%;
  33. left: 50%;
  34. width: 100Px;
  35. height: 100Px;
  36. transform: translate(-50%, -50%);
  37. pointer-events: none;
  38. transition: opacity .3s;
  39. }
  40. </style>
  41. </head>
  42. <body>
  43. <div id="app"></div>
  44. <div id="loading"></div>
  45. <script>
  46. lottie.loadAnimation({
  47. container: document.getElementById('loading'),
  48. renderer: 'svg',
  49. width: '30px',
  50. height: '30px',
  51. loop: true,
  52. autoplay: true,
  53. path: './loading.json'
  54. });
  55. </script>
  56. <script type="module" src="/src/page-orchestra/main.ts"></script>
  57. </body>
  58. </html>