更新一波

src/views/HomeView.vue

@@ -5,7 +5,8 @@ import { useStore } from "vuex"
 import Startup from "@/views/StartupView.vue"
 import useRollFu from "../rollFu.js"
 
-// import HotspotDetail3 from "@/views/HotspotDetail3.vue"
+import HotspotDetail3 from "@/views/HotspotDetail3.vue"
+import HotspotDetail1 from "@/views/HotspotDetail1.vue"
 
 
 const route = useRoute()
@@ -18,15 +19,19 @@ const { handleScroll } = useRollFu()
 
 const isShowOperationTip = ref(true)
 
+const isShowHotspotDetail1 = ref(false)
+const isShowHotspotDetail3 = ref(false)
+
 // 滑动逻辑
 const scrollFu = (val) => {
-  isShowOperationTip.value = false
+
   if (val == -1) {
     // 上滚
     console.log("上滚")
   } else if (val == 1) {
     // 下滚
     console.log("下滚")
+    isShowOperationTip.value = false
   }
 }
 
@@ -193,6 +198,15 @@ const curPageIndex = ref(0)
       />
     </Transition>
 
+    <!-- 材质热点详情 -->
+    <Transition name="fade-in-out">
+      <HotspotDetail1
+        v-if="isShowHotspotDetail1"
+        class="hotspot-detail"
+        @close="isShowHotspotDetail1 = false"
+      />
+    </Transition>
+
     <!-- 滑动提示 -->
     <OperationTip
       v-show="curPageIndex == 0"
@@ -338,7 +352,6 @@ const curPageIndex = ref(0)
     }
   }
 
-
   > .hotspot-wrap {
     position: absolute;
     left: 50%;
@@ -360,7 +373,7 @@ const curPageIndex = ref(0)
 
     > .hotspot-1 {
       position: absolute;
-      top:100px;
+      top: 100px;
       right: 25px;
       pointer-events: initial;
     }
@@ -374,13 +387,16 @@ const curPageIndex = ref(0)
 
     > .hotspot-3 {
       position: absolute;
-      bottom:0px;
+      bottom: 0px;
       right: 25px;
       pointer-events: initial;
     }
   }
+  > .hotspot-detail {
+    z-index: 21;
+  }
 
-   > .operation-tip {
+  > .operation-tip {
     position: absolute;
     right: 30px;
     transform: translateX(-50%);
@@ -389,4 +405,3 @@ const curPageIndex = ref(0)
   }
 }
 </style>
-

src/views/HotspotDetail1.vue

