index.html 1.6 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061
  1. <!DOCTYPE html>
  2. <html lang="ZH-cn">
  3. <head>
  4. <meta charset="UTF-8" />
  5. <link rel="icon" href="/favicon.ico" />
  6. <title>管乐团云教练</title>
  7. <meta name="description" content="管乐团APP,器乐学习的不二选择" />
  8. <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no" />
  9. <script src="/helpers/lottie.min.js"></script>
  10. <link href="/vant.css" rel="stylesheet">
  11. <script>
  12. if (window.navigator && navigator.serviceWorker) {
  13. navigator.serviceWorker.getRegistrations().then(function (registrations) {
  14. for (let registration of registrations) {
  15. registration.unregister()
  16. }
  17. })
  18. }
  19. </script>
  20. <style>
  21. #lottieWeb {
  22. position: fixed;
  23. z-index: 100;
  24. top: 50%;
  25. left: 50%;
  26. width: 100Px;
  27. height: 100Px;
  28. transform: translate(-50%, -50%);
  29. pointer-events: none;
  30. transition: opacity .3s;
  31. }
  32. </style>
  33. </head>
  34. <body>
  35. <div id="app"></div>
  36. <div id="lottieWeb"></div>
  37. <script>
  38. lottie.loadAnimation({
  39. container: document.getElementById('lottieWeb'),
  40. renderer: 'svg',
  41. width: '30px',
  42. height: '30px',
  43. loop: true,
  44. autoplay: true,
  45. path: '/orchestra-music-score/loading.json'
  46. });
  47. window.addEventListener('load', function () {
  48. const loadingEle = document.getElementById('lottieWeb')
  49. loadingEle.style.opacity = '0'
  50. setTimeout(() => {
  51. loadingEle.style.display = 'none'
  52. }, 1000)
  53. })
  54. </script>
  55. <script type="module" src="/src/subpages/colexiu/main.ts"></script>
  56. </body>
  57. </html>