.

src/components/Popup.vue

   .section-box {
     position: absolute;
     right: 15vw;
-    top: 98px;
+    top: 57px;
     height: 394px;
     display: flex;
     flex-direction: column;

src/components/imgbox.vue

 <template>
   <div class="bigBox">
-    <div class="card" :class="{ flipped: mode === 2 }">
-      <div class="front">
+    <div class="card" :class="{ flipped: mode === 1|| mode === 3}">
+      <div class="fornt">
         <img :src="poster" class="nowimage" />
       </div>
       <div class="back">
   props: {
     prize: {
       type: Object,
-      default: () => ({})
+      default: () => ({}),
     },
   },
-  data() {
-    return {
-      showPopup: false,
-      state: 1,
-      classList: ["card"],
-      fristFontImg:undefined,
-      nowFontImg: require('../assets/screenImg/3.jpg'),
-      isFrist:true,
-    };
-  },
   computed: {
     poster() {
-      return this.mode === 1 ? require('../assets/index.jpg') : this.mode === 3?this.prize.posterImg:'';
-    },    
+      return this.mode === 1
+        ? require("../assets/index.jpg")
+        : this.mode === 3
+        ? this.prize.posterImg
+        : "";
+    },
     mode() {
       return this.prize.mode;
     },
     nowBackImg() {
-      return this.mode === 3 ? this.prize.popImg : '';
-    }
+      return this.mode === 3 ? this.prize.popImg : "";
+    },
   },
 };
 </script>
 .bigBox {
   perspective: 600px;
   overflow: hidden;
-}
-
-.card {
-  position: relative;
-  width: 22vw;
-  height: 49.5vw;
-  transform-style: preserve-3d;
-  transition: all 0.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: 49.5vw;
-}
+  .card {
+    position: relative;
+    width: 22vw;
+    height: 49.5vw;
+    transform-style: preserve-3d;
+    transition: all 0.6s ease;
+    transform: rotateY(-180deg) scale(1);
+    .back {
+      transform: rotateY(-180deg);
+    }
+    .nowimage {
+      width: 22vw;
+      height: 49.5vw;
+    }
+  }
+  .card > div {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
 
-.card .back {
-  transform: rotateY(-180deg);
+    /* 背面不显示 */
+    backface-visibility: hidden;
+  }
+  .flipped {
+    transform: rotateY(0);
+  }
 }
 </style>

src/pages/Honghe.vue

     <MyWinning :show="showMyWinning" :current-month="currentMonth" />
     <div>
       <div>
-        <img class="topImage" src="../assets/indexImg/indexBgc.jpg" alt />
+        <!-- <img class="topImage" src="../assets/indexImg/indexBgc.jpg" alt /> -->
       </div>
     </div>
     <div class="outer6-wrapper">
         <div v-for="month in list" :key="month.id" class="section-item">
           <div @click="handleMonthClick(month)">
             <ImgBox :prize="month"></ImgBox>
-            <!-- <img class="section-item-image" src="../assets/coverIndex.jpg" /> -->
-            <!-- <img
-              :class="`section-item-image ${rotateY?'backImag':''}` "
-              src="../assets/popupImg/backImag.jpg"
-            />-->
           </div>
         </div>
       </div>
   flex-direction: column;
 }
 .index-box {
-  // background: url('../assets/backgroung.jpg') no-repeat;
+  // background: url('../assets/indexImg/indexBgc.jpg') no-repeat;
   background-color: #c1172d;
   background-size: 100% 100%;
   width: 100%;
   right: 0;
   bottom: 0;
   overflow: auto;
-
+  .dialog {
+    z-index: 2;
+  }
   .topImage {
     width: 90%;
     z-index: 8;