index.html 2.3 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182
  1. <!doctype html>
  2. <html lang="zh-CN">
  3. <head>
  4. <meta charset="UTF-8" />
  5. <link rel="icon" href="/favicon.ico" />
  6. <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
  7. <meta name="renderer" content="webkit" />
  8. <meta name="force-rendering" content="webkit" />
  9. <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  10. <meta name="description" content="ppt编辑器" />
  11. <meta name="keywords" content="ppt,powerpoint,office powerpoint,在线ppt,幻灯片,演示文稿,ppt在线制作,Vue3,TypeScript" />
  12. <title>%VITE_APP_TITLE%</title>
  13. </head>
  14. <body>
  15. <div id="app">
  16. <style>
  17. .firstLoading {
  18. position: fixed;
  19. left: 0;
  20. top: 0;
  21. right: 0;
  22. bottom: 0;
  23. width: 100%;
  24. height: 100%;
  25. min-width: 100vw;
  26. min-height: 100vh;
  27. display: flex;
  28. flex-direction: column;
  29. justify-content: center;
  30. align-items: center;
  31. z-index: 10000;
  32. }
  33. .firstLoading .loadingBox {
  34. width: 36px;
  35. height: 36px;
  36. display: flex;
  37. justify-content: space-between;
  38. flex-wrap: wrap;
  39. align-content: space-between;
  40. margin-bottom: 28px;
  41. animation: rotate 1.5s linear infinite;
  42. }
  43. .firstLoading .loadingBox .loadingItem {
  44. width: 16px;
  45. height: 16px;
  46. border-radius: 50%;
  47. background: #569cfe;
  48. opacity: 0.5;
  49. }
  50. .firstLoading .loadingBox .loadingItem:nth-child(2) {
  51. opacity: 1;
  52. }
  53. .firstLoading .loadingTip {
  54. font-size: 20px;
  55. color: #569cfe;
  56. }
  57. @keyframes rotate {
  58. from {
  59. transform: rotate(0deg);
  60. }
  61. to {
  62. transform: rotate(360deg);
  63. }
  64. }
  65. </style>
  66. <div class="firstLoading">
  67. <div class="loadingBox">
  68. <div class="loadingItem"></div>
  69. <div class="loadingItem"></div>
  70. <div class="loadingItem"></div>
  71. <div class="loadingItem"></div>
  72. </div>
  73. <div class="loadingTip">正在加载中…</div>
  74. </div>
  75. </div>
  76. <script type="module" src="/src/main.ts"></script>
  77. </body>
  78. <script>
  79. document.oncontextmenu = e => e.preventDefault()
  80. </script>
  81. </html>