动画效果

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

+<template>
+  <div class="card-6-wrapper">
+    <Logo imgType="2"></Logo>
+    <div class="bgi-wrapper">
+      <img class="bg ani"
+      swiper-animate-effect="fadeInUp"
+      swiper-animate-duration="1.5s"
+      swiper-animate-delay="0"
+      src="~@/images/annual/share-back.png" alt />
+      <!-- <img class="" src="~@/images/annual/qr-code.png" alt="" /> -->
+    </div>
+    <section
+      class="ani detail"
+      swiper-animate-effect="fadeInUp"
+      swiper-animate-duration="1.5s"
+      swiper-animate-delay="1.5s"
+    >
+      <p class="title">2020年度学习报告</p>
+      <p v-if="anualData.doctorName">
+        尊敬的
+        <span class="cg2 b">{{anualData.doctorName}}</span> 医生
+      </p>
+      <p v-if="!anualData.doctorName">尊敬的医生</p>
+      <p>
+        {{anualData.yearType}}年您学习了
+        <span class="cg2 b">{{anualData.learnCourseNum}}</span> 门课程，时长
+        <span class="cg2 b">{{anualData.loginTotalTimeH}}</span> 小时
+      </p>
+      <p>
+        获得了
+        <span class="cg2 b">{{anualData.creditNum | yLocalString}}</span> 个云鹊豆
+      </p>
+      <p v-if="anualData.learnMoreCourseLabelName">
+        最关注的知识类型是：
+        <span class="cg2 b">{{anualData.learnMoreCourseLabelName}}</span>
+      </p>
+      <p class="mt-20">{{anualData.yearType}}年极不平凡，回顾这一年也极为难得，这一年感谢有您。</p>
+      <p>希望您的2021年也有云鹊医的陪伴，因为云鹊医的参与，生活变得平凡也珍贵。</p>
+      <p class="mt-20">
+        ——已陪伴您
+        <span class="cg2 b">{{anualData.registerDays}}</span> 天的云鹊医
+      </p>
+    </section>
+    <div class="qr-wrapper">
+      <img class="ani"
+        swiper-animate-effect="bounceIn"
+        swiper-animate-duration="1s"
+        swiper-animate-delay="3s"
+      :src="anualData.qrCodeUrl" alt />
+    </div>
+    <section v-if="isHide && type == 1" class="bottom">
+      <img @click="save" src="~@/images/annual/save-btn.png" alt />
+      <img @click="share" src="~@/images/annual/share-btn.png" alt />
+    </section>
+  </div>
+</template>
+<script>
+import Logo from "@/components/annual-summary/logo";
+import { getWebPageUrl } from "@/utils";
+import { Progress, Toast } from "vant";
+export default {
+  components: {
+    Logo
+  },
+  props: {
+    type: {
+      type: Number | String,
+      default: 1 // 1: 站内;  2: 站外
+    },
+    anualData: {
+      type: Object,
+      default: () => {
+        return {};
+      }
+    },
+    isHide: {
+      type: Boolean,
+      default: true
+    },
+    appVersion: {
+      type: Number | String,
+      default: 300 // 1: 站内;  2: 站外
+    }
+  },
+  data() {
+    return {
+      // isHide: true,
+    };
+  },
+
+  created() {
+  },
+
+  methods: {
+    // 保存图片
+    save() {
+      if(this.appVersion < 359) {
+          Toast('请下载新版本APP保存页面截图');
+      } else {
+        this.$emit("save");
+      }
+    },
+
+    // 分享按钮
+    share() {
+      this.$emit("share");
+    }
+  }
+};
+</script>
+<style lang="less" scoped>
+@import "../../style/as-common.less";
+.card-6-wrapper {
+  position: relative;
+  top: 0;
+  left: 0;
+  height: 100vh;
+  font-size: 16px;
+  color: #3b3b3b;
+  background: #88cb9d;
+  .bgi-wrapper {
+    position: absolute;
+    top: 83px;
+    left: 0;
+    z-index: 1;
+    img {
+      display: block;
+      width: 100%;
+      height: 495px;
+    }
+  }
+  .detail {
+    position: relative;
+    top: 0;
+    left: 0;
+    z-index: 2;
+    color: #333;
+    margin: 20px 30px;
+    .title {
+      font-size: 18px;
+      font-weight: 700;
+      text-align: center;
+      margin: 25px 0 20px;
+      color: #121212;
+    }
+    p {
+      line-height: 1.45;
+    }
+  }
+  .qr-wrapper {
+    width: 100%;
+    position: absolute;
+    top: 420px;
+    left: 0;
+    z-index: 10;
+    text-align: center;
+    img {
+      margin-top: 70px;
+      width: 70px;
+      height: 70px;
+    }
+  }
+  .bottom {
+    width: 100%;
+    position: absolute;
+    bottom: 25px;
+    left: 0;
+    z-index: 3;
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: center;
+    img {
+      display: inline-block;
+      margin: 10px;
+      width: 143px;
+      height: 39px;
+    }
+    .btn-l {
+      margin: 5px 0;
+      width: 340px;
+      height: 50px;
+    }
+  }
+}
+</style>
\ No newline at end of file

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

