upp

src/views/PaintingDetailList.vue

@@ -1,5 +1,9 @@
 <template>
-  <div class="painting-detail-list">
+  <div
+    :class="`painting-detail-list ${
+      isMoveSw ? 'painting-detail-listMove' : ''
+    }`"
+  >
     <div class="bg-left" />
     <Swiper
       class="painting-list"
@@ -9,14 +13,14 @@
       @slideChange="onSlideChange"
     >
       <SwiperSlide
-        v-for="(item,index) in paintingList"
+        v-for="(item, index) in paintingList"
         :key="item['标题']"
         class="swiper-slider"
       >
         <PaintingDetail
-          v-show="index===indexAc"
+          v-show="index === indexAc"
           class="painting-item"
-          :is-open-now="index===Number(route.query.idx)"
+          :is-open-now="index === Number(route.query.idx)"
           :thumb="`${$env.BASE_URL}configMultiMedia/paintings-small/${item['标题']}.jpg`"
           :title="item['标题（展示）']"
           :author="item['作者']"
@@ -28,8 +32,7 @@
           :big-painting="`${$env.BASE_URL}configMultiMedia/paintings/${item['标题']}.jpg`"
           :can-close="false"
           :direction="item['方向']"
-          :size="item['尺寸'] ? getPaintingSize(item['尺寸']):''"
-
+          :size="item['尺寸'] ? getPaintingSize(item['尺寸']) : ''"
           @touch-up="handletouchUp"
         >
           {{ item }}
@@ -37,6 +40,7 @@
       </SwiperSlide>
     </Swiper>
     <OperationTip
+      v-if="isShowOperationTip"
       class="operation-tip"
       direction="h"
       :is-show="isShowOperationTip"
@@ -48,7 +52,7 @@
     />
     <BtnBack
       class="btn-back"
-      @click="router.replace({name:'PaintingList'})"
+      @click="router.replace({ name: 'PaintingList' })"
     />
   </div>
 </template>
@@ -57,7 +61,7 @@
 import { ref, computed, watch, onMounted, inject } from "vue"
 import { useRoute, useRouter } from "vue-router"
 import { useStore } from "vuex"
-import PaintingDetail from '@/views/PaintingDetail.vue'
+import PaintingDetail from "@/views/PaintingDetail.vue"
 import useSizeAdapt from "@/useFunctions/useSizeAdapt"
 
 const getPaintingSize = utils.getPaintingSize
@@ -66,14 +70,11 @@ const route = useRoute()
 const router = useRouter()
 const store = useStore()
 
-const $env = inject('$env')
+const $env = inject("$env")
 
-const {
-  windowSizeInCssForRef,
-  windowSizeWhenDesignForRef,
-} = useSizeAdapt()
+const { windowSizeInCssForRef, windowSizeWhenDesignForRef } = useSizeAdapt()
 
-const paintingList = configExcel['画作']
+const paintingList = configExcel["画作"]
 
 /**
  * swiper
@@ -92,12 +93,14 @@ const onSlideChange = (e) => {
     isShowOperationTip.value = false
     setTimeout(() => {
       isShowOperationTip2.value = true
-    }, 1000)
-
+    }, 500)
   }
 }
 
-const isShowOperationTip = ref(true)
+const isShowOperationTip = ref(false)
+
+// 轮播图是否能滑动
+const isMoveSw = ref(false)
 
 const isShowOperationTip2 = ref(false)
 
@@ -107,56 +110,87 @@ const handletouchUp = () => {
   isShowOperationTip.value = false
 }
 onMounted(() => {
+  setTimeout(() => {
+    isShowOperationTip.value = true
+    isMoveSw.value = true
+  }, 2000)
 })
 </script>
 
 <style lang="less" scoped>
-.painting-detail-list{
+.painting-detail-list {
   position: absolute;
   left: 0;
   top: 0;
   width: 100%;
   height: 100%;
-  >.bg-left{
+  pointer-events: none;
+  > .bg-left {
     background: linear-gradient(90deg, #7b916b 0%, #94a586 100%);
     position: absolute;
     left: 0;
     top: 0;
     height: 100%;
-    width: calc(57 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+    width: calc(
+      57 / v-bind("windowSizeWhenDesignForRef") *
+        v-bind("windowSizeInCssForRef")
+    );
     background: -1;
   }
-  >.painting-list{
+  > .painting-list {
     position: absolute;
     left: 0;
     top: 0;
     width: 100%;
     height: 100%;
-    backdrop-filter: blur(calc(20 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef')));
-    background: linear-gradient(rgba(123,145,107,0.62) 0%, rgba(0,0,0,0.3) 100%);
-    .swiper-slide{
-      >.painting-item{
+    backdrop-filter: blur(
+      calc(
+        20 / v-bind("windowSizeWhenDesignForRef") *
+          v-bind("windowSizeInCssForRef")
+      )
+    );
+    background: linear-gradient(
+      rgba(123, 145, 107, 0.62) 0%,
+      rgba(0, 0, 0, 0.3) 100%
+    );
+    .swiper-slide {
+      > .painting-item {
         position: relative !important;
         overflow: hidden;
       }
     }
   }
-  >.operation-tip{
+  > .operation-tip {
     position: absolute;
-    right: calc(20 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
-    bottom: calc(20 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+    right: calc(
+      20 / v-bind("windowSizeWhenDesignForRef") *
+        v-bind("windowSizeInCssForRef")
+    );
+    bottom: calc(
+      20 / v-bind("windowSizeWhenDesignForRef") *
+        v-bind("windowSizeInCssForRef")
+    );
     transform: translateX(-50%);
     z-index: 10;
   }
-  >.operation-tip2{
+  > .operation-tip2 {
     position: absolute;
-    right: calc(20 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
-    bottom: calc(20 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+    right: calc(
+      20 / v-bind("windowSizeWhenDesignForRef") *
+        v-bind("windowSizeInCssForRef")
+    );
+    bottom: calc(
+      20 / v-bind("windowSizeWhenDesignForRef") *
+        v-bind("windowSizeInCssForRef")
+    );
     transform: translateX(-50%);
     z-index: 10;
   }
-  >.btn-back{
+  > .btn-back {
     z-index: 10;
   }
 }
-</style>
+.painting-detail-listMove{
+  pointer-events: auto;
+}
+</style>