honghe
/
h5-draw-lots
Следить 3
В избранное 0
Форкнуть 0
Код Задачи 0 Pull Request'ы 0 Релизы 0 Вики Активность
Просмотр исходного кода

fix

Baozhangchao 3 лет назад
Родитель
5e3384f47d
Сommit
285f6e1464
6 измененных файлов: 679 добавлений и 37 удалений
Разделённый вид Показать статистику Diff
  1. 34
    28
      public/index.html
  2. 2
    2
      src/components/CalendarPoster.vue
  3. 305
    0
      src/components/MyWinning.vue
  4. 9
    6
      src/components/Popup.vue
  5. 325
    0
      src/components/WinningPopup.vue
  6. 4
    1
      src/pages/Honghe.vue

+ 34
- 28
public/index.html Просмотреть файл 

@@ -1,31 +1,37 @@
1 1 
 <!DOCTYPE html>
2 2 
 <html lang="">
3 
-  <head>
4 
-    <meta charset="utf-8">
5 
-    <meta http-equiv="X-UA-Compatible" content="IE=edge">
6 
-    <meta name="viewport" content="width=device-width,initial-scale=1.0">
7 
-    <link rel="icon" href="<%= BASE_URL %>favicon.ico">
8 
-    <title><%= htmlWebpackPlugin.options.title %></title>
9 
-    <style>
10 
-      .mainloading {
11 
-        position: absolute;
12 
-        left: 0;
13 
-        top: 0;
14 
-        width: 100vw;
15 
-        height: 100vh;
16 
-        overflow: hidden;
17 3
18 
-        background: #262626 url('./loading.gif') no-repeat center center;
19 
-        z-index: 999;
20 
-      }
21 
-    </style>
22 
-  </head>
23 
-  <body>
24 
-    <noscript>
25 
-      <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
26 
-    </noscript>
27 
-    <div class="mainloading"></div>
28 
-    <div id="app"></div>
29 
-    <!-- built files will be auto injected -->
30 
-  </body>
31 
-</html>
4 
+<head>
5 
+  <meta charset="utf-8">
6 
+  <meta http-equiv="X-UA-Compatible" content="IE=edge">
7 
+  <meta name="viewport" content="width=device-width,initial-scale=1.0">
8 
+  <link rel="icon" href="<%= BASE_URL %>favicon.ico">
9 
+  <title>
10 
+    <%= htmlWebpackPlugin.options.title %>
11 
+  </title>
12 
+  <style>
13 
+    .mainloading {
14 
+      position: absolute;
15 
+      left: 0;
16 
+      top: 0;
17 
+      width: 100vw;
18 
+      height: 100vh;
19 
+      overflow: hidden;
20 
+
21 
+      background: #262626 url('./loading.gif') no-repeat center center;
22 
+      z-index: 999;
23 
+    }
24 
+  </style>
25 
+</head>
26 
+
27 
+<body>
28 
+  <noscript>
29 
+    <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled.
30 
+        Please enable it to continue.</strong>
31 
+  </noscript>
32 
+  <div class="mainloading"></div>
33 
+  <div id="app"></div>
34 
+  <!-- built files will be auto injected -->
35 
+</body>
36 
+
37 
+</html>

src/components/ClickDIV.vue → src/components/CalendarPoster.vue Просмотреть файл 

@@ -60,7 +60,7 @@
60 60 
 import { hideLoading } from '@/utils'
