upup

.eslintrc.js

@@ -54,5 +54,6 @@ module.exports = {
     defineEmits: true,
     configText: true,
     configExcel: true,
+    configZhuPu: true,
   }
 }

src/components/PaintingDetailBox.vue

@@ -73,7 +73,7 @@ onMounted(() => {
       setTimeout(() => {
         if (isRow.value === "竖") {
           const dom = document.querySelector(".imgBox")
-          if (dom.offsetHeight > pageHeightWindow) {
+          if (dom && dom.offsetHeight > pageHeightWindow) {
             isMove.value = true
             imgWidth.value = dom.offsetWidth
             imgHeight.value = dom.offsetHeight
@@ -83,7 +83,7 @@ onMounted(() => {
           const leftBoxWidthDomWidth = leftBoxWidthDom.offsetWidth
           leftBoxWidth.value = leftBoxWidthDomWidth
           const dom = document.querySelector(".imgBoxHH")
-          if (dom.offsetWidth > leftBoxWidthDomWidth) {
+          if ( dom && dom.offsetWidth > leftBoxWidthDomWidth) {
             isMove.value = true
             imgWidth.value = dom.offsetWidth
             imgHeight.value = dom.offsetHeight

src/rollFu.js

@@ -14,9 +14,20 @@ export default function useRollFu() {
   //   // lastScrollTop.value = st <= 0 ? 0 : st // For Firefox
   // }, 1000)
 
-  const handleScroll = function (event, fu) {
-    // const st = event.target.scrollTop
+  function throttle(func, limit) {
+    let inThrottle
+    return function() {
+      const args = arguments
+      const context = this
+      if (!inThrottle) {
+        func.apply(context, args)
+        inThrottle = true
+        setTimeout(() => inThrottle = false, limit)
+      }
+    }
+  }
 
+  const handleScrollThrottle = throttle(function (event, fu) {
     if (event.deltaY < 0) {
       console.log('滚轮上滑')
       fu(-1)
@@ -24,11 +35,21 @@ export default function useRollFu() {
       console.log('滚轮下滑')
       fu(1)
     }
+  }, 500)
 
+  const handleScroll = function (event, fu) {
+    if (event.deltaY < 0) {
+      console.log('滚轮上滑')
+      fu(-1)
+    } else if (event.deltaY > 0) {
+      console.log('滚轮下滑')
+      fu(1)
+    }
   }
 
 
   return {
-    handleScroll
+    handleScroll,
+    handleScrollThrottle
   }
 }

src/views/BambooBookView.vue

@@ -1,9 +1,57 @@
 <script setup>
-import { ref } from "vue"
+import { ref, computed, onMounted, inject } from "vue"
 import { useRouter } from "vue-router"
+import useRollFu from "../rollFu.js"
+
 const router = useRouter()
 
 const curState = ref("ye")
+
+const $env = inject('$env')
+
+const { handleScroll } = useRollFu()
+
+
+
+// 画法数据处理
+const paintingData = computed(() => {
+  let resZhu = null
+  if (curState.value == 'ye') {
+    resZhu = configZhuPu['叶']
+  } else if (curState.value == 'zhi') {
+    resZhu = configZhuPu['枝']
+  } else if (curState.value == 'zhu') {
+    resZhu = configZhuPu['杆']
+  }
+  const resValue = Object.entries(resZhu.reduce((groups, item) => {
+    const category = item['画法']
+    if (!groups[category]) {
+      groups[category] = []
+    }
+    groups[category].push(item)
+    return groups
+  }, {})).map(([key, value]) => ({
+    category: key,
+    items: value
+  }))
+  return resValue
+})
+
+const rowScroller = ref(null)
+
+const handleWheel = (val) => {
+  const scrollAmount = 50
+  if (val == -1 ) {
+    rowScroller.value.scrollLeft -= scrollAmount
+  } else {
+    rowScroller.value.scrollLeft += scrollAmount
+  }
+}
+
+onMounted(() => {
+  console.log('paintingData', paintingData.value)
+})
+
 </script>
 
 <template>
@@ -53,28 +101,54 @@ const curState = ref("ye")
           <div
             class="btn"
             :class="{ btnAc: curState == 'zhu' }"
-            @click="curState = 'zhu'"
+            @click="() =>{curState = 'zhu',rowScroller.scrollLeft = 0}"
           >
             杆
           </div>
           <div
             class="btn"
             :class="{ btnAc: curState == 'zhi' }"
-            @click="curState = 'zhi'"
+            @click="() =>{curState = 'zhi',rowScroller.scrollLeft = 0}"
           >
             枝
           </div>
           <div
             class="btn"
             :class="{ btnAc: curState == 'ye' }"
-            @click="curState = 'ye'"
+            @click="() =>{curState = 'ye',rowScroller.scrollLeft = 0}"
           >
             叶
           </div>
         </div>
       </div>
-      <div class="painting-detail-box">
-        画法
+      <div
+        ref="rowScroller"
+        class="painting-detail-box"
+        @wheel="($event) => handleScroll($event, (val) => handleWheel(val))"
+      >
+        <div
+          v-for="(category,index1) in paintingData"
+          :key="index1"
+          class="category-box"
+        >
+          <div
+            class="category-title"
+            :style="{margin:index1 == 0 ? '0 10px 0 10px':''}"
+          >
+            {{ category.category }}
+          </div>
+          <div
+            v-for="(item,index2) in category.items"
+            :key="index2"
+            class="category-item"
+          >
+            <img
+              :src="`${$env.BASE_URL}configMultiMedia/zhupuImages/${item['图片名称'] ? item['图片名称'] : item['名称']}.png`"
+              alt=""
+            >
+            <div>{{ item['名称'] }}</div>
+          </div>
+        </div>
       </div>
     </div>
   </div>
@@ -157,7 +231,7 @@ const curState = ref("ye")
     .totle-painting-box {
       width: 50%;
       height: 60%;
-      margin-bottom: 10px;
+      margin-bottom: 5vh;
       display: flex;
       flex-direction: column;
       align-items: center;
@@ -200,6 +274,60 @@ const curState = ref("ye")
         }
       }
     }
+
+    .painting-detail-box{
+      width: 95%;
+      height: 25%;
+      // background: red;
+      overflow-x: auto;
+      overflow-y: hidden;
+      display: flex;
+      &::-webkit-scrollbar {
+        width: 0px;
+        height: 0;
+      }
+      .category-box{
+        // display: inline;
+        // white-space: nowrap;
+        display: flex;
+        align-items: flex-start;
+        img{
+          width: 20vh;
+          height: 20vh;
+          object-fit: contain;
+        }
+        >div{
+          // float: left;
+        }
+        .category-title{
+          display: inline-flex;
+          writing-mode: vertical-lr;
+          letter-spacing: 12px;
+          color: #476446;
+          background: url(@/assets/images/name-bg.png);
+          background-size: 100% 100%;
+          font-family: 'KingHwa_OldSong';
+          font-size: 20px;
+          // line-height: 48px;
+          padding: 10px;
+          margin: 0 30px 0 60px;
+          // height: 70%;
+        }
+        .category-item{
+          display: flex;
+          flex-direction: column;
+          align-items: center;
+          margin: 0 20px 0 20px;
+          >div{
+            margin-top: 10px;
+            color: #7B916B;
+            font-size: 20px;
+            line-height: 29px;
+            font-family: "KingHwa_OldSong";
+          }
+        }
+      }
+    }
   }
 }
 </style>

src/views/HomeView.vue

@@ -13,7 +13,7 @@ const store = useStore()
 const router = useRouter()
 const route = useRoute()
 
-const { handleScroll } = useRollFu()
+const { handleScrollThrottle } = useRollFu()
 
 const isShowOperationTip = ref(true)
 
@@ -113,7 +113,7 @@ onMounted(() => {
     <div
       ref="scroller"
       class="scroller"
-      @wheel="($event) => handleScroll($event, (val) => scrollFu(val))"
+      @wheel="($event) => handleScrollThrottle($event, (val) => scrollFu(val))"
     >
       <div class="scroller-content" />
     </div>

src/views/HotspotDetail1.vue

@@ -70,7 +70,13 @@
       :style="`opacity:${swChange && pageShow ? '1' : '0'}`"
     >
       <p>{{ txtShow.desc }}</p>
-      <h3>{{ txtShow.title }}</h3>
+      <h3
+        :style="{
+          transform: `translate(${txtShow.title == '绫' ? '630%' :txtShow.title == '绢' ? '350%': ''}, -150%)`
+        }"
+      >
+        {{ txtShow.title }}
+      </h3>
     </div>
 
     <BtnBack @click="backBtnFu" />

src/views/HotspotDetail3.vue

@@ -41,7 +41,6 @@
         opacity: state === 2 ? 1 : 0,
       }"
       class="content2"
-      @touchmove="handleScroll"
     >
       <img
         id="content2Img"
@@ -137,10 +136,6 @@ const goState2 = () => {
   }, 5)
 }
 
-const handleScroll = () => {
-  isShowOperationTip.value = false
-  console.log("开始滑动")
-}
 </script>
 
 <style lang="less" scoped>

src/views/StartupView.vue

@@ -40,14 +40,17 @@
       class="btn-start"
       :class="isStartBtnBlink ? 'animation-show-hide' : ''"
       :image-src="require(`@/assets/images/btn-start.png`)"
-      :total-width="864 / windowSizeWhenDesignForRef * windowSizeInCssForRef.substring(0, windowSizeInCssForRef.length - 2)"
-      :height="72 / windowSizeWhenDesignForRef * windowSizeInCssForRef.substring(0, windowSizeInCssForRef.length - 2)"
+      :total-width="864"
+      :height="72"
       :frame-number="12"
       :loop="false"
       @over="isStartBtnBlink = true"
       @click="onClickStart"
     />
-    <div class="start-title">
+    <div
+      :style="{opacity: !isShowLoadingTip ? 1:0}"
+      class="start-title"
+    >
       点击开始
     </div>
 
@@ -161,7 +164,7 @@ function onVideoEnd() {
     bottom: 100px;
     transform: translateX(-48%);
     width: 72px;
-    height: 72px;
+    height: 72px
   }
   >.btn-start{
     position: absolute;
@@ -178,6 +181,7 @@ function onVideoEnd() {
     bottom: 60px;
     left: 50%;
     transform: translateX(-48%);
+    transition: opacity 1.5s ease;
   }
 
   >video.transition-video{