feat: 移动端首页交互

src/components/HotspotDialog-1.vue

@@ -859,7 +859,7 @@ const close = () => {
   width: 856px;
 }
 .hym-photo {
-  width: 1273px;
+  width: 805px;
 }
 .box3-min {
   width: 1061px;

src/components/StartUp.vue

@@ -39,7 +39,7 @@
     >
       <video
         ref="videoEl"
-        src="@/assets/videos/start-up-video.mp4"
+        :src="$isMobile ? startVideoMobile : startVideo"
         playsinline
         webkit-playsinline="true"
         x5-video-player-type="h5"
@@ -58,13 +58,13 @@
 </template>
 
 <script setup>
-import { ref, computed, watch, onMounted } from "vue"
-import { useRoute, useRouter } from "vue-router"
+import { ref, computed, watch, inject } from "vue"
 import { useStore } from "vuex"
+import startVideo from '@/assets/videos/start-up-video.mp4'
+import startVideoMobile from '@/assets/videos/start-up-video-mb.mp4'
 // import startupVoiceUrl from '@/assets/audios/startup-voice.mp3'
 
-const route = useRoute()
-const router = useRouter()
+const $isMobile = inject('$isMobile')
 const store = useStore()
 
 const canStart = computed(() => {
@@ -131,7 +131,6 @@ function onClickSkip() {
   left: 0;
   top: 0;
   width: 100%;
-  height: 100%;
   background-image: url(@/assets/images/start-up-bg.jpg);
   background-size: cover;
   background-repeat: no-repeat;

src/views/HomeView.vue

@@ -25,58 +25,25 @@
         >
       </div>
     </transition>
-    <transition name="fade-in-out">
-      <div
-        v-if="hoveringEntryIdx === 1"
-        class="scene-preview scene-preview-1"
-      >
-        <img
-          class="bg"
-          src="@/assets/images/scene-1-preview.jpg"
-          alt=""
-          draggable="false"
-        >
-        <img
-          class="title"
-          src="@/assets/images/scene-preview-title-1.png"
-          alt=""
-          draggable="false"
-        >
-      </div>
-    </transition>
-    <transition name="fade-in-out">
-      <div
-        v-if="hoveringEntryIdx === 2"
-        class="scene-preview scene-preview-2"
-      >
-        <img
-          class="bg"
-          src="@/assets/images/scene-2-preview.jpg"
-          alt=""
-          draggable="false"
-        >
-        <img
-          class="title"
-          src="@/assets/images/scene-preview-title-2.png"
-          alt=""
-          draggable="false"
-        >
-      </div>
-    </transition>
-    <transition name="fade-in-out">
+    <transition
+      v-for="idx in 3"
+      :key="idx"
+      name="fade-in-out"
+    >
       <div
-        v-if="hoveringEntryIdx === 3"
-        class="scene-preview scene-preview-3"
+        v-if="hoveringEntryIdx === idx"
+        :class="`scene-preview scene-preview-${idx}`"
+        @click="goToDetail(idx)"
       >
         <img
           class="bg"
-          src="@/assets/images/scene-3-preview.jpg"
+          :src="require(`@/assets/images/scene-${idx}-preview.jpg`)"
           alt=""
           draggable="false"
         >
         <img
           class="title"
-          src="@/assets/images/scene-preview-title-3.png"
+          :src="require(`@/assets/images/scene-preview-title-${idx}.png`)"
           alt=""
           draggable="false"
         >
@@ -94,72 +61,128 @@
     </button>
     <div class="btn-group">
       <button
-        class="scene-entry entry-1"
-        @mouseenter="hoveringEntryIdx = 1"
-        @mouseleave="hoveringEntryIdx = 0"
-        @click="router[$isMobile ? 'replace' : 'push']({
-          name: 'PanoView',
-          query: {
-            sceneIdx: 0,
-            cameraIdx: 0,
-          }
-        })"
-      />
-      <button
-        class="scene-entry entry-2"
-        @mouseenter="hoveringEntryIdx = 2"
-        @mouseleave="hoveringEntryIdx = 0"
-        @click="router[$isMobile ? 'replace' : 'push']({
-          name: 'PanoView',
-          query: {
-            sceneIdx: 1,
-            cameraIdx: 0,
-          }
-        })"
-      />
-      <button
-        class="scene-entry entry-3"
-        @mouseenter="hoveringEntryIdx = 3"
-        @mouseleave="hoveringEntryIdx = 0"
-        @click="router[$isMobile ? 'replace' : 'push']({
-          name: 'PanoView',
-          query: {
-            sceneIdx: 2,
-            cameraIdx: 0,
-          }
-        })"
+        v-for="idx in 3"
+        :key="idx"
+        :class="`scene-entry entry-${idx} ${($isMobile && idx === hoveringEntryIdx) ? 'hover' : ''}`"
+        @mouseenter="!$isMobile && (hoveringEntryIdx = idx)"
+        @mouseleave="!$isMobile && (hoveringEntryIdx = 0)"
+        @click="handleGroup(idx)"
       />
     </div>
   </div>