61 61
62 62 
 export default {
63 
-  name: 'ClickDIV',
63 
+  name: 'CalendarPoster',
64 64 
   components: {
65 65 
     ShaerPopup: () => import('@/components/ShaerPopup.vue')
66 66 
   },
 
@@ -94,7 +94,7 @@ export default {
94 94
95 95 
   watch: {
96 96 
     stater(val, res) {
97 
-      console.log('🚀 ~ file: ClickDIV.vue ~ line 98 ~ stater ~ res', res)
97 
+      console.log('🚀 ~ file: CalendarPoster.vue ~ line 98 ~ stater ~ res', res)
98 98 
     },
99 99 
     created() {
100 100 
       // this.showSelf = this.show

+ 305
- 0
src/components/MyWinning.vue Просмотреть файл 

@@ -0,0 +1,305 @@
1 
+<template>
2 
+  <div v-if="show" class="dialog-my">
3 
+    <div style=" height:100vh; width:100%;
4 
+    ">
5 
+      <!-- 弹窗 -->
6 
+      <!-- <ShaerPopup :show="shaerShow" @closeMyself="cancelPopup" /> -->
7 
+      <!-- 弹窗 -->
8 
+
9 
+      <!-- <router-link :to="{path:'/'}"> -->
10 
+      <div
11 
+        class="backhome"
12 
+        :style="`background:url('${backimg}');background-size: 100% auto;`"
13 
+        @click="cancelPopupts"
14 
+      ></div>
15 
+      <!-- </router-link> -->
16 
+
17 
+      <div>
18 
+        <div v-if="stater!==0">
19 
+          <!-- 领取屏保 -->
20 
+          <div class="outer3 flex-col">
21 
+            <div class="haibao">
22 
+              <img class="haibao" src="~@/assets/saverShaerImg/haibao.jpg" alt />
23 
+            </div>
24 
+            <div class="mod2 flex-col">
25 
+              <!-- <div class="block1 flex-col">
26 
+                <div
27 
+                  class="section1 flex-col"
28 
+                  @click="()=>{this.shaerShow=true}"
29 
+                  :style="`background-image: url(${shaerBut});`"
30 
+                ></div>
31 
+                <span :style="`background-image: url(${pressImage});`" class="info2"></span>
32 
+              </div>-->
33 
+            </div>
34 
+          </div>
35 
+        </div>
36 
+        <div v-else style="overflow: auto;height:100vh;">
37 
+          <!-- 挂历 -->
38 
+          <div class="page flex-col">
39 
+            <div class="group1 flex-col">
40 
+              <div class="wrap3 flex-col">
41 
+                <img src="~@/assets/saverShaerImg/calendar.jpg" class="subhaibao" />
42 
+              </div>
43 
+              <!-- <div class="wrap5 flex-col">
44 
+                <span class="txt1" :style="`background-image: url(${pressLucky});`"></span>
45 
+                <div
46 
+                  class="main5 flex-col"
47 
+                  :style="`background-image: url(${shaerButRed});`"
48 
+                  @click="()=>{this.shaerShow=true}"
49 
+                ></div>
50 
+              </div>-->
51 
+            </div>
52 
+          </div>
53 
+        </div>
54 
+      </div>
55 
+    </div>
56 
+  </div>
57 
+</template>
58 
+
59 
+<script>
60 
+import { hideLoading } from '@/utils'
61 
+
62 
+export default {
63 
+  name: 'CalendarPoster',
64 
+  components: {
65 
+    ShaerPopup: () => import('@/components/ShaerPopup.vue')
66 
+  },
67 
+  props: {
68 
+    show: {
69 
+      type: Boolean,
70 
+      default: false,
71 
+      required: true
72 
+    },
73 
+    cancelText: {
74 
+      type: String,
75 
+      default: '取消',
76 
+      required: false
77 
+    },
78 
+
79 
+    stater: {
80 
+      type: Number
81 
+    }
82 
+  },
83 
+
84 
+  data() {
85 
+    return {
86 
+      shaerShow: false,
87 
+      backimg: require('../assets/saverShaerImg/back.png'),
88 
+      shaerBut: require('../assets/saverShaerImg/shaerLucky.png'),
89 
+      pressImage: require('../assets/saverShaerImg/PressImage.png'),
90 
+      shaerButRed: require('../assets/saverShaerImg/shaerLuckyRed.png'),
91 
+      pressLucky: require('../assets/saverShaerImg/PressLucky.png')
92 
+    }
93 
+  },
94 
+
95 
+  watch: {
96 
+    stater(val, res) {
97 
+      console.log('🚀 ~ file: CalendarPoster.vue ~ line 98 ~ stater ~ res', res)
98 
+    },
99 
+    created() {
100 
+      // this.showSelf = this.show
101 
+    },
102 
+    mounted() {
103 
+      hideLoading() //loading
104 
+
105 
+      this.forbidScroll()
106 
+      if (this.show === true) {
107 
+        this.transform()
108 
+      }
109 
+    }
110 
+  },
111 
+  methods: {
112 
+    /** 取消按钮操作 */
113 
+    cancelPopupts() {
114 
+      // this.shaerShow = false
115 
+      // console.log(22222222222222222222222)
116 
+      this.$emit('cancelPopus', true)
117 
+    },
118 
+
119 
+    cancelPopup() {
120 
+      this.shaerShow = false
121 
+    },
122 
+    // shareClick() {
123 
+    //   this.$router.replace({
124 
+    //     path: 'SaveShare',
125 
+    //     query: { states: 0 }
126 
+    //   })
127 
+    // },
128 
+    // saveClick() {
129 
+    //   this.$router.replace({
130 
+    //     path: 'SaveShare',
131 
+    //     query: { states: 1 }
132 
+    //   })
133 
+    // },
134 
+    transform() {
135 
+      setTimeout(() => {
136 
+        this.classDivAA = this.show
137 
+      }, 0)
138 
+    },
139 
+    /** 禁止页面滚动 */
140 
+    forbidScroll() {
141 
+      this.bodyOverflow = document.body.style.overflow
142 
+      document.body.style.overflow = 'hidden'
143 
+    },
144 
+
145 
+    /**  每次获取之后 zindex 自动增加 */
146 
+    getZIndex() {
147 
+      let zIndexInit = 2022112
148 
+      return zIndexInit++
149 
+    },
150 
+
151 
+    /** 确认按钮操作 */
152 
+    confirm() {
153 
+      this.$emit('confirm', true)
154 
+    },
155 
+
156 
+    /** 点击遮罩关闭弹窗 */
157 
+    closeMyself(event) {
158 
+      // this.sloveBodyOverflow()
159 
+      this.$emit('closeMyself', true)
160 
+    },
161 
+
162 
+    /** 恢复页面的滚动 */
163 
+    sloveBodyOverflow() {
164 
+      // this.showSelf = false
165 
+      document.body.style.overflow = this.bodyOverflow
166 
+    }
167 
+  }
168 
+}
169 
+</script>
170 
+
171 
+<style lang="less" scoped>
172 
+// 弹窗动画
173 
+
174 
+// 最外层 设置position定位
175 
+// 遮罩 设置背景层，z-index值要足够大确保能覆盖，高度 宽度设置满 做到全屏遮罩
176 
+
177 
+.flex-col {
178 
+  display: flex;
179 
+  flex-direction: column;
180 
+}
181 
+.dialog-my {
182 
+  position: fixed;
183 
+  top: 0;
184 
+  right: 0;
185 
+  width: 100%;
186 
+  height: 100%;
187 
+  transition: opacity 1s;
188 
+
189 
+  // 内容层 z-index要比遮罩大，否则会被遮盖
190 
+  .backhome {
191 
+    width: 75px;
192 
+    height: 42px;
193 
+    position: fixed;
194 
+    left: 1rem;
195 
+    top: 1rem;
196 
+    z-index: 19;
197 
+    background-repeat: no-repeat;
198 
+  }
199 
+  .outer3 {
200 
+    width: 100vw;
201 
+    height: 100vh;
202 
+    justify-content: flex-end;
203 
+    .haibao {
204 
+      width: 100vw;
205 
+      position: absolute;
206 
+      left: 0;
207 
+      top: 0;
208 
+    }
209 
+    .mod2 {
210 
+      z-index: 35;
211 
+      height: 210px;
212 
+      background-image: linear-gradient(
213 
+        180deg,
214 
+        transparent,
215 
+        rgba(0, 0, 0, 0.6)
216 
+      );
217 
+      width: 100vw;
218 
+      justify-content: flex-end;
219 
+      padding-bottom: 33px;
220 
+      align-items: center;
221 
+      .block1 {
222 
+        width: 180px;
223 
+        height: 113px;
224 
+        .section1 {
225 
+          height: 48px;
226 
+          border-radius: 8px;
227 
+          background-size: 100% auto;
228 
+          background-color: #fff;
229 
+          width: 180px;
230 
+          justify-content: center;
231 
+          align-items: center;
232 
+          border: 0;
233 
+        }
234 
+        .info2 {
235 
+          width: 152px;
236 
+          height: 54px;
237 
+          display: block;
238 
+          color: #fff;
239 
+          text-align: center;
240 
+          align-self: center;
241 
+          margin-top: 12px;
242 
+          background-size: 100% auto;
243 
+          background-repeat: no-repeat;
244 
+        }
245 
+      }
246 
+    }
247 
+  }
248 
+
249 
+  // 第二个页面
250 
+  .page {
251 
+    // z-index: 1;
252 
+    // position: relative;
253 
+    // overflow-y: auto;
254 
+    // width: 100vw;
255 
+    // height: 100vh;
256 
+
257 
+    .group1 {
258 
+      .wrap3 {
259 
+        z-index: 13;
260 
+        width: 100vw;
261 
+        overflow: hidden;
262 
+        align-self: center;
263 
+        margin-top: 1vw;
264 
+        margin-left: 0;
265 
+        .subhaibao {
266 
+          // position: absolute;
267 
+          width: 100%;
268 
+          left: 0;
269 
+          top: 0;
270 
+        }
271 
+      }
272 
+      .wrap5 {
273 
+        height: 137px;
274 
+        background-color: #efe9e0;
275 
+        width: 100vw;
276 
+        justify-content: center;
277 
+        align-items: center;
278 
+        display: flex;
279 
+        .txt1 {
280 
+          background-size: 100% auto;
281 
+          background-repeat: no-repeat;
282 
+          width: 112px;
283 
+          height: 18px;
284 
+          margin-bottom: 80px;
285 
+        }
286 
+      }
287 
+
288 
+      .main5 {
289 
+        background-size: 100% auto;
290 
+        background-repeat: no-repeat;
291 
+        height: 48px;
292 
+        border-radius: 8px;
293 
+        margin-top: 11px;
294 
+        width: 343px;
295 
+        background-color: #c1172d;
296 
+        border: 0;
297 
+        position: fixed;
298 
+        z-index: 15;
299 
+        bottom: 5vh;
300 
+      }
301 
+    }
302 
+  }
303 
+}
304 
+</style>
305 
+

+ 9
- 6
src/components/Popup.vue Просмотреть файл 

@@ -1,6 +1,6 @@
1 1 
 <template>
2 2 
   <div v-if="showSelf" class="dialog">
3 
-    <ClickDIV :show="showPopupClickDIV" @cancelPopus="canckle" :stater="stater" />
3 
+    <CalendarPoster :show="showPopupCalendarPoster" @cancelPopus="canckle" :stater="stater" />
4 4
5 5 
     <div class="dialog-mark" @click.self="closeMyself">
6 6 
       <div v-show="myShareShow" class="sharetiptxt" style>
 
@@ -37,11 +37,14 @@
37 37 
             </div>
38 38 
             <div
39 39 
               class="section-box-receive"
40 
-              @click="()=>{this.showPopupClickDIV=true,this.stater=0}"
40 
+              @click="()=>{this.showPopupCalendarPoster=true,this.stater=0}"
41 41 
             >
42 42 
               <img src="../assets/popupImg/receiveImage.png" alt />
43 43 
             </div>
44 
-            <div class="section-box-save" @click="()=>{this.showPopupClickDIV=true,this.stater=1}">
44 
+            <div
45 
+              class="section-box-save"
46 
+              @click="()=>{this.showPopupCalendarPoster=true,this.stater=1}"
47 
+            >
45 48 
               <img src="../assets/popupImg/saveImage.png" alt />
46 49 
             </div>
47 50 
           </div>
 
@@ -55,7 +58,7 @@
55 58 
 export default {
56 59 
   name: 'Popup',
57 60 
   components: {
58 
-    ClickDIV: () => import('@/components/ClickDIV.vue')
61 
+    CalendarPoster: () => import('@/components/CalendarPoster.vue')
59 62 
   },
60 63 
   props: {
61 64 
     show: {
 
@@ -79,7 +82,7 @@ export default {
79 82 
       bodyOverflow: '',
80 83 
       classDivAA: false,
81 84 
       myShareShow: false,
82 
-      showPopupClickDIV: false,
85 
+      showPopupCalendarPoster: false,
83 86 
       stater: null
84 87 
     }
85 88 
   },
 
@@ -110,7 +113,7 @@ export default {
110 113 
   },
111 114 
   methods: {
112 115 
     canckle() {
113 
-      this.showPopupClickDIV = false
116 
+      this.showPopupCalendarPoster = false
114 117 
     },
115 118 
     shareClick() {
116 119 
       this.$router.replace({

+ 325
- 0
src/components/WinningPopup.vue Просмотреть файл 

@@ -0,0 +1,325 @@
1 
+<template>
2 
+  <div v-if="showSelf" class="dialog">
3 
+    <div class="dialog-mark" @click.self="closeMyself">
4 
+      <div class="sharetiptxt" style>
5 
+        <img style="width:100%; height:100%;" src="../assets/popupImg/myShare.png" alt />
6 
+      </div>
7 
+      <transition name="dialog">
8 
+        <div class="dialog-sprite">
9 
+          <div class="dialog-body">
10 
+            <div class="card-wrapper">
11 
+              <div :class="`dialog-popuImag ${classDivAA?'flipped':''}`">
12 
+                <!-- <img src="../assets/popupImg/popuBody.jpg" alt /> -->
13 
+                <div class="back" :style="`background-image: url(${backimg});`">
14 
+                  <!-- <img style="width: 180px; height:492px" src="../assets/popupImg/popuBody.jpg" alt /> -->
15 
+                </div>
16 
+
17 
+                <div class="front">
18 
+                  <img
19 
+                    style="width: 180px; height:492px "
20 
+                    src="../assets/popupImg/backImag.jpg"
21 
+                    alt
22 
+                  />
23 
+                </div>
24 
+              </div>
25 
+            </div>
26 
+
27 
+            <div @click="cancel" class="dialog-footer">
28 
+              <!-- <img @click="cancel" class="btn" src="../assets/popupImg/cancelmage.png" alt /> -->
29 
+              <h1>开心收下</h1>
30 
+            </div>
31 
+          </div>
32 
+          <!-- 右侧 -->
33 
+        </div>
34 
+      </transition>
35 
+    </div>
36 
+  </div>
37 
+</template>
38 
+
39 
+<script>
40 
+export default {
41 
+  name: 'Popup',
42 
+  components: {},
43 
+  props: {
44 
+    show: {
45 
+      type: Boolean,
46 
+      default: false,
47 
+      required: true
48 
+    },
49 
+
50 
+    cancelText: {
51 
+      type: String,
52 
+      default: '取消',
53 
+      required: false
54 
+    }
55 
+  },
56 
+
57 
+  data() {
58 
+    return {
59 
+      name: 'dialog',
60 
+      showSelf: false,
61 
+      zIndex: this.getZIndex(),
62 
+      bodyOverflow: '',
63 
+      classDivAA: false,
64 
+      myShareShow: false,
65 
+      backimg: require('../assets/popupImg/popuBody.jpg'),
66 
+
67 
+      stater: null
68 
+    }
69 
+  },
70 
+  watch: {
71 
+    show(val) {
72 
+      console.log('🚀 ~ file: Popup.vue ~ line 78 ~ show ~ val', val)
73 
+      this.showSelf = val
74 
+      if (this.show === false) {
75 
+        this.myShareShow = false
76 
+      }
77 
+      this.transform()
78 
+
79 
+      // if (!val) {
80 
+      //   this.closeMyself()
81 
+      // } else {
82 
+      //   this.showSelf = val
83 
+      // }
84 
+    }
85 
+  },
86 
+  created() {
87 
+    this.showSelf = this.show
88 
+  },
89 
+  mounted() {
90 
+    this.forbidScroll()
91 
+    if (this.show === true) {
92 
+      this.transform()
93 
+    }
94 
+  },
95 
+  methods: {
96 
+    canckle() {
97 
+      // this.showPopupCalendarPoster = false
98 
+    },
99 
+    shareClick() {
100 
+      this.$router.replace({
101 
+        path: 'SaveShare',
102 
+        query: { states: 0 }
103 
+      })
104 
+    },
105 
+    saveClick() {
106 
+      this.$router.replace({
107 
+        path: 'SaveShare',
108 
+        query: { states: 1 }
109 
+      })
110 
+    },
111 
+    transform() {
112 
+      setTimeout(() => {
113 
+        this.classDivAA = this.show
114 
+      }, 0)
115 
+    },
116 
+    /** 禁止页面滚动 */
117 
+    forbidScroll() {
118 
+      this.bodyOverflow = document.body.style.overflow
119 
+      document.body.style.overflow = 'hidden'
120 
+    },
121 
+
122 
+    /**  每次获取之后 zindex 自动增加 */
123 
+    getZIndex() {
124 
+      let zIndexInit = 2022112
125 
+      return zIndexInit++
126 
+    },
127 
+
128 
+    /** 取消按钮操作 */
129 
+    cancel() {
130 
+      this.$emit('cancel', true)
131 
+    },
132 
+
133 
+    /** 确认按钮操作 */
134 
+    confirm() {
135 
+      this.$emit('confirm', true)
136 
+    },
137 
+
138 
+    /** 点击遮罩关闭弹窗 */
139 
+    closeMyself(event) {
140 
+      // this.sloveBodyOverflow()
141 
+    },
142 
+
143 
+    /** 恢复页面的滚动 */
144 
+    sloveBodyOverflow() {
145 
+      document.body.style.overflow = this.bodyOverflow
146 
+    }
147 
+  }
148 
+}
149 
+</script>
150 
+
151 
+<style lang="less" scoped>
152 
+// 弹窗动画
153 
+
154 
+// 最外层 设置position定位
155 
+// 遮罩 设置背景层，z-index值要足够大确保能覆盖，高度 宽度设置满 做到全屏遮罩
156 
+
157 
+.dialog {
158 
+  position: fixed;
159 
+  top: 0;
160 
+  right: 0;
161 
+  width: 100%;
162 
+  height: 100%;
163 
+  transition: opacity 1s;
164 
+
165 
+  // 内容层 z-index要比遮罩大，否则会被遮盖
166 
+  .dialog-mark {
167 
+    position: relative;
168 
+    top: 0;
169 
+    height: 0;
170 
+    width: 100%;
171 
+    height: 100%;
172 
+    background: rgba(0, 0, 0, 0.6);
173 
+    left: 0;
174 
+    top: 0;
175 
+    z-index: 99;
176 
+    display: flex;
177 
+    align-items: center;
178 
+    justify-content: center;
179 
+    .sharetiptxt {
180 
+      background-size: 100% auto;
181 
+      background-repeat: no-repeat;
182 
+      z-index: 55;
183 
+      width: 20px;
184 
+      height: 320px;
185 
+      display: block;
186 
+      position: absolute;
187 
+      right: 1rem;
188 
+      top: 0.5em;
189 
+      animation: tipup 1s ease infinite;
190 
+    }
191 
+  }
192 
+}
193 
+@keyframes tipup {
194 
+  0% {
195 
+    transform: translateY(0%);
196 
+  }
197 
+  50% {
198 
+    transform: translateY(5%);
199 
+  }
200 
+  100% {
201 
+    transform: translateY(0%);
202 
+  }
203 
+}
204 
+
205 
+.dialog-sprite {
206 
+  width: 100vw;
207 
+  display: flex;
208 
+  justify-content: center;
209 
+  position: relative;
210 
+
211 
+  .header {
212 
+    padding: 15px;
213 
+    text-align: center;
214 
+    font-size: 18px;
215 
+    font-weight: 700;
216 
+    color: #333;
217 
+  }
218 
+  .dialog-body {
219 
+    flex: 1;
220 
+    overflow-x: hidden;
221 
+    overflow-y: scroll;
222 
+    padding: 0 15px 20px 15px;
223 
+
224 
+    //中间卡片
225 
+    .card-wrapper {
226 
+      perspective: 600px;
227 
+      margin-top: 2em;
228 
+
229 
+      .dialog-popuImag {
230 
+        position: relative;
231 
+        display: flex;
232 
+        justify-content: center;
233 
+        transform-style: preserve-3d;
234 
+        transition: all 1.2s ease;
235 
+
236 
+        // div {
237 
+        //   // position: relative;
238 
+        //   position: absolute;
239 
+        //   width: 100%;
240 
+        //   height: 100%;
241 
+        //   /* 背面不显示 */
242 
+        //   // backface-visibility: hidden;
243 
+        // }
244 
+        .front {
245 
+        }
246 
+        .back {
247 
+          position: absolute;
248 
+          transform: rotateY(180deg);
249 
+          width: 180px;
250 
+          height: 492px;
251 
+          background-size: 100% auto;
252 
+          // animation: change 0.8s linear forwards;
253 
+        }
254 
+
255 
+        img {
256 
+          width: 48vw;
257 
+        }
258 
+      }
259 
+      .flipped {
260 
+        animation: change 0.8s linear forwards;
261 
+      }
262 
+    }
263 
+    @keyframes change {
264 
+      from {
265 
+        top: -20vh;
266 
+        left: -20vw;
267 
+        opacity: 0;
268 
+        transform: scale(0.5);
269 
+      }
270 
+      to {
271 
+        top: -0;
272 
+        left: -0;
273 
+        opacity: 2;
274 
+        transform: scale(1);
275 
+        transform: rotateY(180deg);
276 
+      }
277 
+    }
278 
+    //底部按钮
279 
+    .dialog-footer {
280 
+      width: 100%;
281 
+      background-size: 100% auto;
282 
+      margin: 10px auto 0;
283 
+      .btn {
284 
+        padding-top: 0;
285 
+        width: 32px;
286 
+        height: 32px;
287 
+      }
288 
+    }
289 
+  }
290 
+  .section-box {
291 
+    position: absolute;
292 
+    right: 15vw;
293 
+    top: 98px;
294 
+    height: 394px;
295 
+    display: flex;
296 
+    flex-direction: column;
297 
+    width: 36px;
298 
+    justify-content: space-between;
299 
+    margin-top: 2em;
300 
+
301 
+    img {
302 
+      width: 36px;
303 
+      background-size: 100% auto;
304 
+      margin-top: 0;
305 
+      border-radius: 18px;
306 
+    }
307 
+
308 
+    &-receive {
309 
+      width: 36px;
310 
+      background-size: 100% auto;
311 
+      margin-top: 0;
312 
+    }
313 
+    &-save {
314 
+      width: 36px;
315 
+      border-radius: 18px;
316 
+      background-size: 100% auto;
317 
+      width: 36px;
318 
+      margin-top: 0;
319 
+
320 
+      // background: url('../assets/popupImg/receiveImage.png') no-repeat;
321 
+    }
322 
+  }
323 
+}
324 
+</style>
325 
+

+ 4
- 1
src/pages/Honghe.vue Просмотреть файл 

@@ -2,6 +2,8 @@
2 2 
   <div class="index-box">
3 3 
     <popup :show="showPopup" @cancel="cancelFrom" :current-month="currentMonth" />
4 4
5 
+    <!-- <MyWinning :show="showPopup" @cancel="cancelFrom" /> -->
6 
+
5 7 
     <div>
6 8 
       <div>
7 9 
         <img class="topImage" src="../assets/hareTop.png" alt />
 
@@ -132,7 +134,8 @@ const monthList = [
132 134 
 export default {
133 135 
   name: 'Honghe',
134 136 
   components: {
135 
-    Popup: () => import('@/components/Popup.vue')
137 
+    Popup: () => import('@/components/Popup.vue'),
138 
+    MyWinning: () => import('@/components/MyWinning.vue')
136 139 
   },
137 140 
   data() {
138 141 
     return {