.

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="bigBox">
+    <div class="card" :class="{ flipped: mode === 2 }">
       <div class="front">
-        <img v-if="isFrist" :src="fristFontImg" class="nowimage" />
-        <img v-else :src="nowFontImg" class="nowimage" />
+        <img :src="poster" class="nowimage" />
       </div>
       <div class="back">
-        <img v-if="state===1" :src="nowBackImg" class="nowimage" />
-        <img v-else :src="openImg" class="nowimage" />
+        <img :src="nowBackImg" class="nowimage" />
       </div>
     </div>
   </div>
 <script>
 export default {
   props: {
-    value: {
-      type: String,
-      require: true,
+    prize: {
+      type: Object,
+      default: () => ({})
     },
-  },
-  components: {
-    Popup: () => import("@/components/Popup.vue"),
+    mode: {
+      type: String,
+      default: '1'
+    }
   },
   data() {
     return {
       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
+  computed: {
+    poster() {
+      return this.mode === 1 ? this.nowFontImg : '';
     }
   },
 };