Merge branch 'master' of http://git.ycjcjy.com/honghe/h5-draw-lots

src/components/Popup.vue

@@ -70,12 +70,30 @@ export default {
       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
+    // }
   },
 
   data() {
@@ -151,14 +169,10 @@ export default {
 
     /** 取消按钮操作 */
     cancel() {
+      event.stopPropagation()
       this.$emit('cancel', true)
     },
 
-    /** 确认按钮操作 */
-    confirm() {
-      this.$emit('confirm', true)
-    },
-
     /** 点击遮罩关闭弹窗 */
     closeMyself(event) {
       // this.sloveBodyOverflow()

src/components/imgbox.vue

@@ -0,0 +1,100 @@
+<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

@@ -13,10 +13,10 @@
           <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>
@@ -260,25 +260,26 @@ export default {
         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;
+          }
+        }
       }
     }
   }