动画效果

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

@@ -8,16 +8,16 @@
       <p v-if="anualData.doctorName" class="title">
         尊敬的
         <span
-          swiper-animate-effect="fadeInUp"
-          swiper-animate-duration="4s"
-          swiper-animate-delay="0.5s"
+          swiper-animate-effect="fadeIn"
+          swiper-animate-duration="2.5s"
+          swiper-animate-delay="0s"
           class="ani"
         >{{anualData.doctorName | shortName(5)}}</span>医生
       </p>
       <p v-if="!anualData.doctorName" class="title">尊敬的医生</p>
       <article
-        swiper-animate-effect="fadeInUp"
-        swiper-animate-duration="4s"
+        swiper-animate-effect="fadeInRight"
+        swiper-animate-duration="2s"
         swiper-animate-delay="0.5s"
         class="ani"
       >

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

@@ -4,15 +4,14 @@
     <div class="bgi-wrapper">
       <img src="~@/images/annual/page-2-back.png" alt />
     </div>
-    <section class="detail">
+    <section class="ani detail" swiper-animate-effect="fadeInRight"
+        swiper-animate-duration="1.5s"
+        swiper-animate-delay="0"
+        >
       <div id="detail-content">
         <p>{{anualData.yearType}}年，您一共学习了</p>
         <p class="mt-10">
-          <span
-            class="ani fbig6 cg2"
-            swiper-animate-effect="fadeOn"
-            swiper-animate-duration="4s"
-            swiper-animate-delay="0s"
+          <span class="fbig6 cg2"
           >{{anualData.loginTotalTimeM}}</span> 分钟
         </p>
         <p v-show="anualData.learnCourseNum">

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

@@ -2,7 +2,9 @@
   <div class="card-3-wrapper">
     <Logo></Logo>
     <div class="bgi-wrapper"><img src="~@/images/annual/page-3-back.png" alt="" /></div>
-    <section class="detail">
+    <section class="ani detail" swiper-animate-effect="fadeInRight"
+        swiper-animate-duration="1.5s"
+        swiper-animate-delay="0">
       <p>{{anualData.yearType}}年，您通过使用</p>
       <p class="mt-10 lh-25"><span class="fbig6 cg2">找药工具</span></p>
       <p class="mt-5">开了 <span class="cg2 b">{{anualData.orderNum}}</span> 笔订单</p>

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

 <template>
   <div class="card-4-wrapper" :class="{'ysl': type == 1, 'zqc': type == 2, 'no': type == 3}">
     <Logo imgType="2"></Logo>
-    <section class="detail">
+    <section class="ani detail" swiper-animate-effect="fadeInRight"
+        swiper-animate-duration="1.5s"
+        swiper-animate-delay="0">
       <p v-show="title">
         <span class="fbig6 cw">{{title}}</span>
       </p>

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

@@ -5,7 +5,9 @@
       <img v-show="type == 1" src="~@/images/annual/yqd-back.png" alt="" />
       <img v-show="type == 2" src="~@/images/annual/no-yqd-back.png" alt="" />
     </div>
-    <section v-show="type == 1" class="detail">
+    <section v-show="type == 1" class="ani detail" swiper-animate-effect="fadeInRight"
+        swiper-animate-duration="1.5s"
+        swiper-animate-delay="0">
       <p>这一年</p>
       <p class="mg-30">您获得了 <span class="num">{{anualData.creditNum | yLocalString}}</span> 个云鹊豆</p>
       <p>在勤奋学习的同时，还积极参与活动，是收获颇丰的一年</p>

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

@@ -5,7 +5,9 @@
       <img class="bg" src="~@/images/annual/share-back.png" alt />
       <!-- <img class="" src="~@/images/annual/qr-code.png" alt="" /> -->
     </div>
-    <section class="detail">
+    <section class="ani detail" swiper-animate-effect="fadeInUp"
+        swiper-animate-duration="1.5s"
+        swiper-animate-delay="0">
       <p class="title">2020年度学习报告</p>
       <p v-if="anualData.doctorName">
         尊敬的

src/views/annual-summary/detail.vue

@@ -124,7 +124,7 @@ export default {
     // 获取数据
     initData() {
       let param = {
-        token: this.token || "2B064C21B9F14796B537E52C7DC1468C",
+        token: this.token || "1B089133AE6D4C0F807BD59B3E8F7503",
         yearType: "2020",
         setEntry: true
       };