fix:修改一些细节和接入unity

.gitignore

@@ -1,6 +1,7 @@
 .DS_Store
 node_modules
 /dist
+/public/game
 
 *.zip
 

src/router/index.js

@@ -58,7 +58,6 @@ const routes = [
     name: 'BambooHot',
     component: BambooHotView,
   },
-
 ]
 
 const router = createRouter({

src/views/BambooBookScene1.vue

@@ -30,9 +30,6 @@ const x = window.innerHeight / 1018
 const innerWidth = ref((15523 / 33) * x + 'px')
 const innerHeight = ref(window.innerHeight + 'px')
 
-// onMounted(()=> {
-
-// })
 
 </script>
 

src/views/BambooBookScene2.vue

@@ -83,12 +83,13 @@ const {
     height: 100%;
     display: flex;
     flex-direction: column;
+    justify-content: center;
     align-items: center;
     // background-image: url(@/assets/images/screen-box2.png);
     // background-size: 100% 100%;
     background: linear-gradient(180deg, #233E16 -100%, rgba(156, 171, 148, 0.5) 100%);
     backdrop-filter: blur(15px);
-    padding-top: calc(71 /v-bind(windowSizeWhenDesignForRef)* v-bind(windowSizeInCssForRef));
+    // padding-top: calc(71 /v-bind(windowSizeWhenDesignForRef)* v-bind(windowSizeInCssForRef));
 
     .title-disc {
       width: 100%;
@@ -103,6 +104,10 @@ const {
 
     .detail-img {
       width: 100%;
+      // max-width: 360px;
+      @media screen and (max-width: 320px) {
+        width: 80%;
+      }
     }
 
     .options-box {
@@ -143,6 +148,7 @@ const {
       line-height: calc(23 /v-bind(windowSizeWhenDesignForRef)* v-bind(windowSizeInCssForRef));
       color: #476446;
       background-image: url(@/assets/images/btn_more.png);
+      background-size: 100% 100%;
       font-family: 'KaiTi';
     }
 

src/views/BambooHotView.vue

@@ -79,41 +79,11 @@ const reverseArray = (array) => {
   return array.slice().reverse()
 }
 
-const debounce = function (func, delay = 1000, immediate = false) {
-  let timer = null
-  return function () {
-    if (timer) {
-      clearTimeout(timer)
-    }
-    if (immediate && !timer) {
-      func.apply(this, arguments)
-    }
-    timer = setTimeout(() => {
-      func.apply(this, arguments)
-    }, delay)
-  }
-}
 
 const currentIndex = ref(-1)
 
 const scrollableElement = ref(null)
 
-function isElementInViewport(el) {
-  const observer = new IntersectionObserver(
-    (entries) => {
-      entries.forEach((entry) => {
-        if (entry.isIntersecting) {
-          console.log(el, 'is in the viewport')
-        } else {
-          console.log(el, 'is not in the viewport')
-        }
-      })
-    },
-    { threshold: [0, 1] } // 可以调整阈值以确定何时触发回调
-  )
-
-  observer.observe(el)
-}
 
 // 进度条位置监听
 const scrollFn = () => {
@@ -124,19 +94,43 @@ const scrollFn = () => {
   let elementScrollLeft = element.scrollLeft
   // console.log('多少', elementScrollLeft, element)
 
+  console.log('滚动', elementScrollLeft, '12中竹林长度', document.getElementById('bamboo-hot').getBoundingClientRect().width)
+
   // const items = document.getElementsByClassName('bamboo-hot-item')
-  if (elementScrollLeft > 253 && elementScrollLeft < 887) {
-    // isScroll.value = false
+
+  // calc(3900 / v-bind('windowSizeWhenDesignForRef')* v-bind('windowSizeInCssForRef'));
+
+  // const 253 / 12的width = x / 当前长度
+
+  const zhulinClientWidth = document.getElementById('bamboo-hot').getBoundingClientRect().width
+
+  const zhulinAllWidth = 3900 / windowSizeWhenDesignForRef.value * windowSizeInCssForRef.value.slice(0, -2)
+  const items = document.getElementsByClassName('bamboo-hot-item')
+
+
+  // setTimeout(() =>{
+  //   const items = document.getElementsByClassName('bamboo-hot-item')
+  //   items.forEach((element, index) => {
+  //     console.log(index, element.left)
+  //   }, 50)
+  // })
+
+
+
+
+
+  if (elementScrollLeft > items[0].style.left.slice(0, 2) / 100 * zhulinAllWidth - zhulinClientWidth && elementScrollLeft < items[1].style.left.slice(0, 2) / 100 * zhulinAllWidth - zhulinClientWidth) {
     currentIndex.value = 0
-  } else if (elementScrollLeft > 888 && elementScrollLeft < 1673) {
+  } else if (elementScrollLeft > items[1].style.left.slice(0, 2) / 100 * zhulinAllWidth - zhulinClientWidth && elementScrollLeft < items[2].style.left.slice(0, 2) / 100 * zhulinAllWidth - zhulinClientWidth) {
     currentIndex.value = 1
-  } else if (elementScrollLeft > 1674 && elementScrollLeft < 2425) {
+  } else if (elementScrollLeft > items[2].style.left.slice(0, 2) / 100 * zhulinAllWidth - zhulinClientWidth && elementScrollLeft < items[3].style.left.slice(0, 2) / 100 * zhulinAllWidth - zhulinClientWidth) {
     currentIndex.value = 2
-  } else if (elementScrollLeft > 2426 && elementScrollLeft < 3275) {
+  } else if (elementScrollLeft > items[3].style.left.slice(0, 2) / 100 * zhulinAllWidth - zhulinClientWidth && elementScrollLeft < items[4].style.left.slice(0, 2) / 100 * zhulinAllWidth - zhulinClientWidth) {
     currentIndex.value = 3
-  } else if (elementScrollLeft > 3276) {
+  } else if (elementScrollLeft > items[4].style.left.slice(0, 2) / 100 * zhulinAllWidth - zhulinClientWidth) {
     currentIndex.value = 4
   }
+
 }
 
 const goBack = () => {
@@ -165,7 +159,8 @@ onMounted(() => {
 
   setTimeout(() => {
     if (scrollableElement.value) {
-      scrollableElement.value.scrollLeft = 383
+      scrollableElement.value.scrollLeft = (383 / 390) * document.getElementById('bamboo-hot').getBoundingClientRect().width
+      console.log(scrollableElement.value.scrollLeft)
     }
   }, 50)
 

src/views/GameView.vue

@@ -78,7 +78,7 @@ onMounted(() => {
     <iframe
       v-if="mode === 'unity'"
       class="game-box"
-      src=""
+      src="/game/index.html"
     />
   </div>
 </template>