yx hace 4 años
padre
commit
68d3ebd1dc
Se han modificado 3 ficheros con 112 adiciones y 3 borrados
  1. 16 2
      public/index.html
  2. 84 0
      public/indexLoading.css
  3. 12 1
      src/main.ts

+ 16 - 2
public/index.html

@@ -14,12 +14,14 @@
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
     <meta name="viewport" content="width=device-width,initial-scale=1.0">
     <link rel="icon" href="<%= BASE_URL %>favicon.ico">
+    <!-- 首屏加载样式 -->
+    <link rel="stylesheet" href="<%= BASE_URL %>indexLoading.css" type="text/css">
+    
     <!-- 万达置顶条 -->
     <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.js"></script>
     <link rel="stylesheet" href="http://sso4pub.wanda-dev.cn/Styles/floatMenu.css" type="text/css">
     <script src="http://sso4pub.wanda-dev.cn/Scripts/common.js" type="text/javascript"></script>
     <script src="<%= BASE_URL %>systemConf.js"></script>
-    <script src="<%= BASE_URL %>g.js"></script>
     <title>万达广场管理说明书</title>
     <style>
         .map-p-label {
@@ -118,7 +120,19 @@
     </noscript>
     <!-- 置顶条问题 -->
     <div style="height:26px;background-color:#efefef;padding:0 10px" id="wd-fm"></div>
-    <div id="app"></div>
+    <div id="app">
+        <!-- 首屏加载,只在main.ts中写时,页面还是有很长时间的空白,故在此也写首屏加载 -->
+            <div class="p-index-loading">
+                <ul class="p-index-loading-box">
+                    <li class="p-index-loading-list p-index-loading-list-1" />
+                    <li class="p-index-loading-list p-index-loading-list-2" />
+                    <li class="p-index-loading-list p-index-loading-list-3" />
+                    <li class="p-index-loading-list p-index-loading-list-4" />
+                    <li class="p-index-loading-list p-index-loading-list-5" />
+                    <li class="p-index-loading-list p-index-loading-list-6" />
+                </ul>
+            </div>
+    </div>
     <script>
         // 指定条问题
         var wd_fm_info = {

+ 84 - 0
public/indexLoading.css

@@ -0,0 +1,84 @@
+.p-index-loading {
+    position: fixed;
+    left: 0;
+    top: 0;
+    background-color: white;
+    width: 100%;
+    height: 100%;
+    z-index: 9000;
+}
+.p-index-loading .p-index-loading-box {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    width: 200px;
+    height: 50px;
+    transform: translate(-100px, -60px);
+    z-index: 2001;
+}
+.p-index-loading .p-index-loading-box .p-index-loading-list {
+    border-radius: 4px;
+    width: 6px;
+    height: 100%;
+    background-color: #0091ff;
+}
+.p-index-loading .p-index-loading-box .p-index-loading-list + .p-index-loading-list {
+    margin-left: 4px;
+}
+.p-index-loading .p-index-loading-box .p-index-loading-list-1 {
+    animation: indexLoading 0.8s ease-in-out 200ms infinite alternate;
+}
+.p-index-loading .p-index-loading-box .p-index-loading-list-2 {
+    animation: indexLoading 0.8s ease-in-out 400ms infinite alternate;
+}
+.p-index-loading .p-index-loading-box .p-index-loading-list-3 {
+    animation: indexLoading 0.8s ease-in-out 600ms infinite alternate;
+}
+.p-index-loading .p-index-loading-box .p-index-loading-list-4 {
+    animation: indexLoading 0.8s ease-in-out 800ms infinite alternate;
+}
+.p-index-loading .p-index-loading-box .p-index-loading-list-5 {
+    animation: indexLoading 0.8s ease-in-out 1000ms infinite alternate;
+}
+.p-index-loading .p-index-loading-box .p-index-loading-list-6 {
+    animation: indexLoading 0.8s ease-in-out 1200ms infinite alternate;
+}
+@-moz-keyframes indexLoading {
+    0%,
+    100% {
+        transform: scaleY(1);
+    }
+    50% {
+        transform: scaleY(0.4);
+    }
+}
+@-webkit-keyframes indexLoading {
+    0%,
+    100% {
+        transform: scaleY(1);
+    }
+    50% {
+        transform: scaleY(0.4);
+    }
+}
+@-o-keyframes indexLoading {
+    0%,
+    100% {
+        transform: scaleY(1);
+    }
+    50% {
+        transform: scaleY(0.4);
+    }
+}
+@keyframes indexLoading {
+    0%,
+    100% {
+        transform: scaleY(1);
+    }
+    50% {
+        transform: scaleY(0.4);
+    }
+}

+ 12 - 1
src/main.ts

@@ -43,7 +43,18 @@ const username = 'lengqiang'
 //     }
 //     next()
 // })
-console.log('main')
+// 注册首屏加载
+import { IndexLoading } from 'meri-design'
+const indexLoading = IndexLoading();
+// 注册关闭方法,需要手动关闭
+Vue.prototype.$removeIndexLoading = () => {
+    IndexLoading.remove(indexLoading)
+}
+document.addEventListener('readystatechange',()=>{
+    if (document.readyState === 'complete') {
+        IndexLoading.remove(indexLoading)
+    }
+})
 new Vue({
     router,
     store,