代码优化

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

@@ -9,12 +9,11 @@
       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"
       swiper-animate-duration="1.5s"
-      swiper-animate-delay="1.5s"
+      swiper-animate-delay="0s"
     >
       <p class="title">2020年度学习报告</p>
       <p v-if="anualData.doctorName">
@@ -49,7 +48,8 @@
         swiper-animate-delay="3s"
       :src="anualData.qrCodeUrl" alt />
     </div>
-    <section v-if="isHide && type == 1" class="bottom">
+    <div class="mask"></div>
+    <section class="bottom" v-if="isHide && type == 1">
       <img @click="save" src="~@/images/annual/save-btn.png" alt />
       <img @click="share" src="~@/images/annual/share-btn.png" alt />
     </section>
@@ -115,6 +115,7 @@ export default {
   position: relative;
   top: 0;
   left: 0;
+  z-index: 1;
   height: 100vh;
   font-size: 16px;
   color: #3b3b3b;
@@ -123,7 +124,7 @@ export default {
     position: absolute;
     top: 356px;
     left: 0;
-    z-index: 3;
+    z-index: 8;
     img {
       display: block;
       width: 100%;
@@ -134,7 +135,7 @@ export default {
     position: relative;
     top: 5px;
     left: 0;
-    z-index: 2;
+    z-index: 5;
     color: #333;
     padding: 5px 10px 100px;
     margin: 0px 20px;
@@ -163,12 +164,21 @@ export default {
       height: 70px;
     }
   }
+  .mask {
+    position: fixed;
+    top: 500px;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    z-index: 6;
+    background: #88cb9d;
+  }
   .bottom {
     width: 100%;
     position: absolute;
     bottom: 25px;
     left: 0;
-    z-index: 3;
+    z-index: 11;
     display: flex;
     flex-direction: row;
     align-items: center;

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,7 @@
       </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>

src/views/annual-summary/index.vue

@@ -35,8 +35,10 @@
     <!-- <button @click="savePage2Picture">保存图片</button> -->
     <section class="bottom">
       <div class="prot-wrapper" @click="selectProt">
-        <img v-show="!isSelect" src="~@/images/annual/rect-1.png" alt />
-        <img v-show="isSelect" src="~@/images/annual/rect-2.png" alt />
+        <div class="img-w">
+          <img v-show="!isSelect" src="~@/images/annual/rect-1.png" alt />
+          <img v-show="isSelect" src="~@/images/annual/rect-2.png" alt />
+        </div>
         <span>我同意云鹊医使用我的历史数据生成《年度个人清单》数据报告</span>
       </div>
       <div v-show="isHide" class="b-btn" @click="gotoDetail">
@@ -177,12 +179,16 @@ export default {
       align-items: flex-start;
       justify-content: center;
       color: #ffffff;
-      img {
-        display: block;
+      .img-w {
         width: 15px;
         height: 15px;
-        padding-top: 4px;
         margin-right: 6px;
+        img {
+          display: block;
+          width: 15px;
+          height: 15px;
+          padding-top: 4px;
+        }
       }
     }
     .b-btn {