efats

src/components/CalendarPoster.vue

+<template>
+  <div v-if="show" class="dialog-show">
+    <div style=" height:100vh; width:100%;
+    ">
+      <!-- 弹窗 -->
+      <ShaerPopup :show="shaerShow" @closeMyself="cancelPopup" />
+      <!-- 弹窗 -->
+
+      <!-- <router-link :to="{path:'/'}"> -->
+      <div
+        class="backhome"
+        :style="`background:url('${backimg}');background-size: 100% auto;`"
+        @click="cancelPopupts"
+      ></div>
+      <!-- </router-link> -->
+
+      <div>
+        <div v-if="stater==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 style="overflow: auto;height:100vh;">
+          <!-- 挂历 -->
+          <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: 'CalendarPoster',
+  components: {
+    ShaerPopup: () => import('@/components/ShaerPopup.vue')
+  },
+  props: {
+    show: {
+      type: Boolean,
+      default: false,
+      required: true
+    },
+    cancelText: {
+      type: String,
+      default: '取消',
+      required: false
+    },
+
+    stater: {
+      type: Number
+    }
+  },
+
+  data() {
+    return {
+      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: {
+    stater(val, res) {
+      console.log('🚀 ~ file: CalendarPoster.vue ~ line 98 ~ stater ~ res', res)
+    },
+    created() {
+      // this.showSelf = this.show
+    },
+    mounted() {
+      hideLoading() //loading
+
+      this.forbidScroll()
+      if (this.show === true) {
+        this.transform()
+      }
+    }
+  },
+  methods: {
+    /** 取消按钮操作 */
+    cancelPopupts() {
+      // this.shaerShow = false
+      // console.log(22222222222222222222222)
+      this.$emit('cancelPopus', true)
+    },
+
+    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
+      }, 0)
+    },
+    /** 禁止页面滚动 */
+    forbidScroll() {
+      this.bodyOverflow = document.body.style.overflow
+      document.body.style.overflow = 'hidden'
+    },
+
+    /**  每次获取之后 zindex 自动增加 */
+    getZIndex() {
+      let zIndexInit = 2022112
+      return zIndexInit++
+    },
+
+    /** 确认按钮操作 */
+    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: 100vw;
+        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;
+        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/MyWinning.vue

