feats

src/pages/FirstVideo.vue

+<template>
+  <div class="page pg-bg">
+    <video
+      webkit-playsinline
+      playsinline
+      src="/video/开始视频.mp4"
+      autoplay="autoplay"
+      ref="vidRef"
+      @play="pause()"
+      @pause="play()"
+      @ended="router.replace('/index')"
+    />
+  </div>
+</template>
+
+<script setup>
+import { onMounted, ref, watch } from 'vue'
+import { useModel } from '@zjxpcyc/vue-tiny-store'
+import { useRouter } from 'vue-router';
+
+const { play, pause } = useModel('audio');
+const vidRef = ref();
+const first = ref(true);
+
+const router = useRouter();
+
+onMounted(() => {
+  vidRef.value.play();
+})
+
+</script>
+
+<style lang="less" scoped>
+ video {
+    width: 100%;
+    height: 100%;
+  }
+</style>

src/pages/index.vue

 <template>
   <div style="height: 100%;">
-    <div class="first-video" v-if="first">
-      <video
-        webkit-playsinline
-        playsinline
-        src="/video/开始视频.mp4"
-        autoplay="autoplay"
-        ref="vidRef"
-        @play="pause()"
-        @pause="play()"
-        @ended="first = false"
-      />
-    </div>
-    <div v-else style="height: 100%;">
-      <Bell class="bell" />
-      <div class="pages slide-container">
-        <div class="slide-page">
-          <Pg1 class="container" />
-        </div>
-        <div class="slide-page">
-          <Pg2 class="container" />
-        </div>
-        <div class="slide-page">
-          <Pg3 class="container" />
-        </div>
+    <Bell class="bell" />
+    <div class="pages slide-container">
+      <div class="slide-page">
+        <Pg1 class="container" />
+      </div>
+      <div class="slide-page">
+        <Pg2 class="container" />
+      </div>
+      <div class="slide-page">
+        <Pg3 class="container" />
       </div>
     </div>
   </div>
 // import parallaxing from '@/utils/parallaxing.js'
 
 const { play, pause } = useModel('audio');
-const vidRef = ref();
-const first = ref(true);
-
-watch(first, (val) => {
-  if (!val) {
-    const t = setTimeout(() => {
-      var slidepage = new window.slidePage({
-        slideContainer: '.slide-container',
-        slidePages: '.slide-page',
-        page: 1,
-        refresh: false,
-        dragMode: false,
-        useWheel: true,
-        useSwipe: true,
-        useAnimation : true,
-
-        // Events
-        before: function(origin,direction,target){},
-        after: function(origin,direction,target){},
-    });
-    }, 500);
-  }
-});
 
 onMounted(() => {
-  vidRef.value.play();
-
   // parallaxing()
   play()
+  
+  var slidepage = new window.slidePage({
+    slideContainer: '.slide-container',
+    slidePages: '.slide-page',
+    page: 1,
+    refresh: false,
+    dragMode: false,
+    useWheel: true,
+    useSwipe: true,
+    useAnimation : true,
+
+    // Events
+    before: function(origin,direction,target){},
+    after: function(origin,direction,target){},
+    });
 })
 </script>
 
 <style lang="less">
-.first-video {
-  position: absolute;
-  z-index: 10;
-  width: 100%;
-  height: 100%;
-  left: 0;
-  top: 0;
-
-  & > video {
-    width: 100%;
-    height: 100%;
-  }
-}
-
 .bell {
   position: fixed;
   z-index: 100;

src/router.js

 
 const routes = [
   // { path: '/', component: () => import('@/pages/Language.vue') },
-  { path: '/', component: () => import('@/pages/index.vue') },
+  { path: '/', component: () => import('@/pages/FirstVideo.vue') },
+  { path: '/index', component: () => import('@/pages/index.vue') },
   { path: '/bk1', component: () => import('@/pages/bk1/index.vue') },
   { path: '/pg2-2', component: () => import('@/pages/pg2-2/index.vue') },
   { path: '/pg4', component: () => import('@/pages/pg4/video.vue') },