让MoreContent页动起来

src/components/BtnBack.vue

@@ -0,0 +1,59 @@
+<template>
+  <div class="btn-back">
+    <button>
+      <img
+        class=""
+        :src="require(`@/assets/images/icon_back_${props.color}.png`)"
+        alt=""
+        draggable="false"
+      >
+    </button>
+  </div>
+</template>
+
+<script setup>
+import useSizeAdapt from "@/useFunctions/useSizeAdapt"
+import { ref, computed, watch, onMounted, inject } from "vue"
+import { useRoute, useRouter } from "vue-router"
+import { useStore } from "vuex"
+
+const route = useRoute()
+const router = useRouter()
+const store = useStore()
+
+const $env = inject('$env')
+
+const {
+  windowSizeInCssForRef,
+  windowSizeWhenDesignForRef,
+} = useSizeAdapt()
+
+const props = defineProps({
+  color: {
+    type: String,
+    default: 'white',
+  }
+})
+
+</script>
+
+<style lang="less" scoped>
+.btn-back{
+  position: fixed;
+  left: calc(17 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+  bottom: calc(17 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+  width: calc(30 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+  height: calc(30 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+  >button{
+    width: 100%;
+    height: 100%;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    >img{
+      width: calc(30 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+      height: calc(30 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+    }
+  }
+}
+</style>

src/components/HotspotComp.vue

@@ -0,0 +1,39 @@
+<template>
+  <div class="hotspot animation-show-hide">
+    <img
+      class=""
+      src="@/assets/images/icon_hotspot.png"
+      alt=""
+      draggable="false"
+    >
+  </div>
+</template>
+
+<script setup>
+import { ref, computed, watch, onMounted, inject } from "vue"
+import { useRoute, useRouter } from "vue-router"
+import { useStore } from "vuex"
+import useSizeAdapt from "@/useFunctions/useSizeAdapt"
+
+const {
+  windowSizeInCssForRef,
+  windowSizeWhenDesignForRef,
+} = useSizeAdapt()
+
+const route = useRoute()
+const router = useRouter()
+const store = useStore()
+
+const $env = inject('$env')
+</script>
+
+<style lang="less" scoped>
+.hotspot{
+  width: calc(33 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+  height: calc(33 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+  >img{
+    width: 100%;
+    height: 100%;
+  }
+}
+</style>

src/main.js

@@ -12,15 +12,14 @@ import ElementPlus from 'element-plus'
 import 'element-plus/dist/index.css'
 import VueLazyLoad from 'vue3-lazyload'
 
-// import BtnBack from '@/components/BtnBack.vue'
+import BtnBack from '@/components/BtnBack.vue'
 // import BtnClickMe from '@/components/BtnClickMe.vue'
 import OperationTip from '@/components/OperationTip.vue'
-// import HotspotComp from '@/components/HotspotComp.vue'
+import HotspotComp from '@/components/HotspotComp.vue'
 // import HotspotForHomepage from '@/components/HotspotForHomepage.vue'
 import SerialFrames from '@/components/LongImageSerialFrames.vue'
 // import BtnSkip from '@/components/BtnSkip.vue'
 // import PaginationComp from '@/components/PaginationComp.vue'
-// import ProgressBar from '@/components/ProgressBar.vue'
 
 console.log(`version: ${process.env.VUE_APP_VERSION}`)
 console.log(`Build time: ${process.env.VUE_APP_UPDATE_TIME}`)
@@ -87,17 +86,16 @@ app.use(store)
   .use(VueViewer)
   .use(ElementPlus)
   .use(VueLazyLoad)
-//   .component('BtnBack', BtnBack)
+  .component('BtnBack', BtnBack)
 //   .component('BtnClickMe', BtnClickMe)
   .component('OperationTip', OperationTip)
-//   .component('HotspotComp', HotspotComp)
+  .component('HotspotComp', HotspotComp)
 //   .component('HotspotForHomepage', HotspotForHomepage)
 //   .component('Swiper', Swiper)
 //   .component('SwiperSlide', SwiperSlide)
   .component('SerialFrames', SerialFrames)
 //   .component('BtnSkip', BtnSkip)
 //   .component('PaginationComp', PaginationComp)
-//   .component('ProgressBar', ProgressBar)
   .mount('#app')
 
 //  you can reset the default options at any other time

src/views/MoreContent.vue

@@ -1,12 +1,9 @@
 <template>
   <div
-    v-show="isReady"
     :class="`more-content`"
   >
     <div
       ref="scrollTarget"
-      v-touch:swipe.left="onSwipeLeft"
-      v-touch:swipe.right="onswipeRight"
       class="scroll-target"
     >
       <img
@@ -301,14 +298,6 @@
       </div>
     </div>
 
-    <ProgressBar
-      class="pagination"
-      :totle-unit="4"
-      :type="1"
-      :cur-percentage="currentAnchorIdx"
-      color-ac="#7B916B"
-      color="#7B916B60"
-    />
     <BtnBack @click="router.replace('/?back=1')" />
 
     <OperationTip
@@ -383,20 +372,10 @@ const route = useRoute()
 const router = useRouter()
 const store = useStore()
 
-
-// 点击线上展厅
-const OpenScene = () => {
-  const musicDom = document.getElementById("bg-music")
-  musicDom.pause()
-  router.replace('/scene')
-}
-
-
-
 const { windowSizeInCssForRef, windowSizeWhenDesignForRef } = useSizeAdapt()
 
-const windowWidthDesign = 1560
-const windowHeightDesign = 844
+const windowWidthDesign = 4674
+const windowHeightDesign = 1080
 
 const scrollTarget = ref(null)
 const { width: windowWidth, height: windowHeight } = useWindowSize()
@@ -411,26 +390,11 @@ const positionNumInit = computed(() => {
 })
 
 const {
-  onSwipeLeft,
-  onswipeRight,
   translateLength,
-  currentAnchorIdx,
 } = useSmoothSwipe({
   scrollTargetRef: scrollTarget,
   maxTranslateLength,
   viewportWidth: windowWidth,
-  anchorPosList: [
-    (maxTranslateLength.value * positionNumInit.value) / windowWidthDesign -
-      windowWidth.value / 2,
-    (maxTranslateLength.value * 800) / windowWidthDesign -
-      windowWidth.value / 2,
-    (maxTranslateLength.value * 1320) / windowWidthDesign -
-      windowWidth.value / 2,
-    (maxTranslateLength.value * 1840) / windowWidthDesign -
-      windowWidth.value / 2,
-    // maxTranslateLength.value - windowWidth.value
-  ],
-  initialAnchorIdx: Number(route.query.anchorIdx) || 0,
 })
 
 // 背景位移
@@ -471,8 +435,6 @@ watch(
   }
 )
 
-
-
 const videoFadeAtShuangGouEl = ref(null)
 const isShowVideoFadeAtShuangGou = ref(false)
 function onClickShuangGouEntry() {
@@ -505,37 +467,12 @@ function onClickEntryAtMoZhu(pathName) {
 const videoFadeAtPage3El = ref(null)
 const isShowVideoFadeAtPage3 = ref(false)
 
-const isReady = ref(true)
-
-onBeforeMount(() => {
-  // 第一个页面跳转 要白屏渐进  其他页面不用
-  if (route.query.anchorIdx) {
-    if (route.query.anchorIdx == 0) isReady.value = false
-  } else isReady.value = false
-
-  // window.addEventListener("resize", () => {
-  //   window.setTimeout(() => {
-  //     // 根元素
-  //     const dom = document.querySelector("#app")
-  //     if (dom && document.documentElement.clientWidth < 1000) {
-  //       windowWidth.value = document.documentElement.clientWidth
-  //       windowHeight.value = document.documentElement.clientHeight
-  //     }
-  //   }, 100)
-  // })
-  if (!isReady.value) {
-    setTimeout(() => {
-      isReady.value = true
-    }, 300)
-  }
-})
-
-// onMounted(() => {
-//   window.dispatchEvent(new Event("resize"))
-//   windowWidth.value = window.windowWidth
-//   windowHeight.value = window.windowHeight
-
-// })
+// 点击线上展厅
+const OpenScene = () => {
+  const musicDom = document.getElementById("bg-music")
+  musicDom.pause()
+  router.replace('/scene')
+}
 </script>
 
 <style lang="less" scoped>

vue.config.js

@@ -23,6 +23,11 @@ module.exports = defineConfig({
       ]
     },
     plugins: [
+      new webpack.DefinePlugin({
+        // Vue CLI is in maintenance mode, and probably won't merge my PR to fix this in their tooling
+        // https://github.com/vuejs/vue-cli/pull/7443
+        __VUE_PROD_HYDRATION_MISMATCH_DETAILS__: 'false',
+      }),
       new webpack.ProvidePlugin({
         utils: ['/src/utils.js', 'default'],
         config: ['/src/config.js', 'default'],