日报分享

src/components/share.vue

@@ -1,6 +1,6 @@
 <template>
-  <div class="share">
-    <div class="share-content" ref="shareContent" v-if="!canvasImageUrl">
+  <div class="share" :style="{ 'z-index': zIndex }">
+    <div class="share-content" ref="shareContent">
       <div class="header">
         <div class="left-icon">
           <img :src="require('@/assets/shareLeft.png')" />
@@ -90,11 +90,14 @@
           </div>
         </div>
         <div class="right-text">
-          <div>长按识别二维码</div>
-          <div>查看详情&点评</div>
+          <div>长按识别二维码查看详情&点评</div>
+          <div></div>
         </div>
       </div>
     </div>
+    <div
+      class="share-mask"
+      style="background: #fff; position: fixed; top: 0; width: 100%; height: 100%"></div>
     <div class="html2canvasBox">
       <div class="closeShare" @click="closeShare"><van-icon name="close" /></div>
       <div id="html2canvas" ref="html2canvas">
@@ -134,9 +137,11 @@ export default {
       canvasImageUrl: '',
       retryCount: 0,
       photosData: [],
+      zIndex: -1,
     };
   },
   created() {
+    this.zIndex = -1;
     this.canvasImageUrl = '';
   },
   mounted() {
@@ -229,7 +234,7 @@ export default {
             });
           };
           img.src = imageUrl;
-
+          this.zIndex = 9;
           this.$emit('setShareImg', true);
         })
         .catch((error) => {
@@ -249,8 +254,8 @@ export default {
         colorDark: '#000000',
         colorLight: 'rgba(255,255,255,0)', // 完全透明背景
         correctLevel: QRCode.CorrectLevel.H,
-        width: 150, // 固定尺寸保证安卓一致性
-        height: 150,
+        width: 140, // 固定尺寸保证安卓一致性
+        height: 140,
         margin: 2,
         render: 'canvas',
         onRenderingEnd: () => {
@@ -288,6 +293,8 @@ export default {
   height: 100%;
   overflow: hidden;
   background: #fff;
+  position: fixed;
+  top: 0;
 
   .share-content {
     background: url('../assets/shareBack.png') no-repeat center center;
@@ -419,8 +426,9 @@ export default {
 
   .footerShare {
     display: flex;
-    // align-items: center;
+    flex-direction: column;
     justify-content: center;
+    align-items: center;
     margin-top: vw(100);
 
     .right-text {
@@ -431,7 +439,7 @@ export default {
       padding: vw(10) 0;
       div {
         color: #ffffff;
-        font-size: vw(26);
+        font-size: vw(30);
         font-weight: bold;
       }
     }
@@ -485,8 +493,8 @@ export default {
 <style lang="scss">
 .share {
   .QRcodes {
-    width: 150px; /* 固定像素尺寸 */
-    height: 150px;
+    width: 140px; /* 固定像素尺寸 */
+    height: 140px;
     margin-right: 12px;
     position: relative;
     background: #ffffff;

src/views/week/dailyHistoricalDetails.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="dailyHistoricalDetails">
-    <template v-if="!setShareFlag">
+    <div class="dailyHistoricalDetailsBox">
       <!--        顶部条-->
       <div class="navBarTOP">
         <van-nav-bar class="navBar" title="日报详情" left-arrow @click-left="onClickLeft">
@@ -528,7 +528,7 @@
       <br />
       <br />
       <br />
-    </template>
+    </div>
     <share
       v-if="setShareFlag"
       :reportTarget="reportTarget"
@@ -905,7 +905,9 @@ export default {
   background: #fff;
   width: 100%;
   height: 100%;
-
+  .dailyHistoricalDetailsBox {
+    background: #fff;
+  }
   .shareBtn {
     width: 22px;
     height: 22px;