树生长页：各果子的点击跳转功能

src/views/TreeAnimation.vue

@@ -17,14 +17,18 @@
           alt=""
           @load="onTreeImgLoad"
         >
+        <!-- 各标签（果子）的代码顺序与显示顺序上下相反 -->
         <img
           src="@/assets/image/fruits/金色中国.png"
           class="fruit"
           alt=""
-          style="width: 2.5rem;
+          style="
+            width: 2.5rem;
             height: calc(10.16rem + 0.78rem);
             left: 10.11rem;
-            top: calc(371.97rem - 0.78rem)"
+            top: calc(371.97rem - 0.78rem)
+          "
+          @click="onClickFruit('traditionModern', 's')"
         >
         <img
           src="@/assets/image/fruits/在此.png"
@@ -34,7 +38,9 @@
             width: 3.13rem;
             height: calc(8.89rem + 0.78rem);
             left: 10.06rem;
-            top: calc(344.22rem - 0.78rem)"
+            top: calc(344.22rem - 0.78rem)
+          "
+          @click="onClickFruit('wuyiba', 'a')"
         >
         <img
           src="@/assets/image/fruits/藏品架起沟通的桥梁.png"
@@ -44,7 +50,9 @@
             width: 3.13rem;
             height: calc(8.28rem + 0.78rem);
             left: 9.52rem;
-            top: calc(323.53rem - 0.78rem)"
+            top: calc(323.53rem - 0.78rem)
+          "
+          @click="onClickFruit('wuyiba', 'f')"
         >
         <img
           src="@/assets/image/fruits/温婉.png"
@@ -54,7 +62,9 @@
             width: 2.5rem;
             height: calc(10.28rem + 0.78rem);
             left: 11.17rem;
-            top: calc(301.86rem - 0.78rem)"
+            top: calc(301.86rem - 0.78rem)
+          "
+          @click="onClickFruit('traditionModern', 'p')"
         >
         <img
           src="@/assets/image/fruits/和合.png"
@@ -64,7 +74,9 @@
             width: 3.13rem;
             height: calc(8.92rem + 0.78rem);
             left: 12.88rem;
-            top: calc(283.22rem - 0.78rem)"
+            top: calc(283.22rem - 0.78rem)
+          "
+          @click="onClickFruit('traditionModern', 'u')"
         >
         <img
           src="@/assets/image/fruits/南腔北调.png"
@@ -74,7 +86,9 @@
             width: 3.13rem;
             height: calc(9.31rem + 0.78rem);
             left: 7.14rem;
-            top: calc(282.41rem - 0.78rem)"
+            top: calc(282.41rem - 0.78rem)
+          "
+          @click="onClickFruit('traditionModern', 'oa')"
         >
         <img
           src="@/assets/image/fruits/呼吸.png"
@@ -84,7 +98,9 @@
             width: 3.13rem;
             height: calc(9.89rem + 0.78rem);
             left: 9.59rem;
-            top: calc(263.81rem - 0.78rem)"
+            top: calc(263.81rem - 0.78rem)
+          "
+          @click="onClickFruit('wuyiba', 'c')"
         >
         <img
           src="@/assets/image/fruits/法老王.png"
@@ -94,7 +110,9 @@
             width: 3.75rem;
             height: calc(10.47rem + 0.78rem);
             left: 7.34rem;
-            top: calc(244.69rem - 0.78rem)"
+            top: calc(244.69rem - 0.78rem)
+          "
+          @click="onClickFruit('traditionModern', 't')"
         >
         <img
           src="@/assets/image/fruits/缀白裘.png"
@@ -104,7 +122,9 @@
             width: 3.13rem;
             height: calc(8.59rem + 0.78rem);
             left: 7.34rem;
-            top: calc(227.08rem - 0.78rem)"
+            top: calc(227.08rem - 0.78rem)
+          "
+          @click="onClickFruit('wuyiba', 'b')"
         >
         <img
           src="@/assets/image/fruits/帝国盛世.png"
