upup 更新一些

public/configText.js

@@ -37,7 +37,7 @@ var configText = {
     },
     {
       title: '绢',
-      desc:	`绢，在国画中读四声，常被误读成一声。绘在绢、绫、丝织物上的字画，称为绢本，在画面中能看到明显的横竖交错的纺织痕迹。`,
+      desc:	`绢在国画中读四声，常被误读成一声。绘在绢、绫、丝织物上的字画，称为绢本，在画面中能看到明显的横竖交错的纺织痕迹。`,
     },
     {
       title: '纸',

src/components/HotspotForHomepage.vue

@@ -1,9 +1,15 @@
 <template>
-  <div class="hotspot animation-show-hide-for-home-hotspot">
+  <div
+    class="hotspot animation-show-hide-for-home-hotspot"
+    :style="{
+      left: props.isLeft ? '0' : 'none',
+    }"
+  >
     <img
       class=""
       src="@/assets/images/icon_hotspot.png"
       alt=""
+      :style="{ width: props.width, opacity: props.opacity }"
       draggable="false"
     >
   </div>
@@ -12,19 +18,35 @@
 <script setup>
 import { useWindowSize } from "@vueuse/core"
 
-
 const windowHeightDesign = 1080 - 71 - 37 // 设计稿里视口高度。注意要减去上下边栏
 const { width: windowWidth, height: windowHeight } = useWindowSize()
 
+const props = defineProps({
+  opacity: {
+    type: Number,
+    default: 1,
+  },
+  width: {
+    type: String,
+    default: "100%",
+  },
+  isLeft: {
+    type: Boolean,
+    default: false,
+  },
+})
 </script>
 
 <style lang="less" scoped>
-.hotspot{
+.hotspot {
   width: calc(48px * v-bind("windowHeight") / v-bind("windowHeightDesign"));
   height: calc(48px * v-bind("windowHeight") / v-bind("windowHeightDesign"));
-  >img{
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  > img {
     width: 100%;
-    height: 100%;
+    // height: 100%;
   }
 }
 .animation-show-hide-for-home-hotspot {
@@ -41,4 +63,4 @@ const { width: windowWidth, height: windowHeight } = useWindowSize()
     opacity: 0;
   }
 }
-</style>
+</style>

src/rollFu.js

@@ -35,8 +35,10 @@ export default function useRollFu() {
   }
 
 
+
   return {
     handleScroll,
-    handleScrollThrottle
+    handleScrollThrottle,
+    throttle
   }
 }

src/views/BambooBookView.vue

@@ -3,6 +3,8 @@ import { ref, computed, onMounted, inject } from "vue"
 import { useRouter } from "vue-router"
 import useRollFu from "../rollFu.js"
 import { useWindowSize } from "@vueuse/core"
+import useSmoothSwipe from "@/useFunctions/useSmoothSwipe.js"
+
 
 const router = useRouter()
 
@@ -10,7 +12,7 @@ const curState = ref("ye")
 
 const $env = inject("$env")
 
