Merge branch 'master' of http://192.168.0.115:3000/renyicun/NanjingMuseumWuJinZang-PC

.eslintrc.js

@@ -52,5 +52,6 @@ module.exports = {
     useSizeAdapt: true,
     defineProps: true,
     defineEmits: true,
+    configText: true,
   }
 }

src/App.vue

@@ -6,7 +6,7 @@
   </router-view>
   <audio
     id="bg-music"
-    src="./configMultiMedia/music/music1.mp3"
+    src="./configMultiMedia/music/music2.mp3"
     style="opacity: 0;"
   />
 </template>

src/components/HotspotForHomepage.vue

@@ -0,0 +1,45 @@
+<template>
+  <div class="hotspot animation-show-hide-for-home-hotspot">
+    <img
+      class=""
+      src="@/assets/images/icon_hotspot.png"
+      alt=""
+      draggable="false"
+    >
+  </div>
+</template>
+
+<script setup>
+import useSizeAdapt from "@/useFunctions/useSizeAdapt"
+
+const {
+  windowSizeInCssForRef,
+  windowSizeWhenDesignForRef,
+} = useSizeAdapt()
+
+</script>
+
+<style lang="less" scoped>
+.hotspot{
+  width: 48px;
+  height: 48px;
+  >img{
+    width: 100%;
+    height: 100%;
+  }
+}
+.animation-show-hide-for-home-hotspot {
+  animation: show-hide 2.5s infinite;
+}
+@keyframes show-hide {
+  0% {
+    opacity: 0;
+  }
+  50% {
+    opacity: 1;
+  }
+  100% {
+    opacity: 0;
+  }
+}
+</style>

src/components/OperationTip.vue

@@ -4,18 +4,20 @@
       v-show="isShow"
       class="operation-tip"
     >
+      <img
+        class=""
+        :src="
+          require(`@/assets/images/icon_operation_${props.direction}_${props.color}.png`)
+        "
+        alt=""
+        draggable="false"
+      >
       <div
         v-if="props.text"
         class="text"
       >
         {{ props.text }}
       </div>
-      <img
-        class=""
-        :src="require(`@/assets/images/icon_operation_${props.direction}_${props.color}.png`)"
-        alt=""
-        draggable="false"
-      >
     </div>
   </Transition>
 </template>
@@ -24,36 +26,32 @@
 import useSizeAdapt from "@/useFunctions/useSizeAdapt"
 import { ref, computed, watch } from "vue"
 
