|
|
@@ -9,14 +9,313 @@
|
|
|
class="img-wrapper"
|
|
|
@scroll="onImgWrapperScroll"
|
|
|
>
|
|
|
- <span id="test">tesdfasdf</span>
|
|
|
- <img
|
|
|
- ref="tree-image"
|
|
|
- class="tree-image"
|
|
|
- src="@/assets/image/tall-tree-no-fruit.png"
|
|
|
- alt=""
|
|
|
- @load="onTreeImgLoad"
|
|
|
- >
|
|
|
+ <div class="img-wrapper-tall">
|
|
|
+ <img
|
|
|
+ ref="tree-image"
|
|
|
+ class="tree-image"
|
|
|
+ src="@/assets/image/tall-tree-no-fruit.png"
|
|
|
+ alt=""
|
|
|
+ @load="onTreeImgLoad"
|
|
|
+ >
|
|
|
+ <img
|
|
|
+ src="@/assets/image/fruits/金色中国.png"
|
|
|
+ class="fruit"
|
|
|
+ alt=""
|
|
|
+ style="width: 2.5rem;
|
|
|
+ height: calc(10.16rem + 0.78rem);
|
|
|
+ left: 10.11rem;
|
|
|
+ top: calc(371.97rem - 0.78rem)"
|
|
|
+ >
|
|
|
+ <img
|
|
|
+ src="@/assets/image/fruits/在此.png"
|
|
|
+ class="fruit"
|
|
|
+ alt=""
|
|
|
+ style="
|
|
|
+ width: 3.13rem;
|
|
|
+ height: calc(8.89rem + 0.78rem);
|
|
|
+ left: 10.06rem;
|
|
|
+ top: calc(344.22rem - 0.78rem)"
|
|
|
+ >
|
|
|
+ <img
|
|
|
+ src="@/assets/image/fruits/藏品架起沟通的桥梁.png"
|
|
|
+ class="fruit"
|
|
|
+ alt=""
|
|
|
+ style="
|
|
|
+ width: 3.13rem;
|
|
|
+ height: calc(8.28rem + 0.78rem);
|
|
|
+ left: 9.52rem;
|
|
|
+ top: calc(323.53rem - 0.78rem)"
|
|
|
+ >
|
|
|
+ <img
|
|
|
+ src="@/assets/image/fruits/温婉.png"
|
|
|
+ class="fruit"
|
|
|
+ alt=""
|
|
|
+ style="
|
|
|
+ width: 2.5rem;
|
|
|
+ height: calc(10.28rem + 0.78rem);
|
|
|
+ left: 11.17rem;
|
|
|
+ top: calc(301.86rem - 0.78rem)"
|
|
|
+ >
|
|
|
+ <img
|
|
|
+ src="@/assets/image/fruits/和合.png"
|
|
|
+ class="fruit"
|
|
|
+ alt=""
|
|
|
+ style="
|
|
|
+ width: 3.13rem;
|
|
|
+ height: calc(8.92rem + 0.78rem);
|
|
|
+ left: 12.88rem;
|
|
|
+ top: calc(283.22rem - 0.78rem)"
|
|
|
+ >
|
|
|
+ <img
|
|
|
+ src="@/assets/image/fruits/南腔北调.png"
|
|
|
+ class="fruit"
|
|
|
+ alt=""
|
|
|
+ style="
|
|
|
+ width: 3.13rem;
|
|
|
+ height: calc(9.31rem + 0.78rem);
|
|
|
+ left: 7.14rem;
|
|
|
+ top: calc(282.41rem - 0.78rem)"
|
|
|
+ >
|
|
|
+ <img
|
|
|
+ src="@/assets/image/fruits/呼吸.png"
|
|
|
+ class="fruit"
|
|
|
+ alt=""
|
|
|
+ style="
|
|
|
+ width: 3.13rem;
|
|
|
+ height: calc(9.89rem + 0.78rem);
|
|
|
+ left: 9.59rem;
|
|
|
+ top: calc(263.81rem - 0.78rem)"
|
|
|
+ >
|
|
|
+ <img
|
|
|
+ src="@/assets/image/fruits/法老王.png"
|
|
|
+ class="fruit"
|
|
|
+ alt=""
|
|
|
+ style="
|
|
|
+ width: 3.75rem;
|
|
|
+ height: calc(10.47rem + 0.78rem);
|
|
|
+ left: 7.34rem;
|
|
|
+ top: calc(244.69rem - 0.78rem)"
|
|
|
+ >
|
|
|
+ <img
|
|
|
+ src="@/assets/image/fruits/缀白裘.png"
|
|
|
+ class="fruit"
|
|
|
+ alt=""
|
|
|
+ style="
|
|
|
+ width: 3.13rem;
|
|
|
+ height: calc(8.59rem + 0.78rem);
|
|
|
+ left: 7.34rem;
|
|
|
+ top: calc(227.08rem - 0.78rem)"
|
|
|
+ >
|
|
|
+ <img
|
|
|
+ src="@/assets/image/fruits/帝国盛世.png"
|
|
|
+ class="fruit"
|
|
|
+ alt=""
|
|
|
+ style="
|
|
|
+ width: 3.13rem;
|
|
|
+ height: calc(8.59rem + 0.78rem);
|
|
|
+ left: 11.58rem;
|
|
|
+ top: calc(219.19rem - 0.78rem)"
|
|
|
+ >
|
|
|
+ <img
|
|
|
+ src="@/assets/image/fruits/青藤.png"
|
|
|
+ class="fruit"
|
|
|
+ alt=""
|
|
|
+ style="
|
|
|
+ width: 3.75rem;
|
|
|
+ height: calc(8.59rem + 0.78rem);
|
|
|
+ left: 7.69rem;
|
|
|
+ top: calc(206.64rem - 0.78rem)"
|
|
|
+ >
|
|
|
+ <img
|
|
|
+ src="@/assets/image/fruits/走进.png"
|
|
|
+ class="fruit"
|
|
|
+ alt=""
|
|
|
+ style="
|
|
|
+ width: 3.13rem;
|
|
|
+ height: calc(10.11rem + 0.78rem);
|
|
|
+ left: 12.7rem;
|
|
|
+ top: calc(202.94rem - 0.78rem)"
|
|
|
+ >
|
|
|
+ <img
|
|
|
+ src="@/assets/image/fruits/回家过年.png"
|
|
|
+ class="fruit"
|
|
|
+ alt=""
|
|
|
+ style="
|
|
|
+ width: 3.13rem;
|
|
|
+ height: calc(8.2rem + 0.78rem);
|
|
|
+ left: 6.58rem;
|
|
|
+ top: calc(188.28rem - 0.78rem)"
|
|
|
+ >
|
|
|
+ <img
|
|
|
+ src="@/assets/image/fruits/穆夏.png"
|
|
|
+ class="fruit"
|
|
|
+ alt=""
|
|
|
+ style="
|
|
|
+ width: 3.13rem;
|
|
|
+ height: calc(9.22rem + 0.78rem);
|
|
|
+ left: 10.02rem;
|
|
|
+ top: calc(180.03rem - 0.78rem)"
|
|
|
+ >
|
|
|
+ <img
|
|
|
+ src="@/assets/image/fruits/称霸侏罗纪.png"
|
|
|
+ class="fruit"
|
|
|
+ alt=""
|
|
|
+ style="
|
|
|
+ width: 3.13rem;
|
|
|
+ height: calc(9.38rem + 0.78rem);
|
|
|
+ left: 6.69rem;
|
|
|
+ top: calc(171.81rem - 0.78rem)"
|
|
|
+ >
|
|
|
+ <img
|
|
|
+ src="@/assets/image/fruits/世界巨匠.png"
|
|
|
+ class="fruit"
|
|
|
+ alt=""
|
|
|
+ style="
|
|
|
+ width: 3.13rem;
|
|
|
+ height: calc(10.67rem + 0.78rem);
|
|
|
+ left: 10.48rem;
|
|
|
+ top: calc(163.45rem - 0.78rem)"
|
|
|
+ >
|
|
|
+ <img
|
|
|
+ src="@/assets/image/fruits/暑期.png"
|
|
|
+ class="fruit"
|
|
|
+ alt=""
|
|
|
+ style="
|
|
|
+ width: 3.13rem;
|
|
|
+ height: calc(7.19rem + 0.78rem);
|
|
|
+ left: 6.94rem;
|
|
|
+ top: calc(149.83rem - 0.78rem)"
|
|
|
+ >
|
|
|
+ <img
|
|
|
+ src="@/assets/image/fruits/金色阿富汗.png"
|
|
|
+ class="fruit"
|
|
|
+ alt=""
|
|
|
+ style="
|
|
|
+ width: 3.13rem;
|
|
|
+ height: calc(11.34rem + 0.78rem);
|
|
|
+ left: 10.8rem;
|
|
|
+ top: calc(138.52rem - 0.78rem)"
|
|
|
+ >
|
|
|
+ <img
|
|
|
+ src="@/assets/image/fruits/金色中国.png"
|
|
|
+ class="fruit"
|
|
|
+ alt=""
|
|
|
+ style="
|
|
|
+ width: 2.5rem;
|
|
|
+ height: calc(10.16rem + 0.78rem);
|
|
|
+ left: 10.11rem;
|
|
|
+ top: calc(371.97rem - 0.78rem)"
|
|
|
+ >
|
|
|
+ <img
|
|
|
+ src="@/assets/image/fruits/从毕加索.png"
|
|
|
+ class="fruit"
|
|
|
+ alt=""
|
|
|
+ style="
|
|
|
+ width: 3.13rem;
|
|
|
+ height: calc(8.98rem + 0.78rem);
|
|
|
+ left: 5.84rem;
|
|
|
+ top: calc(132.33rem - 0.78rem)"
|
|
|
+ >
|
|
|
+ <img
|
|
|
+ src="@/assets/image/fruits/兄弟王.png"
|
|
|
+ class="fruit"
|
|
|
+ alt=""
|
|
|
+ style="
|
|
|
+ width: 3.13rem;
|
|
|
+ height: calc(10.92rem + 0.78rem);
|
|
|
+ left: 10.67rem;
|
|
|
+ top: calc(120.39rem - 0.78rem)"
|
|
|
+ >
|
|
|
+ <img
|
|
|
+ src="@/assets/image/fruits/仰之弥高.png"
|
|
|
+ class="fruit"
|
|
|
+ alt=""
|
|
|
+ style="
|
|
|
+ width: 3.13rem;
|
|
|
+ height: calc(8.44rem + 0.78rem);
|
|
|
+ left: 6.39rem;
|
|
|
+ top: calc(120.5rem - 0.78rem)"
|
|
|
+ >
|
|
|
+ <img
|
|
|
+ src="@/assets/image/fruits/融合.png"
|
|
|
+ class="fruit"
|
|
|
+ alt=""
|
|
|
+ style="
|
|
|
+ width: 3.75rem;
|
|
|
+ height: calc(9.13rem + 0.78rem);
|
|
|
+ left: 11.89rem;
|
|
|
+ top: calc(108.2rem - 0.78rem)"
|
|
|
+ >
|
|
|
+ <img
|
|
|
+ src="@/assets/image/fruits/晶华.png"
|
|
|
+ class="fruit"
|
|
|
+ alt=""
|
|
|
+ style="
|
|
|
+ width: 2.5rem;
|
|
|
+ height: calc(7.81rem + 0.78rem);
|
|
|
+ left: 8.72rem;
|
|
|
+ top: calc(98.95rem - 0.78rem)"
|
|
|
+ >
|
|
|
+ <img
|
|
|
+ src="@/assets/image/fruits/百花呈瑞.png"
|
|
|
+ class="fruit"
|
|
|
+ alt=""
|
|
|
+ style="
|
|
|
+ width: 3.13rem;
|
|
|
+ height: calc(8.56rem + 0.78rem);
|
|
|
+ left: 10.72rem;
|
|
|
+ top: calc(86.63rem - 0.78rem)"
|
|
|
+ >
|
|
|
+ <img
|
|
|
+ src="@/assets/image/fruits/考古江苏.png"
|
|
|
+ class="fruit"
|
|
|
+ alt=""
|
|
|
+ style="
|
|
|
+ width: 3.13rem;
|
|
|
+ height: calc(7.81rem + 0.78rem);
|
|
|
+ left: 10.23rem;
|
|
|
+ top: calc(68.44rem - 0.78rem)"
|
|
|
+ >
|
|
|
+ <img
|
|
|
+ src="@/assets/image/fruits/浮世绘.png"
|
|
|
+ class="fruit"
|
|
|
+ alt=""
|
|
|
+ style="
|
|
|
+ width: 2.5rem;
|
|
|
+ height: calc(5rem + 0.78rem);
|
|
|
+ left: 8.53rem;
|
|
|
+ top: calc(59.44rem - 0.78rem)"
|
|
|
+ >
|
|
|
+ <img
|
|
|
+ src="@/assets/image/fruits/宋韵.png"
|
|
|
+ class="fruit"
|
|
|
+ alt=""
|
|
|
+ style="
|
|
|
+ width: 3.13rem;
|
|
|
+ height: calc(8.28rem + 0.78rem);
|
|
|
+ left: 9.11rem;
|
|
|
+ top: calc(45.75rem - 0.78rem)"
|
|
|
+ >
|
|
|
+ <img
|
|
|
+ src="@/assets/image/fruits/万水千山.png"
|
|
|
+ class="fruit"
|
|
|
+ alt=""
|
|
|
+ style="
|
|
|
+ width: 3.13rem;
|
|
|
+ height: calc(12.23rem + 0.78rem);
|
|
|
+ left: 12.3rem;
|
|
|
+ top: calc(26.1rem - 0.78rem)"
|
|
|
+ > <img
|
|
|
+ src="@/assets/image/fruits/家国.png"
|
|
|
+ class="fruit"
|
|
|
+ alt=""
|
|
|
+ style="
|
|
|
+ width: 3.13rem;
|
|
|
+ height: calc(10.31rem + 0.78rem);
|
|
|
+ left: 3.48rem;
|
|
|
+ top: calc(4.83rem - 0.78rem)"
|
|
|
+ >
|
|
|
+ </div>
|
|
|
</div>
|
|
|
<SlideTip
|
|
|
v-show="showSlideTip && showTree"
|
|
|
@@ -51,7 +350,7 @@ export default {
|
|
|
return {
|
|
|
showTree: false,
|
|
|
showSlideTip: false,
|
|
|
- visMonitor: null,
|
|
|
+ visMonitorList: [],
|
|
|
}
|
|
|
},
|
|
|
computed: {
|
|
|
@@ -60,17 +359,24 @@ export default {
|
|
|
created() {
|
|
|
},
|
|
|
mounted() {
|
|
|
- const testNode = document.getElementById('test')
|
|
|
- this.visMonitor = VisSense(testNode).monitor({
|
|
|
- percentagechange: function (VisMon) {
|
|
|
- if (VisMon._state.percentage > 0.5) {
|
|
|
- console.log('asfsfd')
|
|
|
+ const fruitNodeList = document.getElementsByClassName('fruit')
|
|
|
+ for (const iterator of fruitNodeList) {
|
|
|
+ let visMonitor = VisSense(iterator).monitor({
|
|
|
+ percentagechange: function (VisMon) {
|
|
|
+ if (VisMon._state.percentage > 0.5) {
|
|
|
+ iterator.style.opacity = "1"
|
|
|
+ visMonitor.stop()
|
|
|
+ }
|
|
|
}
|
|
|
- }
|
|
|
- })
|
|
|
- this.visMonitor.start()
|
|
|
+ })
|
|
|
+ this.visMonitorList.push(visMonitor)
|
|
|
+ visMonitor.start()
|
|
|
+ }
|
|
|
},
|
|
|
destroyed() {
|
|
|
+ for (const iterator of this.visMonitorList) {
|
|
|
+ iterator.stop()
|
|
|
+ }
|
|
|
},
|
|
|
methods: {
|
|
|
onTreeImgLoad() {
|
|
|
@@ -115,10 +421,21 @@ export default {
|
|
|
animation: emerge 1s 0.7s linear forwards;
|
|
|
overflow: auto;
|
|
|
opacity: 0;
|
|
|
- > .tree-image {
|
|
|
- display: block;
|
|
|
+ > .img-wrapper-tall {
|
|
|
margin: 0 auto;
|
|
|
width: 18.28rem;
|
|
|
+ position: relative;
|
|
|
+ > .tree-image {
|
|
|
+ display: block;
|
|
|
+ width: 100%;
|
|
|
+ }
|
|
|
+ > .fruit {
|
|
|
+ position: absolute;
|
|
|
+ bottom: 30rem;
|
|
|
+ left: 3rem;
|
|
|
+ opacity: 0;
|
|
|
+ transition: opacity 1s;
|
|
|
+ }
|
|
|
}
|
|
|
}
|
|
|
> .loading {
|
任一存
