fix

src/pages/pg1/P1.vue

@@ -2,28 +2,30 @@
   <div class="p1-box">
     <div class="content-left">
       <CircleImg class="main-img" :animate="animate">
-        <img
-          src="/images/pg1/earth.png"
-          alt=""
-        >
+        <img src="/images/pg1/earth.png" alt="" />
       </CircleImg>
     </div>
-    <div class="content-right txt">      
-      <p class="animate__animated animate__fadeInRight" style="animation-delay: 100ms">
-        2014年至今 <br>
-        一朵紫色的小花 <br>
-        在全球<strong>14个国家</strong>被点亮
-      </p>
+    <div class="content-right txt">
+      <div :class="{pulsatebck:animate}">
+        <p
+          class="animate__animated animate__fadeInRight"
+          style="animation-delay: 100ms"
+        >
+          2014年至今 <br />
+          一朵紫色的小花 <br />
+          在全球<strong>14个国家</strong>被点亮
+        </p>
+      </div>
     </div>
   </div>
 </template>
 
 <script setup>
-  import CircleImg from './CircleImg.vue';
-  
-  const props = defineProps({
-    animate: Boolean
-  });
+import CircleImg from "./CircleImg.vue";
+
+const props = defineProps({
+  animate: Boolean,
+});
 </script>
 
 <style lang="less" scoped>
@@ -39,7 +41,6 @@
       position: relative;
       z-index: 10;
     }
-
   }
 
   .content-right {
@@ -52,4 +53,4 @@
     align-items: center;
   }
 }
-</style>
+</style>

src/pages/pg1/P2.vue

@@ -8,12 +8,15 @@
         >
       </CircleImg>
     </div>
-    <div class="content-left txt">      
-      <p class="animate__animated animate__fadeInRight" style="text-align: right; animation-delay: 100ms">
+    <div class="content-left txt">    
+      <div :class="{pulsatebck:animate}">
+        <p class="animate__animated animate__fadeInRight" style="text-align: right; animation-delay: 100ms">
         <strong>近20万枚</strong> <br>
         紫金草徽章 <br>
         佩戴在了人们的心口
       </p>
+      </div>  
+    
     </div>
   </div>
 </template>

src/pages/pg1/P3.vue

@@ -2,27 +2,26 @@
   <div class="p3-box">
     <div class="content-left">
       <CircleImg class="main-img" :animate="animate">
-        <img
-          src="/images/pg1/peace.png"
-          alt=""
-        >
+        <img src="/images/pg1/peace.png" alt="" />
       </CircleImg>
     </div>
-    <div class="content-right txt">      
-      <p class="animate__animated animate__fadeInLeft">
-        在<strong>2亿人</strong>心中 <br>
-        和平愿景被播撒
-      </p>
+    <div class="content-right txt">
+      <div :class="{pulsatebck:animate}">
+        <p class="animate__animated animate__fadeInLeft">
+          在<strong>2亿人</strong>心中 <br />
+          和平愿景被播撒
+        </p>
+      </div>
     </div>
   </div>
 </template>
 
 <script setup>
-  import CircleImg from './CircleImg.vue';
-  
-  const props = defineProps({
-    animate: Boolean
-  });
+import CircleImg from "./CircleImg.vue";
+
+const props = defineProps({
+  animate: Boolean,
+});
 </script>
 
 <style lang="less" scoped>
@@ -50,4 +49,4 @@
     align-items: center;
   }
 }
-</style>
+</style>

src/pages/pg1/index.vue

@@ -112,5 +112,51 @@
     width: 100vw;
     z-index: 10;
   }
-
 </style>
+<style lang="less">
+
+.pulsatebck {
+	-webkit-animation: pulsate-bck 1.5s ease-in-out 0.5s infinite both;
+	        animation: pulsate-bck 1.5s ease-in-out 0.5s infinite both;
+}
+  /* ----------------------------------------------
+ * Generated by Animista on 2022-12-8 19:45:27
+ * Licensed under FreeBSD License.
+ * See http://animista.net/license for more info. 
+ * w: http://animista.net, t: @cssanimista
+ * ---------------------------------------------- */
+
+/**
+ * ----------------------------------------
+ * animation pulsate-bck
+ * ----------------------------------------
+ */
+@-webkit-keyframes pulsate-bck {
+  0% {
+    -webkit-transform: scale(1);
+            transform: scale(1);
+  }
+  50% {
+    -webkit-transform: scale(0.9);
+            transform: scale(0.9);
+  }
+  100% {
+    -webkit-transform: scale(1);
+            transform: scale(1);
+  }
+}
+@keyframes pulsate-bck {
+  0% {
+    -webkit-transform: scale(1);
+            transform: scale(1);
+  }
+  50% {
+    -webkit-transform: scale(0.9);
+            transform: scale(0.9);
+  }
+  100% {
+    -webkit-transform: scale(1);
+            transform: scale(1);
+  }
+}
+</style>