.

src/components/imgbox.vue

       type: Object,
       default: () => ({})
     },
-    mode: {
-      type: String,
-      default: '1'
-    }
   },
   data() {
     return {
       classList: ["card"],
       fristFontImg:undefined,
       nowFontImg: require('../assets/popupImg/backImag.jpg'),
-      nowBackImg: require('../assets/popupImg/popuBody.jpg'),
+      // nowBackImg: require('../assets/popupImg/popuBody.jpg'),
       openImg: require('../assets/popupImg/redBack.jpg'),
       isFrist:true,
     };
   computed: {
     poster() {
       return this.mode === 1 ? this.nowFontImg : '';
+    },    
+    mode() {
+      return this.prize.mode;
+    },
+    nowBackImg() {
+      return this.mode === 3 ? require('../assets/popupImg/popuBody.jpg') : '';
     }
   },
 };

src/pages/Honghe.vue

       <div class="outer6 flex-col">
         <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
+            <!-- <img
               :class="`section-item-image ${rotateY?'backImag':''}` "
               src="../assets/popupImg/backImag.jpg"
-            />
-          </div> -->
+            /> -->
+          </div>
         </div>
       </div>
     </div>
     popImg: '',
     shareImg: '',
     screenImg: '',
-    calendarImg: ''
+    calendarImg: '',
+    mode: 1
   },
   {
     id: 2,
     popImg: '',
     shareImg: '',
     screenImg: '',
-    calendarImg: ''
+    calendarImg: '',
+    mode: 1
   },
   {
     id: 3,
     popImg: '',
     shareImg: '',
     screenImg: '',
-    calendarImg: ''
+    calendarImg: '',
+    mode: 1
   },
   {
     id: 4,
     popImg: '',
     shareImg: '',
     screenImg: '',
-    calendarImg: ''
+    calendarImg: '',
+    mode: 1
   },
   {
     id: 5,
     popImg: '',
     shareImg: '',
     screenImg: '',
-    calendarImg: ''
+    calendarImg: '',
+    mode: 1
   },
   {
     id: 6,
     popImg: '',
     shareImg: '',
     screenImg: '',
-    calendarImg: ''
+    calendarImg: '',
+    mode: 1
   },
   {
     id: 7,
     popImg: '',
     shareImg: '',
     screenImg: '',
-    calendarImg: ''
+    calendarImg: '',
+    mode: 1
   },
   {
     id: 8,
     popImg: '',
     shareImg: '',
     screenImg: '',
-    calendarImg: ''
+    calendarImg: '',
+    mode: 1
   },
   {
     id: 9,
     popImg: '',
     shareImg: '',
     screenImg: '',
-    calendarImg: ''
+    calendarImg: '',
+    mode: 1
   },
   {
     id: 10,
     popImg: '',
     shareImg: '',
     screenImg: '',
-    calendarImg: ''
+    calendarImg: '',
+    mode: 1
   },
   {
     id: 11,
     popImg: '',
     shareImg: '',
     screenImg: '',
-    calendarImg: ''
+    calendarImg: '',
+    mode: 1
   },
   {
     id: 12,
     popImg: '',
     shareImg: '',
     screenImg: '',
-    calendarImg: ''
+    calendarImg: '',
+    mode: 1
   }
 ]
 
   components: {
     Popup: () => import('@/components/Popup.vue'),
     MyWinning: () => import('@/components/MyWinning.vue'),
+    ImgBox: () => import('@/components/imgbox.vue')
   },
   data() {
     return {
     //关闭
     cancelFrom() {
       this.showPopup = false
+      this.list.map((item) => {
+        if (item.id == this.currentMonth.id) {
+          item.mode=3
+        }
+      })
     },
     handleMonthClick(month) {
+      this.list.map((item) => {
+        if (item.id == month.id) {
+          item.mode=2
+        }
+      })
       this.currentMonth = month
 
       // 如果点击可以抽奖