做动画前

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

@@ -24,8 +24,7 @@
         <span class="cg2 b">{{anualData.creditNum | yLocalString}}</span> 个云鹊豆
       </p>
       <p v-if="anualData.learnMoreCourseLabelName">
-        最关注的知识类型是：
-        <span class="cg2 b">{{anualData.learnMoreCourseLabelName}}</span>
+        最关注的知识类型是：<span class="cg2 b">{{anualData.learnMoreCourseLabelName}}</span>
       </p>
       <p class="mt-20">{{anualData.yearType}}年极不平凡，回顾这一年也极为难得，这一年感谢有你。</p>
       <p>希望你的2021年也有云鹊医的陪伴，因为云鹊医的参与，生活变得平凡也珍贵。</p>
@@ -41,22 +40,16 @@
       <img @click="save" src="~@/images/annual/save-btn.png" alt />
       <img @click="share" src="~@/images/annual/share-btn.png" alt />
     </section>
-    <section v-if="type == 2" class="bottom">
-      <!-- <img @click="callApp" class="btn-l" src="~@/images/annual/share-btn-l.png" alt /> -->
-      <WxOpenCommon :url="openPath" ></WxOpenCommon>
-    </section>
   </div>
 </template>
 <script>
 import Logo from "@/components/annual-summary/logo";
-import WxOpenCommon from '@/components/wx-open';
 import {
   getWebPageUrl
 } from "@/utils"
 export default {
   components: {
     Logo,
-    WxOpenCommon
   },
   props: {
     type: {

src/views/annual-summary/share.vue

 <template>
   <div class="as-share-wrapper">
-    <Card6 type="2" :anualData="anualData" ></Card6>
+    <div class="card-wrapper">
+      <!-- <Logo imgType="2"></Logo> -->
+      <div class="bgi-wrapper">
+        <img class="bg" src="~@/images/annual/share-back.png" alt />
+        <!-- <img class="" src="~@/images/annual/qr-code.png" alt="" /> -->
+      </div>
+      <section class="detail">
+        <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 src="~@/images/annual/qr-code.png" alt />
+      </div>
+      <section class="bottom">
+        <WxOpenCommon :url="shareUrl" ></WxOpenCommon>
+      </section>
+    </div>
     <Loading v-show="showLoading" />
   </div>
 </template>
 <script>
 import Loading from "@/components/common/common-loading";
-import Card6 from "@/components/annual-summary/card-6";
-import {
-  getWebPageUrl
-} from "@/utils"
+// import Card6 from "@/components/annual-summary/card-6";
+import WxOpenCommon from '@/components/wx-open';
+import { getWebPageUrl } from "@/utils";
 export default {
   components: {
-    Card6,
-    Loading
+    // Card6,
+    Loading,
+    WxOpenCommon
   },
   data() {
     return {
-      uuid: '',
-      shareUrl: '',
+      uuid: "",
+      shareUrl: "",
       showLoading: false,
-      anualData: {
-
-      }
-    }
+      anualData: {}
+    };
   },
   created() {
     let href = location.href;
@@ -47,14 +83,13 @@ export default {
       action: "ACTION_WEB_ENTER",
       component_tag: `561#0#${this.uuid}`
     });
-
   },
 
   methods: {
     // 获取数据
     initData() {
       let param = {
-        uuid: this.uuid,
+        uuid: this.uuid
       };
       this.showLoading = true;
       this.GET(`stats/year/end/report/share`, param).then(res => {
@@ -120,6 +155,109 @@ export default {
 };
 </script>
 <style lang="less" scoped>
+@import "../../style/as-common.less";
 .as-share-wrapper {
+  height: 100vh;
+  position: relative;
+  top: 0;
+  left: 0;
+  // padding-bottom: 70px;
+  // min-height: 105vh;
+  background: #88cb9d;
+  .card-wrapper {
+    position: relative;
+    top: 0;
+    left: 0;
+    font-size: 16px;
+    color: #3b3b3b;
+    background: #88cb9d;
+    .bgi-wrapper {
+      position: absolute;
+      top: 20px;
+      left: 0;
+      z-index: 1;
+      img {
+        display: block;
+        width: 100%;
+        height: 495px;
+      }
+    }
+    .detail {
+      position: relative;
+      top: 50px;
+      left: 0;
+      z-index: 2;
+      color: #333;
+      margin: 0 30px 20px;
+      .title {
+        font-size: 18px;
+        font-weight: 700;
+        text-align: center;
+        margin: 0 0 20px;
+        color: #121212;
+      }
+      p {
+        line-height: 1.45;
+      }
+    }
+    .qr-wrapper {
+      width: 100%;
+      position: absolute;
+      top: 358px;
+      left: 0;
+      z-index: 1;
+      text-align: center;
+      img {
+        margin-top: 70px;
+        width: 70px;
+        height: 70px;
+      }
+    }
+    .bottom {
+      width: 100%;
+      position: fixed;
+      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;
+      }
+    }
+  }
+
+  .bottom-1 {
+    display: flex;
+    width: 100%;
+    position: absolute;
+    bottom: 25px;
+    left: 0;
+    z-index: 3;
+    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