bug fix

src/App.vue

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

src/pages/home/index.vue

@@ -9,7 +9,7 @@
         alt
       >
     </div>
-    <div class="subPage" v-if="showPage" style="overflow: visible;">
+    <div class="subPage" v-if="showPage">
       <img
         src="http://wx.jinchengjiaye.com/h5-2019/static/images/icon-12.png"
         style="z-index: 3;"
@@ -20,8 +20,7 @@
         src="http://wx.jinchengjiaye.com/h5-2019/static/images/icon-10.png"
         class="icon10"
         style="position: absolute;left:9vw;top:3.7vh;z-index:100;width: 31.2vw;"
-        v-if="imgSrc === null"
-        :class="{'active': currentPage !== 0}"
+        :class="{'active': currentPage !== 0, 'trans': currentPage < 2}"
         alt
       >
       <div class="page1" :class="{'show': currentPage === 1 && imgSrc === null}">
@@ -118,7 +117,7 @@
               class="flagItem"
               :class="{'active': currentPage === 2, [`flagItem${index+1}`]: true, 'selected': item.select}"
               @click="selectFlagItem(item, index)"
-            >{{item.value}}</span>
+            ><span />{{item.value}}</span>
           </div>
         </div>
       </div>
@@ -145,7 +144,8 @@
             >
           </a>
         </div>
-        <div class="centerLabel" style="z-index: 20;">
+        <div class="userName" v-if="userInfo !== null">{{ userInfo.Nickyname }}</div>
+        <div class="centerLabel" style="z-index: 20; width: 100vw; left: 17vw; transform: translate(0%,-50%);">
           <span>新年好呀！</span>
           <span>Flag只要敢想，都有可能实现！</span>
           <span></span>
@@ -202,7 +202,7 @@
           <span>祝福你的2019</span>
         </div>
       </div>
-      <div class="page4" :class="{'show': currentPage === 4 && imgSrc !== null}">
+      <div class="page4" :class="{'show': currentPage === 4 && imgSrc !== null}" :style="{zIndex: 9999}">
         <img :src="imgSrc" width="100%" class="cover" alt>
       </div>
     </div>
@@ -299,8 +299,13 @@ export default {
     },
     selectFlagItem (item, index) {
       document.getElementsByClassName('flagItem')[index].style = 'transition: all .3s ease;-webkit-transition: all .3s ease;'
-      item.select = true
-      this.userSelectFlag.push(item)
+      if (item.select) {
+        item.select = false
+        this.userSelectFlag = this.userSelectFlag.filter(x => x.value !== item.value)
+      } else {
+        item.select = true
+        this.userSelectFlag.push(item)
+      }
     },
     imgLoad () { // 图片加载进度存储
       this.imgNum += 1

src/pages/home/page.scss

@@ -169,6 +169,18 @@
                 display: block;
                 position: absolute;
               }
+
+              &.selected{
+                span {
+                  position: absolute;
+                  right: -.1rem;
+                  &::after{
+                    content:'\2713';
+                    font-size: .3rem;
+                    color: #3094F9;
+                  }
+                }
+              }
             }
             .flagItem1{
               left: 0;
@@ -325,11 +337,11 @@
               overflow: visible;
               transform: scale(1, 1) translateX(-50%);
               -webkit-transform: scale(1, 1) translateX(-50%);
-              &.selected{
-                opacity: 0;
-                transform: scale(0, 0) translateX(-50%);
-                -webkit-transform: scale(0, 0) translateX(-50%);
-              }
+              // &.selected{
+              //   opacity: 0;
+              //   transform: scale(0, 0) translateX(-50%);
+              //   -webkit-transform: scale(0, 0) translateX(-50%);
+              // }
               &::after{
                 content: '';
                 border-color: #a57dd1 transparent transparent transparent;
@@ -449,17 +461,29 @@
             background: rgba(255, 255, 255, .6);
           }
         }
+
+        .userName {
+          position: absolute;
+          overflow: hidden;
+          line-height: 12.8vw;
+          left: 36vw;
+          top: 12vh;
+          font-size: 0.2rem;
+          color: #fff;
+          z-index: 20;
+        }
+
         .bottomText{
-          width: .7rem;
+          width: .8rem;
           left: 9vw;
           position: absolute;
-          bottom: 1.5vh;
+          bottom: 2vh;
           overflow: hidden;
           z-index: 100;
           a{
             width: 100%;
             display: block;
-            height: .7rem;
+            height: .8rem;
             position: relative;
             background: rgba(255, 255, 255, .6);
             margin-bottom: .05rem;
@@ -501,8 +525,10 @@
     }
   }
   .icon10{
-    transition: all .5s ease-in;
-    -webkit-transition: all .5s ease-in;
+    &.trans {
+      transition: all .5s ease-in;
+      -webkit-transition: all .5s ease-in;
+    }
     opacity: 0;
     transform: translateX(.3rem);
     -webkit-transform: translateX(.3rem);