|
|
@@ -9,79 +9,71 @@
|
|
|
name="viewport"
|
|
|
content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=0"
|
|
|
/>
|
|
|
+
|
|
|
<title></title>
|
|
|
<link rel="icon" href="/favicon.ico" />
|
|
|
<%= viteHtmlPluginOptions.injectConfig %>
|
|
|
- </head>
|
|
|
- <body>
|
|
|
- <div id="app">
|
|
|
- <style>
|
|
|
- @keyframes load {
|
|
|
- 0% {
|
|
|
- -webkit-transform: rotate(-360deg);
|
|
|
- -moz-transform: rotate(-360deg);
|
|
|
- -ms-transform: rotate(-360deg);
|
|
|
- -o-transform: rotate(-360deg);
|
|
|
- transform: rotate(-360deg);
|
|
|
- }
|
|
|
|
|
|
- 100% {
|
|
|
- -webkit-transform: rotate(0);
|
|
|
- -moz-transform: rotate(0);
|
|
|
- -ms-transform: rotate(0);
|
|
|
- -o-transform: rotate(0);
|
|
|
- transform: rotate(0);
|
|
|
- }
|
|
|
+ <style>
|
|
|
+ @keyframes load {
|
|
|
+ 0% {
|
|
|
+ -webkit-transform: rotate(-360deg);
|
|
|
+ transform: rotate(-360deg);
|
|
|
}
|
|
|
|
|
|
- .g-loading {
|
|
|
- -webkit-animation: load 2s linear infinite;
|
|
|
- -moz-animation: load 2s linear infinite;
|
|
|
- -ms-animation: load 2s linear infinite;
|
|
|
- -o-animation: load 2s linear infinite;
|
|
|
- animation: load 2s linear infinite;
|
|
|
- -webkit-transform-origin: center center;
|
|
|
- -moz-transform-origin: center center;
|
|
|
- -ms-transform-origin: center center;
|
|
|
- -o-transform-origin: center center;
|
|
|
- transform-origin: center center;
|
|
|
+ 100% {
|
|
|
+ -webkit-transform: rotate(0);
|
|
|
+ transform: rotate(0);
|
|
|
}
|
|
|
+ }
|
|
|
|
|
|
- .app-loading {
|
|
|
- width: 100%;
|
|
|
- height: 100%;
|
|
|
- background: rgba(255, 255, 255, 0, 1);
|
|
|
- }
|
|
|
+ .app-loading {
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
|
|
|
- .app-loading .app-loading-wrap {
|
|
|
- position: absolute;
|
|
|
- top: 45%;
|
|
|
- left: 50%;
|
|
|
- width: 64px;
|
|
|
- -ms-transform: translate3d(-50%, -50%, 0);
|
|
|
- -moz-transform: translate3d(-50%, -50%, 0);
|
|
|
- -webkit-transform: translate3d(-50%, -50%, 0);
|
|
|
- -o-transform: translate3d(-50%, -50%, 0);
|
|
|
- transform: translate3d(-50%, -50%, 0);
|
|
|
- }
|
|
|
+ /* background: #f0f2f5; */
|
|
|
+ }
|
|
|
|
|
|
- .app-loading .app-loading-wrap img.logo {
|
|
|
- margin-bottom: 20px;
|
|
|
- margin-left: -20px;
|
|
|
- }
|
|
|
+ .app-loading .app-loading-wrap {
|
|
|
+ position: absolute;
|
|
|
+ top: 50%;
|
|
|
+ left: 50%;
|
|
|
+ -webkit-transform: translate3d(-50%, -50%, 0);
|
|
|
+ transform: translate3d(-50%, -50%, 0);
|
|
|
+ }
|
|
|
|
|
|
- .app-loading .app-loading-wrap .app-loading__tip {
|
|
|
- display: block;
|
|
|
- margin-top: 4px;
|
|
|
- font-size: 13px;
|
|
|
- color: #303133;
|
|
|
- text-align: center;
|
|
|
- }
|
|
|
- </style>
|
|
|
+ .app-loading .g-loading {
|
|
|
+ display: block;
|
|
|
+ width: 64px;
|
|
|
+ margin: 30px auto;
|
|
|
+ -webkit-animation: load 1.2s linear infinite;
|
|
|
+ animation: load 1.2s linear infinite;
|
|
|
+ -webkit-transform-origin: center center;
|
|
|
+ transform-origin: center center;
|
|
|
+ }
|
|
|
+
|
|
|
+ .app-loading .app-loading-wrap img.logo {
|
|
|
+ display: block;
|
|
|
+ width: 90px;
|
|
|
+ margin: 0 auto;
|
|
|
+ margin-bottom: 20px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .app-loading .app-loading-wrap .app-loading__tip {
|
|
|
+ display: block;
|
|
|
+ margin: 20px auto 0 0;
|
|
|
+ font-size: 30px;
|
|
|
+ color: #2c3a61;
|
|
|
+ }
|
|
|
+ </style>
|
|
|
+ </head>
|
|
|
+ <body>
|
|
|
+ <div id="app">
|
|
|
<section class="app-loading">
|
|
|
<section class="app-loading-wrap">
|
|
|
<img src="./resource/img/logo.png" class="logo" alt="Logo" />
|
|
|
<img src="./resource/img/loading.svg" alt="" class="g-loading" />
|
|
|
+ <h1 class="app-loading__tip"><%= viteHtmlPluginOptions.title %></h1>
|
|
|
</section>
|
|
|
</section>
|
|
|
</div>
|
vben
