Przeglądaj źródła

Merge branch 'master' into local-deploy

任一存 3 lat temu
rodzic
commit
c01d5d926f
3 zmienionych plików z 70 dodań i 6 usunięć
  1. 1 1
      src/main.js
  2. 3 3
      src/views/ExhibitionDetail.vue
  3. 66 2
      src/views/TreeAnimation.vue

+ 1 - 1
src/main.js

@@ -1,4 +1,4 @@
-console.log('v2.2')
+console.log('v2.4')
 
 import Vue from 'vue'
 import App from './App.vue'

+ 3 - 3
src/views/ExhibitionDetail.vue

@@ -198,9 +198,9 @@ export default {
         this.showMask = true
         this.videoSrc = `${this.$backEndBaseUrl}exhibition-data/${this.$route.query.exhibitionId}/${value.videoSrc}`
       } else if (value.type === 'link') {
-        // this.showIframe = true
-        // this.linkSrc = value.linkSrc
-        window.open(value.linkSrc)
+        this.showIframe = true
+        this.linkSrc = value.linkSrc
+        // window.open(value.linkSrc)
       } else if (value.type === 'image') {
         this.showMask = true
         this.imageSrc = value.src

+ 66 - 2
src/views/TreeAnimation.vue

@@ -9,12 +9,18 @@
       class="img-wrapper"
       @scroll="onImgWrapperScroll"
     >
-      <div class="img-wrapper-tall">
+      <div
+        class="img-wrapper-tall"
+        @mousedown="onMouseDown"
+        @mousemove="onMouseMove"
+        @mouseup="onMouseUp"
+      >
         <img
           ref="tree-image"
           class="tree-image"
           src="@/assets/image/tall-tree-no-fruit.png"
           alt=""
+          draggable="false"
           @load="onTreeImgLoad"
         >
         <!-- 各标签(果子)的代码顺序与显示顺序上下相反 -->
@@ -22,6 +28,7 @@
           src="@/assets/image/fruits/金色中国.png"
           class="fruit"
           alt=""
+          draggable="false"
           style="
             width: 2.5rem;
             height: calc(10.16rem + 0.78rem);
@@ -34,6 +41,7 @@
           src="@/assets/image/fruits/在此.png"
           class="fruit"
           alt=""
+          draggable="false"
           style="
             width: 3.13rem;
             height: calc(8.89rem + 0.78rem);
@@ -46,6 +54,7 @@
           src="@/assets/image/fruits/藏品架起沟通的桥梁.png"
           class="fruit"
           alt=""
+          draggable="false"
           style="
             width: 3.13rem;
             height: calc(8.28rem + 0.78rem);
@@ -58,6 +67,7 @@
           src="@/assets/image/fruits/温婉.png"
           class="fruit"
           alt=""
+          draggable="false"
           style="
             width: 2.5rem;
             height: calc(10.28rem + 0.78rem);
@@ -70,6 +80,7 @@
           src="@/assets/image/fruits/和合.png"
           class="fruit"
           alt=""
+          draggable="false"
           style="
             width: 3.13rem;
             height: calc(8.92rem + 0.78rem);
@@ -82,6 +93,7 @@
           src="@/assets/image/fruits/南腔北调.png"
           class="fruit"
           alt=""
+          draggable="false"
           style="
             width: 3.13rem;
             height: calc(9.31rem + 0.78rem);
@@ -94,6 +106,7 @@
           src="@/assets/image/fruits/呼吸.png"
           class="fruit"
           alt=""
+          draggable="false"
           style="
             width: 3.13rem;
             height: calc(9.89rem + 0.78rem);
@@ -106,6 +119,7 @@
           src="@/assets/image/fruits/法老王.png"
           class="fruit"
           alt=""
+          draggable="false"
           style="
             width: 3.75rem;
             height: calc(10.47rem + 0.78rem);
@@ -118,6 +132,7 @@
           src="@/assets/image/fruits/缀白裘.png"
           class="fruit"
           alt=""
+          draggable="false"
           style="
             width: 3.13rem;
             height: calc(8.59rem + 0.78rem);
@@ -130,6 +145,7 @@
           src="@/assets/image/fruits/帝国盛世.png"
           class="fruit"
           alt=""
+          draggable="false"
           style="
             width: 3.13rem;
             height: calc(8.59rem + 0.78rem);
@@ -142,6 +158,7 @@
           src="@/assets/image/fruits/青藤.png"
           class="fruit"
           alt=""
+          draggable="false"
           style="
             width: 3.75rem;
             height: calc(8.59rem + 0.78rem);
@@ -154,6 +171,7 @@
           src="@/assets/image/fruits/走进.png"
           class="fruit"
           alt=""
+          draggable="false"
           style="
             width: 3.13rem;
             height: calc(10.11rem + 0.78rem);
@@ -166,6 +184,7 @@
           src="@/assets/image/fruits/回家过年.png"
           class="fruit"
           alt=""
+          draggable="false"
           style="
             width: 3.13rem;
             height: calc(8.2rem + 0.78rem);
@@ -178,6 +197,7 @@
           src="@/assets/image/fruits/穆夏.png"
           class="fruit"
           alt=""
+          draggable="false"
           style="
             width: 3.13rem;
             height: calc(9.22rem + 0.78rem);
@@ -190,6 +210,7 @@
           src="@/assets/image/fruits/称霸侏罗纪.png"
           class="fruit"
           alt=""
+          draggable="false"
           style="
             width: 3.13rem;
             height: calc(9.38rem + 0.78rem);
@@ -202,6 +223,7 @@
           src="@/assets/image/fruits/世界巨匠.png"
           class="fruit"
           alt=""
+          draggable="false"
           style="
             width: 3.13rem;
             height: calc(10.67rem + 0.78rem);
@@ -214,6 +236,7 @@
           src="@/assets/image/fruits/暑期.png"
           class="fruit"
           alt=""
+          draggable="false"
           style="
             width: 3.13rem;
             height: calc(7.19rem + 0.78rem);
@@ -226,6 +249,7 @@
           src="@/assets/image/fruits/金色阿富汗.png"
           class="fruit"
           alt=""
+          draggable="false"
           style="
             width: 3.13rem;
             height: calc(11.34rem + 0.78rem);
@@ -238,6 +262,7 @@
           src="@/assets/image/fruits/从毕加索.png"
           class="fruit"
           alt=""
+          draggable="false"
           style="
             width: 3.13rem;
             height: calc(8.98rem + 0.78rem);
@@ -250,6 +275,7 @@
           src="@/assets/image/fruits/兄弟王.png"
           class="fruit"
           alt=""
+          draggable="false"
           style="
             width: 3.13rem;
             height: calc(10.92rem + 0.78rem);
@@ -262,6 +288,7 @@
           src="@/assets/image/fruits/仰之弥高.png"
           class="fruit"
           alt=""
+          draggable="false"
           style="
             width: 3.13rem;
             height: calc(8.44rem + 0.78rem);
@@ -274,6 +301,7 @@
           src="@/assets/image/fruits/融合.png"
           class="fruit"
           alt=""
+          draggable="false"
           style="
             width: 3.75rem;
             height: calc(9.13rem + 0.78rem);
@@ -286,6 +314,7 @@
           src="@/assets/image/fruits/晶华.png"
           class="fruit"
           alt=""
+          draggable="false"
           style="
             width: 2.5rem;
             height: calc(7.81rem + 0.78rem);
@@ -298,6 +327,7 @@
           src="@/assets/image/fruits/百花呈瑞.png"
           class="fruit"
           alt=""
+          draggable="false"
           style="
             width: 3.13rem;
             height: calc(8.56rem + 0.78rem);
@@ -310,6 +340,7 @@
           src="@/assets/image/fruits/考古江苏.png"
           class="fruit"
           alt=""
+          draggable="false"
           style="
             width: 3.13rem;
             height: calc(7.81rem + 0.78rem);
@@ -322,6 +353,7 @@
           src="@/assets/image/fruits/浮世绘.png"
           class="fruit"
           alt=""
+          draggable="false"
           style="
             width: 2.5rem;
             height: calc(5rem + 0.78rem);
@@ -334,6 +366,7 @@
           src="@/assets/image/fruits/宋韵.png"
           class="fruit"
           alt=""
+          draggable="false"
           style="
             width: 3.13rem;
             height: calc(8.28rem + 0.78rem);
@@ -346,6 +379,7 @@
           src="@/assets/image/fruits/万水千山.png"
           class="fruit"
           alt=""
+          draggable="false"
           style="
             width: 3.13rem;
             height: calc(12.23rem + 0.78rem);
@@ -358,6 +392,7 @@
           src="@/assets/image/fruits/家国.png"
           class="fruit"
           alt=""
+          draggable="false"
           style="
             width: 3.13rem;
             height: calc(10.31rem + 0.78rem);
@@ -404,12 +439,19 @@ export default {
       showSlideTip: false,
       visMonitorList: [],
       scrollTop: 0,
+
+      /**
+       * 为了PC端也能拖动树木
+       */
+      isMouseDown: false,
+      isTreeDragged: false,
     }
   },
   computed: {
 
   },
   created() {
+
   },
   mounted() {
     const fruitNodeList = document.getElementsByClassName('fruit')
@@ -448,7 +490,7 @@ export default {
       mc.get('pan').set({ direction: Hammer.DIRECTION_ALL })
       const that = this
       mc.on("pandown", function me() {
-        if (that.$refs['img-wrapper'].scrollTop === 0) {
+        if (that.$refs['img-wrapper'].scrollTop === 0 && !that.isTreeDragged) {
           that.$router.push({ name: 'TreeSelection' })
           // 因为本组件用keep-alive来避免销毁了,所以可能会多次用到下滑翻页功能,所以此处不能off。
           // mc.off('pandown', me)
@@ -467,7 +509,29 @@ export default {
       }
     },
     onClickFruit(exhibitionType, exhibitionId) {
+      if (this.isTreeDragged) {
+        return
+      }
       this.$router.push(`/ExhibitionDetailAnimation?exhibitionType=${exhibitionType}&exhibitionId=${exhibitionId}`)
+    },
+    onMouseDown() {
+      this.isMouseDown = true
+      this.isTreeDragged = false
+    },
+    onMouseUp() {
+      this.isMouseDown = false
+    },
+    onMouseMove(e) {
+      if (
+        this.isMouseDown &&
+        !(
+          this.$refs['img-wrapper'].scrollTop == 0 &&
+          e.movementY > 0
+        )
+      ) {
+        this.$refs['img-wrapper'].scrollTop -= e.movementY
+        this.isTreeDragged = true
+      }
     }
   }
 }