Merge branch 'master' of http://112.124.100.131/happyinsurance_eco/ebiz-sunful-eco-web

src/generatedComponents/animateCounter.vue

@@ -1,5 +1,5 @@
 <template>
-  <span :id="id"></span>
+  <span :id="id" ref="counterElement"></span>
 </template>
 
 <script>
@@ -17,12 +17,20 @@ export default {
     duration: {
       type: Number,
       default: 1000
+    },
+    decimals: {
+      type: Number,
+      default: null // 控制小数位数
     }
   },
   data() {
     return {
-      id: Math.random().toString(36),
+      id: Math.random()
-      decimalPlaces: 0
+        .toString(36)
+        .substr(2, 8), // 更短的随机 ID
+      decimalPlaces: 0,
+      hasAnimated: false, // 防止重复动画
+      observer: null
     }
   },
   methods: {
@@ -45,19 +53,43 @@ export default {
 
         if (progress < 1) {
           requestAnimationFrame(step)
+        } else {
+          this.hasAnimated = true // 动画完成标记
         }
       }
 
       requestAnimationFrame(step)
+    },
+
+    setupIntersectionObserver() {
+      this.observer = new IntersectionObserver(
+        entries => {
+          entries.forEach(entry => {
+            if (entry.isIntersecting && !this.hasAnimated) {
+              // 进入可视区，并且尚未执行过动画
+              this.observer.unobserve(this.$refs.counterElement) // 只监听一次
+
+              this.$nextTick(() => {
+                // 自动检测或使用指定的小数位数
+                this.decimalPlaces = this.decimals !== null ? this.decimals : (this.end.toString().split('.')[1] || '').length
+
+                this.animateCounter(this.id, this.start, this.end, this.duration, this.decimalPlaces)
+              })
+            }
+          })
+        },
+        { threshold: 0.1 }
+      ) // 当有 10% 进入视口时触发
     }
   },
   mounted() {
-    // 不要用 window.onload，而是直接调用
+    this.setupIntersectionObserver()
-    this.$nextTick(() => {
+    this.observer.observe(this.$refs.counterElement)
-      // 自动获取数字end 的小数点位数
+  },
-      this.decimalPlaces = (String(this.end) + '').split('.')[1] ? (this.end + '').split('.')[1].length : 0
+  beforeUnmount() {
-      this.animateCounter(this.id, this.start, this.end, this.duration, this.decimalPlaces)
+    if (this.observer) {
-    })
+      this.observer.disconnect()
+    }
   }
 }
 </script>

src/views/app/Home.vue

@@ -194,7 +194,7 @@ export default {
       transform: translateZ(0); // 启用 GPU 加速
 
       &.move {
-        transform: translate(690px, 190px) translateZ(0);
+        transform: translate(690px, 220px) translateZ(0);
         /* 原来 left: 1490px; top: 390px; */
       }
     }

src/views/app/homeComponents/bottom-butterfly/index.vue

@@ -70,11 +70,11 @@
         <!--      小鹿-->
         <div class="butterfly-7">
           <div class="positionR">
-            <img :src="mascot2" alt="" class="t7-1" v-if="!open" />
+            <img :src="mascot" alt="" class="t7-1" />
-            <div v-if="open">
+            <!--            <div v-if="open">-->
-              <img :src="mascot" alt="" class="t7-1" />
+            <!--              <img :src="mascot" alt="" class="t7-1" />-->
-              <img src="../../../../assets/images/rs/road/ban.png" alt="" class="t7-ban" />
+            <!--              <img src="../../../../assets/images/rs/road/ban.png" alt="" class="t7-ban" />-->
-            </div>
+            <!--            </div>-->
           </div>
         </div>
       </div>
@@ -89,13 +89,11 @@
 </template>
 <script>
 import mascot from '@/assets/images/new/mascot.png'
-import mascot2 from '@/assets/images/new/mascot2.png'
 export default {
   name: 'index',
   data() {
     return {
-      mascot,
+      mascot
-      mascot2
     }
   },
   props: {
@@ -598,6 +596,7 @@ export default {
 
     .t7-1 {
       width: 100%;
+      z-index: 99;
       transform: translateZ(0);
     }