fix

src/components/ClickDIV.vue

@@ -0,0 +1,299 @@
+<template>
+  <div v-if="showSelf" class="dialog" :style="{'z-index': zIndex}">
+    <div style=" height:100vh; width:100%;">
+      <!-- 弹窗 -->
+      <ShaerPopup :show="shaerShow" @closeMyself="cancelFrom" />
+      <!-- 弹窗 -->
+
+      <router-link :to="{path:'/'}">
+        <div class="backhome" :style="`background:url('${backimg}');background-size: 100% auto;`"></div>
+      </router-link>
+
+      <div>
+        <div v-if="item==0">
+          <!-- 领取屏保 -->
+          <div class="outer3 flex-col">
+            <div class="haibao">
+              <img class="haibao" src="~@/assets/saverShaerImg/haibao.jpg" alt />
+            </div>
+            <div class="mod2 flex-col">
+              <div class="block1 flex-col">
+                <div
+                  class="section1 flex-col"
+                  @click="()=>{this.shaerShow=true}"
+                  :style="`background-image: url(${shaerBut});`"
+                ></div>
+                <span :style="`background-image: url(${pressImage});`" class="info2"></span>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div v-else>
+          <!-- 挂历 -->
+          <div class="page flex-col">
+            <div class="group1 flex-col">
+              <div class="wrap3 flex-col">
+                <img src="~@/assets/saverShaerImg/calendar.jpg" class="subhaibao" />
+              </div>
+              <div class="wrap5 flex-col">
+                <span class="txt1" :style="`background-image: url(${pressLucky});`"></span>
+                <div
+                  class="main5 flex-col"
+                  :style="`background-image: url(${shaerButRed});`"
+                  @click="()=>{this.shaerShow=true}"
+                ></div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import { hideLoading } from '@/utils'
+
+export default {
+  name: 'SaveShare',
+  components: {
+    ShaerPopup: () => import('@/components/ShaerPopup.vue')
+  },
+  props: {
+    show: {
+      type: Boolean,
+      default: false,
+      required: true
+    },
+    cancelText: {
+      type: String,
+      default: '取消',
+      required: false
+    }
+  },
+
+  data() {
+    return {
+      item: null,
+      shaerShow: false,
+      backimg: require('../assets/saverShaerImg/back.png'),
+      shaerBut: require('../assets/saverShaerImg/shaerLucky.png'),
+      pressImage: require('../assets/saverShaerImg/PressImage.png'),
+      shaerButRed: require('../assets/saverShaerImg/shaerLuckyRed.png'),
+      pressLucky: require('../assets/saverShaerImg/PressLucky.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()
+
+    this.forbidScroll()
+    if (this.show === true) {
+      this.transform()
+    }
+  },
+  methods: {
+    cancelFrom() {
+      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
+      }, 0)
+    },
+    /** 禁止页面滚动 */
+    forbidScroll() {
+      this.bodyOverflow = document.body.style.overflow
+      document.body.style.overflow = 'hidden'
+    },
+
+    /**  每次获取之后 zindex 自动增加 */
+    getZIndex() {
+      let zIndexInit = 2022112
+      return zIndexInit++
+    },
+
+    /** 取消按钮操作 */
+    cancel() {
+      // this.$emit('cancel', true)
+    },
+
+    /** 确认按钮操作 */
+    confirm() {
+      this.$emit('confirm', true)
+    },
+
+    /** 点击遮罩关闭弹窗 */
+    closeMyself(event) {
+      // this.sloveBodyOverflow()
+      this.$emit('closeMyself', true)
+    },
+
+    /** 恢复页面的滚动 */
+    sloveBodyOverflow() {
+      this.showSelf = false
+
+      document.body.style.overflow = this.bodyOverflow
+    }
+  }
+}
+</script>
+
+<style lang="less" scoped>
+// 弹窗动画
+
+// 最外层 设置position定位
+// 遮罩 设置背景层，z-index值要足够大确保能覆盖，高度 宽度设置满 做到全屏遮罩
+
+.flex-col {
+  display: flex;
+  flex-direction: column;
+}
+.dialog {
+  position: fixed;
+  top: 0;
+  right: 0;
+  width: 100%;
+  height: 100%;
+  transition: opacity 1s;
+
+  // 内容层 z-index要比遮罩大，否则会被遮盖
+  .backhome {
+    width: 75px;
+    height: 42px;
+    position: fixed;
+    left: 1rem;
+    top: 1rem;
+    z-index: 19;
+    background-repeat: no-repeat;
+  }
+  .outer3 {
+    width: 100vw;
+    height: 100vh;
+    justify-content: flex-end;
+    .haibao {
+      width: 100vw;
+      position: absolute;
+      left: 0;
+      top: 0;
+    }
+    .mod2 {
+      z-index: 35;
+      height: 210px;
+      background-image: linear-gradient(
+        180deg,
+        transparent,
+        rgba(0, 0, 0, 0.6)
+      );
+      width: 100vw;
+      justify-content: flex-end;
+      padding-bottom: 33px;
+      align-items: center;
+      .block1 {
+        width: 180px;
+        height: 113px;
+        .section1 {
+          height: 48px;
+          border-radius: 8px;
+          background-size: 100% auto;
+          background-color: #fff;
+          width: 180px;
+          justify-content: center;
+          align-items: center;
+          border: 0;
+        }
+        .info2 {
+          width: 152px;
+          height: 54px;
+          display: block;
+          color: #fff;
+          text-align: center;
+          align-self: center;
+          margin-top: 12px;
+          background-size: 100% auto;
+          background-repeat: no-repeat;
+        }
+      }
+    }
+  }
+
+  // 第二个页面
+  .page {
+    // z-index: 1;
+    // position: relative;
+    // overflow-y: auto;
+    // width: 100vw;
+    // height: 100vh;
+
+    .group1 {
+      .wrap3 {
+        z-index: 13;
+        width: 98vw;
+        overflow: hidden;
+        align-self: center;
+        margin-top: 1vw;
+        margin-left: 0;
+        .subhaibao {
+          // position: absolute;
+          width: 100%;
+          left: 0;
+          top: 0;
+        }
+      }
+      .wrap5 {
+        height: 137px;
+        background-color: #efe9e0;
+        margin-top: 19px;
+        width: 100vw;
+        justify-content: center;
+        align-items: center;
+        display: flex;
+        .txt1 {
+          background-size: 100% auto;
+          background-repeat: no-repeat;
+          width: 112px;
+          height: 18px;
+          margin-bottom: 80px;
+        }
+      }
+
+      .main5 {
+        background-size: 100% auto;
+        background-repeat: no-repeat;
+        height: 48px;
+        border-radius: 8px;
+        margin-top: 11px;
+        width: 343px;
+        background-color: #c1172d;
+        border: 0;
+        position: fixed;
+        z-index: 15;
+        bottom: 5vh;
+      }
+    }
+  }
+}
+</style>
+

