.

src/components/Popup.vue

@@ -1,6 +1,6 @@
 <template>
   <div v-if="showSelf" class="dialog" :style="{'z-index': zIndex}">
-    <div class="dialog-mark" @click.self="closeMyself" :style="{'z-index': zIndex + 1}">
+    <div class="dialog-mark" :style="{'z-index': zIndex + 1}">
       <div v-show="myShareShow" class="sharetiptxt" style>
         <img style="width:100%; height:100%;" src="../assets/popupImg/myShare.png" alt />
       </div>
@@ -60,10 +60,10 @@ export default {
       default: false,
       required: true
     },
-    title: {
-      type: String,
-      required: true
-    },
+    // title: {
+    //   type: String,
+    //   required: true
+    // },
     showCancel: {
       typs: Boolean,
       default: false,
@@ -78,12 +78,12 @@ export default {
       type: String,
       default: '确定',
       required: false
-    },
-    LoadingShow: {
-      type: Boolean,
-      default: false,
-      required: true
     }
+    // LoadingShow: {
+    //   type: Boolean,
+    //   default: false,
+    //   required: true
+    // }
   },
 
   data() {
@@ -153,14 +153,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

@@ -1,6 +1,6 @@
 <template>
   <div class="index-box">
-    <popup :show="showPopup" @cancel="cancelFrom" />
+    <!-- <popup :show="showPopup" @cancel="cancelFrom" /> -->
     <div>
       <div>
         <img class="topImage" src="../assets/hareTop.png" alt />
@@ -9,13 +9,14 @@
     <div class="outer6-wrapper">
       <div class="outer6 flex-col">
         <div v-for="item in indexJPG" :key="item" class="section-item">
-          <div @click="baga">
-            <!-- <img class="section-item-image" src="../assets/coverIndex.jpg" /> -->
+          <ImgBox :value='startImg'></ImgBox>
+          <!-- <div @click="baga">
+            <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>
@@ -24,16 +25,20 @@
 
 <script>
 import { useModel } from '@/store'
+import ImgBox from '@/components/imgbox.vue'
 
 export default {
   name: 'Honghe',
   components: {
-    Popup: () => import('@/components/Popup.vue')
+    Popup: () => import('@/components/Popup.vue'),
+    ImgBox
   },
   data() {
     return {
       indexJPG: new Array(12).fill(null),
-      showPopup: false
+      showPopup: false,
+      rotateY: false,
+      startImg:require('../assets/coverIndex.jpg')
     }
   },
   computed: {
@@ -54,16 +59,17 @@ export default {
       immediate: true
     }
   },
-  methods: {
-    //关闭
-    cancelFrom() {
-      this.showPopup = false
-    },
-    baga(e) {
-      console.log(e)
-      this.showPopup = true
-    }
-  }
+  // methods: {
+  //   //关闭
+  //   cancelFrom() {
+  //     this.showPopup = false
+  //   },
+  //   baga(e) {
+  //     console.log(e)
+  //     this.showPopup = true
+  //     this.rotateY=true
+  //   }
+  // }
 }
 </script>
 
@@ -118,25 +124,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;
+          }
+        }
       }
     }
   }