Home Explore Help
Register Sign In
eta_front
/
eta_report_front
2
0
Fork 0
Files Issues 0 Pull Requests 0 Wiki
Browse Source

首屏加loading

Karsa 4 months ago
parent
8fa91ff9ae
commit
6a637faa1d
5 changed files with 23 additions and 21 deletions
Unified View Show Diff Stats
  1. 16 13
      index.html
  2. 0 1
      package.json
  3. 7 0
      src/App.vue
  4. BIN
      src/assets/img/layoutLoading.png
  5. 0 7
      src/main.js

+ 16 - 13
index.html
View File 

@@ -18,19 +18,20 @@
 
           width: 100vw;
 
           width: 100vw;
 
           height: 100vh;
 
           height: 100vh;
 
           display: flex;
 
           display: flex;
 
-          align-items: center;
 
           justify-content: center;
 
           justify-content: center;
 
+          align-items: center;
 
           position: absolute;
 
           position: absolute;
 
           top: 0;
 
           top: 0;
 
           z-index: -1;
 
           z-index: -1;
 
+          color: #007aff;
 
       }
 
       }
 
 
 
       .loading {
 
       .loading {
 
-          width: 100px;
 
-          height: 100px;
 
-          border: 10px solid #176af8;
 
-          border-bottom: #cccccc 10px solid;
 
-          border-radius: 50%;
 
+          width: 50px;
 
+          height: 50px;
 
+          background: url('./src/assets/img/layoutLoading.png') no-repeat center center;
 
+          margin: 0 auto 20px;
 
+          background-size: cover;
 
           -webkit-animation: load 1.1s infinite linear;
 
           -webkit-animation: load 1.1s infinite linear;
 
       }
 
       }
 
 
 
@@ -44,17 +45,19 @@
 
       }
 
       }
 
     </style>
 
     </style>
 
   </head>
 
   </head>
 
-  <script type="module">
 
-		import { registerEtaComp } from '/public/eta_comp.js'
 
-		registerEtaComp()
 
-	 </script>
 
   <body>
 
   <body>
 
-    <div class="loading-model" id="#loadingModel">
 
-      <div class="loading"></div>
 
-      <div class="loading-text">资源加载中，请稍候...</div>
 
+    <div class="loading-model" id="loadingModel">
 
+      <div>
 
+        <div class="loading"></div>
 
+        <div class="loading-text">资源加载中，请稍候...</div>
 
+      </div>
 
     </div>
 
     </div>
 
 
 
     <div id="app"></div>
 
     <div id="app"></div>
 
     <script type="module" src="/src/main.js"></script>
 
     <script type="module" src="/src/main.js"></script>
 
+    <script type="module">
 
+      import { registerEtaComp } from '/public/eta_comp.js'
 
+      registerEtaComp()
 
+    </script>
 
   </body>
 
   </body>
 
 </html>
 
 </html>

+ 0 - 1
package.json
View File 

@@ -15,7 +15,6 @@
 
     "moment": "^2.29.1",
 
     "moment": "^2.29.1",
 
     "normalize.css": "^8.0.1",
 
     "normalize.css": "^8.0.1",
 
     "vant": "^3.3.4",
 
     "vant": "^3.3.4",
 
-    "vconsole": "^3.15.1",
 
     "vue": "^3.2.16",
 
     "vue": "^3.2.16",
 
     "vue-router": "^4.0.12",
 
     "vue-router": "^4.0.12",
 
     "vuex": "^4.0.2",
 
     "vuex": "^4.0.2",

+ 7 - 0
src/App.vue
View File 

@@ -1,4 +1,11 @@
 
 <template>
 
 <template>
 
   <router-view />
 
   <router-view />
 
 </template>
 
 </template>
 
+<script>
 
+export default {
 
+  mounted() {
 
+    document.getElementById('loadingModel').style.display='none';
 
+  }
 
+}
 
+</script>

BIN
src/assets/img/layoutLoading.png
View File


+ 0 - 7
src/main.js
View File 

@@ -10,13 +10,6 @@ import 'vant/lib/index.css';
 
 import '@/utils/rem.js';
 
 import '@/utils/rem.js';
 
 
 
 import {injectSdk} from '@/views/utils/wxShare.js';
 
 import {injectSdk} from '@/views/utils/wxShare.js';
 
-
 
-import VConsole from 'vconsole'
 
-console.log(import.meta.env.MODE)
 
-if(import.meta.env.MODE!=='production') {
 
-  new VConsole()
 
-}
 
-
 
 injectSdk()
 
 injectSdk()
 
 
 
 const app=createApp(App)
 
 const app=createApp(App)