home页功能完成

src/App.vue

@@ -159,10 +159,10 @@ api.fetchPanoData().then((res) => {
 }
 
 .fade-in-out-enter-active {
-  transition: opacity 2s;
+  transition: opacity 0.5s;
 }
 .fade-in-out-leave-active {
-  transition: opacity 2s;
+  transition: opacity 0.5s;
   pointer-events: none;
 }
 .fade-in-out-enter-from {

src/components/StartUp.vue

@@ -51,11 +51,21 @@ const isShowVideo = ref(false)
 const videoEl = ref(null)
 function onClickSkip() {
   videoEl.value.pause()
-  store.commit('haveShownStartUp')
+  store.commit('setHaveShownStartUp', true)
 }
 function onVideoEnd() {
-  store.commit('haveShownStartUp')
+  store.commit('setHaveShownStartUp', true)
 }
+
+const haveShownStartUp = computed(() => {
+  return store.state.haveShownStartUp
+})
+watch(haveShownStartUp, (v) => {
+  if (!v) {
+    videoEl.value.currentTime = 0
+    videoEl.value.play()
+  }
+})
 </script>
 
 <style lang="less" scoped>

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: {
@@ -49,9 +49,9 @@ export default createStore({
     declareCanStart(state) {
       state.canStart = true
     },
-    haveShownStartUp(state) {
-      state.haveShownStartUp = true
-    }
+    setHaveShownStartUp(state, value) {
+      state.haveShownStartUp = value
+    },
   },
   actions: {
   },

src/views/HomeView.vue

@@ -6,19 +6,60 @@
         class="start-up"
       />
     </transition>
-    <img
+    <transition name="fade-in-out">
+      <img
+        v-if="hoveringEntryIdx === 1"
+        class="scene-preview"
+        src="@/assets/images/scene-1-preview.jpg"
+        alt=""
+        draggable="false"
+      >
+    </transition>
+    <transition name="fade-in-out">
+      <img
+        v-if="hoveringEntryIdx === 2"
+        class="scene-preview"
+        src="@/assets/images/scene-2-preview.jpg"
+        alt=""
+        draggable="false"
+      >
+    </transition>
+    <transition name="fade-in-out">
+      <img
+        v-if="hoveringEntryIdx === 3"
+        class="scene-preview"
+        src="@/assets/images/scene-3-preview.jpg"
+        alt=""
+        draggable="false"
+      >
+    </transition>
+    <button
       class="logo"
-      src="@/assets/images/logo.png"
-      alt=""
-      draggable="false"
+      @click="onClickLogo"
     >
+      <img
+        src="@/assets/images/logo.png"
+        alt=""
+        draggable="false"
+      >
+    </button>
     <img
       class="title"
       src="@/assets/images/home-title.png"
       alt=""
       draggable="false"
     >
-    <button class="scene-entry entry-1">
+    <button
+      class="scene-entry entry-1"
+      @mouseenter="hoveringEntryIdx = 1"
+      @mouseleave="hoveringEntryIdx = 0"
+      @click="router.push({
+        name: 'PanoView',
+        query: {
+          sceneIdx: 1,
+        }
+      })"
+    >
       <img
         class=""
         src="@/assets/images/scene-entry-1.png"
@@ -26,7 +67,17 @@
         draggable="false"
       >
     </button>
-    <button class="scene-entry entry-2">
+    <button
+      class="scene-entry entry-2"
+      @mouseenter="hoveringEntryIdx = 2"
+      @mouseleave="hoveringEntryIdx = 0"
+      @click="router.push({
+        name: 'PanoView',
+        query: {
+          sceneIdx: 2,
+        }
+      })"
+    >
       <img
         class=""
         src="@/assets/images/scene-entry-2.png"
@@ -34,7 +85,17 @@
         draggable="false"
       >
     </button>
-    <button class="scene-entry entry-3">
+    <button
+      class="scene-entry entry-3"
+      @mouseenter="hoveringEntryIdx = 3"
+      @mouseleave="hoveringEntryIdx = 0"
+      @click="router.push({
+        name: 'PanoView',
+        query: {
+          sceneIdx: 3,
+        }
+      })"
+    >
       <img
         class=""
         src="@/assets/images/scene-entry-3.png"
@@ -58,6 +119,12 @@ const store = useStore()
 const canStart = computed(() => {
   return store.state.canStart
 })
+
+const hoveringEntryIdx = ref(0)
+
+function onClickLogo() {
+  store.commit('setHaveShownStartUp', false)
+}
 </script>
 
 <style lang="less" scoped>
@@ -70,13 +137,19 @@ const canStart = computed(() => {
   >.start-up{
     z-index: 3;
   }
-  >img.logo{
+  >button.logo{
     position: absolute;
     left: 100px;
     top: 100px;
-    width: 100px;
+    width: 200px;
     height: 100px;
-    background-color: blue;
+    >img{
+      position: absolute;
+      left: 0;
+      top: 0;
+      width: 100%;
+      height: 100%;
+    }
   }
   >img.title{
     position: absolute;
@@ -84,7 +157,6 @@ const canStart = computed(() => {
     top: 300px;
     width: 400px;
     height: 400px;
-    background-color: blue;
   }
   >button.scene-entry{
     position: absolute;