feats

src/components/FireFlies/fireflies.js

   var drawer = this.draw.bind(this);
 
   this.redraw();
-  window.requestAnimationFrame(drawer);
+  
+  var reqId = window.requestAnimationFrame(drawer);
+  return function () {
+    console.log('------cancelAnimationFrame----123')
+    cancelAnimationFrame(reqId);
+  }
 }
 
 Animation.prototype.redraw = function () {

src/components/FireFlies/index.vue

 
 export default {
   name: 'FireFlies',
+  data() {
+    return {
+      animation: undefined,
+      deAnimation: undefined,
+    }
+  },
   mounted() {
     this.$nextTick(() => {
-      new Animation(this.$el, {
+      this.animation = new Animation(this.$el, {
         count: 20,
         color: 'rgba(236, 196, 94, 1)',
         speed: 0.7,
         radius: 3
-      }).draw();
+      })
+      const cancelDraw = this.animation.draw();
+
+      this.deAnimation = () => {
+        cancelDraw();
+        this.animation = undefined;
+      }
     })
+  },
+  beforeDestroy() {
+    if (this.deAnimation) {
+      this.deAnimation()
+    }
   }
 }
 </script>

src/components/Modal.vue

   <div class="modal-wrapper" v-show="show">
     <div class="modal" :style="modalStyle" @click.stop="handleMaskClick">
       <fire-flies v-if="showFireflies"></fire-flies>
-      <div class="back-btn" v-if="showBack" @click.stop="$emit('close')">
+      <div class="modal-action back-btn" v-if="showBack" @click.stop="$emit('close')">
         <img src="~@/assets/buttonImg/backImg.png" alt="">
       </div>
+      <div class="modal-action share-guide" v-if="showShare">
+        <img src="~@/assets/buttonImg/shareText.png" alt="">
+      </div>
+      <div class="modal-action"><slot name="action"></slot></div>
       <div class="modal-body"><slot></slot></div>
-      <slot name="action"></slot>
+
     </div>
 
   </div>
     showFireflies: {
       type: Boolean,
       default: true
-    }
+    },
+    showShare: Boolean
   },
   computed: {
     modalStyle() {
     justify-content: center;
     align-items: center;
 
-    .back-btn {
+    .modal-action {
       position: absolute;
+      z-index: 50;
+    }
+
+    .back-btn {
       top: 4em;
       left: 1.5em;
       width: 4em;
       }
     }
 
+    .share-guide {
+      top: 0.5em;
+      right: 0em;
+      width: 3em;
+      
+      & > img {
+        width: 100%;
+      }
+    }
+
     .modal-body {
       position: relative;
-      z-index: 100;
+      z-index: 20;
     }
   }
 }

src/pages/Honghe.vue

 <template>
   <div class="index-box">
-    <modal :show="true" :show-back="true" >      
-    </modal>
     <bg-music />
     <popup
       :show="showPopup"