-
-const {
-  windowSizeInCssForRef,
-  windowSizeWhenDesignForRef,
-} = useSizeAdapt()
+const { windowSizeInCssForRef, windowSizeWhenDesignForRef } = useSizeAdapt()
 
 const props = defineProps({
   direction: {
     type: String,
-    default: 'v', // h
+    default: "v", // h
   },
   color: {
     type: String,
-    default: 'white', // 'green'
+    default: "white", // 'green'
   },
   text: {
     type: String,
-    default: '',
+    default: "",
   },
   isShow: {
     type: Boolean,
     default: true,
-  }
+  },
 })
 
 const color = computed(() => {
-  if (props.color === 'white') {
-    return '#fff'
-  } else if (props.color === 'green') {
-    return '#7B916B'
+  if (props.color === "white") {
+    return "#fff"
+  } else if (props.color === "green") {
+    return "#7B916B"
   } else {
     return props.color
   }
@@ -74,20 +72,21 @@ watch(propIsShow, (v) => {
 </script>
 
 <style lang="less" scoped>
-.operation-tip{
+.operation-tip {
   position: fixed;
   display: flex;
+  flex-direction: column;
   align-items: center;
-  >.text{
-    color: v-bind('color');
+  > .text {
+    color: v-bind("color");
     margin-right: 5px;
     font-family: KaiTi;
     font-weight: 400;
     font-size: 20px;
   }
-  >img{
+  > img {
     width: 40px;
     height: 41px;
   }
 }
-</style>
+</style>

src/main.js

@@ -16,7 +16,7 @@ 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 HotspotForHomepage from '@/components/HotspotForHomepage.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'
@@ -90,7 +90,7 @@ app.use(store)
 //   .component('BtnClickMe', BtnClickMe)
   .component('OperationTip', OperationTip)
   .component('HotspotComp', HotspotComp)
-//   .component('HotspotForHomepage', HotspotForHomepage)
+  .component('HotspotForHomepage', HotspotForHomepage)
 //   .component('Swiper', Swiper)
 //   .component('SwiperSlide', SwiperSlide)
   .component('SerialFrames', SerialFrames)

src/rollFu.js

@@ -1,33 +1,32 @@
-import { ref } from 'vue'
-export default function rollFu() {
-
-  let lastScrollTop = ref(0)
-  // 节流函数
-  function throttle(func, delay) {
-    let inThrottle
-    return function () {
-      const args = arguments
-      const context = this
-      if (!inThrottle) {
-        func.apply(context, args)
-        inThrottle = true
-        setTimeout(() => inThrottle = false, delay)
-      }
-    }
-  }
 
+export default function useRollFu() {
   // 滚动事件处理器(传入滚动元素和前进后退函数)
-  const handleScroll = throttle(function (element, fu) {
-    const st = element.scrollTop
-    if (st > lastScrollTop.value) {
-      console.log('向下滚动')
-      fu(1)
-    } else {
-      console.log('向上滚动')
+  // const handleScroll = throttle(function (event, fu) {
+  //   const st = event.target.scrollTop
+  //   console.log(st)
+  //   // if (st > lastScrollTop.value) {
+  //   //   console.log('向下滚动')
+  //   //   fu(1)
+  //   // } else {
+  //   //   console.log('向上滚动')
+  //   //   fu(-1)
+  //   // }
+  //   // lastScrollTop.value = st <= 0 ? 0 : st // For Firefox
+  // }, 1000)
+
+  const handleScroll = function (event, fu) {
+    // const st = event.target.scrollTop
+
+    if (event.deltaY < 0) {
+      console.log('滚轮上滑')
       fu(-1)
+    } else if (event.deltaY > 0) {
+      console.log('滚轮下滑')
+      fu(1)
     }
-    lastScrollTop = st <= 0 ? 0 : st // For Firefox
-  }, 100)
+
+  }
+
 
   return {
     handleScroll

src/views/HomeView.vue

@@ -1,9 +1,12 @@
-
 <script setup>
-import { ref, computed, watch, onMounted, inject } from "vue"
+import { ref, inject } from "vue"
 import { useRoute, useRouter } from "vue-router"
 import { useStore } from "vuex"
 import Startup from "@/views/StartupView.vue"
+import useRollFu from "../rollFu.js"
+
+import HotspotDetail3 from "@/views/HotspotDetail3.vue"
+import HotspotDetail1 from "@/views/HotspotDetail1.vue"
 
 
 const route = useRoute()
@@ -12,11 +15,39 @@ const store = useStore()
 
 const $env = inject("$env")
 
+const { handleScroll } = useRollFu()
+
+const isShowOperationTip = ref(true)
+
+const isShowHotspotDetail1 = ref(false)
+const isShowHotspotDetail3 = ref(false)
+
+// 滑动逻辑
+const scrollFu = (val) => {
+
+  if (val == -1) {
+    // 上滚
+    console.log("上滚")
+  } else if (val == 1) {
+    // 下滚
+    console.log("下滚")
+    isShowOperationTip.value = false
+  }
+}
+
 const curPageIndex = ref(0)
 </script>
 
 <template>
   <div class="home">
+    <!-- 滚动区域 -->
+    <div
+      ref="scroller"
+      class="scroller"
+      @wheel="($event) => handleScroll($event, (val) => scrollFu(val))"
+    >
+      <div class="scroller-content" />
+    </div>
     <!-- 背景 -->
     <div
       class="bg-mask"
@@ -80,15 +111,130 @@ const curPageIndex = ref(0)
       </div>
     </div>
 
+    <!-- 画作 -->
+    <div
+      class="painting-wrap"
+      :class="{
+        'painting-wrap1': curPageIndex == 0,
+        'painting-wrap2': curPageIndex == 1,
+        'painting-wrap3': curPageIndex == 2 || curPageIndex == 3,
+        'painting-wrap4': curPageIndex == 4,
+        'painting-wrap5': curPageIndex == 5,
+      }"
+      @click="
+        () => {
+          curPageIndex == 1 ? (curPageIndex = 2) : '';
+        }
+      "
+    >
+      <img
+        class="painting-border"
+        src="@/assets/images/painting-border-new.png"
+        alt=""
+        draggable="false"
+      >
+      <img
+        class="painting-stem"
+        src="@/assets/images/home-painting1.jpg"
+        alt=""
+        draggable="false"
+      >
+      <img
+        class="painting-stem"
+        src="@/assets/images/home-painting2.jpg"
+        alt=""
+        draggable="false"
+      >
+      <img
+        :style="{ opacity: curPageIndex == 3 ? 1 : 0, zIndex: 3 }"
+        class="painting-stem"
+        src="@/assets/images/home-painting-stem.png"
+        alt=""
+      >
+
+      <img
+        class="painting-stem"
+        src="@/assets/images/img_zhuye-min2.png"
+        alt=""
+        :style="{
+          opacity: curPageIndex == 4 ? 1 : 0,
+          zIndex: 2,
+        }"
+        draggable="false"
+      >
+
+      <img
+        class="painting-stem"
+        src="@/assets/images/img_stone_all-min.png"
+        :style="{
+          opacity: curPageIndex == 5 ? 1 : 0,
+          zIndex: 2,
+        }"
+        alt=""
+        draggable="false"
+      >
+    </div>
+
+    <!-- 热点层1 -->
+    <div class="hotspot-wrap">
+      <HotspotForHomepage
+        v-show="curPageIndex == 0"
+        class="hotspot-1"
+        @click="isShowHotspotDetail1 = true"
+      />
+      <HotspotForHomepage
+        v-show="curPageIndex == 0"
+        class="hotspot-3"
+        @click="isShowHotspotDetail3 = true"
+      />
+    </div>
+
+    <!-- 轴/卷/册热点详情 -->
+    <Transition name="fade-in-out">
+      <HotspotDetail3
+        v-if="isShowHotspotDetail3"
+        class="hotspot-detail"
+        @close="isShowHotspotDetail3 = false"
+      />
+    </Transition>
+
+    <!-- 材质热点详情 -->
+    <Transition name="fade-in-out">
+      <HotspotDetail1
+        v-if="isShowHotspotDetail1"
+        class="hotspot-detail"
+        @close="isShowHotspotDetail1 = false"
+      />
+    </Transition>
+
     <!-- 滑动提示 -->
+    <OperationTip
+      v-show="curPageIndex == 0"
+      class="operation-tip"
+      text="向下滑动"
+      :is-show="isShowOperationTip"
+    />
   </div>
 </template>
 
-
 <style lang="less" scoped>
 .home {
   width: 100%;
   height: 100%;
+  > .scroller {
+    width: 100vw;
+    max-height: 100vh;
+    overflow: auto;
+    background: rgba(255, 255, 0, 0);
+    position: absolute;
+    top: 0;
+    z-index: 10;
+    opacity: 0;
+    .scroller-content {
+      width: 100%;
+      height: 200vh;
+    }
+  }
   > .bg-mask {
     position: absolute;
     left: 0;
@@ -112,7 +258,7 @@ const curPageIndex = ref(0)
 
   > .title-wrap {
     position: absolute;
-    right: 20%;
+    right: 25%;
     top: 50%;
     transform: translateY(-50%);
     width: 100px;
@@ -137,7 +283,7 @@ const curPageIndex = ref(0)
       font-weight: 400;
       font-size: 20px;
       color: #ffffff;
-      line-height:30px;
+      line-height: 30px;
       white-space: pre;
       letter-spacing: 0.2em;
       text-align: center;
@@ -155,7 +301,7 @@ const curPageIndex = ref(0)
     display: flex;
     flex-direction: column;
     justify-content: space-between;
-    z-index: 2;
+    z-index: 10;
 
     > .page2-box {
       display: flex;
@@ -178,6 +324,84 @@ const curPageIndex = ref(0)
       }
     }
   }
+  > .painting-wrap {
+    position: absolute;
+    left: 50%;
+    top: 50%;
+    width: 551.84px;
+    height: 937.05px;
+    // background: green;
+    transform: translate(-50%, -50%);
+    z-index: 1;
 
+    > .painting-border {
+      width: 100%;
+      height: 100%;
+      position: absolute;
+    }
+
+    > .painting-stem {
+      width: 80%;
+      height: calc(
+        371 / v-bind("windowSizeWhenDesignForRef") *
+          v-bind("windowSizeInCssForRef")
+      );
+      position: absolute;
+      left: 50%;
+      transform: translate(-50%, 26%);
+    }
+  }
+
+  > .hotspot-wrap {
+    position: absolute;
+    left: 50%;
+    top: 50%;
+    transform: translate(-46%, -50%);
+    width: 551.84px;
+    height: 937.05px;
+    z-index: 7;
+    pointer-events: none;
+    will-change: transform;
+    backface-visibility: hidden;
+    z-index: 10;
+
+    & > div {
+      z-index: 100;
+      transition: all 1.5s ease-in-out;
+      cursor: pointer;
+    }
+
+    > .hotspot-1 {
+      position: absolute;
+      top: 100px;
+      right: 25px;
+      pointer-events: initial;
+    }
+
+    // > .hotspot-2 {
+    //   position: absolute;
+    //   left: 60px;
+    //   top: 60px;
+    //   pointer-events: initial;
+    // }
+
+    > .hotspot-3 {
+      position: absolute;
+      bottom: 0px;
+      right: 25px;
+      pointer-events: initial;
+    }
+  }
+  > .hotspot-detail {
+    z-index: 21;
+  }
+
+  > .operation-tip {
+    position: absolute;
+    right: 30px;
+    transform: translateX(-50%);
+    top: 50%;
+    transform: translateY(-50%);
+  }
 }
 </style>

src/views/HotspotDetail1.vue

@@ -0,0 +1,364 @@
+<template>
+  <div :class="`hotspot-detail-1 ${pageLev === 1 ? '' : 'hotspot-detail-2'}`">
+    <!-- 左上角 -->
+    <img
+      class="HD1_1"
+      :src="require(`@/assets/images/HD1/img_title.png`)"
+      :style="`opacity:${pageLev === 1 ? '1' : '0'}`"
+    >
+    <!-- 中间--点击查看 -->
+    <!-- <div :class="`HD1_2 ${isLookImg ? '' : 'HD1_2Hide'}`">
+      <img
+        class=""
+        :src="require(`@/assets/images/icon-click-tip.png`)"
+        alt=""
+        draggable="false"
+      >
+      <div>点 击 查 看</div>
+    </div> -->
+
+    <!-- 右边三个画 -->
+    <div
+      v-for="(item, index) in imgList"
+      :key="item.id"
+      :class="`HD1_3 HD1_3_${index + 1} ${
+        pageLev === item.id ? 'HD1_3Ac' : ''
+      } ${imgBottomLoc(pageLev, item.id)} ${pageShow ? 'HD1_3AcBottom' : ''}
+      `"
+      @click="ImgClick(item)"
+    >
+      <div
+        v-show="pageLev === item.id"
+        v-touch:swipe.left="() => onSwipeChange(1, index)"
+        v-touch:swipe.right="() => onSwipeChange(-1, index)"
+        :swipe-options="{ direction: 'horizontal' }"
+        class="HD1_3AcMove"
+      >
+        <!-- :text="`${pageLev===11?'向右':pageLev===13?'向左':'左右'}滑动`" -->
+        <OperationTip
+          v-if="isShowOperationTip"
+          class="operation-tip"
+          :direction="'h'"
+          :is-show="isShowOperationTip"
+          color="green"
+          text="左右滑动"
+        />
+      </div>
+
+      <img
+        :src="
+          require(`@/assets/images/HD1/img${pageShow ? '' : '_list'}_${
+            item.imgName
+          }.png`)
+        "
+        alt=""
+      >
+    </div>
+
+    <!-- 顶部文字 -->
+    <div
+      :class="`HD1_4 ${pageShow ? 'HD1_4Ac' : ''}`"
+      :style="`opacity:${swChange && pageShow ? '1' : '0'}`"
+    >
+      <h3>{{ txtShow.title }}</h3>
+      <p>{{ txtShow.desc }}</p>
+    </div>
+
+    <BtnBack
+      color="green"
+      @click="backBtnFu"
+    />
+  </div>
+</template>
+
+<script setup>
+import { ref } from "vue"
+
+const emit = defineEmits(["close"])
+
+const craftInfo = configText.craft
+
+const imgList = [
+  {
+    id: 11,
+    imgName: "juan",
+    title: craftInfo[3].title,
+    desc: craftInfo[3].desc,
+  },
+  {
+    id: 12,
+    imgName: "ling",
+    title: craftInfo[5].title,
+    desc: craftInfo[5].desc,
+  },
+  {
+    id: 13,
+    imgName: "paper",
+    title: craftInfo[4].title,
+    desc: craftInfo[4].desc,
+  },
+]
+
+const imgListLocObj = {
+  11: {
+    12: "HD1_3HideRight",
+    13: "HD1_3HideLeft",
+  },
+  12: {
+    13: "HD1_3HideRight",
+    11: "HD1_3HideLeft",
+  },
+  13: {
+    11: "HD1_3HideRight",
+    12: "HD1_3HideLeft",
+  },
+}
+
+// 当前页面 层级
+const pageLev = ref(1)
+const pageShow = ref(false)
+
+// 点击返回按钮
+const backBtnFu = () => {
+  if (pageLev.value !== 1) {
+    // 点击查看回复
+    isLookImg.value = true
+
+
+    pageShow.value = false
+    pageLev.value = 1
+  } else emit("close")
+}
+
+// 点击查看自动消失
+const isLookImg = ref(true)
+// onMounted(() => {
+//   setTimeout(() => {
+//     isLookImg.value = false
+//   }, 3000)
+// })
+
+// 页面展示的文字
+const txtShow = ref({
+  title: "",
+  desc: "",
+})
+const isShowOperationTip = ref(false)
+
+// 点击图片
+const ImgClick = (item) => {
+  if (!isShowOperationTip.value) {
+    isShowOperationTip.value = true
+
+  }
+
+  pageShow.value = true
+  isLookImg.value = false
+  pageLev.value = item.id
+  txtShow.value = {
+    title: item.title,
+    desc: item.desc,
+  }
+}
+
+const swChange = ref(true)
+
+// 左滑右滑
+const onSwipeChange = (num, index) => {
+  isShowOperationTip.value = false
+  let newItem = imgList[index + num]
+
+  if (index === 0 && num === -1) {
+    // 第一 还向左滑
+    newItem = imgList[imgList.length - 1]
+    // return
+  }
+  if (index === imgList.length - 1 && num === 1) {
+    newItem = imgList[0]
+    // return
+  }
+
+  if (swChange.value) {
+    swChange.value = false
+    setTimeout(() => {
+      swChange.value = true
+    }, 600)
+  }
+
+  pageLev.value = newItem.id
+
+  setTimeout(() => {
+    txtShow.value = {
+      title: newItem.title,
+      desc: newItem.desc,
+    }
+  }, 500)
+}
+
+// 判断画轴的位置 在 左边还是右边
+const imgBottomLoc = (nowId, itemId) => {
+  // nowId:当前选中的id
+  // itemId 11 12 13
+  // nowId 11的时候 itemId 12在右边 itemId 13在左边
+  // nowId 12的时候 itemId 11在左边 itemId 13在右边
+  // nowId 13的时候 itemId 11在右边 itemId 12在左边
+  return pageShow.value ? imgListLocObj[nowId][itemId] : ""
+}
+</script>
+
+<style lang="less" scoped>
+.hotspot-detail-1 {
+  position: absolute;
+  left: 0;
+  top: 0;
+  width: 100%;
+  height: 100%;
+  background-image: url("../assets/images/HD1/bg_caizhi.jpg");
+  background-size: 100% 100%;
+  background-color: #b6bfb3;
+  transition: all 1s;
+  .btn-back {
+    z-index: 20;
+  }
+  .HD1_1 {
+    transition: all 1s;
+    position: absolute;
+    z-index: 10;
+    top: 50%;
+    transform: translateY(-47%);
+    left: 20%;
+    width: 150px;
+    height: 252px;
+
+  }
+
+  .HD1_2 {
+    position: absolute;
+    z-index: 11;
+    top: 45%;
+    left: 40%;
+    transform: translate(-50%, -50%);
+    width: 30px;
+    display: flex;
+    flex-direction: column;
+    pointer-events: none;
+    transition: opacity 1s;
+    opacity: 1;
+    & > img {
+      width: 40px;
+    }
+    & > div {
+      margin-top: 10px;
+      position: relative;
+      line-height: 20px;
+      left: 9px;
+      font-weight: 400;
+      font-family: KaiTi;
+      color: #fff;
+      text-align: center;
+    }
+  }
+  .HD1_2Hide {
+    opacity: 0;
+  }
+
+  .HD1_3 {
+    position: absolute;
+    z-index: 10;
+    transition: bottom 1s;
+    width: 25%;
+    & > img {
+      width: 100%;
+    }
+  }
+  .HD1_3_1 {
+    right: -60%;
+    z-index: 1;
+    bottom: 8%;
+  }
+  .HD1_3_2 {
+    right: 18%;
+    z-index: 2;
+    bottom: -20%;
+  }
+  .HD1_3_3 {
+    right: 20%;
+    z-index: 3;
+    bottom: -34%;
+  }
+  .HD1_3Ac {
+    bottom: -5px;
+    right: 0;
+    opacity: 1;
+    .HD1_3AcMove {
+      position: absolute;
+      bottom: 0;
+      left: 0;
+      width: 100%;
+      height: 100%;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      padding-top: 30%;
+    }
+  }
+
+  .HD1_3HideLeft {
+    right: 100%;
+    bottom: -8%;
+    opacity: 0;
+    pointer-events: none;
+  }
+  .HD1_3HideRight {
+    right: -100%;
+    bottom: -8%;
+    opacity: 0;
+    pointer-events: none;
+  }
+  .HD1_3AcBottom {
+    bottom: -50px;
+    transition: right 1s, opacity 0.8s;
+  }
+
+  .HD1_4 {
+    position: absolute;
+    z-index: 11;
+    left: 50%;
+    bottom: 100%;
+    transform: translateX(-50%);
+    font-family: KaiTi;
+    font-weight: 400;
+    color: #5e715d;
+    width: 70%;
+    height: 26%;
+    opacity: 0;
+    pointer-events: none;
+    transition: bottom 1s, opacity 0.5s;
+
+    h3 {
+      font-weight: 700;
+      text-align: center;
+      font-size: 30px;
+    }
+    p {
+      font-size: 16px;
+      position: absolute;
+      top: 50px;
+      left: 50%;
+      transform: translateX(-50%);
+      letter-spacing: 2px;
+      height: calc(100% - 50px);
+      writing-mode: vertical-rl;
+      line-height: 120%;
+    }
+  }
+
+  .HD1_4Ac {
+    opacity: 1;
+    bottom: 65%;
+  }
+}
+.hotspot-detail-2 {
+  background-image: url("../assets/images/HD1/bg_paper.jpg");
+}
+</style>

src/views/HotspotDetail3.vue

@@ -0,0 +1,245 @@
+<template>
+  <div class="hotspot-detail-3">
+    <img
+      v-show="state === 1"
+      class="bg-img"
+      src="@/assets/images/hots-detail-bg-state1.jpg"
+      alt=""
+    >
+    <img
+      v-show="state === 2"
+      class="bg-img"
+      src="@/assets/images/hots-detail-bg-state2.jpg"
+      alt=""
+    >
+    <img
+      v-show="state === 3"
+      class="bg-img"
+      src="@/assets/images/hots-detail-bg-state3.jpg"
+      alt=""
+    >
+
+    <!-- 阴影 -->
+    <img
+      class="shadow-box"
+      :src="shadow"
+      :style="{ width: state === 1 ? '50%' : '80%',bottom: state === 1 ?'-15px':'' }"
+    >
+
+    <img
+      class="content1"
+      :src="hots3StateContent1"
+      :style="{
+        opacity: state === 1 ? 1 : 0,
+      }"
+      alt=""
+    >
+    <div
+      id="content2"
+      ref="content2Dom"
+      :style="{
+        opacity: state === 2 ? 1 : 0,
+      }"
+      class="content2"
+      @touchmove="handleScroll"
+    >
+      <img
+        id="content2Img"
+        :src="hots3StateContent2"
+        alt=""
+      >
+    </div>
+    <img
+      class="content3"
+      :style="{
+        opacity: state === 3 ? 1 : 0,
+      }"
+      :src="hots3StateContent3"
+      alt=""
+    >
+    <div class="btns-box">
+      <img
+        :src="state == 1 ? hots3StateBtn1Ac : hots3StateBtn1"
+        alt=""
+        @click="state = 1"
+      >
+      <img
+        :src="state == 2 ? hots3StateBtn2Ac : hots3StateBtn2"
+        alt=""
+        @click="goState2"
+      >
+      <img
+        :src="state == 3 ? hots3StateBtn3Ac : hots3StateBtn3"
+        alt=""
+        @click="state = 3"
+      >
+    </div>
+    <BtnBack @click="emit('close')" />
+  </div>
+</template>
+
+<script setup>
+import { ref, computed, onMounted } from "vue"
+import useSizeAdapt from "@/useFunctions/useSizeAdapt"
+
+const emit = defineEmits(["close"])
+
+// 三个按钮
+
+import hots3StateBtn1 from "@/assets/images/hots-detail-btn-state1.png"
+import hots3StateBtn2 from "@/assets/images/hots-detail-btn-state2.png"
+import hots3StateBtn3 from "@/assets/images/hots-detail-btn-state3.png"
+
+import hots3StateBtn1Ac from "@/assets/images/hots-detail-btn-state1-ac.png"
+import hots3StateBtn2Ac from "@/assets/images/hots-detail-btn-state2-ac.png"
+import hots3StateBtn3Ac from "@/assets/images/hots-detail-btn-state3-ac.png"
+
+// 三个阴影
+import hots3StateShadow1 from "@/assets/images/img_shadow_1.png"
+import hots3StateShadow2 from "@/assets/images/img_shadow_2.png"
+import hots3StateShadow3 from "@/assets/images/img_shadow_3.png"
+
+// 三个内容
+import hots3StateContent1 from "@/assets/images/hots-detail-content-state1.png"
+import hots3StateContent2 from "@/assets/images/hots-detail-content-state2.png"
+import hots3StateContent3 from "@/assets/images/hots-detail-content-state3.png"
+
+const { windowSizeInCssForRef, windowSizeWhenDesignForRef } = useSizeAdapt()
+
+// 轴1  卷2 册3
+const state = ref(1)
+
+// const homeBg = computed(() => {
+//   return `url(${state.value == 1 ? hots3StateBg1 : state.value == 2 ? hots3StateBg2 : hots3StateBg3})`
+// })
+
+const shadow = computed(() => {
+  return state.value == 1
+    ? hots3StateShadow1
+    : state.value == 2
+      ? hots3StateShadow2
+      : hots3StateShadow3
+})
+
+const content2Dom = ref(null)
+const isShowOperationTip = ref(true)
+const goState2 = () => {
+  state.value = 2
+  setTimeout(() => {
+    if (content2Dom.value) {
+      const x = 310 / 780
+      const allWidth = document
+        .getElementById("content2Img")
+        .getBoundingClientRect().width
+      content2Dom.value.scrollLeft = allWidth * x
+      isShowOperationTip.value = true
+    }
+  }, 5)
+}
+
+const handleScroll = () => {
+  isShowOperationTip.value = false
+  console.log("开始滑动")
+}
+</script>
+
+<style lang="less" scoped>
+.hotspot-detail-3 {
+  position: absolute;
+  left: 0;
+  top: 0;
+  width: 100%;
+  height: 100%;
+  // background-image: v-bind(homeBg);
+  // background-size: cover;
+  background-repeat: no-repeat;
+  background-position: top left;
+  display: flex;
+  flex-direction: column;
+  justify-content: space-evenly;
+  z-index: 3;
+
+  .bg-img {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+    object-position: top left;
+    position: fixed;
+    top: 0;
+    left: 0;
+    z-index: -1;
+    object-position: bottom;
+  }
+
+  .shadow-box {
+    position: absolute;
+    bottom: calc(
+      80 / v-bind("windowSizeWhenDesignForRef") *
+        v-bind("windowSizeInCssForRef")
+    );
+    left: 50%;
+    transform: translateX(-50%);
+  }
+
+  .content1 {
+    // width: 90%;
+    max-height: 90vh;
+    position: absolute;
+    left: 50%;
+    transform: translateX(-50%);
+    transition: opacity 1s ease;
+  }
+
+  .content2 {
+    width: 100%;
+    background-position: left top;
+    overflow: auto;
+    position: absolute;
+    transition: opacity 1s ease;
+    z-index: 2;
+    display: flex;
+    justify-content:center;
+    img {
+      // height: 90vh;
+      width: 80%;
+    }
+  }
+
+  .content3 {
+    position: absolute;
+    // width: 100%;
+    height: 80vh;
+    left: 50%;
+    transform: translateX(-50%);
+    transition: opacity 1s ease;
+  }
+
+  .operation-tip {
+    position: fixed;
+    bottom: calc(
+      80 / v-bind("windowSizeWhenDesignForRef") *
+        v-bind("windowSizeInCssForRef")
+    );
+    left: 50%;
+    transform: translateX(-50%);
+  }
+
+  .btns-box {
+    // width: 55%;
+    height: 200px;
+    position: absolute;
+    left: 30px;
+    // transform: translateX(-50%);
+    bottom: 30px;
+    display: flex;
+    flex-direction: column;
+    justify-content: space-evenly;
+
+    > img {
+      width: 35px;
+      width: 35px;
+      cursor: pointer;
+    }
+  }
+}
+</style>

src/views/StartupView.vue

@@ -108,12 +108,7 @@ function onClickStart() {
   const audioEl = document.getElementById('bg-music')
   nextTick(() => {
     videoEl.value.play()
-    if (window.location.href.includes('?m=1')) {
-      audioEl.src = './configMultiMedia/music/music2.mp3'
-      audioEl.play()
-    } else {
-      audioEl.play()
-    }
+    audioEl.play()
   })
   setTimeout(() => {
     isShowSkip.value = true