@@ -0,0 +1,361 @@
+<template>
+  <div :class="`hotspot-detail-1 ${pageLev === 1 ? '' : 'hotspot-detail-2'}`">
+    <!-- 左上角 -->
+    <img
+      class="HD1_1"
+      :src="require(`@/assets/images/HD1/img_title.png`)"
+      :style="`opacity:${pageLev === 1 ? '1' : '0'}`"
+    >
+    <!-- 中间--点击查看 -->
+    <div :class="`HD1_2 ${isLookImg ? '' : 'HD1_2Hide'}`">
+      <img
+        class=""
+        :src="require(`@/assets/images/icon-click-tip.png`)"
+        alt=""
+        draggable="false"
+      >
+      <div>点 击 查 看</div>
+    </div>
+
+    <!-- 右边三个画 -->
+    <div
+      v-for="(item, index) in imgList"
+      :key="item.id"
+      :class="`HD1_3 HD1_3_${index + 1} ${
+        pageLev === item.id ? 'HD1_3Ac' : ''
+      } ${imgBottomLoc(pageLev, item.id)} ${pageShow ? 'HD1_3AcBottom' : ''}
+      `"
+      @click="ImgClick(item)"
+    >
+      <div
+        v-show="pageLev === item.id"
+        v-touch:swipe.left="() => onSwipeChange(1, index)"
+        v-touch:swipe.right="() => onSwipeChange(-1, index)"
+        :swipe-options="{ direction: 'horizontal' }"
+        class="HD1_3AcMove"
+      >
+        <!-- :text="`${pageLev===11?'向右':pageLev===13?'向左':'左右'}滑动`" -->
+        <OperationTip
+          v-if="isShowOperationTip"
+          class="operation-tip"
+          :direction="'h'"
+          :is-show="isShowOperationTip"
+          color="green"
+          text="左右滑动"
+        />
+      </div>
+
+      <img
+        :src="
+          require(`@/assets/images/HD1/img${pageShow ? '' : '_list'}_${
+            item.imgName
+          }.png`)
+        "
+        alt=""
+      >
+    </div>
+
+    <!-- 顶部文字 -->
+    <div
+      :class="`HD1_4 ${pageShow ? 'HD1_4Ac' : ''}`"
+      :style="`opacity:${swChange && pageShow ? '1' : '0'}`"
+    >
+      <h3>{{ txtShow.title }}</h3>
+      <p>{{ txtShow.desc }}</p>
+    </div>
+
+    <BtnBack
+      color="green"
+      @click="backBtnFu"
+    />
+  </div>
+</template>
+
+<script setup>
+import { ref } from "vue"
+
+const emit = defineEmits(["close"])
+
+const craftInfo = configText.craft
+
+const imgList = [
+  {
+    id: 11,
+    imgName: "juan",
+    title: craftInfo[3].title,
+    desc: craftInfo[3].desc,
+  },
+  {
+    id: 12,
+    imgName: "ling",
+    title: craftInfo[5].title,
+    desc: craftInfo[5].desc,
+  },
+  {
+    id: 13,
+    imgName: "paper",
+    title: craftInfo[4].title,
+    desc: craftInfo[4].desc,
+  },
+]
+
+const imgListLocObj = {
+  11: {
+    12: "HD1_3HideRight",
+    13: "HD1_3HideLeft",
+  },
+  12: {
+    13: "HD1_3HideRight",
+    11: "HD1_3HideLeft",
+  },
+  13: {
+    11: "HD1_3HideRight",
+    12: "HD1_3HideLeft",
+  },
+}
+
+// 当前页面 层级
+const pageLev = ref(1)
+const pageShow = ref(false)
+
+// 点击返回按钮
+const backBtnFu = () => {
+  if (pageLev.value !== 1) {
+    // 点击查看回复
+    isLookImg.value = true
+
+
+    pageShow.value = false
+    pageLev.value = 1
+  } else emit("close")
+}
+
+// 点击查看自动消失
+const isLookImg = ref(true)
+// onMounted(() => {
+//   setTimeout(() => {
+//     isLookImg.value = false
+//   }, 3000)
+// })
+
+// 页面展示的文字
+const txtShow = ref({
+  title: "",
+  desc: "",
+})
+const isShowOperationTip = ref(false)
+
+// 点击图片
+const ImgClick = (item) => {
+  if (!isShowOperationTip.value) {
+    isShowOperationTip.value = true
+
+  }
+
+  pageShow.value = true
+  isLookImg.value = false
+  pageLev.value = item.id
+  txtShow.value = {
+    title: item.title,
+    desc: item.desc,
+  }
+}
+
+const swChange = ref(true)
+
+// 左滑右滑
+const onSwipeChange = (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)
+  }
+
+  pageLev.value = newItem.id
+
+  setTimeout(() => {
+    txtShow.value = {
+      title: newItem.title,
+      desc: newItem.desc,
+    }
+  }, 500)
+}
+
+// 判断画轴的位置 在 左边还是右边
+const imgBottomLoc = (nowId, itemId) => {
+  // nowId:当前选中的id
+  // itemId 11 12 13
+  // nowId 11的时候 itemId 12在右边 itemId 13在左边
+  // nowId 12的时候 itemId 11在左边 itemId 13在右边
+  // nowId 13的时候 itemId 11在右边 itemId 12在左边
+  return pageShow.value ? imgListLocObj[nowId][itemId] : ""
+}
+</script>
+
+<style lang="less" scoped>
+.hotspot-detail-1 {
+  position: absolute;
+  left: 0;
+  top: 0;
+  width: 100%;
+  height: 100%;
+  background-image: url("../assets/images/HD1/bg_caizhi.jpg");
+  background-size: 100% 100%;
+  background-color: #b6bfb3;
+  transition: all 1s;
+  .btn-back {
+    z-index: 20;
+  }
+  .HD1_1 {
+    transition: all 1s;
+    position: absolute;
+    z-index: 10;
+    top: 60px;
+    left: 30px;
+    width: 80px;
+  }
+
+  .HD1_2 {
+    position: absolute;
+    z-index: 11;
+    top: 45%;
+    left: 40%;
+    transform: translate(-50%, -50%);
+    width: 30px;
+    display: flex;
+    flex-direction: column;
+    pointer-events: none;
+    transition: opacity 1s;
+    opacity: 1;
+    & > img {
+      width: 40px;
+    }
+    & > div {
+      margin-top: 10px;
+      position: relative;
+      line-height: 20px;
+      left: 9px;
+      font-weight: 400;
+      font-family: KaiTi;
+      color: #fff;
+      text-align: center;
+    }
+  }
+  .HD1_2Hide {
+    opacity: 0;
+  }
+
+  .HD1_3 {
+    position: absolute;
+    z-index: 10;
+    transition: bottom 1s;
+    width: 100%;
+    & > img {
+      width: 100%;
+    }
+  }
+  .HD1_3_1 {
+    right: -60%;
+    z-index: 1;
+    bottom: 8%;
+  }
+  .HD1_3_2 {
+    right: -50%;
+    z-index: 2;
+    bottom: 0;
+  }
+  .HD1_3_3 {
+    right: -40%;
+    z-index: 3;
+    bottom: -8%;
+  }
+  .HD1_3Ac {
+    bottom: -5px;
+    right: 0;
+    opacity: 1;
+    .HD1_3AcMove {
+      position: absolute;
+      bottom: 0;
+      left: 0;
+      width: 100%;
+      height: 100%;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      padding-top: 30%;
+    }
+  }
+
+  .HD1_3HideLeft {
+    right: 100%;
+    bottom: -8%;
+    opacity: 0;
+    pointer-events: none;
+  }
+  .HD1_3HideRight {
+    right: -100%;
+    bottom: -8%;
+    opacity: 0;
+    pointer-events: none;
+  }
+  .HD1_3AcBottom {
+    bottom: -50px;
+    transition: right 1s, opacity 0.8s;
+  }
+
+  .HD1_4 {
+    position: absolute;
+    z-index: 11;
+    left: 50%;
+    bottom: 100%;
+    transform: translateX(-50%);
+    font-family: KaiTi;
+    font-weight: 400;
+    color: #5e715d;
+    width: 70%;
+    height: 26%;
+    opacity: 0;
+    pointer-events: none;
+    transition: bottom 1s, opacity 0.5s;
+
+    h3 {
+      font-weight: 700;
+      text-align: center;
+      font-size: 30px;
+    }
+    p {
+      font-size: 16px;
+      position: absolute;
+      top: 50px;
+      left: 50%;
+      transform: translateX(-50%);
+      letter-spacing: 2px;
+      height: calc(100% - 50px);
+      writing-mode: vertical-rl;
+      line-height: 120%;
+    }
+  }
+
+  .HD1_4Ac {
+    opacity: 1;
+    bottom: 65%;
+  }
+}
+.hotspot-detail-2 {
+  background-image: url("../assets/images/HD1/bg_paper.jpg");
+}
+</style>

src/views/HotspotDetail3.vue

@@ -3,19 +3,19 @@
     <img
       v-show="state === 1"
       class="bg-img"
-      src="@/assets/images/hots-detail-bg-state1.png"
+      src="@/assets/images/hots-detail-bg-state1.jpg"
       alt=""
     >
     <img
       v-show="state === 2"
       class="bg-img"
-      src="@/assets/images/hots-detail-bg-state2.png"
+      src="@/assets/images/hots-detail-bg-state2.jpg"
       alt=""
     >
     <img
       v-show="state === 3"
       class="bg-img"
-      src="@/assets/images/hots-detail-bg-state3.png"
+      src="@/assets/images/hots-detail-bg-state3.jpg"
       alt=""
     >
 
@@ -23,7 +23,7 @@
     <img
       class="shadow-box"
       :src="shadow"
-      :style="{ width: state === 1 ? '50%' : '80%' }"
+      :style="{ width: state === 1 ? '50%' : '80%',bottom: state === 1 ?'-15px':'' }"
     >
 
     <img
@@ -57,27 +57,19 @@
       :src="hots3StateContent3"
       alt=""
     >
-    <OperationTip
-      v-show="state == 2 && isShowOperationTip"
-      class="operation-tip"
-      text="向左划动"
-      direction="h"
-      :color="'green'"
-      :is-show="isShowOperationTip"
-    />
     <div class="btns-box">
       <img
-        :src="state == 1 ? hots3StateBtn1 : hots3StateBtn1Ac"
+        :src="state == 1 ? hots3StateBtn1Ac : hots3StateBtn1"
         alt=""
         @click="state = 1"
       >
       <img
-        :src="state == 2 ? hots3StateBtn2 : hots3StateBtn2Ac"
+        :src="state == 2 ? hots3StateBtn2Ac : hots3StateBtn2"
         alt=""
         @click="goState2"
       >
       <img
-        :src="state == 3 ? hots3StateBtn3 : hots3StateBtn3Ac"
+        :src="state == 3 ? hots3StateBtn3Ac : hots3StateBtn3"
         alt=""
         @click="state = 3"
       >
@@ -92,11 +84,6 @@ import useSizeAdapt from "@/useFunctions/useSizeAdapt"
 
 const emit = defineEmits(["close"])
 
-// 三个背景图
-import hots3StateBg1 from "@/assets/images/hots-detail-bg-state1.png"
-import hots3StateBg2 from "@/assets/images/hots-detail-bg-state2.png"
-import hots3StateBg3 from "@/assets/images/hots-detail-bg-state3.png"
-
 // 三个按钮
 
 import hots3StateBtn1 from "@/assets/images/hots-detail-btn-state1.png"
@@ -181,6 +168,7 @@ const handleScroll = () => {
     top: 0;
     left: 0;
     z-index: -1;
+    object-position: bottom;
   }
 
   .shadow-box {
@@ -194,16 +182,12 @@ const handleScroll = () => {
   }
 
   .content1 {
-    width: 90%;
-    max-height: 80vh;
+    // width: 90%;
+    max-height: 90vh;
     position: absolute;
     left: 50%;
     transform: translateX(-50%);
     transition: opacity 1s ease;
-    bottom: calc(
-      130 / v-bind("windowSizeWhenDesignForRef") *
-        v-bind("windowSizeInCssForRef")
-    );
   }
 
   .content2 {
@@ -213,19 +197,20 @@ const handleScroll = () => {
     position: absolute;
     transition: opacity 1s ease;
     z-index: 2;
-    &::-webkit-scrollbar {
-      display: none;
-    }
-
+    display: flex;
+    justify-content:center;
     img {
-      // height: 50vh;
-      width: 990px;
+      // height: 90vh;
+      width: 80%;
     }
   }
 
   .content3 {
     position: absolute;
-    width: 100%;
+    // width: 100%;
+    height: 80vh;
+    left: 50%;
+    transform: translateX(-50%);
     transition: opacity 1s ease;
   }
 
@@ -240,26 +225,20 @@ const handleScroll = () => {
   }
 
   .btns-box {
-    width: 55%;
+    // width: 55%;
+    height: 200px;
     position: absolute;
-    left: 50%;
-    transform: translateX(-50%);
+    left: 30px;
+    // transform: translateX(-50%);
+    bottom: 30px;
     display: flex;
+    flex-direction: column;
     justify-content: space-evenly;
-    bottom: calc(
-      35 / v-bind("windowSizeWhenDesignForRef") *
-        v-bind("windowSizeInCssForRef")
-    );
 
     > img {
-      width: calc(
-        35 / v-bind("windowSizeWhenDesignForRef") *
-          v-bind("windowSizeInCssForRef")
-      );
-      width: calc(
-        35 / v-bind("windowSizeWhenDesignForRef") *
-          v-bind("windowSizeInCssForRef")
-      );
+      width: 35px;
+      width: 35px;
+      cursor: pointer;
     }
   }
 }