up

webM/src/views/Exhibitions/Detail.vue

@@ -40,20 +40,41 @@
       <!-- 3 -->
       <div class="box3" v-if="data.objects">
         <div class="title">Exhibition Objects</div>
-        <div class="box3_Obj" @touchstart="touchstart" @touchmove="touchmove">
-          <div v-for="i in 9" :key="i" :class="{ active: ObjInd === i }">
+        <v-touch
+          @swipeleft="swiperleft3"
+          @swiperight="swiperright3"
+          class="box3_Obj"
+        >
+          <div
+            v-for="i in ObjLength"
+            :key="i"
+            :class="{ active: ObjInd === i }"
+          >
             <img
+              @click="
+                imgLook(
+                  `/data/Exhibitions/${dataUrl}/objects${data.topImg}/big${i}.png`
+                )
+              "
               :src="`/data/Exhibitions/${dataUrl}/objects${data.topImg}/objects${i}${data.imgLast}`"
               alt=""
             />
           </div>
+        </v-touch>
+        <div class="more" @click="$router.push('/Layout/VisitInfo')">
+          See More
         </div>
       </div>
+      <!-- 4 -->
+      <div class="box4" v-if="data.galleries">
+        
+      </div>
     </div>
   </div>
 </template>
 
 <script>
+import { ImagePreview } from "vant";
 import { dataAll } from "./dataAll";
 export default {
   name: "ExDetail",
@@ -67,11 +88,10 @@ export default {
       info: {},
       cardInd: 0,
       // Objects
-      ObjInd: 5,
-      startX: 0,
-      startY: 0,
-      moveX: 0,
-      moveY: 0,
+      ObjInd: 1,
+      ObjLength: 9,
+      // Gallerise
+      GalLength:5
     };
   },
   //监听属性 类似于data概念
@@ -80,21 +100,42 @@ export default {
   watch: {},
   //方法集合
   methods: {
+    // Over的滑动
+    // 封装一个滑动的方法
+    // OverSwiper(val) {
+    //   let dom = document.querySelector(".card");
+    //   let domScroll = document.querySelector(".txt");
+    //   domScroll.scrollTo({ top: 0 });
+    //   dom.style.opacity = 0;
+    //   setTimeout(() => {
+    //     if (val === 0) {
+    //       // 右滑减小
+    //       if (this.cardInd === 0) this.cardInd = this.data.page.length - 1;
+    //       else this.cardInd--;
+    //     } else {
+    //       //左滑增加
+    //       if (this.cardInd < this.data.page.length - 1) this.cardInd++;
+    //       else this.cardInd = 0;
+    //     }
+    //     this.info = this.data.page[this.cardInd];
+    //     dom.style.opacity = 1;
+    //   }, 300);
+    // },
+    imgLook(url) {
+      console.log(url);
+      ImagePreview({
+        images: [url],
+        closeable: true,
+      });
+    },
     // Obj的滑动
-    touchstart(e) {
-      this.startX = e.touches[0].clientX;
-      this.startY = e.touches[0].clientY;
+    swiperleft3() {
+      if (this.ObjInd < this.ObjLength) this.ObjInd++;
+      else this.ObjInd = 1;
     },
-    touchmove(e) {
-      // e.preventDefault()
-      this.moveX = e.touches[0].clientX;
-      this.moveY = e.touches[0].clientY;
-      // this.startX - this.moveX <= 0
-      //   ? console.log("你在往右滑")
-      //   : console.log("你在往左滑");
-      // if (this.startX - this.moveX <= -100) {
-      //  console.log("你在往右滑")
-      // }
+    swiperright3() {
+      if (this.ObjInd === 1) this.ObjInd = this.ObjLength;
+      else this.ObjInd--;
     },
     cutInfo() {
       let dom = document.querySelector(".card");
@@ -129,6 +170,8 @@ export default {
     temp.forEach((v) => {
       if (v.id === id) this.data = v.info;
     });
+    if (this.data.objects < 9) this.ObjLength = this.data.objects;
+    if (this.data.galleries < 5) this.GalLength = this.data.galleries;
     // 动态控制cardCom元素的高度
     this.$nextTick(() => {
       setTimeout(() => {
@@ -261,6 +304,17 @@ export default {
       }
     }
   }
+  .more {
+    margin: 40px auto 0;
+    width: 117px;
+    height: 37px;
+    background: url("../../assets/img/Layout/see.png");
+    background-size: 100% 100%;
+    color: #c1aa7b;
+    line-height: 40px;
+    text-align: center;
+  }
+
   .box3 {
     padding: 40px 0;
     border-bottom: 1px solid #ccc;
@@ -268,7 +322,10 @@ export default {
       display: flex;
       align-items: center;
       justify-content: space-around;
+      height: 300px;
       & > div {
+        pointer-events: none;
+        transition: all 0.3s;
         border-radius: 8px;
         overflow: hidden;
         width: 5%;
@@ -280,6 +337,7 @@ export default {
         }
       }
       .active {
+        pointer-events: initial;
         width: 45%;
         height: 300px;
         border-radius: 8px;