点击藏品查看详情后，返回页面不会再次触发藏品动画

src/components/son2.vue

@@ -54,6 +54,7 @@ export default {
   //方法集合
   methods: {
     toInfo(id) {
+      window.lodingGoods=false
       this.$router.push(`/info/${id}`);
     },
   },
@@ -68,75 +69,77 @@ export default {
   beforeDestroy() {}, //生命周期 - 销毁之前
   destroyed() {}, //生命周期 - 销毁完成
   activated() {
-    this.data = [
-      {
-        id: 1,
-        name: "清“乾隆”款珐琅蓝彩十三行通景画瓷碗",
-        ww: "170px",
-        hh: "79px",
-        move: false,
-      },
-      {
-        id: 2,
-        name: "清光绪二十三年广彩十三行四方瓷瓶",
-        ww: "244px",
-        hh: "131px",
-        move: false,
-      },
-      {
-        id: 3,
-        name: "清道光广彩人物故事纹瓷碗",
-        ww: "169px",
-        hh: "80px",
-        move: false,
-      },
-      {
-        id: 4,
-        name: "19世纪镀金人物铜座钟",
-        ww: "132px",
-        hh: "194px",
-        move: false,
-      },
-      {
-        id: 5,
-        name: "19世纪法国铜鎏金配烛台座钟",
-        ww: "167px",
-        hh: "112px",
-        move: false,
-      },
-      {
-        id: 6,
-        name: "19世纪英国皇家定制珐琅彩纹章纹陶茶叶罐",
-        ww: "135px",
-        hh: "191px",
-        move: false,
-      },
-      {
-        id: 7,
-        name: "19世纪佚名画家绘茶叶制作组图通草水彩画",
-        ww: "242px",
-        hh: "175px",
-        pad: true,
-        move: false,
-      },
-      {
-        id: 8,
-        name: "清“宝丰银局”五十两银锭",
-        ww: "163px",
-        hh: "114px",
-        move: false,
-      },
-    ];
-    this.$nextTick(() => {
-      setTimeout(() => {
-        let doms = document.querySelectorAll(".rowinfo");
-        let temp = 0;
-        doms.forEach((v, i) => {
-          if (i === 0) temp = v.getBoundingClientRect().top / 2;
-          this.data[i].moveNum = v.getBoundingClientRect().top - temp - 100;
-        });
-      }, 100);
-    });
+    if (window.lodingGoods) {
+      this.data = [
+        {
+          id: 1,
+          name: "清“乾隆”款珐琅蓝彩十三行通景画瓷碗",
+          ww: "170px",
+          hh: "79px",
+          move: false,
+        },
+        {
+          id: 2,
+          name: "清光绪二十三年广彩十三行四方瓷瓶",
+          ww: "244px",
+          hh: "131px",
+          move: false,
+        },
+        {
+          id: 3,
+          name: "清道光广彩人物故事纹瓷碗",
+          ww: "169px",
+          hh: "80px",
+          move: false,
+        },
+        {
+          id: 4,
+          name: "19世纪镀金人物铜座钟",
+          ww: "132px",
+          hh: "194px",
+          move: false,
+        },
+        {
+          id: 5,
+          name: "19世纪法国铜鎏金配烛台座钟",
+          ww: "167px",
+          hh: "112px",
+          move: false,
+        },
+        {
+          id: 6,
+          name: "19世纪英国皇家定制珐琅彩纹章纹陶茶叶罐",
+          ww: "135px",
+          hh: "191px",
+          move: false,
+        },
+        {
+          id: 7,
+          name: "19世纪佚名画家绘茶叶制作组图通草水彩画",
+          ww: "242px",
+          hh: "175px",
+          pad: true,
+          move: false,
+        },
+        {
+          id: 8,
+          name: "清“宝丰银局”五十两银锭",
+          ww: "163px",
+          hh: "114px",
+          move: false,
+        },
+      ];
+      this.$nextTick(() => {
+        setTimeout(() => {
+          let doms = document.querySelectorAll(".rowinfo");
+          let temp = 0;
+          doms.forEach((v, i) => {
+            if (i === 0) temp = v.getBoundingClientRect().top / 2;
+            this.data[i].moveNum = v.getBoundingClientRect().top - temp - 100;
+          });
+        }, 100);
+      });
+    }
   }, //如果页面有keep-alive缓存功能，这个函数会触发
 };
 </script>

src/components/son3.vue

@@ -83,6 +83,7 @@ export default {
   //方法集合
   methods: {
     toInfo(id) {
+      window.lodingGoods = false;
       this.$router.push(`/info/${id}`);
     },
   },
@@ -97,97 +98,99 @@ export default {
   beforeDestroy() {}, //生命周期 - 销毁之前
   destroyed() {}, //生命周期 - 销毁完成
   activated() {
-    this.data = [
-      {
-        id: 9,
-        name: "鸦片趸船",
-        ww: "231px",
-        hh: "143px",
-        pad: true,
-        move: false,
-      },
-      {
-        id: 10,
-        name: "飞剪船模型",
-        ww: "161px",
-        hh: "188px",
-        pad: true,
-        move: false,
-      },
-      {
-        id: 11,
-        name: "1864年印度到香港的鸦片保险单",
-        ww: "194px",
-        hh: "175px",
-        move: false,
-      },
-      {
-        id: 12,
-        name: "1860年印度比尔把鸦片运送至香港的运单",
-        ww: "200px",
-        hh: "174px",
-        move: false,
-      },
-      {
-        id: 13,
-        name: "1854年广州和香港的鸦片售卖报告",
-        ww: "194px",
-        hh: "305px",
-        move: false,
-      },
-      {
-        id: 14,
-        name: "1865年香港鸦片交换支票",
-        ww: "200px",
-        hh: "181px",
-        move: false,
-      },
-      {
-        id: 15,
-        name: "1855年印度比尔把鸦片运至中国的运单",
-        ww: "194px",
-        hh: "207px",
-        move: false,
-      },
-      {
-        id: 16,
-        name: "1856年印度比尔把鸦片运至中国WOOSUNG的运单",
-        ww: "200px",
-        hh: "181px",
-        move: false,
-      },
-      {
-        id: 17,
-        name: "1858年香港鸦片交换支票",
-        ww: "193px",
-        hh: "188px",
-        move: false,
-      },
-      {
-        id: 18,
-        name: "1859年印度比尔把鸦片运至香港的运单",
-        ww: "195px",
-        hh: "307px",
-        move: false,
-      },
-      {
-        id: 19,
-        name: "1855年从印度运送鸦片到香港的保险单",
-        ww: "194px",
-        hh: "300px",
-        move: false,
-      },
-    ];
-    this.$nextTick(() => {
-      setTimeout(() => {
-        let doms = document.querySelectorAll(".rowinfo");
-        let temp = 0;
-        doms.forEach((v, i) => {
-          if (i === 0) temp = v.getBoundingClientRect().top / 2;
-          this.data[i].moveNum = v.getBoundingClientRect().top - temp - 100;
-        });
-      }, 100);
-    });
+    if (window.lodingGoods) {
+      this.data = [
+        {
+          id: 9,
+          name: "鸦片趸船",
+          ww: "231px",
+          hh: "143px",
+          pad: true,
+          move: false,
+        },
+        {
+          id: 10,
+          name: "飞剪船模型",
+          ww: "161px",
+          hh: "188px",
+          pad: true,
+          move: false,
+        },
+        {
+          id: 11,
+          name: "1864年印度到香港的鸦片保险单",
+          ww: "194px",
+          hh: "175px",
+          move: false,
+        },
+        {
+          id: 12,
+          name: "1860年印度比尔把鸦片运送至香港的运单",
+          ww: "200px",
+          hh: "174px",
+          move: false,
+        },
+        {
+          id: 13,
+          name: "1854年广州和香港的鸦片售卖报告",
+          ww: "194px",
+          hh: "305px",
+          move: false,
+        },
+        {
+          id: 14,
+          name: "1865年香港鸦片交换支票",
+          ww: "200px",
+          hh: "181px",
+          move: false,
+        },
+        {
+          id: 15,
+          name: "1855年印度比尔把鸦片运至中国的运单",
+          ww: "194px",
+          hh: "207px",
+          move: false,
+        },
+        {
+          id: 16,
+          name: "1856年印度比尔把鸦片运至中国WOOSUNG的运单",
+          ww: "200px",
+          hh: "181px",
+          move: false,
+        },
+        {
+          id: 17,
+          name: "1858年香港鸦片交换支票",
+          ww: "193px",
+          hh: "188px",
+          move: false,
+        },
+        {
+          id: 18,
+          name: "1859年印度比尔把鸦片运至香港的运单",
+          ww: "195px",
+          hh: "307px",
+          move: false,
+        },
+        {
+          id: 19,
+          name: "1855年从印度运送鸦片到香港的保险单",
+          ww: "194px",
+          hh: "300px",
+          move: false,
+        },
+      ];
+      this.$nextTick(() => {
+        setTimeout(() => {
+          let doms = document.querySelectorAll(".rowinfo");
+          let temp = 0;
+          doms.forEach((v, i) => {
+            if (i === 0) temp = v.getBoundingClientRect().top / 2;
+            this.data[i].moveNum = v.getBoundingClientRect().top - temp - 100;
+          });
+        }, 100);
+      });
+    }
   }, //如果页面有keep-alive缓存功能，这个函数会触发
 };
 </script>

src/components/son4.vue

@@ -77,6 +77,7 @@ export default {
   //方法集合
   methods: {
     toInfo(id) {
+      window.lodingGoods = false;
       this.$router.push(`/info/${id}`);
     },
   },
@@ -91,56 +92,58 @@ export default {
   beforeDestroy() {}, //生命周期 - 销毁之前
   destroyed() {}, //生命周期 - 销毁完成
   activated() {
-    this.data = [
-      {
-        id: 20,
-        name: "罂粟壳",
-        ww: "166px",
-        hh: "90px",
-        pad: true,
-        move: false,
-      },
-      {
-        id: 21,
-        name: "东印度公司刀剑",
-        ww: "218px",
-        hh: "311px",
-        pad: true,
-        move: false,
-      },
-      {
-        id: 22,
-        name: "东印度旗帜",
-        ww: "254px",
-        hh: "161px",
-        pad: true,
-        move: false,
-      },
-      {
-        id: 23,
-        name: "1810年东印度公司伦敦总部印刷铜版画",
-        ww: "232px",
-        hh: "169px",
-        move: false,
-      },
-      {
-        id: 24,
-        name: "1828年东印度公司伦敦总部印刷铜版画 ",
-        ww: "233px",
-        hh: "200px",
-        move: false,
-      },
-    ];
-    this.$nextTick(() => {
-      setTimeout(() => {
-        let doms = document.querySelectorAll(".rowinfo");
-        let temp = 0;
-        doms.forEach((v, i) => {
-          if (i === 0) temp = v.getBoundingClientRect().top / 2;
-          this.data[i].moveNum = v.getBoundingClientRect().top - temp - 100;
-        });
-      }, 100);
-    });
+    if (window.lodingGoods) {
+      this.data = [
+        {
+          id: 20,
+          name: "罂粟壳",
+          ww: "166px",
+          hh: "90px",
+          pad: true,
+          move: false,
+        },
+        {
+          id: 21,
+          name: "东印度公司刀剑",
+          ww: "218px",
+          hh: "311px",
+          pad: true,
+          move: false,
+        },
+        {
+          id: 22,
+          name: "东印度旗帜",
+          ww: "254px",
+          hh: "161px",
+          pad: true,
+          move: false,
+        },
+        {
+          id: 23,
+          name: "1810年东印度公司伦敦总部印刷铜版画",
+          ww: "232px",
+          hh: "169px",
+          move: false,
+        },
+        {
+          id: 24,
+          name: "1828年东印度公司伦敦总部印刷铜版画 ",
+          ww: "233px",
+          hh: "200px",
+          move: false,
+        },
+      ];
+      this.$nextTick(() => {
+        setTimeout(() => {
+          let doms = document.querySelectorAll(".rowinfo");
+          let temp = 0;
+          doms.forEach((v, i) => {
+            if (i === 0) temp = v.getBoundingClientRect().top / 2;
+            this.data[i].moveNum = v.getBoundingClientRect().top - temp - 100;
+          });
+        }, 100);
+      });
+    }
   }, //如果页面有keep-alive缓存功能，这个函数会触发
 };
 </script>

src/components/son5.vue

@@ -54,6 +54,7 @@ export default {
   //方法集合
   methods: {
     toInfo(id) {
+      window.lodingGoods = false;
       this.$router.push(`/info/${id}`);
     },
   },
@@ -68,108 +69,110 @@ export default {
   beforeDestroy() {}, //生命周期 - 销毁之前
   destroyed() {}, //生命周期 - 销毁完成
   activated() {
-    this.data = [
-      {
-        id: 25,
-        name: "清鹤顶骨嘴犀角杆竹节形鸦片烟枪",
-        ww: "200px",
-        hh: "43px",
-        move: false,
-      },
-      {
-        id: 26,
-        name: "清玉嘴竹杆包铜“光庭写”款瓷斗鸦片烟枪",
-        ww: "184px",
-        hh: "60px",
-        move: false,
-      },
-      {
-        id: 27,
-        name: "清玉嘴铜杆“庚午夏”款瓷斗鸦片烟枪",
-        ww: "207px",
-        hh: "45px",
-        move: false,
-      },
-      {
-        id: 28,
-        name: "清玻璃罩铜底座青花菊花纹瓷鸦片烟灯",
-        ww: "118px",
-        hh: "237px",
-        move: false,
-      },
-      {
-        id: 29,
-        name: "清玻璃罩富贵寿考花鸟纹铜鸦片烟灯",
-        ww: "128px",
-        hh: "231px",
-        move: false,
-      },
-      {
-        id: 30,
-        name: "19世纪掐丝洋花卉纹铜胎珐琅木底盖鸦片烟具",
-        ww: "179px",
-        hh: "107px",
-        move: false,
-      },
-      {
-        id: 31,
-        name: "清代铜鸦片烟具",
-        ww: "152px",
-        hh: "120px",
-        move: false,
-      },
-      {
-        id: 32,
-        name: "清佚名画家绘吸食鸦片图通草纸水彩画",
-        ww: "233px",
-        hh: "183px",
-        pad: true,
-        move: false,
-      },
-      {
-        id: 33,
-        name: "19世纪吸食鸦片的中国人印刷铜版画",
-        ww: "237px",
-        hh: "208px",
-        pad: true,
-        move: false,
-      },
-      {
-        id: 34,
-        name: "1850年吸食鸦片的中国人彩色印刷铜版画",
-        ww: "251px",
-        hh: "226px",
-        pad: true,
-        move: false,
-      },
-      {
-        id: 35,
-        name: "19世纪鸦片危害漫画",
-        ww: "227px",
-        hh: "316px",
-        pad: true,
-        centen: true,
-        move: false,
-      },
-      {
-        id: 36,
-        name: "1922年陈乐琴愁城十二景四条屏",
-        ww: "100%",
-        hh: "auto",
-        pad: true,
-        move: false,
-      },
-    ];
-    this.$nextTick(() => {
-      setTimeout(() => {
-        let doms = document.querySelectorAll(".rowinfo");
-        let temp = 0;
-        doms.forEach((v, i) => {
-          if (i === 0) temp = v.getBoundingClientRect().top / 2;
-          this.data[i].moveNum = v.getBoundingClientRect().top - temp - 100;
-        });
-      }, 100);
-    });
+    if (window.lodingGoods) {
+      this.data = [
+        {
+          id: 25,
+          name: "清鹤顶骨嘴犀角杆竹节形鸦片烟枪",
+          ww: "200px",
+          hh: "43px",
+          move: false,
+        },
+        {
+          id: 26,
+          name: "清玉嘴竹杆包铜“光庭写”款瓷斗鸦片烟枪",
+          ww: "184px",
+          hh: "60px",
+          move: false,
+        },
+        {
+          id: 27,
+          name: "清玉嘴铜杆“庚午夏”款瓷斗鸦片烟枪",
+          ww: "207px",
+          hh: "45px",
+          move: false,
+        },
+        {
+          id: 28,
+          name: "清玻璃罩铜底座青花菊花纹瓷鸦片烟灯",
+          ww: "118px",
+          hh: "237px",
+          move: false,
+        },
+        {
+          id: 29,
+          name: "清玻璃罩富贵寿考花鸟纹铜鸦片烟灯",
+          ww: "128px",
+          hh: "231px",
+          move: false,
+        },
+        {
+          id: 30,
+          name: "19世纪掐丝洋花卉纹铜胎珐琅木底盖鸦片烟具",
+          ww: "179px",
+          hh: "107px",
+          move: false,
+        },
+        {
+          id: 31,
+          name: "清代铜鸦片烟具",
+          ww: "152px",
+          hh: "120px",
+          move: false,
+        },
+        {
+          id: 32,
+          name: "清佚名画家绘吸食鸦片图通草纸水彩画",
+          ww: "233px",
+          hh: "183px",
+          pad: true,
+          move: false,
+        },
+        {
+          id: 33,
+          name: "19世纪吸食鸦片的中国人印刷铜版画",
+          ww: "237px",
+          hh: "208px",
+          pad: true,
+          move: false,
+        },
+        {
+          id: 34,
+          name: "1850年吸食鸦片的中国人彩色印刷铜版画",
+          ww: "251px",
+          hh: "226px",
+          pad: true,
+          move: false,
+        },
+        {
+          id: 35,
+          name: "19世纪鸦片危害漫画",
+          ww: "227px",
+          hh: "316px",
+          pad: true,
+          centen: true,
+          move: false,
+        },
+        {
+          id: 36,
+          name: "1922年陈乐琴愁城十二景四条屏",
+          ww: "100%",
+          hh: "auto",
+          pad: true,
+          move: false,
+        },
+      ];
+      this.$nextTick(() => {
+        setTimeout(() => {
+          let doms = document.querySelectorAll(".rowinfo");
+          let temp = 0;
+          doms.forEach((v, i) => {
+            if (i === 0) temp = v.getBoundingClientRect().top / 2;
+            this.data[i].moveNum = v.getBoundingClientRect().top - temp - 100;
+          });
+        }, 100);
+      });
+    }
   }, //如果页面有keep-alive缓存功能，这个函数会触发
 };
 </script>

src/components/son6.vue

@@ -106,6 +106,7 @@ export default {
   //方法集合
   methods: {
     toInfo(id) {
+      window.lodingGoods = false;
       this.$router.push(`/info/${id}`);
     },
   },
@@ -120,25 +121,27 @@ export default {
   beforeDestroy() {}, //生命周期 - 销毁之前
   destroyed() {}, //生命周期 - 销毁完成
   activated() {
-    this.data = [
-      {
-        id: 37,
-        name: "林则徐画像",
-        ww: "273px",
-        hh: "322px",
-        move: false,
-      },
-    ];
-    this.$nextTick(() => {
-      setTimeout(() => {
-        let doms = document.querySelectorAll(".rowinfo");
-        let temp = 0;
-        doms.forEach((v, i) => {
-          if (i === 0) temp = v.getBoundingClientRect().top / 2;
-          this.data[i].moveNum = v.getBoundingClientRect().top - temp - 100;
-        });
-      }, 100);
-    });
+    if (window.lodingGoods) {
+      this.data = [
+        {
+          id: 37,
+          name: "林则徐画像",
+          ww: "273px",
+          hh: "322px",
+          move: false,
+        },
+      ];
+      this.$nextTick(() => {
+        setTimeout(() => {
+          let doms = document.querySelectorAll(".rowinfo");
+          let temp = 0;
+          doms.forEach((v, i) => {
+            if (i === 0) temp = v.getBoundingClientRect().top / 2;
+            this.data[i].moveNum = v.getBoundingClientRect().top - temp - 100;
+          });
+        }, 100);
+      });
+    }
   }, //如果页面有keep-alive缓存功能，这个函数会触发
 };
 </script>

src/components/son7.vue

@@ -77,6 +77,7 @@ export default {
   //方法集合
   methods: {
     toInfo(id) {
+      window.lodingGoods = false;
       this.$router.push(`/info/${id}`);
     },
   },
@@ -91,32 +92,34 @@ export default {
   beforeDestroy() {}, //生命周期 - 销毁之前
   destroyed() {}, //生命周期 - 销毁完成
   activated() {
-    this.data = [
-      {
-        id: 38,
-        name: "销烟池木桩",
-        ww: "267px",
-        hh: "149px",
-        move: false,
-      },
-      {
-        id: 39,
-        name: "（油画）销烟壮举",
-        ww: "257px",
-        hh: "190px",
-        move: false,
-      },
-    ];
-    this.$nextTick(() => {
-      setTimeout(() => {
-        let doms = document.querySelectorAll(".rowinfo");
-        let temp = 0;
-        doms.forEach((v, i) => {
-          if (i === 0) temp = v.getBoundingClientRect().top / 2;
-          this.data[i].moveNum = v.getBoundingClientRect().top - temp - 100;
-        });
-      }, 100);
-    });
+    if (window.lodingGoods) {
+      this.data = [
+        {
+          id: 38,
+          name: "销烟池木桩",
+          ww: "267px",
+          hh: "149px",
+          move: false,
+        },
+        {
+          id: 39,
+          name: "（油画）销烟壮举",
+          ww: "257px",
+          hh: "190px",
+          move: false,
+        },
+      ];
+      this.$nextTick(() => {
+        setTimeout(() => {
+          let doms = document.querySelectorAll(".rowinfo");
+          let temp = 0;
+          doms.forEach((v, i) => {
+            if (i === 0) temp = v.getBoundingClientRect().top / 2;
+            this.data[i].moveNum = v.getBoundingClientRect().top - temp - 100;
+          });
+        }, 100);
+      });
+    }
   }, //如果页面有keep-alive缓存功能，这个函数会触发
 };
 </script>

src/views/Home.vue

@@ -82,6 +82,8 @@ export default {
   watch: {
     topImgInd() {
       window.scrollTo({ top: 0 });
+      // 给window一个变量，控制文物是否重新执行动画
+      window.lodingGoods = true
     },
   },
   //方法集合
@@ -223,4 +225,10 @@ export default {
 .last {
   padding-bottom: 80px;
 }
+@media screen and (min-width: 500px) {
+ .Home .menu{
+  right: 50%;
+  transform: translateX(250px);
+ }
+}
 </style>