许成详 6 anni fa
parent
commit
6588fdc109
3 ha cambiato i file con 50 aggiunte e 19 eliminazioni
  1. 1
    1
      src/App.vue
  2. 13
    8
      src/pages/home/index.vue
  3. 36
    10
      src/pages/home/page.scss

+ 1
- 1
src/App.vue Vedi File

@@ -13,7 +13,7 @@ export default {
13 13
   name: 'App',
14 14
   data () {
15 15
     return {
16
-      showPage: false,
16
+      showPage: true, // 不控制显示时机
17 17
       code: ''
18 18
     }
19 19
   },

+ 13
- 8
src/pages/home/index.vue Vedi File

@@ -9,7 +9,7 @@
9 9
         alt
10 10
       >
11 11
     </div>
12
-    <div class="subPage" v-if="showPage" style="overflow: visible;">
12
+    <div class="subPage" v-if="showPage">
13 13
       <img
14 14
         src="http://wx.jinchengjiaye.com/h5-2019/static/images/icon-12.png"
15 15
         style="z-index: 3;"
@@ -20,8 +20,7 @@
20 20
         src="http://wx.jinchengjiaye.com/h5-2019/static/images/icon-10.png"
21 21
         class="icon10"
22 22
         style="position: absolute;left:9vw;top:3.7vh;z-index:100;width: 31.2vw;"
23
-        v-if="imgSrc === null"
24
-        :class="{'active': currentPage !== 0}"
23
+        :class="{'active': currentPage !== 0, 'trans': currentPage < 2}"
25 24
         alt
26 25
       >
27 26
       <div class="page1" :class="{'show': currentPage === 1 && imgSrc === null}">
@@ -118,7 +117,7 @@
118 117
               class="flagItem"
119 118
               :class="{'active': currentPage === 2, [`flagItem${index+1}`]: true, 'selected': item.select}"
120 119
               @click="selectFlagItem(item, index)"
121
-            >{{item.value}}</span>
120
+            ><span />{{item.value}}</span>
122 121
           </div>
123 122
         </div>
124 123
       </div>
@@ -145,7 +144,8 @@
145 144
             >
146 145
           </a>
147 146
         </div>
148
-        <div class="centerLabel" style="z-index: 20;">
147
+        <div class="userName" v-if="userInfo !== null">{{ userInfo.Nickyname }}</div>
148
+        <div class="centerLabel" style="z-index: 20; width: 100vw; left: 17vw; transform: translate(0%,-50%);">
149 149
           <span>新年好呀!</span>
150 150
           <span>Flag只要敢想,都有可能实现!</span>
151 151
           <span></span>
@@ -202,7 +202,7 @@
202 202
           <span>祝福你的2019</span>
203 203
         </div>
204 204
       </div>
205
-      <div class="page4" :class="{'show': currentPage === 4 && imgSrc !== null}">
205
+      <div class="page4" :class="{'show': currentPage === 4 && imgSrc !== null}" :style="{zIndex: 9999}">
206 206
         <img :src="imgSrc" width="100%" class="cover" alt>
207 207
       </div>
208 208
     </div>
@@ -299,8 +299,13 @@ export default {
299 299
     },
300 300
     selectFlagItem (item, index) {
301 301
       document.getElementsByClassName('flagItem')[index].style = 'transition: all .3s ease;-webkit-transition: all .3s ease;'
302
-      item.select = true
303
-      this.userSelectFlag.push(item)
302
+      if (item.select) {
303
+        item.select = false
304
+        this.userSelectFlag = this.userSelectFlag.filter(x => x.value !== item.value)
305
+      } else {
306
+        item.select = true
307
+        this.userSelectFlag.push(item)
308
+      }
304 309
     },
305 310
     imgLoad () { // 图片加载进度存储
306 311
       this.imgNum += 1

+ 36
- 10
src/pages/home/page.scss Vedi File

@@ -169,6 +169,18 @@
169 169
                 display: block;
170 170
                 position: absolute;
171 171
               }
172
+
173
+              &.selected{
174
+                span {
175
+                  position: absolute;
176
+                  right: -.1rem;
177
+                  &::after{
178
+                    content:'\2713';
179
+                    font-size: .3rem;
180
+                    color: #3094F9;
181
+                  }
182
+                }
183
+              }
172 184
             }
173 185
             .flagItem1{
174 186
               left: 0;
@@ -325,11 +337,11 @@
325 337
               overflow: visible;
326 338
               transform: scale(1, 1) translateX(-50%);
327 339
               -webkit-transform: scale(1, 1) translateX(-50%);
328
-              &.selected{
329
-                opacity: 0;
330
-                transform: scale(0, 0) translateX(-50%);
331
-                -webkit-transform: scale(0, 0) translateX(-50%);
332
-              }
340
+              // &.selected{
341
+              //   opacity: 0;
342
+              //   transform: scale(0, 0) translateX(-50%);
343
+              //   -webkit-transform: scale(0, 0) translateX(-50%);
344
+              // }
333 345
               &::after{
334 346
                 content: '';
335 347
                 border-color: #a57dd1 transparent transparent transparent;
@@ -449,17 +461,29 @@
449 461
             background: rgba(255, 255, 255, .6);
450 462
           }
451 463
         }
464
+
465
+        .userName {
466
+          position: absolute;
467
+          overflow: hidden;
468
+          line-height: 12.8vw;
469
+          left: 36vw;
470
+          top: 12vh;
471
+          font-size: 0.2rem;
472
+          color: #fff;
473
+          z-index: 20;
474
+        }
475
+
452 476
         .bottomText{
453
-          width: .7rem;
477
+          width: .8rem;
454 478
           left: 9vw;
455 479
           position: absolute;
456
-          bottom: 1.5vh;
480
+          bottom: 2vh;
457 481
           overflow: hidden;
458 482
           z-index: 100;
459 483
           a{
460 484
             width: 100%;
461 485
             display: block;
462
-            height: .7rem;
486
+            height: .8rem;
463 487
             position: relative;
464 488
             background: rgba(255, 255, 255, .6);
465 489
             margin-bottom: .05rem;
@@ -501,8 +525,10 @@
501 525
     }
502 526
   }
503 527
   .icon10{
504
-    transition: all .5s ease-in;
505
-    -webkit-transition: all .5s ease-in;
528
+    &.trans {
529
+      transition: all .5s ease-in;
530
+      -webkit-transition: all .5s ease-in;
531
+    }
506 532
     opacity: 0;
507 533
     transform: translateX(.3rem);
508 534
     -webkit-transform: translateX(.3rem);