自己的动画有问题

src/components/annual-summary/card-1.vue

@@ -14,18 +14,21 @@
           class="ani"
         >{{anualData.doctorName | shortName(5)}}</span>医生
       </p>
-      <p v-if="!anualData.doctorName" class="title">
-        尊敬的医生
-      </p>
-      <article class="shareanimate">
+      <p v-if="!anualData.doctorName" class="title">尊敬的医生</p>
+      <article
+        swiper-animate-effect="fadeInUp"
+        swiper-animate-duration="4s"
+        swiper-animate-delay="0.5s"
+        class="ani"
+      >
         <p style="line-height: 2;">
           我们在一起已经
           <span class="fbig6 cg2">{{anualData.registerDays}}</span> 天啦
         </p>
         <p class="mt-15">
-          <span class="cg2 b">{{parseTime(anualData.registerTime, '{yyyy}')}} </span>年
-          <span class="cg2 b">{{parseTime(anualData.registerTime, '{mm}')}} </span>月
-          <span class="cg2 b">{{parseTime(anualData.registerTime, '{dd}')}} </span>日
+          <span class="cg2 b">{{parseTime(anualData.registerTime, '{yyyy}')}}</span>年
+          <span class="cg2 b">{{parseTime(anualData.registerTime, '{mm}')}}</span>月
+          <span class="cg2 b">{{parseTime(anualData.registerTime, '{dd}')}}</span>日
         </p>
         <p>第一次遇见您</p>
         <p v-show="anualData.firstCourseName" class="mt-20">
@@ -39,7 +42,7 @@
 </template>
 <script>
 import Logo from "@/components/annual-summary/logo";
-import { parseTime } from "@/utils"
+import { parseTime } from "@/utils";
 export default {
   components: {
     Logo
@@ -56,7 +59,7 @@ export default {
     parseTime(value, format) {
       return parseTime(value, format);
     }
-  },
+  }
 };
 </script>
 <style lang="less" scoped>