+<template>
+  <div v-if="show" class="dialog-my">
+    <div style=" height:100vh; width:100%;
+    ">
+      <!-- 弹窗 -->
+      <!-- <ShaerPopup :show="shaerShow" @closeMyself="cancelPopup" /> -->
+      <!-- 弹窗 -->
+
+      <!-- <router-link :to="{path:'/'}"> -->
+      <div
+        class="backhome"
+        :style="`background:url('${backimg}');background-size: 100% auto;`"
+        @click="cancelPopupts"
+      ></div>
+      <!-- </router-link> -->
+
+      <div>
+        <div v-if="stater!==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 style="overflow: auto;height:100vh;">
+          <!-- 挂历 -->
+          <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: 'CalendarPoster',
+  components: {
+    ShaerPopup: () => import('@/components/ShaerPopup.vue')
+  },
+  props: {
+    show: {
+      type: Boolean,
+      default: false,
+      required: true
+    },
+    cancelText: {
+      type: String,
+      default: '取消',
+      required: false
+    },
+
+    stater: {
+      type: Number
+    }
+  },
+
+  data() {
+    return {
+      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: {
+    stater(val, res) {
+      console.log('🚀 ~ file: CalendarPoster.vue ~ line 98 ~ stater ~ res', res)
+    },
+    created() {
+      // this.showSelf = this.show
+    },
+    mounted() {
+      hideLoading() //loading
+
+      this.forbidScroll()
+      if (this.show === true) {
+        this.transform()
+      }
+    }
+  },
+  methods: {
+    /** 取消按钮操作 */
+    cancelPopupts() {
+      // this.shaerShow = false
+      // console.log(22222222222222222222222)
+      this.$emit('cancelPopus', true)
+    },
+
+    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
+      }, 0)
+    },
+    /** 禁止页面滚动 */
+    forbidScroll() {
+      this.bodyOverflow = document.body.style.overflow
+      document.body.style.overflow = 'hidden'
+    },
+
+    /**  每次获取之后 zindex 自动增加 */
+    getZIndex() {
+      let zIndexInit = 2022112
+      return zIndexInit++
+    },
+
+    /** 确认按钮操作 */
+    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-my {
+  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: 100vw;
+        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;
+        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

 <template>
-  <div v-if="showSelf" class="dialog" :style="{'z-index': zIndex}">
-    <div class="dialog-mark" @click.self="closeMyself" :style="{'z-index': zIndex + 1}">
+  <div v-if="showSelf" class="dialog">
+    <CalendarPoster :show="showPopupCalendarPoster" @cancelPopus="canckle" :stater="stater" />
+
+    <!-- 我的奖品 -->
+    <MyWinning :show="MyWinningShow" @cancel="()=>this.MyWinningShow=false" />
+
+    <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.myShareShow=true}">
+            <div class="section-box-share" @click="()=>{this.MyWinningShow=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.showPopupCalendarPoster=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.showPopupCalendarPoster=true,this.stater=1}"
+            >
+              <img src="../assets/popupImg/saveImage.png" alt />
             </div>
           </div>
         </div>
 <script>
 export default {
   name: 'Popup',
-
+  components: {
+    CalendarPoster: () => import('@/components/CalendarPoster.vue'),
+    MyWinning: () => import('@/components/MyWinning.vue')
+  },
   props: {
     show: {
       type: Boolean,
       default: false,
       required: true
     },
-    title: {
-      type: String,
-      required: true
-    },
+    // title: {
+    //   type: String,
+    //   required: true
+    // },
     showCancel: {
       typs: Boolean,
       default: false,
       type: String,
       default: '确定',
       required: false
-    },
-    LoadingShow: {
-      type: Boolean,
-      default: false,
-      required: true
     }
+    // LoadingShow: {
+    //   type: Boolean,
+    //   default: false,
+    //   required: true
+    // }
   },
 
   data() {
       zIndex: this.getZIndex(),
       bodyOverflow: '',
       classDivAA: false,
-      myShareShow: false
+      myShareShow: false,
+      showPopupCalendarPoster: false,
+      stater: null,
+      MyWinningShow: false
     }
   },
   watch: {
     }
   },
   methods: {
+    canckle() {
+      this.showPopupCalendarPoster = false
+    },
     shareClick() {
       this.$router.replace({
         path: 'SaveShare',
 
     /** 取消按钮操作 */
     cancel() {
+      event.stopPropagation()
       this.$emit('cancel', true)
     },
 
-    /** 确认按钮操作 */
-    confirm() {
-      this.$emit('confirm', true)
-    },
-
     /** 点击遮罩关闭弹窗 */
     closeMyself(event) {
       // this.sloveBodyOverflow()
 
   // 内容层 z-index要比遮罩大，否则会被遮盖
   .dialog-mark {
-    position: absolute;
+    position: relative;
     top: 0;
     height: 0;
     width: 100%;

src/components/ShaerPopup.vue

   <div v-if="showSelf" class="dialog" :style="{'z-index': zIndex}">
     <div class="dialog-mark" @click="closeMyself" :style="{'z-index': zIndex + 1}">
       <div v-show="myShareShow" class="sharetiptxt" style>
-        <img style="width:100%; height:100%;" src="../assets/popupImg/myShare.png" alt />
+        <img style="width:100%; height:100%; z-index:46" 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="bd2 flex-col">
               <img class="pic1" src="../assets/ShaerPopupImg/popuBgc.jpg" alt />
 
 <script>
 export default {
-  name: 'Popup',
+  name: 'ShaerPopup',
 
   props: {
     show: {
       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
     }
   },
 
       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/components/WinningPopup.vue

+<template>
+  <div v-if="showSelf" class="dialog">
+    <div class="dialog-mark" @click.self="closeMyself">
+      <div class="sharetiptxt" style>
+        <img style="width:100%; height:100%;" src="../assets/popupImg/myShare.png" alt />
+      </div>
+      <transition name="dialog">
+        <div class="dialog-sprite">
+          <div class="dialog-body">
+            <div class="card-wrapper">
+              <div :class="`dialog-popuImag ${classDivAA?'flipped':''}`">
+                <!-- <img src="../assets/popupImg/popuBody.jpg" alt /> -->
+                <div class="back" :style="`background-image: url(${backimg});`">
+                  <!-- <img style="width: 180px; height:492px" src="../assets/popupImg/popuBody.jpg" alt /> -->
+                </div>
+
+                <div class="front">
+                  <img
+                    style="width: 180px; height:492px "
+                    src="../assets/popupImg/backImag.jpg"
+                    alt
+                  />
+                </div>
+              </div>
+            </div>
+
+            <div @click="cancel" class="dialog-footer">
+              <!-- <img @click="cancel" class="btn" src="../assets/popupImg/cancelmage.png" alt /> -->
+              <h1>开心收下</h1>
+            </div>
+          </div>
+          <!-- 右侧 -->
+        </div>
+      </transition>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'Popup',
+  components: {},
+  props: {
+    show: {
+      type: Boolean,
+      default: false,
+      required: true
+    },
+
+    cancelText: {
+      type: String,
+      default: '取消',
+      required: false
+    }
+  },
+
+  data() {
+    return {
+      name: 'dialog',
+      showSelf: false,
+      zIndex: this.getZIndex(),
+      bodyOverflow: '',
+      classDivAA: false,
+      myShareShow: false,
+      backimg: require('../assets/popupImg/popuBody.jpg'),
+
+      stater: null
+    }
+  },
+  watch: {
+    show(val) {
+      console.log('🚀 ~ file: Popup.vue ~ line 78 ~ show ~ val', val)
+      this.showSelf = val
+      if (this.show === false) {
+        this.myShareShow = false
+      }
+      this.transform()
+
+      // if (!val) {
+      //   this.closeMyself()
+      // } else {
+      //   this.showSelf = val
+      // }
+    }
+  },
+  created() {
+    this.showSelf = this.show
+  },
+  mounted() {
+    this.forbidScroll()
+    if (this.show === true) {
+      this.transform()
+    }
+  },
+  methods: {
+    canckle() {
+      // this.showPopupCalendarPoster = 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()
+    },
+
+    /** 恢复页面的滚动 */
+    sloveBodyOverflow() {
+      document.body.style.overflow = this.bodyOverflow
+    }
+  }
+}
+</script>
+
+<style lang="less" scoped>
+// 弹窗动画
+
+// 最外层 设置position定位
+// 遮罩 设置背景层，z-index值要足够大确保能覆盖，高度 宽度设置满 做到全屏遮罩
+
+.dialog {
+  position: fixed;
+  top: 0;
+  right: 0;
+  width: 100%;
+  height: 100%;
+  transition: opacity 1s;
+
+  // 内容层 z-index要比遮罩大，否则会被遮盖
+  .dialog-mark {
+    position: relative;
+    top: 0;
+    height: 0;
+    width: 100%;
+    height: 100%;
+    background: rgba(0, 0, 0, 0.6);
+    left: 0;
+    top: 0;
+    z-index: 99;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    .sharetiptxt {
+      background-size: 100% auto;
+      background-repeat: no-repeat;
+      z-index: 55;
+      width: 20px;
+      height: 320px;
+      display: block;
+      position: absolute;
+      right: 1rem;
+      top: 0.5em;
+      animation: tipup 1s ease infinite;
+    }
+  }
+}
+@keyframes tipup {
+  0% {
+    transform: translateY(0%);
+  }
+  50% {
+    transform: translateY(5%);
+  }
+  100% {
+    transform: translateY(0%);
+  }
+}
+
+.dialog-sprite {
+  width: 100vw;
+  display: flex;
+  justify-content: center;
+  position: relative;
+
+  .header {
+    padding: 15px;
+    text-align: center;
+    font-size: 18px;
+    font-weight: 700;
+    color: #333;
+  }
+  .dialog-body {
+    flex: 1;
+    overflow-x: hidden;
+    overflow-y: scroll;
+    padding: 0 15px 20px 15px;
+
+    //中间卡片
+    .card-wrapper {
+      perspective: 600px;
+      margin-top: 2em;
+
+      .dialog-popuImag {
+        position: relative;
+        display: flex;
+        justify-content: center;
+        transform-style: preserve-3d;
+        transition: all 1.2s ease;
+
+        // div {
+        //   // position: relative;
+        //   position: absolute;
+        //   width: 100%;
+        //   height: 100%;
+        //   /* 背面不显示 */
+        //   // backface-visibility: hidden;
+        // }
+        .front {
+        }
+        .back {
+          position: absolute;
+          transform: rotateY(180deg);
+          width: 180px;
+          height: 492px;
+          background-size: 100% auto;
+          // animation: change 0.8s linear forwards;
+        }
+
+        img {
+          width: 48vw;
+        }
+      }
+      .flipped {
+        animation: change 0.8s linear forwards;
+      }
+    }
+    @keyframes change {
+      from {
+        top: -20vh;
+        left: -20vw;
+        opacity: 0;
+        transform: scale(0.5);
+      }
+      to {
+        top: -0;
+        left: -0;
+        opacity: 2;
+        transform: scale(1);
+        transform: rotateY(180deg);
+      }
+    }
+    //底部按钮
+    .dialog-footer {
+      width: 100%;
+      background-size: 100% auto;
+      margin: 10px auto 0;
+      .btn {
+        padding-top: 0;
+        width: 32px;
+        height: 32px;
+      }
+    }
+  }
+  .section-box {
+    position: absolute;
+    right: 15vw;
+    top: 98px;
+    height: 394px;
+    display: flex;
+    flex-direction: column;
+    width: 36px;
+    justify-content: space-between;
+    margin-top: 2em;
+
+    img {
+      width: 36px;
+      background-size: 100% auto;
+      margin-top: 0;
+      border-radius: 18px;
+    }
+
+    &-receive {
+      width: 36px;
+      background-size: 100% auto;
+      margin-top: 0;
+    }
+    &-save {
+      width: 36px;
+      border-radius: 18px;
+      background-size: 100% auto;
+      width: 36px;
+      margin-top: 0;
+
+      // background: url('../assets/popupImg/receiveImage.png') no-repeat;
+    }
+  }
+}
+</style>
+

src/components/imgbox.vue

+<template>
+  <div :class="{ bigBox: state === 1 }">
+    <popup :show="showPopup" @cancel="cancelFrom" />
+    <div class="card" :class="{ flipped: state === 1 }" @click="showPopup=true">
+      <div class="front">
+        <img v-if="isFrist" :src="fristFontImg" class="nowimage" />
+        <img v-else :src="nowFontImg" class="nowimage" />
+      </div>
+      <div class="back">
+        <img v-if="state===1" :src="nowBackImg" class="nowimage" />
+        <img v-else :src="openImg" class="nowimage" />
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+export default {
+  props: {
+    value: {
+      type: String,
+      require: true,
+    },
+  },
+  components: {
+    Popup: () => import("@/components/Popup.vue"),
+  },
+  data() {
+    return {
+      showPopup: false,
+      state: 1,
+      classList: ["card"],
+      fristFontImg:undefined,
+      nowFontImg: require('../assets/popupImg/backImag.jpg'),
+      nowBackImg: require('../assets/popupImg/popuBody.jpg'),
+      openImg: require('../assets/popupImg/redBack.jpg'),
+      isFrist:true,
+    };
+  },
+  watch: {
+    value: {
+      handler(val) {
+        if (val) {
+          this.fristFontImg = val;
+        }
+      },
+      immediate: true,
+    },
+  },
+  methods: {
+    transform() {
+      this.showPopup=true
+      this.state = Math.abs(this.state - 1);
+    },
+    cancelFrom() {
+      this.state = Math.abs(this.state - 1);
+      this.showPopup=false
+      this.isFrist=false
+    }
+  },
+};
+</script>
+<style lang="less" scoped>
+.bigBox {
+  perspective: 600px;
+  overflow: hidden;
+}
+
+.card {
+  position: relative;
+  width: 22vw;
+  height: 60.5vw;
+  transform-style: preserve-3d;
+  transition: all 1.6s ease;
+  transform: rotateY(-180deg) scale(2);
+}
+
+
+.card > div {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+
+  /* 背面不显示 */
+  backface-visibility: hidden;
+}
+
+.flipped {
+  transform: rotateY(0);
+}
+
+.nowimage {
+  width: 22vw;
+  height: 60.5vw;
+}
+
+.card .back {
+  transform: rotateY(-180deg);
+}
+</style>>

src/pages/Honghe.vue

 <template>
   <div class="index-box">
     <popup :show="showPopup" @cancel="cancelFrom" :current-month="currentMonth" />
+
     <div>
       <div>
         <img class="topImage" src="../assets/hareTop.png" alt />
           <div @click="handleMonthClick(month)">
             <!-- <img class="section-item-image" src="../assets/coverIndex.jpg" /> -->
             <img
-              :class="`section-item-image ${!showPopup?'backImag':''}` "
+              :class="`section-item-image ${rotateY?'backImag':''}` "
               src="../assets/popupImg/backImag.jpg"
             />
-          </div>
+          </div>-->
         </div>
       </div>
     </div>
 
 // 月份信息
 const monthList = [
-  { id: 1, posterImg: '', popImg: '', shareImg: '', screenImg: '', calendarImg: '' },
-  { id: 2, posterImg: '', popImg: '', shareImg: '', screenImg: '', calendarImg: '' },
-  { id: 3, posterImg: '', popImg: '', shareImg: '', screenImg: '', calendarImg: '' },
-  { id: 4, posterImg: '', popImg: '', shareImg: '', screenImg: '', calendarImg: '' },
-  { id: 5, posterImg: '', popImg: '', shareImg: '', screenImg: '', calendarImg: '' },
-  { id: 6, posterImg: '', popImg: '', shareImg: '', screenImg: '', calendarImg: '' },
-  { id: 7, posterImg: '', popImg: '', shareImg: '', screenImg: '', calendarImg: '' },
-  { id: 8, posterImg: '', popImg: '', shareImg: '', screenImg: '', calendarImg: '' },
-  { id: 9, posterImg: '', popImg: '', shareImg: '', screenImg: '', calendarImg: '' },
-  { id: 10, posterImg: '', popImg: '', shareImg: '', screenImg: '', calendarImg: '' },
-  { id: 11, posterImg: '', popImg: '', shareImg: '', screenImg: '', calendarImg: '' },
-  { id: 12, posterImg: '', popImg: '', shareImg: '', screenImg: '', calendarImg: '' },
+  {
+    id: 1,
+    posterImg: '',
+    popImg: '',
+    shareImg: '',
+    screenImg: '',
+    calendarImg: ''
+  },
+  {
+    id: 2,
+    posterImg: '',
+    popImg: '',
+    shareImg: '',
+    screenImg: '',
+    calendarImg: ''
+  },
+  {
+    id: 3,
+    posterImg: '',
+    popImg: '',
+    shareImg: '',
+    screenImg: '',
+    calendarImg: ''
+  },
+  {
+    id: 4,
+    posterImg: '',
+    popImg: '',
+    shareImg: '',
+    screenImg: '',
+    calendarImg: ''
+  },
+  {
+    id: 5,
+    posterImg: '',
+    popImg: '',
+    shareImg: '',
+    screenImg: '',
+    calendarImg: ''
+  },
+  {
+    id: 6,
+    posterImg: '',
+    popImg: '',
+    shareImg: '',
+    screenImg: '',
+    calendarImg: ''
+  },
+  {
+    id: 7,
+    posterImg: '',
+    popImg: '',
+    shareImg: '',
+    screenImg: '',
+    calendarImg: ''
+  },
+  {
+    id: 8,
+    posterImg: '',
+    popImg: '',
+    shareImg: '',
+    screenImg: '',
+    calendarImg: ''
+  },
+  {
+    id: 9,
+    posterImg: '',
+    popImg: '',
+    shareImg: '',
+    screenImg: '',
+    calendarImg: ''
+  },
+  {
+    id: 10,
+    posterImg: '',
+    popImg: '',
+    shareImg: '',
+    screenImg: '',
+    calendarImg: ''
+  },
+  {
+    id: 11,
+    posterImg: '',
+    popImg: '',
+    shareImg: '',
+    screenImg: '',
+    calendarImg: ''
+  },
+  {
+    id: 12,
+    posterImg: '',
+    popImg: '',
+    shareImg: '',
+    screenImg: '',
+    calendarImg: ''
+  }
 ]
 
 export default {
   },
   computed: {
     person: {
-      get () {
+      get() {
         return useModel('person')[0]
       },
-      set (val) {
+      set(val) {
         useModel('person')[1](val)
       }
     }
     },
     // 抽奖
     drawLots() {
-      drawLottery(this.person).then(res => {
+      drawLottery(this.person).then((res) => {
         // 更新人员信息
         this.person = res
-        
+
         // 其他动作
       })
     },
     // 获取奖品列表
     getPrizes() {
-      getPrizeList().then(list => {
-        this.prizeList = list;
+      getPrizeList().then((list) => {
+        this.prizeList = list
 
         const t = setTimeout(() => {
           hideLoading()
           clearTimeout(t)
-        }, 1000);
-      });
+        }, 1000)
+      })
     }
   }
 }
         border-left: 1px solid #d0b69a;
         border-top: 1px solid #d0b69a;
         display: inline-flex;
+        overflow: hidden;
         &-image {
           width: 22vw;
 
           background-size: 100% 100%;
         }
-        // .backImag {
-        //   position: relative;
-        //   animation: change 0.8s linear forwards;
-        // }
-        // @keyframes change {
-        //   from {
-        //     width: 50%;
-        //     z-index: 1;
-        //     transform: rotateY(180deg);
-        //   }
-        //   to {
-        //     width: 22vw;
-        //   }
-        // }
+        .backImag {
+          // position: relative;
+          width: 22vw;
+          animation: change 0.8s linear forwards;
+        }
+        @keyframes change {
+          from {
+            width: 44vw;
+            transform: rotateY(180deg);
+          }
+          to {
+            width: 22vw;
+          }
+        }
       }
     }
   }

src/pages/SaveShare.vue

         <!-- 领取屏保 -->
         <div class="outer3 flex-col">
           <div class="haibao">
-            <img class="haibao" src="../assets/saverShaerImg/haibao.jpg" alt />
+            <img class="haibao" src="~@/assets/saverShaerImg/haibao.jpg" alt />
           </div>
           <div class="mod2 flex-col">
             <div class="block1 flex-col">
 </template>
 
 <script>
+import { hideLoading } from '@/utils'
+
 export default {
   name: 'SaveShare',
   components: {
     ShaerPopup: () => import('@/components/ShaerPopup.vue')
   },
+  props: {
+    show: {
+      type: Boolean,
+      default: false,
+      required: true
+    },
+    type: String,
+    cancelText: {
+      default: '取消',
+      required: false
+    }
+  },
   data() {
     return {
       item: null,
       pressLucky: require('../assets/saverShaerImg/PressLucky.png')
     }
   },
+  mounted() {
+    hideLoading()
+  },
 
   watch: {
     '$route.query.states': {
     .wrap5 {
       height: 137px;
       background-color: #efe9e0;
-      margin-top: 19px;
+      // margin-top: 19px;
       width: 100vw;
       justify-content: center;
       align-items: center;