更新更新

src/components/PaintingDetailBox.vue

@@ -279,6 +279,7 @@ onMounted(() => {
         bottom: 100%;
         left: 0;
         width: 100%;
+        z-index: 2;
       }
       & > img {
         pointer-events: none;
@@ -311,6 +312,7 @@ onMounted(() => {
         right: 100%;
         top: 0;
         height: 100%;
+        z-index:2;
       }
       & > img {
         pointer-events: none;

src/views/HomeView.vue

@@ -1,5 +1,5 @@
 <script setup>
-import { ref, computed, nextTick, onMounted } from "vue"
+import { ref, computed, nextTick, onMounted, watch } from "vue"
 import { useRouter, useRoute } from "vue-router"
 import { useStore } from "vuex"
 import Startup from "@/views/StartupView.vue"
@@ -9,6 +9,12 @@ import HotspotDetail3 from "@/views/HotspotDetail3.vue"
 import HotspotDetail1 from "@/views/HotspotDetail1.vue"
 import PaintingDetail from '@/views/PaintingDetail.vue'
 
+import DetailImg from '@/assets/images/icon_home_detail-min.png'
+import DetailImgAc from '@/assets/images/icon_home_detail-min-ac.png'
+import AuthorImg from '@/assets/images/icon_home_author-min.png'
+import AuthorImgAc from '@/assets/images/icon_home_author-min-ac.png'
+
+
 const store = useStore()
 const router = useRouter()
 const route = useRoute()
@@ -52,6 +58,20 @@ const longTitleText = computed(() => {
         : ""
 })
 
+const isShowHotspot = ref(true)
+watch(curPageIndex, (val) => {
+  if (val == 0 || val == 4) {
+    setTimeout(() => {
+      isShowHotspot.value = true
+    }, 1500)
+  }
+  isShowHotspot.value = false
+})
+
+// const isShowHotspot = computed(setTimeout(()=> {
+//   return curPageIndex.value == 0 || curPageIndex.value == 4
+// }, 1500))
+
 // 滑动逻辑
 const scrollFu = (val) => {
   if (val == -1) {
@@ -77,6 +97,10 @@ const scrollFu = (val) => {
     }
   }
 }
+
+const hoverIndex = ref(null)
+
+
 onMounted(() => {
   if (route.query.page) {
     curPageIndex.value = parseInt(route.query.page)
@@ -88,7 +112,7 @@ onMounted(() => {
   <div class="home">
     <!-- 过渡到更多详情页视频 -->
     <video
-      v-if="isShowVideoFadeToNextPage"
+      v-show="isShowVideoFadeToNextPage"
       ref="videoFadeToNextPageEl"
       muted
       class="fade-to-next-page"
@@ -144,7 +168,7 @@ onMounted(() => {
         draggable="false"
       >
       <div class="sub-text">
-        南京博物院<br>
+        <!-- 南京博物院<br> -->
         绢本 墨笔<br>
         元 李衎<br>
       </div>
@@ -159,6 +183,8 @@ onMounted(() => {
     >
       <div
         class="page2-box"
+        @mouseenter="hoverIndex = 1"
+        @mouseleave="hoverIndex = null"
         @click="
           // () => {
           //   router.push('/painting-detail?idx=home');
@@ -168,7 +194,7 @@ onMounted(() => {
         "
       >
         <img
-          src="@/assets/images/icon_home_detail-min.png"
+          :src="hoverIndex == 1 ? DetailImgAc : DetailImg"
           alt=""
         >
         <div>作品简介</div>
@@ -176,6 +202,8 @@ onMounted(() => {
       <div
         class="page2-box"
         style="margin-top: 10px"
+        @mouseenter="hoverIndex = 2"
+        @mouseleave="hoverIndex = null"
         @click="
           // () => {
           //   router.push('/painting-detail?idx=home&state=2');
@@ -185,7 +213,7 @@ onMounted(() => {
         "
       >
         <img
-          src="@/assets/images/icon_home_author-min.png"
+          :src="hoverIndex == 2 ? AuthorImgAc : AuthorImg"
           alt=""
         >
         <div>作者简介</div>
@@ -201,7 +229,7 @@ onMounted(() => {
       }"
       @click="
         () => {
-          curPageIndex == 1 ? (curPageIndex = 2) : '';
+          isShowPaintingDetial = true
         }
       "
     >
@@ -254,14 +282,17 @@ onMounted(() => {
     </div>
 
     <!-- 热点层1 -->
-    <div class="hotspot-wrap">
+    <div
+      class="hotspot-wrap"
+      :style="{opacity: isShowHotspot ?1:0}"
+    >
       <HotspotForHomepage
-        v-show="curPageIndex == 0 || curPageIndex == 4"
+
         class="hotspot-1"
         @click="isShowHotspotDetail1 = true"
       />
       <HotspotForHomepage
-        v-show="curPageIndex == 0 || curPageIndex == 4"
+
         class="hotspot-3"
         @click="isShowHotspotDetail3 = true"
       />
@@ -447,7 +478,8 @@ onMounted(() => {
     left: 50%;
     top: 50%;
     width: 551.84px;
-    height: 937.05px;
+    // height: 937.05px;
+    height: 100%;
     // background: green;
     transform: translate(-50%, -50%);
     z-index: 1;
@@ -461,13 +493,14 @@ onMounted(() => {
 
     > .painting-stem {
       width: 80%;
+      // height: 75%;
       height: calc(
         371 / v-bind("windowSizeWhenDesignForRef") *
           v-bind("windowSizeInCssForRef")
       );
       position: absolute;
       left: 50%;
-      transform: translate(-50%, 26%);
+      transform: translate(-50%, 22%);
       transition: opacity 1.5s ease;
     }
   }
@@ -491,13 +524,14 @@ onMounted(() => {
     top: 50%;
     transform: translate(-46%, -50%);
     width: 551.84px;
-    height: 937.05px;
+    // height: 937.05px;
+    height: 100%;
     z-index: 7;
     pointer-events: none;
     will-change: transform;
     backface-visibility: hidden;
     z-index: 10;
-    transition: opacity 1.5s ease;
+    transition: opacity 0.5s ease;
 
     & > div {
       z-index: 100;
@@ -555,7 +589,7 @@ onMounted(() => {
     transform: translateY(-50%);
     left: 10%;
     color: #ffffff;
-    font-size: 30px;
+    font-size: 25px;
     line-height: 38px;
     font-family: "KaiTi";
     transition: opacity 1.5s ease;

src/views/HotspotDetail1.vue

@@ -1,5 +1,10 @@
 <template>
-  <div :class="`hotspot-detail-1 ${pageLev === 1 ? '' : 'hotspot-detail-2'}`">
+  <div
+    :class="`hotspot-detail-1 ${pageLev === 1 ? '' : 'hotspot-detail-2'}`"
+    @wheel="
+      ($event) => handleScroll($event, (val) => onSwipeChange(val, curIndex))
+    "
+  >
     <!-- 左上角 -->
     <img
       class="HD1_1"
@@ -7,7 +12,10 @@
       :style="`opacity:${pageLev === 1 ? '1' : '0'}`"
     >
     <!-- 中间--点击查看 -->
-    <div :class="`HD1_2 ${isLookImg ? '' : 'HD1_2Hide'}`">
+    <div
+      :class="`HD1_2 ${isLookImg ? '' : 'HD1_2Hide'}`"
+      @click="ImgClick(imgList[2],2)"
+    >
       <img
         class=""
         :src="require(`@/assets/images/icon_white_click.png`)"
@@ -25,15 +33,12 @@
         pageLev === item.id ? 'HD1_3Ac' : ''
       } ${imgBottomLoc(pageLev, item.id)} ${pageShow ? 'HD1_3AcBottom' : ''}
       `"
-      @click="ImgClick(item)"
+      @click="ImgClick(item,index)"
     >
       <div
         v-show="pageLev === item.id"
         :swipe-options="{ direction: 'horizontal' }"
         class="HD1_3AcMove"
-        @wheel="
-          ($event) => handleScroll($event, (val) => onSwipeChange(val, index))
-        "
       >
         <!-- :text="`${pageLev===11?'向右':pageLev===13?'向左':'左右'}滑动`" -->
         <!-- <OperationTip
@@ -72,7 +77,7 @@
       <p>{{ txtShow.desc }}</p>
       <h3
         :style="{
-          transform: `translate(${txtShow.title == '绫' ? '630%' :txtShow.title == '绢' ? '350%': ''}, -150%)`
+          transform: `translate(${txtShow.title == '绫' ? '630%' :txtShow.title == '绢' ? '350%': '150%'}, -150%)`
         }"
       >
         {{ txtShow.title }}
@@ -159,11 +164,14 @@ const txtShow = ref({
 })
 const isShowOperationTip = ref(false)
 
+const curIndex = ref(-1)
+
 // 点击图片
-const ImgClick = (item) => {
+const ImgClick = (item, index) => {
   if (!isShowOperationTip.value) {
     isShowOperationTip.value = true
   }
+  curIndex.value = index
 
   pageShow.value = true
   isLookImg.value = false
@@ -178,26 +186,48 @@ const swChange = ref(true)
 
 // 左滑右滑
 const onSwipeChange = (num, index) => {
+  if (index == -1) {
+    return
+  }
   console.log("在滚动", num, index)
   isShowOperationTip.value = false
-  let newItem = imgList[index + num]
-
-  if (index === 0 && num === -1) {
-    // 第一 还向左滑
-    newItem = imgList[imgList.length - 1]
-    // return
-  }
-  if (index === imgList.length - 1 && num === 1) {
-    newItem = imgList[0]
-    // return
-  }
-
-  if (swChange.value) {
-    swChange.value = false
-    setTimeout(() => {
-      swChange.value = true
-    }, 600)
+  // let newItem = imgList[index + num]
+  // curIndex.value = index + num
+
+  // if (index === 0 && num === -1) {
+  //   // 第一 还向左滑
+  //   newItem = imgList[imgList.length - 1]
+  //   curIndex.value = imgList.length - 1
+  //   // return
+  // }
+  // if (index === imgList.length - 1 && num === 1) {
+  //   newItem = imgList[0]
+  //   curIndex.value = 0
+  //   // return
+  // }
+
+  // if (swChange.value) {
+  //   swChange.value = false
+  //   setTimeout(() => {
+  //     swChange.value = true
+  //   }, 600)
+  // }
+
+  // pageLev.value = newItem.id
+
+  // setTimeout(() => {
+  //   txtShow.value = {
+  //     title: newItem.title,
+  //     desc: newItem.desc,
+  //   }
+  // }, 500)
+
+  if (num == -1 ) {
+    curIndex.value = curIndex.value > 0 ? curIndex.value - 1 : imgList.length - 1
+  } else if (num == 1) {
+    curIndex.value = curIndex.value < imgList.length - 1 ? curIndex.value + 1 : 0
   }
+  let newItem = imgList[curIndex.value]
 
   pageLev.value = newItem.id
 
@@ -207,6 +237,13 @@ const onSwipeChange = (num, index) => {
       desc: newItem.desc,
     }
   }, 500)
+
+  if (swChange.value) {
+    swChange.value = false
+    setTimeout(() => {
+      swChange.value = true
+    }, 600)
+  }
 }
 
 // 判断画轴的位置 在 左边还是右边
@@ -248,8 +285,8 @@ const imgBottomLoc = (nowId, itemId) => {
   .HD1_2 {
     position: absolute;
     z-index: 11;
-    right: calc(12% + 476px);
-    bottom: calc(80vh - 50%);
+    right: calc(12% + 576px);
+    bottom: calc(80vh - 37%);
     display: flex;
     flex-direction: column;
     justify-content: center;
@@ -274,7 +311,7 @@ const imgBottomLoc = (nowId, itemId) => {
     position: absolute;
     z-index: 10;
     transition: bottom 1s;
-    height: 80vh;
+    height: 95vh;
     & > img {
       // width: 100%;
       height: 100%;
@@ -289,13 +326,13 @@ const imgBottomLoc = (nowId, itemId) => {
   .HD1_3_2 {
     right: 10%;
     z-index: 2;
-    bottom: -30%;
+    bottom: -32%;
     cursor: pointer;
   }
   .HD1_3_3 {
     right: 12%;
     z-index: 3;
-    bottom: -44%;
+    bottom: -46%;
     cursor: pointer;
   }
   .HD1_3Ac {
@@ -337,6 +374,7 @@ const imgBottomLoc = (nowId, itemId) => {
   .HD1_3AcBottom {
     bottom: -50px;
     transition: right 1s, opacity 0.8s;
+    height: 80vh;
   }
 
   .HD1_4 {

src/views/HotspotDetail3.vue

@@ -1,5 +1,8 @@
 <template>
-  <div class="hotspot-detail-3">
+  <div
+    class="hotspot-detail-3"
+    @wheel="($event) => handleScrollThrottle($event, (val) => scrollFu(val))"
+  >
     <img
       v-show="state === 1"
       class="bg-img"
@@ -19,11 +22,19 @@
       alt=""
     >
 
+    <!-- 滑动提示 -->
+    <OperationTip
+      class="operation-tip"
+      text="向下滑动"
+      :is-show="isShowOperationTip"
+    />
+
+
     <!-- 阴影 -->
     <img
       class="shadow-box"
       :src="shadow"
-      :style="{ width: state === 1 ? '50%' : '80%',bottom: state === 1 ?'-15px':'' }"
+      :style="{ width: state === 1 ? '20%' : state === 2 ? '80%' :'35%',bottom: state === 1 ?'-15px':'' }"
     >
 
     <img
@@ -58,18 +69,24 @@
     >
     <div class="btns-box">
       <img
-        :src="state == 1 ? hots3StateBtn1Ac : hots3StateBtn1"
+        :src="state == 1 || hoverIndex== 1 ? hots3StateBtn1Ac : hots3StateBtn1"
         alt=""
+        @mouseenter="hoverIndex = 1"
+        @mouseleave="hoverIndex = null"
         @click="state = 1"
       >
       <img
-        :src="state == 2 ? hots3StateBtn2Ac : hots3StateBtn2"
+        :src="state == 2 || hoverIndex== 2 ? hots3StateBtn2Ac : hots3StateBtn2"
         alt=""
+        @mouseenter="hoverIndex = 2"
+        @mouseleave="hoverIndex = null"
         @click="goState2"
       >
       <img
-        :src="state == 3 ? hots3StateBtn3Ac : hots3StateBtn3"
+        :src="state == 3 || hoverIndex== 3 ? hots3StateBtn3Ac : hots3StateBtn3"
         alt=""
+        @mouseenter="hoverIndex = 3"
+        @mouseleave="hoverIndex = null"
         @click="state = 3"
       >
     </div>
@@ -78,7 +95,7 @@
 </template>
 
 <script setup>
-import { ref, computed, onMounted } from "vue"
+import { ref, computed } from "vue"
 import useSizeAdapt from "@/useFunctions/useSizeAdapt"
 
 const emit = defineEmits(["close"])
@@ -103,11 +120,40 @@ import hots3StateContent1 from "@/assets/images/hots-detail-content-state1.png"
 import hots3StateContent2 from "@/assets/images/hots-detail-content-state2.png"
 import hots3StateContent3 from "@/assets/images/hots-detail-content-state3.png"
 
+import useRollFu from "../rollFu.js"
+
+
 const { windowSizeInCssForRef, windowSizeWhenDesignForRef } = useSizeAdapt()
 
 // 轴1  卷2 册3
 const state = ref(1)
 
+const hoverIndex = ref(0)
+
+// const isShowOperationTip = ref(false)
+
+const { handleScrollThrottle } = useRollFu()
+
+// 滑动逻辑
+const scrollFu = (val) => {
+  isShowOperationTip.value = false
+  if (val == -1) {
+    // 上滚
+    if (state.value == 1) {
+      state.value = 3
+    } else {
+      state.value -= 1
+    }
+  } else if (val == 1) {
+    // 下滚
+    if (state.value == 3) {
+      state.value = 1
+    } else {
+      state.value += 1
+    }
+  }
+}
+
 // const homeBg = computed(() => {
 //   return `url(${state.value == 1 ? hots3StateBg1 : state.value == 2 ? hots3StateBg2 : hots3StateBg3})`
 // })
@@ -125,14 +171,14 @@ const isShowOperationTip = ref(true)
 const goState2 = () => {
   state.value = 2
   setTimeout(() => {
-    if (content2Dom.value) {
-      const x = 310 / 780
-      const allWidth = document
-        .getElementById("content2Img")
-        .getBoundingClientRect().width
-      content2Dom.value.scrollLeft = allWidth * x
-      isShowOperationTip.value = true
-    }
+    // if (content2Dom.value) {
+    //   const x = 310 / 780
+    //   const allWidth = document
+    //     .getElementById("content2Img")
+    //     .getBoundingClientRect().width
+    //   content2Dom.value.scrollLeft = allWidth * x
+    //   // isShowOperationTip.value = true
+    // }
   }, 5)
 }
 
@@ -210,13 +256,11 @@ const goState2 = () => {
   }
 
   .operation-tip {
-    position: fixed;
-    bottom: calc(
-      80 / v-bind("windowSizeWhenDesignForRef") *
-        v-bind("windowSizeInCssForRef")
-    );
-    left: 50%;
+    position: absolute;
+    right: 30px;
     transform: translateX(-50%);
+    top: 50%;
+    transform: translateY(-50%);
   }
 
   .btns-box {

src/views/PaintingDetail.vue

@@ -95,7 +95,9 @@ onMounted(() => {
 .home{
   width: 100%;
   height: 100%;
-  background: linear-gradient( 180deg, #AFCEA5 0%, #34492E 100%);
+  // background: linear-gradient( 180deg, #AFCEA5 0%, #34492E 100%);
+  background: url(@/assets/images/painting-detail-bg.jpg);
+  background-size: 100% 100%;
   display:flex;
 }
 </style>