主页封面追加

src/App.vue

@@ -1,5 +1,7 @@
 <template>
-    <div id="app">
+  <v-app>
+    <Loading v-show="loading"></Loading>
+    <div id="app" v-show="!loading">
         <div>
             <router-view />
         </div>
@@ -41,8 +43,11 @@
         </div>
         <van-notify />
     </div>
+  </v-app>
 </template>
 <script>
+import Loading from '@/views/home/loading'
+import { VueLoading } from 'vue-loading-template'
 import { setToken } from "@/utils/auth"; // get token from cookie
 import { login, lineLogin } from "@/api/login.js";
 import Cookies from 'js-cookie'
@@ -65,12 +70,16 @@ export default {
     name: "",
     userId: "",
     pictureUrl: "",
+    loading: true,
   }),
   created: function() {
     console.log(`process.env.ENV: ${process.env.ENV}`)
     console.log(`process.env.VUE_APP_LIFF_ID: ${process.env.VUE_APP_LIFF_ID}`)
   },
   mounted: function() {
+    setTimeout(() => {
+      this.loading = false;
+    }, 1000);
     this.initializeLiff()
     if (process.env.ENV != 'production') {
       this.initVConsole()
@@ -156,7 +165,10 @@ export default {
             });
     },
 
-  }
+  },
+  components: {
+      Loading,
+  },
 };
 //这里做一个rem的fong-size的适应 默认size是1rem=100px 默认设计图是375的
 var windowWidth = document.documentElement.getBoundingClientRect().width;

src/views/home/loading.vue

@@ -0,0 +1,30 @@
+<template>
+  <div v-show="loading">
+    <div class="fullview" :style="{'background-image': `url(${require('/public/static/images/loading.png')})`}">
+    </div>
+  </div>
+</template>
+
+<script>
+import { VueLoading } from 'vue-loading-template'
+
+export default {
+  name: 'loading',
+  components: {
+    VueLoading,
+  },
+
+}
+</script>
+
+<style>
+.fullview {
+  width: 100%;
+  height: 100%;
+  background: #fefefe;
+  position: fixed;
+  top: 0;
+  left: 0;
+  background-size:100% 100%;
+}
+</style>