Parcourir la source

Merge branch 'master' of http://git.ycjcjy.com/honghe/h5-draw-lots

Baozhangchao il y a 3 ans
Parent
révision
98dc60cbe4
4 fichiers modifiés avec 137 ajouts et 22 suppressions
  1. BIN
      src/assets/popupImg/redBack.jpg
  2. 20
    6
      src/components/Popup.vue
  3. 100
    0
      src/components/imgbox.vue
  4. 17
    16
      src/pages/Honghe.vue

BIN
src/assets/popupImg/redBack.jpg Voir le fichier


+ 20
- 6
src/components/Popup.vue Voir le fichier

@@ -70,12 +70,30 @@ export default {
70 70
       default: false,
71 71
       required: true
72 72
     },
73
-
73
+    // title: {
74
+    //   type: String,
75
+    //   required: true
76
+    // },
77
+    showCancel: {
78
+      typs: Boolean,
79
+      default: false,
80
+      required: false
81
+    },
74 82
     cancelText: {
75 83
       type: String,
76 84
       default: '取消',
77 85
       required: false
86
+    },
87
+    confirmText: {
88
+      type: String,
89
+      default: '确定',
90
+      required: false
78 91
     }
92
+    // LoadingShow: {
93
+    //   type: Boolean,
94
+    //   default: false,
95
+    //   required: true
96
+    // }
79 97
   },
80 98
 
81 99
   data() {
@@ -151,14 +169,10 @@ export default {
151 169
 
152 170
     /** 取消按钮操作 */
153 171
     cancel() {
172
+      event.stopPropagation()
154 173
       this.$emit('cancel', true)
155 174
     },
156 175
 
157
-    /** 确认按钮操作 */
158
-    confirm() {
159
-      this.$emit('confirm', true)
160
-    },
161
-
162 176
     /** 点击遮罩关闭弹窗 */
163 177
     closeMyself(event) {
164 178
       // this.sloveBodyOverflow()

+ 100
- 0
src/components/imgbox.vue Voir le fichier

@@ -0,0 +1,100 @@
1
+<template>
2
+  <div :class="{ bigBox: state === 1 }">
3
+    <popup :show="showPopup" @cancel="cancelFrom" />
4
+    <div class="card" :class="{ flipped: state === 1 }" @click="showPopup=true">
5
+      <div class="front">
6
+        <img v-if="isFrist" :src="fristFontImg" class="nowimage" />
7
+        <img v-else :src="nowFontImg" class="nowimage" />
8
+      </div>
9
+      <div class="back">
10
+        <img v-if="state===1" :src="nowBackImg" class="nowimage" />
11
+        <img v-else :src="openImg" class="nowimage" />
12
+      </div>
13
+    </div>
14
+  </div>
15
+</template>
16
+<script>
17
+export default {
18
+  props: {
19
+    value: {
20
+      type: String,
21
+      require: true,
22
+    },
23
+  },
24
+  components: {
25
+    Popup: () => import("@/components/Popup.vue"),
26
+  },
27
+  data() {
28
+    return {
29
+      showPopup: false,
30
+      state: 1,
31
+      classList: ["card"],
32
+      fristFontImg:undefined,
33
+      nowFontImg: require('../assets/popupImg/backImag.jpg'),
34
+      nowBackImg: require('../assets/popupImg/popuBody.jpg'),
35
+      openImg: require('../assets/popupImg/redBack.jpg'),
36
+      isFrist:true,
37
+    };
38
+  },
39
+  watch: {
40
+    value: {
41
+      handler(val) {
42
+        if (val) {
43
+          this.fristFontImg = val;
44
+        }
45
+      },
46
+      immediate: true,
47
+    },
48
+  },
49
+  methods: {
50
+    transform() {
51
+      this.showPopup=true
52
+      this.state = Math.abs(this.state - 1);
53
+    },
54
+    cancelFrom() {
55
+      this.state = Math.abs(this.state - 1);
56
+      this.showPopup=false
57
+      this.isFrist=false
58
+    }
59
+  },
60
+};
61
+</script>
62
+<style lang="less" scoped>
63
+.bigBox {
64
+  perspective: 600px;
65
+  overflow: hidden;
66
+}
67
+
68
+.card {
69
+  position: relative;
70
+  width: 22vw;
71
+  height: 60.5vw;
72
+  transform-style: preserve-3d;
73
+  transition: all 1.6s ease;
74
+  transform: rotateY(-180deg) scale(2);
75
+}
76
+
77
+
78
+.card > div {
79
+  position: absolute;
80
+  top: 0;
81
+  left: 0;
82
+  width: 100%;
83
+
84
+  /* 背面不显示 */
85
+  backface-visibility: hidden;
86
+}
87
+
88
+.flipped {
89
+  transform: rotateY(0);
90
+}
91
+
92
+.nowimage {
93
+  width: 22vw;
94
+  height: 60.5vw;
95
+}
96
+
97
+.card .back {
98
+  transform: rotateY(-180deg);
99
+}
100
+</style>>

+ 17
- 16
src/pages/Honghe.vue Voir le fichier

@@ -13,10 +13,10 @@
13 13
           <div @click="handleMonthClick(month)">
14 14
             <!-- <img class="section-item-image" src="../assets/coverIndex.jpg" /> -->
15 15
             <img
16
-              :class="`section-item-image ${!showPopup?'backImag':''}` "
16
+              :class="`section-item-image ${rotateY?'backImag':''}` "
17 17
               src="../assets/popupImg/backImag.jpg"
18 18
             />
19
-          </div>
19
+          </div>-->
20 20
         </div>
21 21
       </div>
22 22
     </div>
@@ -260,25 +260,26 @@ export default {
260 260
         border-left: 1px solid #d0b69a;
261 261
         border-top: 1px solid #d0b69a;
262 262
         display: inline-flex;
263
+        overflow: hidden;
263 264
         &-image {
264 265
           width: 22vw;
265 266
 
266 267
           background-size: 100% 100%;
267 268
         }
268
-        // .backImag {
269
-        //   position: relative;
270
-        //   animation: change 0.8s linear forwards;
271
-        // }
272
-        // @keyframes change {
273
-        //   from {
274
-        //     width: 50%;
275
-        //     z-index: 1;
276
-        //     transform: rotateY(180deg);
277
-        //   }
278
-        //   to {
279
-        //     width: 22vw;
280
-        //   }
281
-        // }
269
+        .backImag {
270
+          // position: relative;
271
+          width: 22vw;
272
+          animation: change 0.8s linear forwards;
273
+        }
274
+        @keyframes change {
275
+          from {
276
+            width: 44vw;
277
+            transform: rotateY(180deg);
278
+          }
279
+          to {
280
+            width: 22vw;
281
+          }
282
+        }
282 283
       }
283 284
     }
284 285
   }