+
+  <template v-if="$isMobile">
+    <img
+      v-if="showHelper"
+      class="mobile-helper"
+      src="@/assets/images/mobile/icon_click_prompt-min.png"
+    >
+
+    <img
+      class="icon-left"
+      src="@/assets/images/mobile/left-min.png"
+      @click="handleHover(-1)"
+    >
+    <img
+      class="icon-right"
+      src="@/assets/images/mobile/right-min.png"
+      @click="handleHover(1)"
+    >
+  </template>
 </template>
 
 <script setup>
-import { ref, onMounted, inject } from "vue"
+import { ref, onMounted, inject, watch } from "vue"
 import { useRouter } from "vue-router"
 import { useStore } from "vuex"
 import StartUp from '@/components/StartUp.vue'
+
 const {
   windowSizeInCssForRef,
   windowSizeWhenDesignForRef,
 } = useSizeAdapt()
 
 const $isMobile = inject('$isMobile')
+const stopBgAudio = inject('stopBgAudio')
 const router = useRouter()
 const store = useStore()
-const stopBgAudio = inject('stopBgAudio')
 
-const hoveringEntryIdx = ref(0)
+const showHelper = ref(true)
+const hoveringEntryIdx = ref($isMobile ? 1 : 0)
 
 onMounted(() => {
   stopBgAudio()
 })
 
+watch(() => store.state.haveShownStartUp, e => {
+  if (e && showHelper.value) {
+    setTimeout(() => {
+      showHelper.value = false
+    }, 4000)
+  }
+})
+
 function onClickLogo() {
   store.commit('setHaveShownStartUp', false)
 }
+
+const handleGroup = (idx) => {
+  if (!$isMobile) {
+    router.push({
+      name: 'PanoView',
+      query: {
+        sceneIdx: idx - 1,
+        cameraIdx: 0,
+      }
+    })
+  } else {
+    hoveringEntryIdx.value = idx
+  }
+}
+
+const goToDetail = (idx) => {
+  if (!$isMobile) return
+
+  router.replace({
+    name: 'PanoView',
+    query: {
+      sceneIdx: idx - 1,
+      cameraIdx: 0,
+    }
+  })
+}
+
+const handleHover = (num) => {
+  const _num = Math.max(hoveringEntryIdx.value + num, 1)
+  hoveringEntryIdx.value = _num > 3 ? 3 : _num
+}
 </script>
 
 <style lang="less" scoped>
+.mobile-helper {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  margin-top: -80px;
+  width: 283px;
+  transform: translate(-50%, -50%);
+  animation: show-hide 1.8s infinite;
+  z-index: 1;
+}
+.icon-left,
+.icon-right {
+  position: absolute;
+  top: 50%;
+  width: 79px;
+  transform: translateY(-50%);
+  z-index: 1;
+}
+.icon-left {
+  left: 0;
+}
+.icon-right {
+  right: 0;
+}
 .home{
   height: 100%;
   background-image: url(@/assets/images/home-bg-bg.jpg);
@@ -246,7 +269,8 @@ function onClickLogo() {
       background-position: center center;
       width: calc(521 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
       height: calc(369 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
-      &:hover{
+      &:hover,
+      &.hover{
         background-image: url(@/assets/images/scene-entry-1-active.png);
         width: calc(521 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
         height: calc(369 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
@@ -275,7 +299,8 @@ function onClickLogo() {
       background-position: center center;
       width: calc(558 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
       height: calc(379 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
-      &:hover{
+      &:hover,
+      &.hover{
         background-image: url(@/assets/images/scene-entry-2-active.png);
         transform: translate(calc(-20 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef')), calc(0 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef')));
         width: calc(558 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
@@ -306,7 +331,8 @@ function onClickLogo() {
       background-position: center center;
       width: calc(432 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
       height: calc(367 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
-      &:hover{
+      &:hover,
+      &.hover{
         background-image: url(@/assets/images/scene-entry-3-active.png);
         transform: translate(calc(-20 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef')), calc(0 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef')));
         width: calc(432 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));