fix

src/components/ClickDIV.vue

 <template>
-  <div v-if="showSelf" class="dialog" :style="{'z-index': zIndex}">
-    <div style=" height:100vh; width:100%;">
+  <div v-if="show" class="dialog-show">
+    <div style=" height:100vh; width:100%;
+    ">
       <!-- 弹窗 -->
-      <ShaerPopup :show="shaerShow" @closeMyself="cancelFrom" />
+      <ShaerPopup :show="shaerShow" @closeMyself="cancelPopup" />
       <!-- 弹窗 -->
 
-      <router-link :to="{path:'/'}">
-        <div class="backhome" :style="`background:url('${backimg}');background-size: 100% auto;`"></div>
-      </router-link>
+      <!-- <router-link :to="{path:'/'}"> -->
+      <div
+        class="backhome"
+        :style="`background:url('${backimg}');background-size: 100% auto;`"
+        @click="cancelPopupts"
+      ></div>
+      <!-- </router-link> -->
 
       <div>
-        <div v-if="item==0">
+        <div v-if="stater==0">
           <!-- 领取屏保 -->
           <div class="outer3 flex-col">
             <div class="haibao">
             </div>
           </div>
         </div>
-        <div v-else>
+        <div v-else style="overflow: auto;height:100vh;">
           <!-- 挂历 -->
           <div class="page flex-col">
             <div class="group1 flex-col">
 import { hideLoading } from '@/utils'
 
 export default {
-  name: 'SaveShare',
+  name: 'ClickDIV',
   components: {
     ShaerPopup: () => import('@/components/ShaerPopup.vue')
   },
       type: String,
       default: '取消',
       required: false
+    },
+
+    stater: {
+      type: Number
     }
   },
 
   data() {
     return {
-      item: null,
       shaerShow: false,
       backimg: require('../assets/saverShaerImg/back.png'),
       shaerBut: require('../assets/saverShaerImg/shaerLucky.png'),
   },
 
   watch: {
-    show(val) {
-      console.log('🚀 ~ file: ClickDIV.vue ~ line 89 ~ show ~ val', val)
-      this.showSelf = val
-      this.transform()
-    }
-  },
-  created() {
-    this.showSelf = this.show
-  },
-  mounted() {
-    hideLoading()
+    stater(val, res) {
+      console.log('🚀 ~ file: ClickDIV.vue ~ line 98 ~ stater ~ res', res)
+    },
+    created() {
+      // this.showSelf = this.show
+    },
+    mounted() {
+      hideLoading() //loading
 
-    this.forbidScroll()
-    if (this.show === true) {
-      this.transform()
+      this.forbidScroll()
+      if (this.show === true) {
+        this.transform()
+      }
     }
   },
   methods: {
-    cancelFrom() {
-      this.shaerShow = false
-    },
-    shareClick() {
-      this.$router.replace({
-        path: 'SaveShare',
-        query: { states: 0 }
-      })
+    /** 取消按钮操作 */
+    cancelPopupts() {
+      // this.shaerShow = false
+      // console.log(22222222222222222222222)
+      this.$emit('cancelPopus', true)
     },
-    saveClick() {
-      this.$router.replace({
-        path: 'SaveShare',
-        query: { states: 1 }
-      })
+
+    cancelPopup() {
+      this.shaerShow = false
     },
+    // shareClick() {
+    //   this.$router.replace({
+    //     path: 'SaveShare',
+    //     query: { states: 0 }
+    //   })
+    // },
+    // saveClick() {
+    //   this.$router.replace({
+    //     path: 'SaveShare',
+    //     query: { states: 1 }
+    //   })
+    // },
     transform() {
       setTimeout(() => {
         this.classDivAA = this.show
       return zIndexInit++
     },
 
-    /** 取消按钮操作 */
-    cancel() {
-      // this.$emit('cancel', true)
-    },
-
     /** 确认按钮操作 */
     confirm() {
       this.$emit('confirm', true)
 
     /** 恢复页面的滚动 */
     sloveBodyOverflow() {
-      this.showSelf = false
-
+      // this.showSelf = false
       document.body.style.overflow = this.bodyOverflow
     }
   }
     .group1 {
       .wrap3 {
         z-index: 13;
-        width: 98vw;
+        width: 100vw;
         overflow: hidden;
         align-self: center;
         margin-top: 1vw;
       .wrap5 {
         height: 137px;
         background-color: #efe9e0;
-        margin-top: 19px;
         width: 100vw;
         justify-content: center;
         align-items: center;

src/components/Popup.vue

 <template>
-  <div v-if="showSelf" class="dialog" :style="{'z-index': zIndex}">
-    <ClickDIV :show="showPopupClickDIV" @cancel="cancelFrom" />
+  <div v-if="showSelf" class="dialog">
+    <ClickDIV :show="showPopupClickDIV" @cancelPopus="canckle" :stater="stater" />
 
     <div class="dialog-mark" @click.self="closeMyself">
       <div v-show="myShareShow" class="sharetiptxt" style>
         <img style="width:100%; height:100%;" src="../assets/popupImg/myShare.png" alt />
       </div>
       <transition name="dialog">
-        <div class="dialog-sprite" :style="{'z-index': zIndex + 2}">
+        <div class="dialog-sprite">
           <div class="dialog-body">
             <div class="card-wrapper">
               <div :class="`dialog-popuImag ${classDivAA?'flipped':''}`">
           </div>
           <!-- 右侧 -->
           <div class="section-box">
-            <div class="section-box-share" @click="()=>{this.showPopupClickDIV=true}">
+            <div class="section-box-share" @click="()=>{this.myShareShow=true}">
               <img src="../assets/popupImg/shareImage.png" alt />
             </div>
-            <div class="section-box-receive">
-              <router-link :to="{path:'SaveShare',query: {  states: 0 }}">
-                <img src="../assets/popupImg/receiveImage.png" alt />
-              </router-link>
+            <div
+              class="section-box-receive"
+              @click="()=>{this.showPopupClickDIV=true,this.stater=0}"
+            >
+              <img src="../assets/popupImg/receiveImage.png" alt />
             </div>
-            <div class="section-box-save">
-              <router-link :to="{path:'SaveShare',query: {  states: 1 }}">
-                <img src="../assets/popupImg/saveImage.png" alt />
-              </router-link>
+            <div class="section-box-save" @click="()=>{this.showPopupClickDIV=true,this.stater=1}">
+              <img src="../assets/popupImg/saveImage.png" alt />
             </div>
           </div>
         </div>
       default: false,
       required: true
     },
-    title: {
-      type: String,
-      required: true
-    },
-    showCancel: {
-      typs: Boolean,
-      default: false,
-      required: false
-    },
+
     cancelText: {
       type: String,
       default: '取消',
       required: false
-    },
-    confirmText: {
-      type: String,
-      default: '确定',
-      required: false
-    },
-    LoadingShow: {
-      type: Boolean,
-      default: false,
-      required: true
     }
   },
 
       bodyOverflow: '',
       classDivAA: false,
       myShareShow: false,
-      showPopupClickDIV: false
+      showPopupClickDIV: false,
+      stater: null
     }
   },
   watch: {
     }
   },
   methods: {
+    canckle() {
+      this.showPopupClickDIV = false
+    },
     shareClick() {
       this.$router.replace({
         path: 'SaveShare',
 
   // 内容层 z-index要比遮罩大，否则会被遮盖
   .dialog-mark {
-    position: absolute;
+    position: relative;
     top: 0;
     height: 0;
     width: 100%;

src/components/ShaerPopup.vue

 
 <script>
 export default {
-  name: 'Popup',
+  name: 'ShaerPopup',
 
   props: {
     show: {
       console.log('🚀 ~ file: Popup.vue ~ line 78 ~ show ~ val', val)
       this.showSelf = val
 
-      this.transform()
       // this.closeMyself()
 
       // if (!val) {
   },
   mounted() {
     this.forbidScroll()
-    if (this.show === true) {
-      this.transform()
-    }
   },
   methods: {
-    shareClick() {
-      this.$router.replace({
-        path: 'SaveShare',
-        query: { states: 0 }
-      })
-    },
-    saveClick() {
-      this.$router.replace({
-        path: 'SaveShare',
-        query: { states: 1 }
-      })
-    },
-    transform() {
-      setTimeout(() => {
-        this.classDivAA = this.show
-      }, 0)
-    },
     /** 禁止页面滚动 */
     forbidScroll() {
       this.bodyOverflow = document.body.style.overflow

src/pages/SaveShare.vue

     .wrap5 {
       height: 137px;
       background-color: #efe9e0;
-      margin-top: 19px;
+      // margin-top: 19px;
       width: 100vw;
       justify-content: center;
       align-items: center;