隐藏滚动条

src/views/HotspotDetail3.vue

@@ -30,7 +30,7 @@
       class="content1"
       :src="hots3StateContent1"
       :style="{
-        opacity: state === 1 ? 1 : 0
+        opacity: state === 1 ? 1 : 0,
       }"
       alt=""
     >
@@ -38,7 +38,7 @@
       id="content2"
       ref="content2Dom"
       :style="{
-        opacity: state === 2 ? 1 : 0
+        opacity: state === 2 ? 1 : 0,
       }"
       class="content2"
       @touchmove="handleScroll"
@@ -52,7 +52,7 @@
     <img
       class="content3"
       :style="{
-        opacity: state === 3 ? 1 : 0
+        opacity: state === 3 ? 1 : 0,
       }"
       :src="hots3StateContent3"
       alt=""
@@ -90,41 +90,34 @@
 import { ref, computed, onMounted } from "vue"
 import useSizeAdapt from "@/useFunctions/useSizeAdapt"
 
-
-const emit = defineEmits(['close'])
+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 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'
-import hots3StateBtn2 from '@/assets/images/hots-detail-btn-state2.png'
-import hots3StateBtn3 from '@/assets/images/hots-detail-btn-state3.png'
+import hots3StateBtn1 from "@/assets/images/hots-detail-btn-state1.png"
+import hots3StateBtn2 from "@/assets/images/hots-detail-btn-state2.png"
+import hots3StateBtn3 from "@/assets/images/hots-detail-btn-state3.png"
 
-import hots3StateBtn1Ac from '@/assets/images/hots-detail-btn-state1-ac.png'
-import hots3StateBtn2Ac from '@/assets/images/hots-detail-btn-state2-ac.png'
-import hots3StateBtn3Ac from '@/assets/images/hots-detail-btn-state3-ac.png'
+import hots3StateBtn1Ac from "@/assets/images/hots-detail-btn-state1-ac.png"
+import hots3StateBtn2Ac from "@/assets/images/hots-detail-btn-state2-ac.png"
+import hots3StateBtn3Ac from "@/assets/images/hots-detail-btn-state3-ac.png"
 
 // 三个阴影
-import hots3StateShadow1 from '@/assets/images/img_shadow_1.png'
-import hots3StateShadow2 from '@/assets/images/img_shadow_2.png'
-import hots3StateShadow3 from '@/assets/images/img_shadow_3.png'
+import hots3StateShadow1 from "@/assets/images/img_shadow_1.png"
+import hots3StateShadow2 from "@/assets/images/img_shadow_2.png"
+import hots3StateShadow3 from "@/assets/images/img_shadow_3.png"
 
 // 三个内容
-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'
-
-
-const {
-  windowSizeInCssForRef,
-  windowSizeWhenDesignForRef,
-} = useSizeAdapt()
-
+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"
 
+const { windowSizeInCssForRef, windowSizeWhenDesignForRef } = useSizeAdapt()
 
 // 轴1  卷2 册3
 const state = ref(1)
@@ -134,7 +127,11 @@ const state = ref(1)
 // })
 
 const shadow = computed(() => {
-  return state.value == 1 ? hots3StateShadow1 : state.value == 2 ? hots3StateShadow2 : hots3StateShadow3
+  return state.value == 1
+    ? hots3StateShadow1
+    : state.value == 2
+      ? hots3StateShadow2
+      : hots3StateShadow3
 })
 
 const content2Dom = ref(null)
@@ -144,7 +141,9 @@ const goState2 = () => {
   setTimeout(() => {
     if (content2Dom.value) {
       const x = 310 / 780
-      const allWidth = document.getElementById('content2Img').getBoundingClientRect().width
+      const allWidth = document
+        .getElementById("content2Img")
+        .getBoundingClientRect().width
       content2Dom.value.scrollLeft = allWidth * x
       isShowOperationTip.value = true
     }
@@ -153,11 +152,8 @@ const goState2 = () => {
 
 const handleScroll = () => {
   isShowOperationTip.value = false
-  console.log('开始滑动')
+  console.log("开始滑动")
 }
-
-
-
 </script>
 
 <style lang="less" scoped>
@@ -176,7 +172,7 @@ const handleScroll = () => {
   justify-content: space-evenly;
   z-index: 3;
 
-  .bg-img{
+  .bg-img {
     width: 100%;
     height: 100%;
     object-fit: cover;
@@ -189,7 +185,10 @@ const handleScroll = () => {
 
   .shadow-box {
     position: absolute;
-    bottom: calc(80 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+    bottom: calc(
+      80 / v-bind("windowSizeWhenDesignForRef") *
+        v-bind("windowSizeInCssForRef")
+    );
     left: 50%;
     transform: translateX(-50%);
   }
@@ -201,7 +200,10 @@ const handleScroll = () => {
     left: 50%;
     transform: translateX(-50%);
     transition: opacity 1s ease;
-    bottom: calc(130 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+    bottom: calc(
+      130 / v-bind("windowSizeWhenDesignForRef") *
+        v-bind("windowSizeInCssForRef")
+    );
   }
 
   .content2 {
@@ -210,7 +212,10 @@ const handleScroll = () => {
     overflow: auto;
     position: absolute;
     transition: opacity 1s ease;
-    z-index:2;
+    z-index: 2;
+    &::-webkit-scrollbar {
+      display: none;
+    }
 
     img {
       // height: 50vh;
@@ -226,7 +231,10 @@ const handleScroll = () => {
 
   .operation-tip {
     position: fixed;
-    bottom: calc(80 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+    bottom: calc(
+      80 / v-bind("windowSizeWhenDesignForRef") *
+        v-bind("windowSizeInCssForRef")
+    );
     left: 50%;
     transform: translateX(-50%);
   }
@@ -238,12 +246,21 @@ const handleScroll = () => {
     transform: translateX(-50%);
     display: flex;
     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'));
+    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")
+      );
     }
   }
 }
-</style>
+</style>

src/views/PaintingDetail.vue

@@ -804,6 +804,9 @@ function showBigPainting() {
       overflow-x: auto;
       white-space: nowrap;
       display: inline-block;
+      &::-webkit-scrollbar {
+        display: none;
+    }
       & > div {
         padding: 28% 10% 28% 10%;
         width:100%;