|
@@ -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
|
|
|
+ }
|
|
|
}
|
|
|
}
|
|
|
}
|