fix:更新竹林交互方式

src/views/BambooBookScene2.vue

@@ -248,4 +248,4 @@ const {
     }
   }
 }
-</style>
+</style>

src/views/BambooHotView copy.vue

@@ -0,0 +1,381 @@
+<script setup>
+import { onMounted, ref } from 'vue'
+import { useRouter } from 'vue-router'
+import useSizeAdapt from "@/useFunctions/useSizeAdapt"
+
+const router = useRouter()
+
+const {
+  windowSizeInCssForRef,
+  windowSizeWhenDesignForRef,
+} = useSizeAdapt()
+
+const infoList = [
+  {
+    id: 0,
+    name: '楠竹',
+    images: 'img_nanzhu.png',
+    left: '13%',
+    disc: [
+      '又名毛竹，是散生型竹的代表。秆高直，坚硬。',
+      '径大20公分左右，是建筑上的好材料；',
+      '竹头是雕刻工艺品的好材料；',
+      '竹笋是最佳菜肴，称为“玉楠片”。',
+      '盛产于四川长宁、贵州赤水、',
+      '江西、浙江、湖南等地。'
+    ],
+    transform: 'translateX(-9%)'
+  },
+  {
+    id: 1,
+    name: '单竹',
+    images: 'img_danzhu.png',
+    left: '33%',
+    marginRight: '20%',
+    disc: [
+      '民间俗称“苦慈”，竹质细腻，纤维韧性极强，',
+      '可制成薄如蝉翼、细如发丝的竹篾丝，',
+      '编织成绸似、绢似的精美竹编工艺品。',
+    ],
+    transform: 'translateX(-28%)'
+  },
+  {
+    id: 2,
+    name: '水竹',
+    images: 'img_shuizhu.png',
+    left: '53%',
+    marginRight: '30%',
+    disc: [
+      '竿可高6米许，粗达3厘米；篷耳小，形状为卵形',
+      '或长椭圆形。锋舌边缘生有短白纤毛。',
+      '筝片直立，呈三角形至狭长三角形。叶片为线状',
+      '披针形或披针形，下表面基部有些许毛。',
+    ],
+    transform: 'translateX(-47%)'
+
+  },
+  {
+    id: 3,
+    name: '湘妃竹',
+    images: 'img_xiangfeizhu.png',
+    left: '72%',
+    marginRight: '24%',
+    disc: [
+      '中小型竹，竿高5米 |10米，竿环及箨',
+      '环隆起，竿箨黄褐色，有黑褐色斑点,',
+      '箨耳较小，矩圆形或镰形，箨叶三角形或带形,',
+      '橘红色，边缘绿色，叶带状披针形，叶舌发达，',
+      '有叶耳及长肩毛。',
+    ],
+    transform: 'translateX(-66%)'
+
+  }, {
+    id: 4,
+    name: '紫竹',
+    images: 'img_zizhu.png',
+    left: '93%',
+    marginRight: '25%',
+    disc: [
+      '紫竹幼竿绿色，覆盖细柔毛和白粉，幕环有毛，',
+      '籍鞘背面红褐色或绿色加深。斑点微小或无，',
+      '锌鞘上端常密集，带微量白粉和淡褐色刺毛。',
+      '叶片小而薄，窄披针形，先端尖长。',
+    ],
+    transform: 'translateX(-87%)'
+
+  },
+]
+
+const reverseArray = (array) => {
+  return array.slice().reverse()
+}
+
+
+const currentIndex = ref(0)
+
+const positionFrom = ref(`translateX(-0%)`)
+const positionEnd = ref(`translateX(-8%)`)
+
+const scrollableElement = ref(null)
+
+const isAnimation = ref(false)
+
+const lastX = ref(0)
+// 开始滑动
+const handletouchstart = (event) => {
+  lastX.value = event.changedTouches[0].pageX
+}
+
+// 监听活动
+const touchEnd = (event) => {
+  let currentX = event.changedTouches[0].pageX
+  let tx = currentX - lastX.value
+  if (tx < 0) {
+    // emit('slide-right')
+    if (currentIndex.value >= infoList.length - 1) {
+      return
+    } else {
+      currentIndex.value = currentIndex.value + 1
+      isAnimation.value = true
+      // setTimeout(() => {
+      //   isAnimation.value = false
+      // }, 1500)
+    }
+    // console.log(currentIndex.value + 1)
+  } else if (tx > 0) {
+    // currentIndex.value = currentIndex.value < 1 ? '' : currentIndex.value - 1
+    if (currentIndex.value <= 0) {
+      return
+    } else {
+      currentIndex.value = currentIndex.value - 1
+    }
+  }
+}
+
+
+
+// 进度条位置监听
+// const scrollFn = () => {
+//   // 获取当前文档流的 scrollLeft
+//   // let navIndex = 0
+//   // const scrollPosition =  || document.body.scrollLeft
+//   let element = document.getElementById('bamboo-hot')
+//   let elementScrollLeft = element.scrollLeft
+
+
+
+//   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')
+
+//   // calc(3900 / v-bind('windowSizeWhenDesignForRef')* v-bind('windowSizeInCssForRef'));
+
+//   // const 253 / 12的width = x / 当前长度
+
+//   const items = document.getElementsByClassName('bamboo-hot-item')
+
+
+
+//   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 > 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 > 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 > 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 > items[4].style.left.slice(0, 2) / 100 * zhulinAllWidth - zhulinClientWidth) {
+//     currentIndex.value = 4
+//   }
+
+// }
+
+const goBack = () => {
+  router.push({
+    name: 'MoreContent',
+    query: {
+      anchorIdx: 0,
+    }
+  })
+}
+
+
+onMounted(() => {
+  // window.addEventListener(
+  //   "scroll",
+  //   scrollFn,
+  //   true
+  // )
+
+  // window.addEventListener('touchstart', () => {
+  //   //  手势按钮消失
+  //   let operationH = document.getElementById('operationH')
+  //   if (operationH) {
+  //     operationH.style.opacity = 0
+  //   }
+
+  //   window.removeEventListener('touchstart', () => {
+  //     //  手势按钮消失
+  //     let operationH = document.getElementById('operationH')
+  //     if (operationH) {
+  //       operationH.style.opacity = 0
+  //     }
+  //   })
+  // })
+
+  // setTimeout(() => {
+  //   if (scrollableElement.value) {
+  //     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')
+  //     // scrollableElement.value.scrollLeft = (383 / 390) * document.getElementById('bamboo-hot').getBoundingClientRect().width
+  //     scrollableElement.value.scrollLeft = items[0].style.left.slice(0, 2) / 100 * zhulinAllWidth - zhulinClientWidth + items[0].getBoundingClientRect().width + 60
+  //     console.log(scrollableElement.value.scrollLeft)
+  //   }
+  // }, 50)
+
+})
+</script>
+
+<template>
+  <div class="home">
+    <div
+      id="bamboo-hot"
+      ref="scrollableElement"
+      class="scorroll-box"
+      @touchstart="handletouchstart($event)"
+      @touchend="touchEnd($event)"
+    >
+      <div
+        id="bamboo-hot"
+        class="bamboo-hot-bg"
+        :class="{ 'goAnimaling': isAnimation }"
+      >
+        <div
+          v-for="(item, index) in infoList"
+          :key="item.id"
+          class="bamboo-hot-item"
+          :class="{ 'bamboo-hot-animation': currentIndex == index }"
+          :style="{ left: item.left }"
+        >
+          <img
+            :src="require(`@/assets/images/${item.images}`)"
+            alt=""
+          >
+          <div
+            class="disc-box"
+            :style="{ marginRight: item.marginRight ? item.marginRight : '' }"
+          >
+            <div
+              v-for="(item2) in reverseArray(item.disc)"
+              :key="item2"
+              class="disc-box-item"
+            >
+              {{ item2 }}
+            </div>
+          </div>
+        </div>
+      </div>
+      <div class="system-btns">
+        <BtnBack @click="goBack" />
+        <OperationTip
+          id="operationH"
+          class="operation-h"
+          text=""
+          direction="h"
+        />
+      </div>
+    </div>
+  </div>
+</template>
+
+<style lang='less' scoped>
+::-webkit-scrollbar {
+  display: none;
+}
+
+.home {
+  width: 100%;
+  height: 100%;
+
+  .scorroll-box {
+    width: 100%;
+    height: 100%;
+    overflow-x: hidden;
+    overflow-y: hidden;
+    scrool-behavior: smooth;
+
+    .bamboo-hot-bg {
+      width: calc(3900 / v-bind('windowSizeWhenDesignForRef')* v-bind('windowSizeInCssForRef'));
+      height: 100%;
+      background-image: url(@/assets/images/bamboo-hot-bg.png);
+      background-size: 100% 100%;
+      position: relative;
+
+
+      .bamboo-hot-item {
+        position: absolute;
+        left: 0;
+        top: calc(103 /v-bind('windowSizeWhenDesignForRef')* v-bind('windowSizeInCssForRef'));
+        opacity: 0.1;
+
+
+        >img {
+          width: calc(150 /v-bind('windowSizeWhenDesignForRef')* v-bind('windowSizeInCssForRef'));
+        }
+
+        .disc-box {
+          display: flex;
+          justify-content: right;
+          margin-top: calc(50 / v-bind('windowSizeWhenDesignForRef')* v-bind('windowSizeInCssForRef'));
+
+          /* 垂直排列，从右向左 */
+          // direction: rtl;
+          .disc-box-item {
+            writing-mode: vertical-rl;
+            text-orientation: upright;
+            text-align: left;
+            font-family: 'KaiTi';
+            font-size: calc(16 /v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+            color: #474747;
+            line-height: calc(23 /v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+            align-items: justify;
+            letter-spacing: .3em;
+          }
+        }
+      }
+
+      .bamboo-hot-animation {
+        animation: fade-in 1.5s forwards;
+
+        @keyframes fade-in {
+          form {
+            opacity: 0;
+          }
+
+          to {
+            opacity: 1;
+          }
+        }
+      }
+
+    }
+
+    .goAnimaling {
+      animation: onanimaling 1.5s forwards;
+
+      // background-position: 383px;
+      @keyframes onanimaling {
+        0% {
+          transform: translateX(0);
+        }
+
+        100% {
+          transform: translateX(-8%);
+        }
+      }
+    }
+
+    .system-btns {
+      width: 100%;
+      padding: 0 calc(20 / v-bind(windowSizeWhenDesignForRef) * v-bind(windowSizeInCssForRef));
+      display: flex;
+      // flex-direction: column;
+      justify-content: flex-end;
+      position: absolute;
+      bottom: calc(60 /v-bind(windowSizeWhenDesignForRef) * v-bind(windowSizeInCssForRef));
+      z-index: 2;
+
+      .operation-h {
+        width: calc(36 /v-bind('windowSizeWhenDesignForRef')* v-bind('windowSizeInCssForRef'));
+        transition: opacity 0.5s ease-in-out;
+      }
+    }
+  }
+
+
+
+}
+</style>