fxl

src/components/WinningPopup.vue

@@ -9,13 +9,13 @@
           <div class="dialog-body">
             <div class="card-wrapper">
               <div :class="`dialog-popuImag ${classDivAA?'flipped':''}`">
-                <div class="back" :style="`background-image: url(${backimg});`">
-                  <img
+                <!-- <div class="back" :style="`background-image: url(${backimg});`"> -->
+                <!-- <img
                     style="width: 180px; height:492px"
                     src="../assets/prizeImg/HappyWnning.jpg"
                     alt
-                  />
-                </div>
+                />-->
+                <!-- </div> -->
 
                 <div class="front">
                   <img
@@ -23,6 +23,9 @@
                     src="../assets/prizeImg/HappyWnning.jpg"
                     alt
                   />
+                  <div class="PrizeImg">
+                    <img style="width: 100%; height:100% " :src="Prize.thumb" alt />
+                  </div>
                 </div>
               </div>
             </div>
@@ -50,6 +53,10 @@ export default {
 
     currentMonth: {
       type: Object
+    },
+    Prize: {
+      type: Object,
+      default: () => ({})
     }
   },
 
@@ -61,7 +68,8 @@ export default {
       bodyOverflow: '',
       classDivAA: false,
       myShareShow: false,
-      backimg: require('../assets/luckyImg/2.jpg'),
+      canlParez: {},
+      backimg: require('../assets/luckyImg/2.jpg')
     }
   },
   watch: {
@@ -104,6 +112,7 @@ export default {
     cancel() {
       this.$emit('cancel', true)
     },
+    canlParez() {},
 
     /** 确认按钮操作 */
     confirm() {
@@ -166,6 +175,18 @@ export default {
   }
 }
 
+@keyframes tipup {
+  0% {
+    transform: translateY(0%);
+  }
+  50% {
+    transform: translateY(5%);
+  }
+  100% {
+    transform: translateY(0%);
+  }
+}
+
 .dialog-sprite {
   width: 100vw;
   display: flex;
@@ -198,9 +219,17 @@ export default {
         transition: all 1.2s ease;
 
         .front {
+          position: relative;
+          display: flex;
+          justify-content: center;
+          .PrizeImg {
+            width: 55vw;
+            position: absolute;
+            height: 48vw;
+            top: 20vh;
+          }
         }
         .back {
-          position: absolute;
           transform: rotateY(180deg);
           width: 180px;
           height: 492px;

src/pages/Honghe.vue

@@ -8,7 +8,13 @@
       :is-prize="myPrize"
       :PrizeState="PrizeState"
     />
-    <WinningPopup :show="showMyWinning" @cancel="canclMyWinning" :current-person="person" />
+
+    <WinningPopup
+      :show="showMyWinning"
+      @cancel="canclMyWinning"
+      :current-person="person"
+      :prize="myPrize"
+    />
     <!-- 奖品没了 -->
 
     <img class="topImage" src="../assets/indexImg/indexBgctop.jpg" alt />