.

src/components/imgbox.vue

@@ -17,10 +17,6 @@ export default {
       type: Object,
       default: () => ({})
     },
-    mode: {
-      type: String,
-      default: '1'
-    }
   },
   data() {
     return {
@@ -29,7 +25,7 @@ export default {
       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,
     };
@@ -37,6 +33,12 @@ export default {
   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

@@ -13,12 +13,13 @@
       <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>
@@ -39,7 +40,8 @@ const monthList = [
     popImg: '',
     shareImg: '',
     screenImg: '',
-    calendarImg: ''
+    calendarImg: '',
+    mode: 1
   },
   {
     id: 2,
@@ -47,7 +49,8 @@ const monthList = [
     popImg: '',
     shareImg: '',
     screenImg: '',
-    calendarImg: ''
+    calendarImg: '',
+    mode: 1
   },
   {
     id: 3,
@@ -55,7 +58,8 @@ const monthList = [
     popImg: '',
     shareImg: '',
     screenImg: '',
-    calendarImg: ''
+    calendarImg: '',
+    mode: 1
   },
   {
     id: 4,
@@ -63,7 +67,8 @@ const monthList = [
     popImg: '',
     shareImg: '',
     screenImg: '',
-    calendarImg: ''
+    calendarImg: '',
+    mode: 1
   },
   {
     id: 5,
@@ -71,7 +76,8 @@ const monthList = [
     popImg: '',
     shareImg: '',
     screenImg: '',
-    calendarImg: ''
+    calendarImg: '',
+    mode: 1
   },
   {
     id: 6,
@@ -79,7 +85,8 @@ const monthList = [
     popImg: '',
     shareImg: '',
     screenImg: '',
-    calendarImg: ''
+    calendarImg: '',
+    mode: 1
   },
   {
     id: 7,
@@ -87,7 +94,8 @@ const monthList = [
     popImg: '',
     shareImg: '',
     screenImg: '',
-    calendarImg: ''
+    calendarImg: '',
+    mode: 1
   },
   {
     id: 8,
@@ -95,7 +103,8 @@ const monthList = [
     popImg: '',
     shareImg: '',
     screenImg: '',
-    calendarImg: ''
+    calendarImg: '',
+    mode: 1
   },
   {
     id: 9,
@@ -103,7 +112,8 @@ const monthList = [
     popImg: '',
     shareImg: '',
     screenImg: '',
-    calendarImg: ''
+    calendarImg: '',
+    mode: 1
   },
   {
     id: 10,
@@ -111,7 +121,8 @@ const monthList = [
     popImg: '',
     shareImg: '',
     screenImg: '',
-    calendarImg: ''
+    calendarImg: '',
+    mode: 1
   },
   {
     id: 11,
@@ -119,7 +130,8 @@ const monthList = [
     popImg: '',
     shareImg: '',
     screenImg: '',
-    calendarImg: ''
+    calendarImg: '',
+    mode: 1
   },
   {
     id: 12,
@@ -127,7 +139,8 @@ const monthList = [
     popImg: '',
     shareImg: '',
     screenImg: '',
-    calendarImg: ''
+    calendarImg: '',
+    mode: 1
   }
 ]
 
@@ -136,6 +149,7 @@ export default {
   components: {
     Popup: () => import('@/components/Popup.vue'),
     MyWinning: () => import('@/components/MyWinning.vue'),
+    ImgBox: () => import('@/components/imgbox.vue')
   },
   data() {
     return {
@@ -164,8 +178,18 @@ export default {
     //关闭
     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
 
       // 如果点击可以抽奖