Merge branch 'master' of http://192.168.0.115:3000/renyicun/NanjingMuseumWuJinZang-PC

src/components/PaintingDetailBox.vue

@@ -1,7 +1,13 @@
 <script setup>
 import { ref, onMounted, computed } from 'vue'
 
+import { useRoute } from 'vue-router'
+
 const props = defineProps({
+  idx: {
+    type: String,
+    default: "-1",
+  },
   direction: {
     type: String,
     default: "横",
@@ -16,6 +22,8 @@ const props = defineProps({
   }
 })
 
+const route = useRoute()
+
 const isRow = computed(() => {
   return props.direction
 })
@@ -61,6 +69,7 @@ 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}`)
@@ -73,7 +82,7 @@ onMounted(() => {
       setTimeout(() => {
         if (isRow.value === "竖") {
           const dom = document.querySelector(".imgBox")
-          if (dom && dom.offsetHeight > pageHeightWindow) {
+          if (dom && ( dom.offsetHeight > pageHeightWindow)) {
             isMove.value = true
             imgWidth.value = dom.offsetWidth
             imgHeight.value = dom.offsetHeight
@@ -83,13 +92,13 @@ onMounted(() => {
           const leftBoxWidthDomWidth = leftBoxWidthDom.offsetWidth
           leftBoxWidth.value = leftBoxWidthDomWidth
           const dom = document.querySelector(".imgBoxHH")
-          if ( dom && dom.offsetWidth > leftBoxWidthDomWidth) {
+          if (dom && (dom.offsetWidth > leftBoxWidthDomWidth)) {
             isMove.value = true
             imgWidth.value = dom.offsetWidth
             imgHeight.value = dom.offsetHeight
           }
         }
-      }, 200)
+      }, 700)
       tiemrr.value = setInterval(() => {
         if (zhouMove.value >= 99) clearInterval(tiemrr.value)
         zhouMove.value = zhouMove.value + 1
@@ -133,7 +142,8 @@ onMounted(() => {
         v-if="isRow === '竖'"
         :class="`imgBox ${isMove ? '' : 'imgBoxMove'}`"
         :style="`clip-path: rect(0 100% ${zhouMove}% 0);
-        transform: translateY(${moveLoc}px)
+        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%': ''}
         `"
         @mousedown="isFlag = true"
         @mouseup="isFlag = false"

src/views/HotspotDetail1.vue

@@ -2,7 +2,7 @@
   <div
     :class="`hotspot-detail-1 ${pageLev === 1 ? '' : 'hotspot-detail-2'}`"
     @wheel="
-      ($event) => handleScroll($event, (val) => onSwipeChange(val, curIndex))
+      ($event) => handleScrollThrottle($event, (val) => onSwipeChange(val, curIndex))
     "
   >
     <!-- 左上角 -->
@@ -92,7 +92,7 @@
 import { ref } from "vue"
 import useRollFu from "../rollFu.js"
 
-const { handleScroll } = useRollFu()
+const { handleScrollThrottle } = useRollFu()
 
 const emit = defineEmits(["close"])
 
@@ -146,6 +146,7 @@ const backBtnFu = () => {
 
     pageShow.value = false
     pageLev.value = 1
+    curIndex.value = -1
   } else emit("close")
 }
 
@@ -408,9 +409,9 @@ const imgBottomLoc = (nowId, itemId) => {
       // left: -250%;
       // transform: translateX(-50%);
       letter-spacing: 2px;
-      height: calc(100% - 0px);
+      height: 140%;
       writing-mode: vertical-rl;
-      line-height: 120%;
+      line-height: 122%;
     }
   }
 

src/views/PaintingDetail.vue

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