feat:增加竹子页面

src/router/index.js

@@ -6,6 +6,7 @@ import PaintingList from '../views/PaintingList.vue'
 import PaintingDetailList from '../views/PaintingDetailList.vue'
 import GameView from '../views/GameView.vue'
 import BambooBookView from '../views/BambooBookView.vue'
+import BambooHotView from '../views/BambooHotView.vue'
 
 // import store from '@/store/index.js'
 
@@ -50,6 +51,12 @@ const routes = [
     name: 'BambooBook',
     component: BambooBookView,
   },
+  // 竹子
+  {
+    path: '/bambooHot',
+    name: 'BambooHot',
+    component: BambooHotView,
+  },
 
 ]
 

src/views/BambooBookScene1.vue

@@ -100,6 +100,7 @@ const emit = defineEmits(['slide', 'close'])
       position: absolute;
       right: calc(55 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
       bottom: 30%;
+      width: calc(50 / v-bind('windowSizeWhenDesignForRef')* v-bind('windowSizeInCssForRef'));
     }
 
     >.disc-img {

src/views/BambooHotView.vue

@@ -0,0 +1,264 @@
+<script setup>
+import { onMounted, ref } from 'vue'
+import useSizeAdapt from "@/useFunctions/useSizeAdapt"
+
+const {
+  windowSizeInCssForRef,
+  windowSizeWhenDesignForRef,
+} = useSizeAdapt()
+
+const infoList = [
+  {
+    id: 0,
+    name: '楠竹',
+    images: 'img_nanzhu.png',
+    left: '13%',
+    disc: [
+      '又名毛竹，是散生型竹的代表。秆高直，坚硬。',
+      '径大20公分左右，是建筑上的好材料；',
+      '竹头是雕刻工艺品的好材料；',
+      '竹笋是最佳菜肴，称为“玉楠片”。',
+      '盛产于四川长宁、贵州赤水、',
+      '江西、浙江、湖南等地。'
+    ],
+  },
+  {
+    id: 1,
+    name: '单竹',
+    images: 'img_danzhu.png',
+    left: '33%',
+    marginRight: '20%',
+    disc: [
+      '民间俗称“苦慈”，竹质细腻，纤维韧性极强，',
+      '可制成薄如蝉翼、细如发丝的竹篾丝，',
+      '编织成绸似、绢似的精美竹编工艺品。',
+    ],
+  },
+  {
+    id: 2,
+    name: '水竹',
+    images: 'img_shuizhu.png',
+    left: '53%',
+    marginRight: '30%',
+    disc: [
+      '竿可高6米许，粗达3厘米；篷耳小，形状为卵形',
+      '或长椭圆形。锋舌边缘生有短白纤毛。',
+      '筝片直立，呈三角形至狭长三角形。叶片为线状',
+      '披针形或披针形，下表面基部有些许毛。',
+    ],
+  },
+  {
+    id: 3,
+    name: '湘妃竹',
+    images: 'img_xiangfeizhu.png',
+    left: '72%',
+    marginRight: '24%',
+    disc: [
+      '中小型竹，竿高5米 |10米，竿环及箨',
+      '环隆起，竿箨黄褐色，有黑褐色斑点,',
+      '箨耳较小，矩圆形或镰形，箨叶三角形或带形,',
+      '橘红色，边缘绿色，叶带状披针形，叶舌发达，',
+      '有叶耳及长肩毛。',
+    ],
+  }, {
+    id: 4,
+    name: '紫竹',
+    images: 'img_zizhu.png',
+    left: '93%',
+    marginRight: '25%',
+    disc: [
+      '紫竹幼竿绿色，覆盖细柔毛和白粉，幕环有毛，',
+      '籍鞘背面红褐色或绿色加深。斑点微小或无，',
+      '锌鞘上端常密集，带微量白粉和淡褐色刺毛。',
+      '叶片小而薄，窄披针形，先端尖长。',
+    ],
+  },
+]
+
+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 = () => {
+  // 获取当前文档流的 scrollLeft
+  // let navIndex = 0
+  // const scrollPosition =  || document.body.scrollLeft
+  let element = document.getElementById('bamboo-hot')
+  let elementScrollLeft = element.scrollLeft
+  // console.log('多少', elementScrollLeft, element)
+
+  // const items = document.getElementsByClassName('bamboo-hot-item')
+  if (elementScrollLeft > 253 && elementScrollLeft < 887) {
+    // isScroll.value = false
+    currentIndex.value = 0
+  } else if (elementScrollLeft > 888 && elementScrollLeft < 1673) {
+    currentIndex.value = 1
+  } else if (elementScrollLeft > 1674 && elementScrollLeft < 2425) {
+    currentIndex.value = 2
+  } else if (elementScrollLeft > 2426 && elementScrollLeft < 3275) {
+    currentIndex.value = 3
+  } else if (elementScrollLeft > 3276 ) {
+    currentIndex.value = 4
+  }
+}
+
+
+onMounted(() => {
+  window.addEventListener(
+    "scroll",
+    scrollFn,
+    true
+  )
+
+  setTimeout(() => {
+    if (scrollableElement.value) {
+      scrollableElement.value.scrollLeft = 383
+    }
+  }, 300)
+
+})
+</script>
+
+<template>
+  <div
+    id="bamboo-hot"
+    ref="scrollableElement"
+    class="home"
+  >
+    <div
+      id="bamboo-hot"
+      class="bamboo-hot-bg"
+    >
+      <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>
+</template>
+
+<style lang='less' scoped>
+::-webkit-scrollbar{
+  display: none;
+}
+.home {
+  width: 100%;
+  height: 100%;
+  overflow-x: scroll;
+  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;
+    // background-position: 383px;
+
+    .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;
+        }
+      }
+    }
+
+  }
+}
+</style>