@@ -2,13 +2,14 @@
   <div class="card-6-wrapper">
     <Logo imgType="2"></Logo>
     <div class="bgi-wrapper">
-      <img class="bg ani"
+      <img class=" bg"
       swiper-animate-effect="fadeInUp"
       swiper-animate-duration="1.5s"
       swiper-animate-delay="0"
-      src="~@/images/annual/share-back.png" alt />
+      src="~@/images/annual/env-back.png" alt />
       <!-- <img class="" src="~@/images/annual/qr-code.png" alt="" /> -->
     </div>
+    <div class="mask"></div>
     <section
       class="ani detail"
       swiper-animate-effect="fadeInUp"
@@ -42,7 +43,7 @@
       </p>
     </section>
     <div class="qr-wrapper">
-      <img class="ani"
+      <img class=" "
         swiper-animate-effect="bounceIn"
         swiper-animate-duration="1s"
         swiper-animate-delay="3s"
@@ -120,27 +121,29 @@ export default {
   background: #88cb9d;
   .bgi-wrapper {
     position: absolute;
-    top: 83px;
+    top: 356px;
     left: 0;
-    z-index: 1;
+    z-index: 3;
     img {
       display: block;
       width: 100%;
-      height: 495px;
+      height: 228px;
     }
   }
   .detail {
     position: relative;
-    top: 0;
+    top: 5px;
     left: 0;
     z-index: 2;
     color: #333;
-    margin: 20px 30px;
+    padding: 5px 10px 100px;
+    margin: 0px 20px;
+    background: white;
     .title {
       font-size: 18px;
       font-weight: 700;
       text-align: center;
-      margin: 25px 0 20px;
+      margin: 10px 0 20px;
       color: #121212;
     }
     p {

src/views/annual-summary/detail.vue

@@ -5,7 +5,7 @@
       <img src="~@/images/annual/right-2.png" alt />
     </div>
     <div class="swiper-wrapper">
-      <div v-if="!anualData.haveFlag" class="swiper-slide">
+      <!-- <div v-if="!anualData.haveFlag" class="swiper-slide">
         <Card1No :anualData="anualData"></Card1No>
       </div>
       <div v-if="anualData.haveFlag" class="swiper-slide">
@@ -28,7 +28,8 @@
       </div>
       <div v-if="anualData.haveFlag" class="swiper-slide">
         <Card5 :anualData="anualData"></Card5>
-      </div>
+      </div> -->
+      
       <div v-if="anualData.haveFlag" class="swiper-slide">
         <Card6 :anualData="anualData" :isHide="isHide" :appVersion="appVersion" @save="savePage2Picture" @share="share"></Card6>
       </div>
@@ -238,7 +239,7 @@ export default {
     // 获取数据
     initData() {
       let param = {
-        token: this.token || "AF5DB93C479A4D408DBB4A4960545A35",
+        token: this.token || "1C6B1E90B51248AEA7F28C118828074B",
         yearType: "2020",
         setEntry: true
       };