更新

src/App.vue

@@ -67,7 +67,7 @@ textarea {
 // 字体
 @font-face {
   font-family: 'KingHwa_OldSong';
-  src: url('@/assets/style/KingHwa_OldSong.TTF');
+  src: url('@/assets/style/KingHwa_OldSong.ttf');
 }
 
 @font-face {

src/components/PaintingDetailBox.vue

@@ -68,8 +68,6 @@ const mousemoveFu = (e, flag) => {
 
 onMounted(() => {
   const element = document.querySelector('#myElement')
-
-
   const resizeObserver = new ResizeObserver(entries => {
     for (let entry of entries) {
       console.log(`Width changed to ${entry.contentRect.width}`)
@@ -143,7 +141,7 @@ onMounted(() => {
         :class="`imgBox ${isMove ? '' : 'imgBoxMove'}`"
         :style="`clip-path: rect(0 100% ${zhouMove}% 0);
         transform: translateY(${moveLoc}px);
-        padding: ${route.query.idx == '17' ? '25% 3% 8% 3%' :route.query.idx == '19' ? '28% 3% 9% 3%': route.query.idx == '11' ? '20% 3% 7% 3%': route.query.idx == '4' ? '24% 3% 8% 3%': route.query.idx == '9' ? '17% 3% 6% 3%': ''}
+        padding: ${route.query.idx == '17' ? '25% 3% 8% 3%' :route.query.idx == '19' ? '28% 3% 9% 3%': route.query.idx == '11' ? '20% 3% 7% 3%': route.query.idx == '4' ? '24% 3% 8% 3%': route.query.idx == '9' ? '17% 3% 6% 3%': props.idx == 'home' ? '12% 3% 4% 3%' : ''}
         `"
         @mousedown="isFlag = true"
         @mouseup="isFlag = false"

src/components/PaintingInfoBox.vue

@@ -82,6 +82,20 @@ const FormatAuthorInfo = computed(() => {
   return props.authorInfo.replace(/\n/g, "<br>").split('<br>').map((line) => `<p>${line}</p>`).join('')
 })
 
+const isShowInfoText = ref(true)
+const changeCloseFu = () => {
+  if (isCloseInfo.value) {
+    setTimeout(() => {
+      isShowInfoText.value = true
+      console.log('信息打开', isCloseInfo.value)
+    }, 700)
+  } else {
+    isShowInfoText.value = false
+  }
+  isCloseInfo.value = !isCloseInfo.value
+
+}
+
 onMounted(() => {
   // if (route.query.state) {
   //   curState.value = route.query.state
@@ -89,7 +103,6 @@ onMounted(() => {
   if (props.state) {
     curState.value = props.state
   }
-  console.log('组件里面', props.authorInfo)
 })
 
 const exChangeFu = () => {
@@ -111,9 +124,12 @@ const exChangeFu = () => {
       class="close-btn"
       :src="require(`@/assets/images/painting-box-${isCloseInfo ? 'open':'close'}.png`)"
       alt=""
-      @click="isCloseInfo = !isCloseInfo"
+      @click="changeCloseFu"
+    >
+    <div
+      :style="{opacity: isShowInfoText ?1:0}"
+      class="detail-box"
     >
-    <div class="detail-box">
       <div class="top">
         <div class="title">
           <div>{{ curState == 1 ? newTitle[0] : "作者简介" }}</div>
@@ -172,7 +188,7 @@ const exChangeFu = () => {
   background: url(@/assets/images/painting-box-bg.png);
   background-size: 100% 100%;
   position: relative;
-  transition: width 1.5s ease;
+  transition: width 1s ease;
   .close-btn {
     position: absolute;
     top: 50%;

src/rollFu.js

@@ -1,18 +1,5 @@
 
 export default function useRollFu() {
-  // 滚动事件处理器(传入滚动元素和前进后退函数)
-  // 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)
 
   function throttle(func, limit) {
     let inThrottle
@@ -27,13 +14,13 @@ export default function useRollFu() {
     }
   }
 
-  const handleScrollThrottle = throttle(function (event, fu) {
+  const handleScrollThrottle = throttle(function (event, fu1, fu2) {
     if (event.deltaY < 0) {
       console.log('滚轮上滑')
-      fu(-1)
+      fu1()
     } else if (event.deltaY > 0) {
       console.log('滚轮下滑')
-      fu(1)
+      fu2()
     }
   }, 500)
 

src/views/BambooBookView.vue

@@ -60,6 +60,7 @@ const rowScroller = ref(null)
 const isShowClickTip = ref(true)
 const isShowBigView = ref(false)
 const handleWheel = (val) => {
+  event.preventDefault()
   if (isShowBigView.value) {
     return
   }

src/views/HomeView.vue

@@ -73,7 +73,8 @@ watch(curPageIndex, (val) => {
 // }, 1500))
 
 // 滑动逻辑
-const scrollFu = (val) => {
+const scrollFu = (event, val) => {
+  console.log('在滚动', val)
   if (val == -1) {
     // 上滚
     // console.log("上滚")
@@ -81,7 +82,6 @@ const scrollFu = (val) => {
       curPageIndex.value > 0 ? curPageIndex.value - 1 : curPageIndex.value
   } else if (val == 1) {
     // 下滚
-    console.log("下滚")
     isShowOperationTip.value = false
     if (curPageIndex.value < 4) {
       curPageIndex.value = curPageIndex.value + 1
@@ -97,10 +97,7 @@ const scrollFu = (val) => {
     }
   }
 }
-
 const hoverIndex = ref(null)
-
-
 onMounted(() => {
   if (route.query.page) {
     curPageIndex.value = parseInt(route.query.page)
@@ -137,7 +134,7 @@ onMounted(() => {
     <div
       ref="scroller"
       class="scroller"
-      @wheel="($event) => handleScrollThrottle($event, (val) => scrollFu(val))"
+      @wheel="($event) => handleScrollThrottle($event, ($event) => scrollFu($event,-1),($event) => scrollFu($event,1))"
     >
       <div class="scroller-content" />
     </div>
@@ -283,8 +280,8 @@ onMounted(() => {
 
     <!-- 热点层1 -->
     <div
+      v-show="isShowHotspot"
       class="hotspot-wrap"
-      :style="{opacity: isShowHotspot ?1:0}"
     >
       <HotspotForHomepage
 
@@ -382,7 +379,7 @@ onMounted(() => {
     position: absolute;
     top: 0;
     z-index: 10;
-    opacity: 0;
+    // opacity: 1;
     .scroller-content {
       width: 100%;
       height: 200vh;

src/views/HotspotDetail1.vue

@@ -2,7 +2,7 @@
   <div
     :class="`hotspot-detail-1 ${pageLev === 1 ? '' : 'hotspot-detail-2'}`"
     @wheel="
-      ($event) => handleScrollThrottle($event, (val) => onSwipeChange(val, curIndex))
+      ($event) => handleScrollThrottle($event, () => onSwipeChange(-1, curIndex),() => onSwipeChange(1, curIndex))
     "
   >
     <!-- 左上角 -->
@@ -190,7 +190,6 @@ const onSwipeChange = (num, index) => {
   if (index == -1) {
     return
   }
-  console.log("在滚动", num, index)
   isShowOperationTip.value = false
   // let newItem = imgList[index + num]
   // curIndex.value = index + num

src/views/HotspotDetail3.vue

@@ -1,7 +1,7 @@
 <template>
   <div
     class="hotspot-detail-3"
-    @wheel="($event) => handleScrollThrottle($event, (val) => scrollFu(val))"
+    @wheel="($event) => handleScrollThrottle($event, () => scrollFu(-1),() => scrollFu(1))"
   >
     <img
       v-show="state === 1"

src/views/PaintingDetail.vue

@@ -76,7 +76,7 @@ onMounted(() => {
     >
     <!-- 左侧图片交互区 -->
     <PaintingDetailBox
-      :idx="route.query.idx"
+      :idx="route.query.idx ? route.query.idx : props.idx"
       :direction="paintingInfo['方向'] ? '横':'竖'"
       :big-url="`${$env.BASE_URL}configMultiMedia/paintings/${paintingInfo['标题']=='修篁树石图' ? 'home-painting2':paintingInfo['标题']}.jpg`"
       :url="`${$env.BASE_URL}configMultiMedia/paintings/${paintingInfo['标题']}.jpg`"