@@ -114,7 +134,9 @@
             width: 3.13rem;
             height: calc(8.59rem + 0.78rem);
             left: 11.58rem;
-            top: calc(219.19rem - 0.78rem)"
+            top: calc(219.19rem - 0.78rem)
+          "
+          @click="onClickFruit('traditionModern', 'z')"
         >
         <img
           src="@/assets/image/fruits/青藤.png"
@@ -124,7 +146,9 @@
             width: 3.75rem;
             height: calc(8.59rem + 0.78rem);
             left: 7.69rem;
-            top: calc(206.64rem - 0.78rem)"
+            top: calc(206.64rem - 0.78rem)
+          "
+          @click="onClickFruit('traditionModern', 'x')"
         >
         <img
           src="@/assets/image/fruits/走进.png"
@@ -134,7 +158,9 @@
             width: 3.13rem;
             height: calc(10.11rem + 0.78rem);
             left: 12.7rem;
-            top: calc(202.94rem - 0.78rem)"
+            top: calc(202.94rem - 0.78rem)
+          "
+          @click="onClickFruit('traditionModern', 'o')"
         >
         <img
           src="@/assets/image/fruits/回家过年.png"
@@ -144,7 +170,9 @@
             width: 3.13rem;
             height: calc(8.2rem + 0.78rem);
             left: 6.58rem;
-            top: calc(188.28rem - 0.78rem)"
+            top: calc(188.28rem - 0.78rem)
+          "
+          @click="onClickFruit('traditionModern', 'za')"
         >
         <img
           src="@/assets/image/fruits/穆夏.png"
@@ -154,7 +182,9 @@
             width: 3.13rem;
             height: calc(9.22rem + 0.78rem);
             left: 10.02rem;
-            top: calc(180.03rem - 0.78rem)"
+            top: calc(180.03rem - 0.78rem)
+          "
+          @click="onClickFruit('traditionModern', 'd')"
         >
         <img
           src="@/assets/image/fruits/称霸侏罗纪.png"
@@ -164,7 +194,9 @@
             width: 3.13rem;
             height: calc(9.38rem + 0.78rem);
             left: 6.69rem;
-            top: calc(171.81rem - 0.78rem)"
+            top: calc(171.81rem - 0.78rem)
+          "
+          @click="onClickFruit('theme', 'j')"
         >
         <img
           src="@/assets/image/fruits/世界巨匠.png"
@@ -174,7 +206,9 @@
             width: 3.13rem;
             height: calc(10.67rem + 0.78rem);
             left: 10.48rem;
-            top: calc(163.45rem - 0.78rem)"
+            top: calc(163.45rem - 0.78rem)
+          "
+          @click="onClickFruit('theme', 'h')"
         >
         <img
           src="@/assets/image/fruits/暑期.png"
@@ -184,7 +218,9 @@
             width: 3.13rem;
             height: calc(7.19rem + 0.78rem);
             left: 6.94rem;
-            top: calc(149.83rem - 0.78rem)"
+            top: calc(149.83rem - 0.78rem)
+          "
+          @click="onClickFruit('theme', 'l')"
         >
         <img
           src="@/assets/image/fruits/金色阿富汗.png"
@@ -194,17 +230,9 @@
             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)"
+            top: calc(138.52rem - 0.78rem)
+          "
+          @click="onClickFruit('theme', 'k')"
         >
         <img
           src="@/assets/image/fruits/从毕加索.png"
@@ -214,7 +242,9 @@
             width: 3.13rem;
             height: calc(8.98rem + 0.78rem);
             left: 5.84rem;
-            top: calc(132.33rem - 0.78rem)"
+            top: calc(132.33rem - 0.78rem)
+          "
+          @click="onClickFruit('theme', 'g')"
         >
         <img
           src="@/assets/image/fruits/兄弟王.png"
@@ -224,7 +254,9 @@
             width: 3.13rem;
             height: calc(10.92rem + 0.78rem);
             left: 10.67rem;
-            top: calc(120.39rem - 0.78rem)"
+            top: calc(120.39rem - 0.78rem)
+          "
+          @click="onClickFruit('traditionModern', 'v')"
         >
         <img
           src="@/assets/image/fruits/仰之弥高.png"