-const { handleScroll } = useRollFu()
+const { handleScroll, throttle } = useRollFu()
 
 const bigViewList = computed(() => {
   let resZhu = null
@@ -64,32 +66,45 @@ const isShowBigView = ref(false)
 
 const isShowOperationTip = ref(true)
 
-const handleWheel = (val) => {
+const handleWheel = (val, amount = 50) => {
   event.preventDefault()
   isShowOperationTip.value = false
   if (isShowBigView.value) {
     return
   }
-  const scrollAmount = 50
   // isShowClickTip.value = false
   if (val == -1) {
-    rowScroller.value.scrollLeft -= scrollAmount
+    rowScroller.value.scrollLeft -= amount
   } else {
-    rowScroller.value.scrollLeft += scrollAmount
+    rowScroller.value.scrollLeft += amount
   }
 }
 // const handleClose = () => {
 //   setTimeout(() =>{isShowBigView.value = false}, 200)
 // }
 
+const isFirefox = computed(() => {
+  return navigator.userAgent.toLowerCase().indexOf("firefox") > -1
+})
+
+const {
+  onMouseDown,
+} = useSmoothSwipe({
+  scrollTargetRef: rowScroller,
+})
+
+const scrollContainer = ref(null)
+
 onMounted(() => {
-  console.log("paintingData", paintingData.value)
-  console.log("看看", bigViewList.value)
 })
 </script>
 
 <template>
-  <div class="home">
+  <div
+    ref="scrollContainer"
+    class="home"
+    @wheel="($event) => handleScroll($event, (val) => handleWheel(val))"
+  >
     <BtnBack
       style="z-index: 2"
       @click="router.back()"
@@ -174,36 +189,29 @@ onMounted(() => {
           </div>
         </div>
       </div>
-      <div
-        ref="rowScroller"
-        class="painting-detail-box"
-        @wheel="($event) => handleScroll($event, (val) => handleWheel(val))"
-      >
-        <!-- <OperationTip
-          v-show="isShowClickTip"
-          class="operation-tip-click"
-          :text="'点击查看'"
-          color="green"
-          type="click"
-          @click="() => (isShowClickTip = false)"
-        /> -->
+      <div class="bottom-box">
         <div
-          v-for="(category, index1) in paintingData"
-          :key="index1"
-          class="category-box"
+          ref="rowScroller"
+          class="painting-detail-box"
+          :class="{ 'huohu-scroller': isFirefox }"
         >
           <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"
+            v-for="(category, index1) in paintingData"
+            :key="index1"
+            class="category-box"
           >
-            <!-- <el-image
+            <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"
+            >
+              <!-- <el-image
               class="small-img"
               :src="`${$env.BASE_URL}configMultiMedia/zhupuImages/${
                 item['图片名称'] ? item['图片名称'] : item['名称']
@@ -218,21 +226,35 @@ onMounted(() => {
               :hide-on-click-modal="true"
               @close="handleClose"
             /> -->
-            <img
-              :src="`${$env.BASE_URL}configMultiMedia/zhupuImages/${
-                item['图片名称'] ? item['图片名称'] : item['名称']
-              }.png`"
-              alt=""
-            >
-            <div>{{ item["名称"] }}</div>
+              <img
+                :src="`${$env.BASE_URL}configMultiMedia/zhupuImages/${
+                  item['图片名称'] ? item['图片名称'] : item['名称']
+                }.png`"
+                alt=""
+              >
+              <div>{{ item["名称"] }}</div>
+            </div>
           </div>
         </div>
+        <div
+          class="click-more"
+          @click="handleWheel(1)"
+        >
+          <div>查看更多</div>
+          <img
+            src="@/assets/images/icon_green_right.png"
+            alt=""
+          >
+        </div>
       </div>
     </div>
   </div>
 </template>
 
 <style lang="less" scoped>
+* {
+  -webkit-user-drag: none;
+}
 .home {
   width: 100%;
   height: 100%;
@@ -331,9 +353,9 @@ onMounted(() => {
     align-items: center;
     justify-content: center;
 
-    .operation-tip{
+    .operation-tip {
       position: absolute;
-      right: calc(30px / v-bind('windowHeightDesign') * v-bind('windowHeight'));
+      right: calc(30px / v-bind("windowHeightDesign") * v-bind("windowHeight"));
       top: 50%;
       transform: translateY(-50%);
     }
@@ -395,90 +417,163 @@ onMounted(() => {
         }
       }
     }
-
-    .painting-detail-box {
+    .bottom-box {
       width: 95%;
       height: 25%;
-      // background: red;
-      overflow-x: auto;
-      overflow-y: hidden;
       display: flex;
-      position: relative;
-      scrollbar-width: none;
-
-      .operation-tip-click {
-        position: absolute;
-        top: 45%;
-        left: 10%;
-      }
-      &::-webkit-scrollbar {
-        display: none !important;
-      }
-      .category-box {
-        // display: inline;
-        // white-space: nowrap;
+      justify-content: space-evenly;
+      .painting-detail-box {
+        width: 90%;
+        height: 100%;
+        margin-right: 20px;
+        overflow-x: auto;
+        overflow-y: hidden;
         display: flex;
-        align-items: flex-start;
-        img {
-          width: 20vh;
-          height: 20vh;
-          object-fit: contain;
+        position: relative;
+        scrollbar-width: none;
+        cursor: grab;
+
+        .operation-tip-click {
+          position: absolute;
+          top: 45%;
+          left: 10%;
         }
-        > div {
-          // float: left;
+
+        // 兼容谷歌、搜狗等
+        &::-webkit-scrollbar {
+          height: 4px;
         }
-        .category-title {
-          display: inline-flex;
-          writing-mode: vertical-lr;
-          // letter-spacing: 12px;
-          letter-spacing: calc(
-            12px * v-bind("windowHeight") / v-bind("windowHeightDesign")
-          );
-          color: #476446;
-          background: url(@/assets/images/name-bg.png);
-          background-size: 100% 100%;
-          font-family: "KingHwa_OldSong";
-          // font-size: 20px;
-          font-size: calc(
-            20px * v-bind("windowHeight") / v-bind("windowHeightDesign")
-          );
-          // line-height: 48px;
-          padding: calc(
-            10px * v-bind("windowHeight") / v-bind("windowHeightDesign")
-          );
-          margin: 0
-            calc(30px * v-bind("windowHeight") / v-bind("windowHeightDesign")) 0
-            calc(60px * v-bind("windowHeight") / v-bind("windowHeightDesign"));
-          // height: 70%;
+
+        /* 滚动条轨道 */
+        &::-webkit-scrollbar-track {
+          background-color: #f1f1f100;
+        }
+
+        /* 滚动条滑块 */
+        &::-webkit-scrollbar-thumb {
+          background-color: #7b916b;
+          border-radius: 50px;
+          cursor: pointer;
+        }
+
+        /* 滑块悬停状态 */
+        &::-webkit-scrollbar-thumb:hover {
+          background-color: #7b916b;
         }
-        .category-item {
+
+        .category-box {
+          // display: inline;
+          // white-space: nowrap;
           display: flex;
-          flex-direction: column;
-          align-items: center;
-          margin: 0
-            calc(20px * v-bind("windowHeight") / v-bind("windowHeightDesign")) 0
-            calc(20px * v-bind("windowHeight") / v-bind("windowHeightDesign"));
-          .small-img {
-            width: calc(
-              200px * v-bind("windowHeight") / v-bind("windowHeightDesign")
-            );
-            height: calc(
-              150px * v-bind("windowHeight") / v-bind("windowHeightDesign")
-            );
+          align-items: flex-start;
+          img {
+            width: 20vh;
+            height: 20vh;
+            object-fit: contain;
           }
-          > div {
-            margin-top: calc(
-              10px * v-bind("windowHeight") / v-bind("windowHeightDesign")
+
+          .category-title {
+            display: inline-flex;
+            writing-mode: vertical-lr;
+            // letter-spacing: 12px;
+            letter-spacing: calc(
+              12px * v-bind("windowHeight") / v-bind("windowHeightDesign")
             );
-            color: #7b916b;
+            color: #476446;
+            background: url(@/assets/images/name-bg.png);
+            background-size: 100% 100%;
+            font-family: "KingHwa_OldSong";
+            // font-size: 20px;
             font-size: calc(
               20px * v-bind("windowHeight") / v-bind("windowHeightDesign")
             );
-            line-height: calc(
-              24px * v-bind("windowHeight") / v-bind("windowHeightDesign")
+            // line-height: 48px;
+            padding: calc(
+              10px * v-bind("windowHeight") / v-bind("windowHeightDesign")
             );
-            font-family: "KingHwa_OldSong";
+            margin: 0
+              calc(30px * v-bind("windowHeight") / v-bind("windowHeightDesign"))
+              0
+              calc(60px * v-bind("windowHeight") / v-bind("windowHeightDesign"));
+            // height: 70%;
           }
+          .category-item {
+            display: flex;
+            flex-direction: column;
+            align-items: center;
+            margin: 0
+              calc(20px * v-bind("windowHeight") / v-bind("windowHeightDesign"))
+              0
+              calc(20px * v-bind("windowHeight") / v-bind("windowHeightDesign"));
+            .small-img {
+              width: calc(
+                200px * v-bind("windowHeight") / v-bind("windowHeightDesign")
+              );
+              height: calc(
+                150px * v-bind("windowHeight") / v-bind("windowHeightDesign")
+              );
+            }
+            > div {
+              margin-top: calc(
+                10px * v-bind("windowHeight") / v-bind("windowHeightDesign")
+              );
+              color: #7b916b;
+              font-size: calc(
+                20px * v-bind("windowHeight") / v-bind("windowHeightDesign")
+              );
+              line-height: calc(
+                24px * v-bind("windowHeight") / v-bind("windowHeightDesign")
+              );
+              font-family: "KingHwa_OldSong";
+            }
+          }
+        }
+      }
+      /* 火狐浏览器滚动条样式 */
+      .huohu-scroller {
+        scrollbar-width: none;
+        scrollbar-color: #7b916b #f1f1f100;
+
+        &::-moz-scrollbar {
+          width: 2px; /* 宽度 */
+        }
+
+        &::-moz-scrollbar-track {
+          background: #f1f1f100; /* 轨道背景色 */
+        }
+
+        &::-moz-scrollbar-thumb {
+          background: #7b916b;
+          border-radius: 50px;
+          cursor: pointer;
+        }
+
+        &::-moz-scrollbar-thumb:hover {
+          background: #7b916b; /* 滑块悬停颜色 */
+        }
+      }
+      .click-more {
+        color: #7b916b;
+        font-family: KaiTi;
+        font-size: calc(
+          20px * v-bind("windowHeight") / v-bind("windowHeightDesign")
+        );
+        line-height: calc(
+          29px * v-bind("windowHeight") / v-bind("windowHeightDesign")
+        );
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        justify-content: center;
+        cursor: pointer;
+        div {
+          writing-mode: vertical-rl;
+          letter-spacing: 4px;
+        }
+        img {
+          width: calc(
+            30px * v-bind("windowHeight") / v-bind("windowHeightDesign")
+          );
         }
       }
     }

src/views/HomeView.vue

@@ -7,22 +7,19 @@ import useRollFu from "../rollFu.js"
 
 import HotspotDetail3 from "@/views/HotspotDetail3.vue"
 import HotspotDetail1 from "@/views/HotspotDetail1.vue"
-import PaintingDetail from '@/views/PaintingDetail.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'
+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"
 
 import { useWindowSize } from "@vueuse/core"
 
-
 const store = useStore()
 const router = useRouter()
 const route = useRoute()
 
-
-
 const windowHeightDesign = 1080 - 71 - 37 // 设计稿里视口高度。注意要减去上下边栏
 const { width: windowWidth, height: windowHeight } = useWindowSize()
 
@@ -51,10 +48,9 @@ const isShowVideoFadeToNextPage = ref(false)
 const isShowSkip = ref(false)
 const videoFadeToNextPageEl = ref(null)
 
-const paintingState = ref('1')
+const paintingState = ref("1")
 const isShowPaintingDetial = ref(false)
 
-
 const longTitleText = computed(() => {
   return curPageIndex.value == 1
     ? "三竿修竹"
@@ -94,7 +90,7 @@ const goMorePart = () => {
 }
 // 滑动逻辑
 const scrollFu = (event, val) => {
-  console.log('在滚动', val)
+  console.log("在滚动", val)
   if (val == -1) {
     // 上滚
     // console.log("上滚")
@@ -112,6 +108,7 @@ const scrollFu = (event, val) => {
 }
 const hoverIndex = ref(null)
 
+const clickHotChangePageFormIndex = ref(-1)
 
 onMounted(() => {
   if (route.query.page) {
@@ -149,7 +146,14 @@ onMounted(() => {
     <div
       ref="scroller"
       class="scroller"
-      @wheel="($event) => handleScrollThrottle($event, ($event) => scrollFu($event,-1),($event) => scrollFu($event,1))"
+      @wheel="
+        ($event) =>
+          handleScrollThrottle(
+            $event,
+            ($event) => scrollFu($event, -1),
+            ($event) => scrollFu($event, 1)
+          )
+      "
     >
       <div class="scroller-content" />
     </div>
@@ -186,6 +190,17 @@ onMounted(() => {
       </div>
     </div>
 
+    <BtnBack
+      v-show="clickHotChangePageFormIndex != -1 && curPageIndex != 0 && curPageIndex != 4"
+      :style="{ zIndex: 10 }"
+      @click="
+        () => {
+          (curPageIndex = clickHotChangePageFormIndex),
+          (clickHotChangePageFormIndex = -1);
+        }
+      "
+    />
+
     <!-- 作品、作者简介 -->
     <div
       ref="longDesc"
@@ -193,6 +208,12 @@ onMounted(() => {
       :class="{ 'long-desc-ac': curPageIndex == 0 || curPageIndex == 4 }"
       :style="{ opacity: curPageIndex == 0 || curPageIndex == 4 ? 1 : 0 }"
     >
+      <img
+        class="more-part-btn"
+        src="@/assets/images/home-long-desc-bg.png"
+        alt=""
+        @click="goMorePart"
+      >
       <div
         class="page2-box"
         @mouseenter="hoverIndex = 1"
@@ -201,8 +222,7 @@ onMounted(() => {
           // () => {
           //   router.push('/painting-detail?idx=home');
           // }
-          isShowPaintingDetial =true,
-          paintingState = '1'
+          (isShowPaintingDetial = true), (paintingState = '1')
         "
       >
         <img
@@ -220,8 +240,7 @@ onMounted(() => {
           // () => {
           //   router.push('/painting-detail?idx=home&state=2');
           // }
-          isShowPaintingDetial =true,
-          paintingState = '2'
+          (isShowPaintingDetial = true), (paintingState = '2')
         "
       >
         <img
@@ -230,13 +249,6 @@ onMounted(() => {
         >
         <div>作者简介</div>
       </div>
-      <img
-        v-show="curPageIndex == 0 "
-        class="more-part-btn"
-        src="@/assets/images/home-long-desc-bg.png"
-        alt=""
-        @click="goMorePart"
-      >
     </div>
 
     <!-- 画作 -->
@@ -248,7 +260,7 @@ onMounted(() => {
       }"
       @click="
         () => {
-          isShowPaintingDetial = true
+          isShowPaintingDetial = true;
         }
       "
     >
@@ -265,7 +277,7 @@ onMounted(() => {
         draggable="false"
       >
       <img
-        :style="{opacity: curPageIndex == 2 ? 1 : 0}"
+        :style="{ opacity: curPageIndex == 2 ? 1 : 0 }"
         class="painting-stem"
         src="@/assets/images/home-painting2.jpg"
         alt=""
@@ -307,15 +319,47 @@ onMounted(() => {
       class="hotspot-wrap"
     >
       <HotspotForHomepage
-
         class="hotspot-1"
+        :is-left="true"
         @click="isShowHotspotDetail1 = true"
       />
       <HotspotForHomepage
-
         class="hotspot-3"
         @click="isShowHotspotDetail3 = true"
       />
+      <!-- 竹叶 -->
+      <HotspotForHomepage
+        class="hotspot-leaf"
+        :opacity="0.6"
+        :width="'75%'"
+        @click="
+          () => {
+            (clickHotChangePageFormIndex = curPageIndex), (curPageIndex = 2);
+          }
+        "
+      />
+      <!-- 卧石 -->
+      <HotspotForHomepage
+        class="hotspot-stone"
+        :opacity="0.6"
+        :width="'75%'"
+        @click="
+          () => {
+            (clickHotChangePageFormIndex = curPageIndex), (curPageIndex = 3);
+          }
+        "
+      />
+      <!-- 杆 -->
+      <HotspotForHomepage
+        class="hotspot-gan"
+        :opacity="0.6"
+        :width="'75%'"
+        @click="
+          () => {
+            (clickHotChangePageFormIndex = curPageIndex), (curPageIndex = 1);
+          }
+        "
+      />
     </div>
 
     <!-- 轴/卷/册热点详情 -->
@@ -338,10 +382,8 @@ onMounted(() => {
 
     <!-- 滑动提示 -->
     <OperationTip
-      v-show="curPageIndex == 0"
       class="operation-tip"
       text="向下滑动"
-      :is-show="isShowOperationTip"
     />
 
     <!-- 画作详情 -->
@@ -364,7 +406,7 @@ onMounted(() => {
           curPageIndex == 4
             ? 1
             : 0,
-        left: curPageIndex == 4 ? '4%':''
+        left: curPageIndex == 4 ? '4%' : '',
       }"
     >
       <div class="text-box-title">
@@ -452,10 +494,14 @@ onMounted(() => {
       font-family: KaiTi;
       font-weight: 400;
       // font-size: 20px;
-      font-size: calc(20px / v-bind('windowHeightDesign') * v-bind('windowHeight'));
+      font-size: calc(
+        20px / v-bind("windowHeightDesign") * v-bind("windowHeight")
+      );
       color: #ffffff;
       // line-height: 30px;
-      line-height: calc(30px / v-bind('windowHeightDesign') * v-bind('windowHeight'));
+      line-height: calc(
+        30px / v-bind("windowHeightDesign") * v-bind("windowHeight")
+      );
       white-space: pre;
       letter-spacing: 0.2em;
       text-align: center;
@@ -463,8 +509,8 @@ onMounted(() => {
   }
   > .long-desc {
     position: absolute;
-    bottom: calc(30px / v-bind('windowHeightDesign') * v-bind('windowHeight'));
-    right: calc(30px / v-bind('windowHeightDesign') * v-bind('windowHeight'));
+    bottom: calc(30px / v-bind("windowHeightDesign") * v-bind("windowHeight"));
+    right: calc(30px / v-bind("windowHeightDesign") * v-bind("windowHeight"));
     color: white;
     overflow: hidden;
     font-family: KaiTi;
@@ -476,9 +522,11 @@ onMounted(() => {
     align-items: center;
     z-index: 10;
     transition: opacity 1.5s ease;
-    >.more-part-btn{
-      width: calc(67px / v-bind('windowHeightDesign') * v-bind('windowHeight'));
-      margin-top: calc(20px / v-bind('windowHeightDesign') * v-bind('windowHeight'));
+    > .more-part-btn {
+      width: calc(67px / v-bind("windowHeightDesign") * v-bind("windowHeight"));
+      margin-bottom: calc(
+        20px / v-bind("windowHeightDesign") * v-bind("windowHeight")
+      );
       cursor: pointer;
     }
 
@@ -490,12 +538,16 @@ onMounted(() => {
       cursor: pointer;
 
       > img {
-        width: calc(55px / v-bind('windowHeightDesign') * v-bind('windowHeight'));
+        width: calc(
+          55px / v-bind("windowHeightDesign") * v-bind("windowHeight")
+        );
         margin-bottom: 10px;
       }
 
       > div {
-        font-size: calc(20px / v-bind('windowHeightDesign') * v-bind('windowHeight'));
+        font-size: calc(
+          20px / v-bind("windowHeightDesign") * v-bind("windowHeight")
+        );
         font-family: KaiTi;
       }
     }
@@ -569,6 +621,26 @@ onMounted(() => {
       right: 0;
       pointer-events: initial;
     }
+    > .hotspot-leaf {
+      position: absolute;
+      top: 51vh;
+      right: 28vh;
+      pointer-events: initial;
+    }
+
+    > .hotspot-stone {
+      position: absolute;
+      top: 69vh;
+      right: 35vh;
+      pointer-events: initial;
+    }
+
+    > .hotspot-gan {
+      position: absolute;
+      top: 30vh;
+      right: 15vh;
+      pointer-events: initial;
+    }
 
     // > .hotspot-2 {
     //   position: absolute;
@@ -590,42 +662,56 @@ onMounted(() => {
 
   > .operation-tip {
     position: absolute;
-    right: calc(30px / v-bind('windowHeightDesign') * v-bind('windowHeight'));
+    right: calc(30px / v-bind("windowHeightDesign") * v-bind("windowHeight"));
     transform: translateX(-50%);
     top: 50%;
     transform: translateY(-50%);
+    z-index: 10;
   }
-  >.painting-detail{
+  > .painting-detail {
     width: 100%;
     height: 100%;
     position: absolute;
     top: 0;
     left: 0;
     z-index: 30;
-
   }
 
   > .text-box {
-    max-width: calc(450px / v-bind('windowHeightDesign') * v-bind('windowHeight'));
+    max-width: calc(
+      450px / v-bind("windowHeightDesign") * v-bind("windowHeight")
+    );
     position: absolute;
     top: 50%;
     transform: translateY(-50%);
     left: 10%;
     color: #ffffff;
-    font-size: calc(25px / v-bind('windowHeightDesign') * v-bind('windowHeight'));
-    line-height: calc(38px / v-bind('windowHeightDesign') * v-bind('windowHeight'));
+    font-size: calc(
+      25px / v-bind("windowHeightDesign") * v-bind("windowHeight")
+    );
+    line-height: calc(
+      38px / v-bind("windowHeightDesign") * v-bind("windowHeight")
+    );
     font-family: "KaiTi";
     transition: opacity 1.5s ease;
     z-index: 10;
     transition: left 1.5s ease;
     .text-box-title {
-      font-size: calc(42px / v-bind('windowHeightDesign') * v-bind('windowHeight'));
-      line-height: calc(48px / v-bind('windowHeightDesign') * v-bind('windowHeight'));
-      margin-bottom: calc(30px / v-bind('windowHeightDesign') * v-bind('windowHeight'));
+      font-size: calc(
+        42px / v-bind("windowHeightDesign") * v-bind("windowHeight")
+      );
+      line-height: calc(
+        48px / v-bind("windowHeightDesign") * v-bind("windowHeight")
+      );
+      margin-bottom: calc(
+        30px / v-bind("windowHeightDesign") * v-bind("windowHeight")
+      );
     }
-    .text-box-desc{
+    .text-box-desc {
       text-indent: 2em;
-      max-width: calc(550px / v-bind('windowHeightDesign') * v-bind('windowHeight'));
+      max-width: calc(
+        550px / v-bind("windowHeightDesign") * v-bind("windowHeight")
+      );
     }
   }
 }

src/views/HotspotDetail1.vue

@@ -1,9 +1,19 @@
 <template>
   <div
+    ref="scrollContainer"
     :class="`hotspot-detail-1 ${pageLev === 1 ? '' : 'hotspot-detail-2'}`"
+    :style="{ cursor: pageShow ? 'grab' : '' }"
     @wheel="
-      ($event) => handleScrollThrottle($event, () => onSwipeChange(-1, curIndex),() => onSwipeChange(1, curIndex))
+      ($event) =>
+        handleScrollThrottle(
+          $event,
+          () => onSwipeChange(-1, curIndex),
+          () => onSwipeChange(1, curIndex)
+        )
     "
+    @mousedown="onMouseDown"
+    @mousemove="onMouseMove"
+    @mouseup="onMouseUp"
   >
     <!-- 左上角 -->
     <img
@@ -14,7 +24,7 @@
     <!-- 中间--点击查看 -->
     <div
       :class="`HD1_2 ${isLookImg ? '' : 'HD1_2Hide'}`"
-      @click="ImgClick(imgList[2],2)"
+      @click="ImgClick(imgList[2], 2)"
     >
       <img
         class=""
@@ -22,10 +32,15 @@
         alt=""
         draggable="false"
       >
-      <div style="color: #7B916B;">
+      <div style="color: #7b916b">
         点击查看
       </div>
     </div>
+    <OperationTip
+      :style="`opacity:${pageShow ? '1' : '0'}`"
+      class="operation-tip"
+      text="向下滑动"
+    />
 
     <!-- 右边三个画 -->
     <div
@@ -35,7 +50,7 @@
         pageLev === item.id ? 'HD1_3Ac' : ''
       } ${imgBottomLoc(pageLev, item.id)} ${pageShow ? 'HD1_3AcBottom' : ''}
       `"
-      @click="ImgClick(item,index)"
+      @click="ImgClick(item, index)"
     >
       <div
         v-show="pageLev === item.id"
@@ -53,12 +68,12 @@
         /> -->
 
         <!-- 滑动提示 -->
-        <OperationTip
+        <!-- <OperationTip
           v-if="isShowOperationTip"
           class="operation-tip"
           text="向下滑动"
           :is-show="isShowOperationTip"
-        />
+        /> -->
       </div>
 
       <img
@@ -93,8 +108,7 @@ import { ref } from "vue"
 import useRollFu from "../rollFu.js"
 import { useWindowSize } from "@vueuse/core"
 
-
-const { handleScrollThrottle } = useRollFu()
+const { handleScrollThrottle, throttle } = useRollFu()
 
 const emit = defineEmits(["close"])
 
@@ -189,6 +203,36 @@ const ImgClick = (item, index) => {
 }
 
 const swChange = ref(true)
+const scrollContainer = ref(null)
+const isDragging = ref(false)
+let startX = 0
+let scrollLeft = 0
+function onMouseDown(event) {
+  isDragging.value = true
+  startX = event.pageX - scrollContainer.value.offsetLeft
+  scrollLeft = scrollContainer.value.scrollLeft
+  document.addEventListener("mousemove", onMouseMove)
+  document.addEventListener("mouseup", onMouseUp)
+}
+
+const onMouseMove = throttle((event) => {
+  if (!isDragging.value) return
+  const x = event.pageX - scrollContainer.value.offsetLeft
+  const walk = x - startX
+  if (walk > 0) {
+    console.log('在右滑动')
+    onSwipeChange(-1, curIndex.value)
+  } else if (walk < 0) {
+    console.log('在左滑动')
+    onSwipeChange(1, curIndex.value)
+  }
+}, 400)
+
+const onMouseUp = () => {
+  isDragging.value = false
+  document.removeEventListener("mousemove", onMouseMove)
+  document.removeEventListener("mouseup", onMouseUp)
+}
 
 // 左滑右滑
 const onSwipeChange = (num, index) => {
@@ -227,10 +271,12 @@ const onSwipeChange = (num, index) => {
   //   }
   // }, 500)
 
-  if (num == -1 ) {
-    curIndex.value = curIndex.value > 0 ? curIndex.value - 1 : imgList.length - 1
+  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
+    curIndex.value =
+      curIndex.value < imgList.length - 1 ? curIndex.value + 1 : 0
   }
   let newItem = imgList[curIndex.value]
 
@@ -263,6 +309,9 @@ const imgBottomLoc = (nowId, itemId) => {
 </script>
 
 <style lang="less" scoped>
+*{
+  -webkit-user-drag: none;
+}
 .hotspot-detail-1 {
   position: absolute;
   left: 0;
@@ -283,8 +332,13 @@ const imgBottomLoc = (nowId, itemId) => {
     top: 50%;
     transform: translateY(-47%);
     left: 20%;
-    width: calc(150px / v-bind('windowHeightDesign') * v-bind('windowHeight'));
-    height: calc(252px / v-bind('windowHeightDesign') * v-bind('windowHeight'));
+    width: calc(150px / v-bind("windowHeightDesign") * v-bind("windowHeight"));
+    height: calc(252px / v-bind("windowHeightDesign") * v-bind("windowHeight"));
+  }
+
+  .operation-tip {
+    top: 10%;
+    right: 20%;
   }
 
   .HD1_2 {
@@ -297,7 +351,7 @@ const imgBottomLoc = (nowId, itemId) => {
     justify-content: center;
     align-items: center;
     & > img {
-      width: calc(50px / v-bind('windowHeightDesign') * v-bind('windowHeight'));
+      width: calc(50px / v-bind("windowHeightDesign") * v-bind("windowHeight"));
     }
     & > div {
       margin-top: 5px;
@@ -305,7 +359,9 @@ const imgBottomLoc = (nowId, itemId) => {
       font-family: KaiTi;
       color: #fff;
       white-space: nowrap;
-      font-size: calc(20px / v-bind('windowHeightDesign') * v-bind('windowHeight'))
+      font-size: calc(
+        20px / v-bind("windowHeightDesign") * v-bind("windowHeight")
+      );
     }
   }
   .HD1_2Hide {
@@ -354,9 +410,9 @@ const imgBottomLoc = (nowId, itemId) => {
       justify-content: center;
       align-items: center;
       padding-top: 30%;
-      .operation-tip{
-        top: 10%;
-      }
+      // .operation-tip{
+      //   top: 10%;
+      // }
     }
     > img {
       width: 60vw;
@@ -377,7 +433,7 @@ const imgBottomLoc = (nowId, itemId) => {
     pointer-events: none;
   }
   .HD1_3AcBottom {
-    bottom: calc(-50px / v-bind('windowHeightDesign') * v-bind('windowHeight'));
+    bottom: calc(-50px / v-bind("windowHeightDesign") * v-bind("windowHeight"));
     transition: right 1s, opacity 0.8s;
     height: 80vh;
   }
@@ -403,16 +459,24 @@ const imgBottomLoc = (nowId, itemId) => {
     h3 {
       font-weight: 700;
       text-align: center;
-      font-size: calc(48px / v-bind('windowHeightDesign') * v-bind('windowHeight'));
+      font-size: calc(
+        48px / v-bind("windowHeightDesign") * v-bind("windowHeight")
+      );
       // position: absolute;
       // right: 0;
       // top: 0;
       // transform: translate(150%, -150%);
-      margin-left: calc(35px / v-bind('windowHeightDesign') * v-bind('windowHeight'));
+      margin-left: calc(
+        35px / v-bind("windowHeightDesign") * v-bind("windowHeight")
+      );
     }
     .desc {
-      font-size: calc(30px / v-bind('windowHeightDesign') * v-bind('windowHeight'));
-      letter-spacing: calc(2px / v-bind('windowHeightDesign') * v-bind('windowHeight'));
+      font-size: calc(
+        30px / v-bind("windowHeightDesign") * v-bind("windowHeight")
+      );
+      letter-spacing: calc(
+        2px / v-bind("windowHeightDesign") * v-bind("windowHeight")
+      );
       height: 140%;
       writing-mode: vertical-rl;
       line-height: 122%;

src/views/HotspotDetail3.vue

@@ -1,7 +1,18 @@
 <template>
   <div
+    ref="scrollContainer"
     class="hotspot-detail-3"
-    @wheel="($event) => handleScrollThrottle($event, () => scrollFu(-1),() => scrollFu(1))"
+    @wheel="
+      ($event) =>
+        handleScrollThrottle(
+          $event,
+          () => scrollFu(-1),
+          () => scrollFu(1)
+        )
+    "
+    @mousedown="onMouseDown"
+    @mousemove="throttle(onMouseMove,500)"
+    @mouseup="throttle(onMouseUp,500)"
   >
     <img
       v-show="state === 1"
@@ -29,12 +40,14 @@
       :is-show="isShowOperationTip"
     />
 
-
     <!-- 阴影 -->
     <img
       class="shadow-box"
       :src="shadow"
-      :style="{ width: state === 1 ? '20%' : state === 2 ? '80%' :'35%',bottom: state === 1 ?'-15px':'' }"
+      :style="{
+        width: state === 1 ? '20%' : state === 2 ? '80%' : '35%',
+        bottom: state === 1 ? '-15px' : '',
+      }"
     >
 
     <img
@@ -69,21 +82,21 @@
     >
     <div class="btns-box">
       <img
-        :src="state == 1 || hoverIndex== 1 ? hots3StateBtn1Ac : hots3StateBtn1"
+        :src="state == 1 || hoverIndex == 1 ? hots3StateBtn1Ac : hots3StateBtn1"
         alt=""
         @mouseenter="hoverIndex = 1"
         @mouseleave="hoverIndex = null"
         @click="state = 1"
       >
       <img
-        :src="state == 2 || hoverIndex== 2 ? hots3StateBtn2Ac : hots3StateBtn2"
+        :src="state == 2 || hoverIndex == 2 ? hots3StateBtn2Ac : hots3StateBtn2"
         alt=""
         @mouseenter="hoverIndex = 2"
         @mouseleave="hoverIndex = null"
         @click="goState2"
       >
       <img
-        :src="state == 3 || hoverIndex== 3 ? hots3StateBtn3Ac : hots3StateBtn3"
+        :src="state == 3 || hoverIndex == 3 ? hots3StateBtn3Ac : hots3StateBtn3"
         alt=""
         @mouseenter="hoverIndex = 3"
         @mouseleave="hoverIndex = null"
@@ -99,7 +112,6 @@ import { ref, computed } from "vue"
 import useSizeAdapt from "@/useFunctions/useSizeAdapt"
 import { useWindowSize } from "@vueuse/core"
 
-
 const emit = defineEmits(["close"])
 
 const windowHeightDesign = 1080 - 71 - 37 // 设计稿里视口高度。注意要减去上下边栏
@@ -127,7 +139,6 @@ import hots3StateContent3 from "@/assets/images/hots-detail-content-state3.png"
 
 import useRollFu from "../rollFu.js"
 
-
 const { windowSizeInCssForRef, windowSizeWhenDesignForRef } = useSizeAdapt()
 
 // 轴1  卷2 册3
@@ -137,7 +148,7 @@ const hoverIndex = ref(0)
 
 // const isShowOperationTip = ref(false)
 
-const { handleScrollThrottle } = useRollFu()
+const { handleScrollThrottle, throttle } = useRollFu()
 
 // 滑动逻辑
 const scrollFu = (val) => {
@@ -187,9 +198,41 @@ const goState2 = () => {
   }, 5)
 }
 
+const scrollContainer = ref(null)
+const isDragging = ref(false)
+let startX = 0
+let scrollLeft = 0
+function onMouseDown(event) {
+  isDragging.value = true
+  startX = event.pageX - scrollContainer.value.offsetLeft
+  scrollLeft = scrollContainer.value.scrollLeft
+  document.addEventListener("mousemove", onMouseMove)
+  document.addEventListener("mouseup", onMouseUp)
+}
+
+const onMouseMove = throttle((event) => {
+  if (!isDragging.value) return
+  const x = event.pageX - scrollContainer.value.offsetLeft
+  const walk = x - startX
+  if (walk > 0) {
+    scrollFu(1)
+  } else {
+    scrollFu(-1)
+  }
+}, 500)
+
+const onMouseUp = () => {
+  isDragging.value = false
+  document.removeEventListener("mousemove", onMouseMove)
+  document.removeEventListener("mouseup", onMouseUp)
+}
+
 </script>
 
 <style lang="less" scoped>
+img {
+  -webkit-user-drag: none;
+}
 .hotspot-detail-3 {
   position: absolute;
   left: 0;
@@ -204,6 +247,7 @@ const goState2 = () => {
   flex-direction: column;
   justify-content: space-evenly;
   z-index: 3;
+  cursor: grab;
 
   .bg-img {
     width: 100%;
@@ -244,7 +288,7 @@ const goState2 = () => {
     transition: opacity 1s ease;
     z-index: 2;
     display: flex;
-    justify-content:center;
+    justify-content: center;
     img {
       // height: 90vh;
       width: 80%;
@@ -262,7 +306,7 @@ const goState2 = () => {
 
   .operation-tip {
     position: absolute;
-    right: calc(30px / v-bind('windowHeightDesign') * v-bind('windowHeight'));
+    right: calc(30px / v-bind("windowHeightDesign") * v-bind("windowHeight"));
     transform: translateX(-50%);
     top: 50%;
     transform: translateY(-50%);
@@ -270,20 +314,21 @@ const goState2 = () => {
 
   .btns-box {
     // width: 55%;
-    height: calc(200px / v-bind('windowHeightDesign') * v-bind('windowHeight'));
+    height: calc(55px / v-bind("windowHeightDesign") * v-bind("windowHeight"));
     position: absolute;
-    left: calc(30px / v-bind('windowHeightDesign') * v-bind('windowHeight'));
+    left: calc(30px / v-bind("windowHeightDesign") * v-bind("windowHeight"));
     // transform: translateX(-50%);
-    bottom: calc(30px / v-bind('windowHeightDesign') * v-bind('windowHeight'));
+    bottom: calc(20px / v-bind("windowHeightDesign") * v-bind("windowHeight"));
     display: flex;
-    flex-direction: column;
+    // flex-direction: column;
     justify-content: space-evenly;
     z-index: 10;
 
     > img {
-      width: calc(35px / v-bind('windowHeightDesign') * v-bind('windowHeight'));
-      width: calc(35px / v-bind('windowHeightDesign') * v-bind('windowHeight'));
+      width: calc(55px / v-bind("windowHeightDesign") * v-bind("windowHeight"));
+      width: calc(55px / v-bind("windowHeightDesign") * v-bind("windowHeight"));
       cursor: pointer;
+      margin: 0 15px;
     }
   }
 }