潘志宝
12 小时以前 f6ea543b3de9a770c1bf5db2baf3e8a5dc2c867a
提交 | 用户 | 时间
820397 1 <!DOCTYPE html>
H 2 <html lang="en">
3   <head>
4     <meta charset="UTF-8" />
94d91d 5     <link rel="icon" href="/src/assets/imgs/logo.png" />
820397 6     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
H 7     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
8     <meta
9       name="keywords"
e7305d 10       content="工业互联网平台 基于 vue3 + CompositionAPI + typescript + vite3 + element plus 的后台管理系统!"
820397 11     />
H 12     <meta
13       name="description"
e7305d 14       content="工业互联网平台 基于 vue3 + CompositionAPI + typescript + vite3 + element plus 的后台管理系统!"
820397 15     />
H 16     <title>%VITE_APP_TITLE%</title>
17   </head>
18   <body>
19     <div id="app">
20       <style>
21         .app-loading {
22           display: flex;
23           width: 100%;
24           height: 100%;
25           justify-content: center;
26           align-items: center;
27           flex-direction: column;
28           background: #f0f2f5;
29         }
30
31         .app-loading .app-loading-wrap {
32           position: absolute;
33           top: 50%;
34           left: 50%;
35           display: flex;
36           -webkit-transform: translate3d(-50%, -50%, 0);
37           transform: translate3d(-50%, -50%, 0);
38           justify-content: center;
39           align-items: center;
40           flex-direction: column;
41         }
42
43         .app-loading .app-loading-title {
44           margin-bottom: 30px;
45           font-size: 20px;
46           font-weight: bold;
47           text-align: center;
48         }
49
50         .app-loading .app-loading-logo {
51           width: 100px;
52           margin: 0 auto 15px auto;
53         }
54
55         .app-loading .app-loading-item {
56           position: relative;
57           display: inline-block;
58           width: 60px;
59           height: 60px;
60           vertical-align: middle;
61           border-radius: 50%;
62         }
63
64         .app-loading .app-loading-outter {
65           position: absolute;
66           width: 100%;
67           height: 100%;
68           border: 4px solid #2d8cf0;
69           border-bottom: 0;
70           border-left-color: transparent;
71           border-radius: 50%;
72           animation: loader-outter 1s cubic-bezier(0.42, 0.61, 0.58, 0.41) infinite;
73         }
74
75         .app-loading .app-loading-inner {
76           position: absolute;
77           top: calc(50% - 20px);
78           left: calc(50% - 20px);
79           width: 40px;
80           height: 40px;
81           border: 4px solid #87bdff;
82           border-right: 0;
83           border-top-color: transparent;
84           border-radius: 50%;
85           animation: loader-inner 1s cubic-bezier(0.42, 0.61, 0.58, 0.41) infinite;
86         }
87
88         @-webkit-keyframes loader-outter {
89           0% {
90             -webkit-transform: rotate(0deg);
91             transform: rotate(0deg);
92           }
93
94           100% {
95             -webkit-transform: rotate(360deg);
96             transform: rotate(360deg);
97           }
98         }
99
100         @keyframes loader-outter {
101           0% {
102             -webkit-transform: rotate(0deg);
103             transform: rotate(0deg);
104           }
105
106           100% {
107             -webkit-transform: rotate(360deg);
108             transform: rotate(360deg);
109           }
110         }
111
112         @-webkit-keyframes loader-inner {
113           0% {
114             -webkit-transform: rotate(0deg);
115             transform: rotate(0deg);
116           }
117
118           100% {
119             -webkit-transform: rotate(-360deg);
120             transform: rotate(-360deg);
121           }
122         }
123
124         @keyframes loader-inner {
125           0% {
126             -webkit-transform: rotate(0deg);
127             transform: rotate(0deg);
128           }
129
130           100% {
131             -webkit-transform: rotate(-360deg);
132             transform: rotate(-360deg);
133           }
134         }
135       </style>
136       <div class="app-loading">
137         <div class="app-loading-wrap">
138           <div class="app-loading-title">
94d91d 139             <img src="/src/assets/imgs/logo.png" class="app-loading-logo" alt="Logo" />
820397 140             <div class="app-loading-title">%VITE_APP_TITLE%</div>
H 141           </div>
142           <div class="app-loading-item">
143             <div class="app-loading-outter"></div>
144             <div class="app-loading-inner"></div>
145           </div>
146         </div>
147       </div>
148     </div>
149     <script type="module" src="/src/main.ts"></script>
150   </body>
151 </html>