@@ -234,7 +266,9 @@
             width: 3.13rem;
             height: calc(8.44rem + 0.78rem);
             left: 6.39rem;
-            top: calc(120.5rem - 0.78rem)"
+            top: calc(120.5rem - 0.78rem)
+          "
+          @click="onClickFruit('traditionModern', 'y')"
         >
         <img
           src="@/assets/image/fruits/融合.png"
@@ -244,7 +278,9 @@
             width: 3.75rem;
             height: calc(9.13rem + 0.78rem);
             left: 11.89rem;
-            top: calc(108.2rem - 0.78rem)"
+            top: calc(108.2rem - 0.78rem)
+          "
+          @click="onClickFruit('wuyiba', 'e')"
         >
         <img
           src="@/assets/image/fruits/晶华.png"
@@ -254,7 +290,9 @@
             width: 2.5rem;
             height: calc(7.81rem + 0.78rem);
             left: 8.72rem;
-            top: calc(98.95rem - 0.78rem)"
+            top: calc(98.95rem - 0.78rem)
+          "
+          @click="onClickFruit('theme', 'm')"
         >
         <img
           src="@/assets/image/fruits/百花呈瑞.png"
@@ -264,7 +302,9 @@
             width: 3.13rem;
             height: calc(8.56rem + 0.78rem);
             left: 10.72rem;
-            top: calc(86.63rem - 0.78rem)"
+            top: calc(86.63rem - 0.78rem)
+          "
+          @click="onClickFruit('traditionModern', 'w')"
         >
         <img
           src="@/assets/image/fruits/考古江苏.png"
@@ -274,7 +314,9 @@
             width: 3.13rem;
             height: calc(7.81rem + 0.78rem);
             left: 10.23rem;
-            top: calc(68.44rem - 0.78rem)"
+            top: calc(68.44rem - 0.78rem)
+          "
+          @click="onClickFruit('traditionModern', 'r')"
         >
         <img
           src="@/assets/image/fruits/浮世绘.png"
@@ -284,7 +326,9 @@
             width: 2.5rem;
             height: calc(5rem + 0.78rem);
             left: 8.53rem;
-            top: calc(59.44rem - 0.78rem)"
+            top: calc(59.44rem - 0.78rem)
+          "
+          @click="onClickFruit('theme', 'n')"
         >
         <img
           src="@/assets/image/fruits/宋韵.png"
@@ -294,7 +338,9 @@
             width: 3.13rem;
             height: calc(8.28rem + 0.78rem);
             left: 9.11rem;
-            top: calc(45.75rem - 0.78rem)"
+            top: calc(45.75rem - 0.78rem)
+          "
+          @click="onClickFruit('traditionModern', 'q')"
         >
         <img
           src="@/assets/image/fruits/万水千山.png"
@@ -304,8 +350,11 @@
             width: 3.13rem;
             height: calc(12.23rem + 0.78rem);
             left: 12.3rem;
-            top: calc(26.1rem - 0.78rem)"
-        >        <img
+            top: calc(26.1rem - 0.78rem)
+          "
+          @click="onClickFruit('theme', 'i')"
+        >
+        <img
           src="@/assets/image/fruits/家国.png"
           class="fruit"
           alt=""
@@ -313,7 +362,9 @@
             width: 3.13rem;
             height: calc(10.31rem + 0.78rem);
             left: 3.48rem;
-            top: calc(4.83rem - 0.78rem)"
+            top: calc(4.83rem - 0.78rem)
+          "
+          @click="onClickFruit('wuyiba', 'aa')"
         >
       </div>
     </div>
@@ -405,6 +456,9 @@ export default {
       } else {
         this.showSlideTip = false
       }
+    },
+    onClickFruit(exhibitionType, exhibitionId) {
+      this.$router.push(`/ExhibitionDetailAnimation?exhibitionType=${exhibitionType}&exhibitionId=${exhibitionId}`)
     }
   }
 }