开屏页

src/App.vue

@@ -13,6 +13,36 @@
             </keep-alive>
         </router-view>
         <phone-ver></phone-ver>
+        <Transition>
+            <swiper
+                v-if="showSplash"
+                pagination
+                :space-between="16"
+                @reachEnd="reachEnd"
+                class="appSwiper"
+                :autoplay="{ delay: 1500, disableOnInteraction: false }"
+            >
+                <swiper-slide>
+                    <img src="@assets/splash1.jpg" alt="" />
+                </swiper-slide>
+                <swiper-slide>
+                    <img src="@assets/splash2.jpg" alt="" />
+                </swiper-slide>
+                <swiper-slide>
+                    <img src="@assets/splash3.jpg" alt="" />
+                </swiper-slide>
+                <swiper-slide>
+                    <img src="@assets/splash4.jpg" alt="" />
+                </swiper-slide>
+                <swiper-slide>
+                    <img src="@assets/splash5.jpg" alt="" />
+                </swiper-slide>
+                <swiper-slide>
+                    <img src="@assets/splash6.jpg" alt="" />
+                </swiper-slide>
+                <div class="tiaozhuan" @click="goApp">跳转</div>
+            </swiper>
+        </Transition>
     </div>
 </template>
 
@@ -21,8 +51,17 @@ import AppBar from './components/AppBar.vue';
 import { computed } from 'vue';
 import PhoneVer from './components/PhoneVer.vue';
 import { mapState } from 'vuex';
+import { Swiper, SwiperSlide } from 'swiper/vue';
+
+import 'swiper/swiper.min.css';
+import 'swiper/swiper-bundle.min.css';
+
+import SwiperCore, { Pagination, Autoplay } from 'swiper';
+
+// install Swiper modules
+SwiperCore.use([Pagination, Autoplay]);
 export default {
-    components: { AppBar, PhoneVer },
+    components: { AppBar, PhoneVer, Swiper, SwiperSlide },
     name: 'App',
     provide() {
         return {
@@ -53,7 +92,8 @@ export default {
         return {
             checkEvent: null,
             keeps: [],
-            bodyScroll: 0
+            bodyScroll: 0,
+            showSplash: true
         };
     },
     watch: {
@@ -63,7 +103,23 @@ export default {
             });
         }
     },
+    mounted() {
+        if (window.cordova && StatusBar) {
+            StatusBar.overlaysWebView(false);
+        }
+    },
     methods: {
+        goApp() {
+            if (window.cordova && StatusBar) {
+                StatusBar.overlaysWebView(true);
+            }
+            this.showSplash = false;
+        },
+        reachEnd() {
+            setTimeout(() => {
+                this.goApp();
+            }, 1500);
+        },
         setKeeps(keep = [], isAdd = true, isClear = false) {
             let keeps = [...this.keeps];
             if (isAdd) {
@@ -108,4 +164,56 @@ export default {
 .scroll-wrapper {
     background-color: @bg;
 }
+
+.appSwiper {
+    position: fixed;
+    width: 100vw;
+    height: 100vh;
+    // height: var(--app-height);
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    z-index: 9999;
+    object-fit: cover;
+    opacity: 1;
+    transition: opacity 0.8s ease-in-out;
+    background-color: #000;
+    --swiper-theme-color: #fff;
+    .swiper-slide {
+        img {
+            width: 100%;
+            height: 100%;
+            object-fit: contain;
+        }
+    }
+
+    /deep/.swiper-pagination {
+        .fixedBottom(40px);
+    }
+
+    .tiaozhuan {
+        height: 26px;
+        background: rgba(0, 0, 0, 0.5);
+        border-radius: 14px;
+        font-size: 14px;
+        font-weight: 400;
+        color: #ffffff;
+        line-height: 26px;
+        padding: 0 16px;
+        position: fixed;
+        z-index: 30;
+        top: 36px;
+        right: 30px;
+    }
+}
+.v-enter-active,
+.v-leave-active {
+    transition: opacity 0.5s ease;
+}
+
+.v-enter-from,
+.v-leave-to {
+    opacity: 0;
+}
 </style>

src/main.js

@@ -228,20 +228,23 @@ if (navigator.userAgent.includes('#cordova#')) {
                         }
                     });
             }
-            loadSplash(
-                () => {
-                    setTimeout(() => {
-                        navigator.splashscreen.hide();
-                    }, 100);
-                    mountApp();
-                },
-                () => {
-                    navigator.splashscreen.hide();
-                    mountApp();
-                }
-            ).then(res => {
-                StatusBar.styleDefault();
-            });
+
+            navigator.splashscreen.hide();
+            mountApp();
+            // loadSplash(
+            //     () => {
+            //         setTimeout(() => {
+            //             navigator.splashscreen.hide();
+            //         }, 100);
+            //         mountApp();
+            //     },
+            //     () => {
+            //         navigator.splashscreen.hide();
+            //         mountApp();
+            //     }
+            // ).then(res => {
+            //     StatusBar.styleDefault();
+            // });
             calcSafeArea();
             if ('android' === window.cordova.platformId) {
                 window.AndroidNotch.getInsetTop(
@@ -345,9 +348,11 @@ if (navigator.userAgent.includes('#cordova#')) {
         false
     );
 } else {
-    loadSplash().then(res => {
-        window.$vm = app.mount('#app');
-        calcSafeArea();
-    });
+    window.$vm = app.mount('#app');
+    calcSafeArea();
+    // loadSplash().then(res => {
+    //     window.$vm = app.mount('#app');
+    //     calcSafeArea();
+    // });
     calcSafeArea();
 }