src/components/Popup.vue

@@ -1,6 +1,8 @@
 <template>
   <div v-if="showSelf" class="dialog" :style="{'z-index': zIndex}">
-    <div class="dialog-mark" @click.self="closeMyself" :style="{'z-index': zIndex + 1}">
+    <ClickDIV :show="showPopupClickDIV" @cancel="cancelFrom" />
+
+    <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>
@@ -30,7 +32,7 @@
           </div>
           <!-- 右侧 -->
           <div class="section-box">
-            <div class="section-box-share" @click="()=>{this.myShareShow=true}">
+            <div class="section-box-share" @click="()=>{this.showPopupClickDIV=true}">
               <img src="../assets/popupImg/shareImage.png" alt />
             </div>
             <div class="section-box-receive">
@@ -53,7 +55,9 @@
 <script>
 export default {
   name: 'Popup',
-
+  components: {
+    ClickDIV: () => import('@/components/ClickDIV.vue')
+  },
   props: {
     show: {
       type: Boolean,
@@ -93,7 +97,8 @@ export default {
       zIndex: this.getZIndex(),
       bodyOverflow: '',
       classDivAA: false,
-      myShareShow: false
+      myShareShow: false,
+      showPopupClickDIV: false
     }
   },
   watch: {

src/pages/Honghe.vue

@@ -1,6 +1,7 @@
 <template>
   <div class="index-box">
     <popup :show="showPopup" @cancel="cancelFrom" :current-month="currentMonth" />
+
     <div>
       <div>
         <img class="topImage" src="../assets/hareTop.png" alt />
@@ -131,8 +132,7 @@ const monthList = [
 export default {
   name: 'Honghe',
   components: {
-    Popup: () => import('@/components/Popup.vue'),
-    SaveShare: () => import('./SaveShare.vue')
+    Popup: () => import('@/components/Popup.vue')
   },
   data() {
     return {

src/pages/SaveShare.vue

@@ -50,6 +50,8 @@
 </template>
 
 <script>
+import { hideLoading } from '@/utils'
+
 export default {
   name: 'SaveShare',
   components: {
@@ -61,8 +63,8 @@ export default {
       default: false,
       required: true
     },
+    type: String,
     cancelText: {
-      type: String,
       default: '取消',
       required: false
     }
@@ -78,6 +80,9 @@ export default {
       pressLucky: require('../assets/saverShaerImg/PressLucky.png')
     }
   },
+  mounted() {
+    hideLoading()
+  },
 
   watch: {
     '$route.query.states': {