startup页

src/App.vue

@@ -124,6 +124,10 @@ api.fetchPanoData().then((res) => {
   font-family: 'Source Han Serif CN-Bold';
   src: url('@/assets/style/SourceHanSerifCN-Bold.otf');
 }
+@font-face {
+  font-family: 'JingHuaLaoSong';
+  src: url('@/assets/style/jing-hua-lao-song-ti.ttf');
+}
 // i {
 //   font-style: italic;
 // }

src/components/StartUp.vue

@@ -1,12 +1,6 @@
 <template>
   <div class="start-up">
-    <img
-      class="logo"
-      src="@/assets/images/logo.png"
-      alt=""
-      draggable="false"
-    >
-    <div class="title-wrap">
+    <!-- <div class="title-wrap">
       <img
         class="title"
         src="@/assets/images/startup-title.png"
@@ -19,18 +13,26 @@
         alt=""
         draggable="false"
       >
-    </div>
-    <button
-      v-show="canStart"
-      class="start"
-      @click="onClickStart"
+    </div> -->
+    <div
+      v-if="!canStart"
+      class="progress"
     >
-      开始
-    </button>
-    <div class="cast-list">
-      <p>主办单位：中国大运河博物馆 协办单位：首都博物馆</p>
-      <p>鸣谢单位：故宫博物院 上海博物馆 南京博物院 河北博物院 山西博物院 安徽博物院 陕西省考古研究院 河北省文物考古研究院 中国丝绸博物馆 北京石刻艺术博物馆 北京市考古研究院（北京市文化遗产研究院）北京考古遗址博物馆 隆化民族博物馆 保定市满城区文化广电和旅游局 菏泽市博物馆 杭州博物馆 苏州博物馆 镇江博物馆 常州博物</p>
+      {{ loadingProgress }}%
     </div>
+    <transition name="btn-begin-fade-in">
+      <button
+        v-show="canStart"
+        class="start"
+        @click="onClickStart"
+      />
+    </transition>
+    <img
+      class="person-animation"
+      src="@/assets/images/startup-animation.png"
+      alt=""
+      draggable="false"
+    >
     <div
       v-show="isShowVideo"
       class="video-wrap"
@@ -41,15 +43,15 @@
         playsinline
         webkit-playsinline="true"
         x5-video-player-type="h5"
-        @canplaythrough="store.commit('declareCanStart')"
         @ended="onVideoEnd"
       />
-      <button
-        class="skip"
-        @click="onClickSkip"
-      >
-        跳过
-      </button>
+      <transition name="fade-in">
+        <button
+          v-show="isShowSkip"
+          class="skip"
+          @click="onClickSkip"
+        />
+      </transition>
     </div>
   </div>
 </template>
@@ -63,12 +65,25 @@ const route = useRoute()
 const router = useRouter()
 const store = useStore()
 
+const loadingProgress = ref(0)
+let loadingIntervalId = null
+loadingIntervalId = setInterval(() => {
+  loadingProgress.value++
+  if (loadingProgress.value === 100) {
+    store.commit('declareCanStart')
+    clearInterval(loadingIntervalId)
+  }
+}, 30)
+
 const canStart = computed(() => {
   return store.state.canStart
 })
 function onClickStart() {
   isShowVideo.value = true
   videoEl.value.play()
+  setTimeout(() => {
+    isShowSkip.value = true
+  }, 2000)
 }
 
 const isShowVideo = ref(false)
@@ -81,6 +96,8 @@ function onVideoEnd() {
   store.commit('setHaveShownStartUp', true)
 }
 
+const isShowSkip = ref(false)
+
 const haveShownStartUp = computed(() => {
   return store.state.haveShownStartUp
 })
@@ -105,34 +122,48 @@ watch(haveShownStartUp, (v) => {
   background-repeat: no-repeat;
   background-position: center center;
   background-color: black;
-  >img.logo{
-    position: absolute;
-    top: 32px;
-    left: 68px;
-    width: 281px;
-    height: 54px;
-  }
-  div.title-wrap{
+  // div.title-wrap{
+  //   position: absolute;
+  //   left: 50%;
+  //   transform: translateX(-50%);
+  //   top: calc(86 / @page-height-design-px * 100vh);
+  //   >img.title{
+  //     height: calc( 470 / @page-height-design-px * 100vh);
+  //   }
+  //   >img.title-sub{
+  //     position: absolute;
+  //     right: 100%;
+  //     top: 43%;
+  //     transform: translateY(-50%);
+  //     height: calc(255 / @page-height-design-px * 100vh);
+  //   }
+  // }
+  >.progress{
     position: absolute;
     left: 50%;
-    transform: translateX(-50%);
-    top: calc(86 / @page-height-design-px * 100vh);
-    >img.title{
-      height: calc( 470 / @page-height-design-px * 100vh);
-    }
-    >img.title-sub{
-      position: absolute;
-      right: 100%;
-      top: 43%;
-      transform: translateY(-50%);
-      height: calc(255 / @page-height-design-px * 100vh);
-    }
+    top: 54%;
+    transform: translate(-50%, -50%);
+    color: #614B39;
+    font-size: 36px;
+    font-family: JingHuaLaoSong;
   }
   >button.start{
     position: absolute;
     left: 50%;
-    top: 50%;
-    transform: translate(-50%, -50%);
+    top: 54%;
+    width: 314px;
+    height: 83px;
+    background-image: url(@/assets/images/startup-begin.png);
+    background-size: cover;
+    background-repeat: no-repeat;
+    background-position: center center;
+    translate: -50% -50%;
+  }
+  >img.person-animation{
+    position: absolute;
+    left: 0;
+    bottom: 0;
+    width: 100vw;
   }
   >.video-wrap{
     position: absolute;
@@ -150,10 +181,23 @@ watch(haveShownStartUp, (v) => {
     }
     >button.skip{
       position: absolute;
-      right: 100px;
-      bottom: 100px;
-      color: blue;
+      width: 291px;
+      height: 85px;
+      right: 50px;
+      bottom: 50px;
+      background-image: url(@/assets/images/startup-video-skip.png);
+      background-size: cover;
+      background-repeat: no-repeat;
+      background-position: center center;
     }
   }
 }
+
+.btn-begin-fade-in-enter-active {
+  transition: all 1.5s;
+}
+.btn-begin-fade-in-enter-from {
+  opacity: 0;
+  scale: 1.8;
+}
 </style>

src/store/index.js

@@ -3,7 +3,7 @@ import { createStore } from 'vuex'
 export default createStore({
   state: {
     panoData: null,
-    haveShownStartUp: process.env.VUE_APP_CLI_MODE === 'dev' ? true : false,
+    haveShownStartUp: process.env.VUE_APP_CLI_MODE === 'dev' ? false : false,
     canStart: false,
   },
   getters: {