Baozhangchao 3 years ago
parent
commit
c648437aa4
3 changed files with 31 additions and 20 deletions
  1. 2
    3
      src/components/MyWinning.vue
  2. 26
    14
      src/components/WinningPopup.vue
  3. 3
    3
      src/pages/Honghe.vue

+ 2
- 3
src/components/MyWinning.vue View File

13
             <div class="outer3 flex-col" style="overflow: auto;height:100vh;">
13
             <div class="outer3 flex-col" style="overflow: auto;height:100vh;">
14
               <div class="haibao-box" style="overflow: auto;height:100vh;">
14
               <div class="haibao-box" style="overflow: auto;height:100vh;">
15
                 <img class="haibao" src="../assets/prizeImg/MyPrize.jpg" alt />
15
                 <img class="haibao" src="../assets/prizeImg/MyPrize.jpg" alt />
16
-
17
                 <div class="haibao-jiangping">
16
                 <div class="haibao-jiangping">
18
                   <img v-if="Prize" :src="`${Prize.thumb2}`" alt />
17
                   <img v-if="Prize" :src="`${Prize.thumb2}`" alt />
19
                   <h1 v-else>暂无奖品</h1>
18
                   <h1 v-else>暂无奖品</h1>
26
               <div class="group1 flex-col">
25
               <div class="group1 flex-col">
27
                 <div class="wrap3 flex-col">
26
                 <div class="wrap3 flex-col">
28
                   <img src="../assets/prizeImg/notPrize.jpg" class="subhaibao" />
27
                   <img src="../assets/prizeImg/notPrize.jpg" class="subhaibao" />
29
-                  <!-- 没有奖 -->
28
+                  <!-- 没有奖 -->
30
                 </div>
29
                 </div>
31
               </div>
30
               </div>
32
             </div>
31
             </div>
38
             <div class="group1 flex-col">
37
             <div class="group1 flex-col">
39
               <div class="wrap3 flex-col">
38
               <div class="wrap3 flex-col">
40
                 <img src="../assets/prizeImg/activityOver.jpg" class="subhaibao" />
39
                 <img src="../assets/prizeImg/activityOver.jpg" class="subhaibao" />
41
-                <!-- 活动结束 -->
40
+                <!-- 没有奖品 -->
42
               </div>
41
               </div>
43
             </div>
42
             </div>
44
           </div>
43
           </div>

+ 26
- 14
src/components/WinningPopup.vue View File

11
           <div class="dialog-body">
11
           <div class="dialog-body">
12
             <div class="card-wrapper">
12
             <div class="card-wrapper">
13
               <div :class="`dialog-popuImag ${classDivAA?'flipped':''}`">
13
               <div :class="`dialog-popuImag ${classDivAA?'flipped':''}`">
14
-                <!-- <div class="back" :style="`background-image: url(${backimg});`"> -->
15
-                <!-- <img
16
-                    style="width: 48vw; height:492px"
17
-                    src="../assets/prizeImg/HappyWnning.jpg"
18
-                    alt
19
-                />-->
20
-                <!-- </div> -->
14
+                <div class="back" :style="`background-image: url(${backimg});`">
15
+                  <img style="width: 48vw; height:492px " src="../assets/index.jpg" />
16
+                </div>
21
 
17
 
22
                 <div class="front">
18
                 <div class="front">
23
-                  <img
24
-                    style="width: 48vw; height:492px "
25
-                    src="../assets/prizeImg/HappyWnning.jpg"
26
-                    alt
27
-                  />
19
+                  <img style="width: 48vw; height:492px" src="../assets/prizeImg/HappyWnning.jpg" />
20
+
28
                   <div class="PrizeImg">
21
                   <div class="PrizeImg">
29
                     <img style="width: 100%; height:100% " :src="Prize.thumb" alt />
22
                     <img style="width: 100%; height:100% " :src="Prize.thumb" alt />
30
                   </div>
23
                   </div>
218
         display: flex;
211
         display: flex;
219
         justify-content: center;
212
         justify-content: center;
220
         transform-style: preserve-3d;
213
         transform-style: preserve-3d;
221
-        transition: all 1.2s ease;
214
+        transition: all 0.8s ease;
222
 
215
 
223
         .front {
216
         .front {
224
           position: relative;
217
           position: relative;
225
           display: flex;
218
           display: flex;
226
           justify-content: center;
219
           justify-content: center;
220
+          transform: rotateY(180deg); //iPhone异常
221
+
227
           .PrizeImg {
222
           .PrizeImg {
228
             width: 55vw;
223
             width: 55vw;
229
             position: absolute;
224
             position: absolute;
232
           }
227
           }
233
         }
228
         }
234
         .back {
229
         .back {
235
-          transform: rotateY(180deg);
230
+          position: absolute;
231
+          transform: rotateY(-180deg);
236
           width: 180px;
232
           width: 180px;
237
           height: 492px;
233
           height: 492px;
238
           background-size: 100% auto;
234
           background-size: 100% auto;
244
         }
240
         }
245
       }
241
       }
246
       .flipped {
242
       .flipped {
243
+        animation: change 0.6s linear forwards;
244
+      }
245
+    }
246
+    @keyframes change {
247
+      from {
248
+        top: -20vh;
249
+        left: -20vw;
250
+        opacity: 0;
251
+        transform: scale(0.5);
252
+      }
253
+      to {
254
+        top: -0;
255
+        left: -0;
256
+        opacity: 2;
257
+        transform: scale(1);
258
+        transform: rotateY(180deg); //iPhone异常
247
       }
259
       }
248
     }
260
     }
249
 
261
 

+ 3
- 3
src/pages/Honghe.vue View File

173
       list: shuffle(monthList),
173
       list: shuffle(monthList),
174
       currentMonth: null,
174
       currentMonth: null,
175
       showPopup: false,
175
       showPopup: false,
176
-      showMyWinning: false,
176
+      showMyWinning: true,
177
       prizeList: [],
177
       prizeList: [],
178
       bingoId: rand(0, 12) + 1, // 可以抽奖的月份
178
       bingoId: rand(0, 12) + 1, // 可以抽奖的月份
179
       NOMyWinningShow: true,
179
       NOMyWinningShow: true,
227
           share({ title: '抽取幸运签,解锁隐藏福利', desc: '每月都有欢乐发生' })
227
           share({ title: '抽取幸运签,解锁隐藏福利', desc: '每月都有欢乐发生' })
228
         }
228
         }
229
       },
229
       },
230
-      immediate: true,
231
-    },
230
+      immediate: true
231
+    }
232
   },
232
   },
233
   methods: {
233
   methods: {
234
     noShowMy() {
234
     noShowMy() {