|
|
@@ -1,57 +1,76 @@
|
|
|
-<!DOCTYPE html>
|
|
|
+<!doctype html>
|
|
|
<html lang="zh-CN">
|
|
|
<head>
|
|
|
- <meta charset="UTF-8">
|
|
|
- <link rel="icon" href="/favicon.ico">
|
|
|
+ <meta charset="UTF-8" />
|
|
|
+ <link rel="icon" href="/favicon.ico" />
|
|
|
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
|
|
|
- <meta name="renderer" content="webkit">
|
|
|
+ <meta name="renderer" content="webkit" />
|
|
|
<meta name="force-rendering" content="webkit" />
|
|
|
- <meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
|
+ <meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
|
|
<meta name="description" content="ppt编辑器" />
|
|
|
<meta name="keywords" content="ppt,powerpoint,office powerpoint,在线ppt,幻灯片,演示文稿,ppt在线制作,Vue3,TypeScript" />
|
|
|
<title>%VITE_APP_TITLE%</title>
|
|
|
-
|
|
|
- <style>
|
|
|
- .first-screen-loading {
|
|
|
- width: 200px;
|
|
|
- height: 200px;
|
|
|
- position: fixed;
|
|
|
- top: 50%;
|
|
|
- left: 50%;
|
|
|
- margin-top: -100px;
|
|
|
- margin-left: -100px;
|
|
|
- display: flex;
|
|
|
- flex-direction: column;
|
|
|
- justify-content: center;
|
|
|
- align-items: center;
|
|
|
- }
|
|
|
- .first-screen-loading-spinner {
|
|
|
- width: 36px;
|
|
|
- height: 36px;
|
|
|
- border: 3px solid #d14424;
|
|
|
- border-top-color: transparent;
|
|
|
- border-radius: 50%;
|
|
|
- animation: spinner .8s linear infinite;
|
|
|
- }
|
|
|
- .first-screen-loading-text {
|
|
|
- margin-top: 20px;
|
|
|
- color: #d14424;
|
|
|
- }
|
|
|
- @keyframes spinner {
|
|
|
- 0% {
|
|
|
- transform: rotate(0deg);
|
|
|
- }
|
|
|
- 100% {
|
|
|
- transform: rotate(360deg);
|
|
|
- }
|
|
|
- }
|
|
|
- </style>
|
|
|
</head>
|
|
|
<body>
|
|
|
<div id="app">
|
|
|
- <div class="first-screen-loading">
|
|
|
- <div class="first-screen-loading-spinner"></div>
|
|
|
- <div class="first-screen-loading-text">正在加载中，请稍等 ...</div>
|
|
|
+ <style>
|
|
|
+ .firstLoading {
|
|
|
+ position: fixed;
|
|
|
+ left: 0;
|
|
|
+ top: 0;
|
|
|
+ right: 0;
|
|
|
+ bottom: 0;
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ min-width: 100vw;
|
|
|
+ min-height: 100vh;
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ justify-content: center;
|
|
|
+ align-items: center;
|
|
|
+ z-index: 10000;
|
|
|
+ }
|
|
|
+ .firstLoading .loadingBox {
|
|
|
+ width: 32px;
|
|
|
+ height: 32px;
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ flex-wrap: wrap;
|
|
|
+ align-content: space-between;
|
|
|
+ margin-bottom: 28px;
|
|
|
+ animation: rotate 1.5s linear infinite;
|
|
|
+ }
|
|
|
+ .firstLoading .loadingBox .loadingItem {
|
|
|
+ width: 14px;
|
|
|
+ height: 14px;
|
|
|
+ border-radius: 50%;
|
|
|
+ background: #569cfe;
|
|
|
+ opacity: 0.5;
|
|
|
+ }
|
|
|
+ .firstLoading .loadingBox .loadingItem:nth-child(2) {
|
|
|
+ opacity: 1;
|
|
|
+ }
|
|
|
+ .firstLoading .loadingTip {
|
|
|
+ font-size: 16px;
|
|
|
+ color: #569cfe;
|
|
|
+ }
|
|
|
+ @keyframes rotate {
|
|
|
+ from {
|
|
|
+ transform: rotate(0deg);
|
|
|
+ }
|
|
|
+ to {
|
|
|
+ transform: rotate(360deg);
|
|
|
+ }
|
|
|
+ }
|
|
|
+ </style>
|
|
|
+ <div class="firstLoading">
|
|
|
+ <div class="loadingBox">
|
|
|
+ <div class="loadingItem"></div>
|
|
|
+ <div class="loadingItem"></div>
|
|
|
+ <div class="loadingItem"></div>
|
|
|
+ <div class="loadingItem"></div>
|
|
|
+ </div>
|
|
|
+ <div class="loadingTip">正在加载中，请稍等…</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
<script type="module" src="/src/main.ts"></script>
|
黄琪勇