feats

src/pages/signup.vue

@@ -1,63 +1,65 @@
 <template>
   <div class="signup-box">
-    <div class="pre-load" :class="{ hide: !showPreload }" @click="showPreload = false">
+    <div v-if="showPreload" class="pre-load" @click="showPreload = false">
       <img src="../../public/images/signup/preload.jpg" alt="">
     </div>
-    <img class="bgi" src="../../public/images/signup/bgi.jpg" />
-    <div class="form">
-      <div class="formItem">
-        <label>身&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;份</label>
-        <div style="float: right;" @click="handleDesigner">
-          <img class="checkedImg" :src="ischecked ? Unchecked : checked" />
-          <label for="dewey">设计师</label>
+    <div v-else>
+      <img class="bgi" src="../../public/images/signup/bgi.jpg" />
+      <div class="form">
+        <div class="formItem">
+          <label>身&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;份</label>
+          <div style="float: right;" @click="handleDesigner">
+            <img class="checkedImg" :src="ischecked ? Unchecked : checked" />
+            <label for="dewey">设计师</label>
+          </div>
+          <div style="float: right;margin-right: 7vw;" @click="handleUser">
+            <img class="checkedImg" :src="ischecked ? checked : Unchecked" />
+            <label for="huey">用户</label>
+          </div>
         </div>
-        <div style="float: right;margin-right: 7vw;" @click="handleUser">
-          <img class="checkedImg" :src="ischecked ? checked : Unchecked" />
-          <label for="huey">用户</label>
+        <div class="formItem">
+          <label>姓&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;名</label>
+          <input
+            class="duiqi"
+            type="text"
+            :class="{placeHodler: userName}"
+            v-model="formData.userName"
+            @focus="nameFocus"
+            @blur="nameBlur"
+          />
         </div>
+        <div class="formItem">
+          <label>手&nbsp;机&nbsp;号</label>
+          <input
+            class="duiqi"
+            type="text"
+            :class="{placeHodler: phone}"
+            v-model="formData.phone"
+            @focus="phoneFocus"
+            @blur="phoneBlur"
+          />
+        </div>
+        <div class="formItem" @click="showPicker = true">
+          <label>意向产品</label>
+          <div class="duiqi" :class="{grey: !intendedProduct}">{{formData.intendedProduct || "请选择"}}</div>
+        </div>
+        <div class="formItem" @click="showArea = true">
+          <label>所在地区</label>
+          <div class="duiqi" :class="{grey: !address}">{{address || "请选择"}}</div>
+        </div>
+        <img @click="sumbit" class="submit" src="../../public/images/signup/submit.png" width="45%" />
       </div>
-      <div class="formItem">
-        <label>姓&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;名</label>
-        <input
-          class="duiqi"
-          type="text"
-          :class="{placeHodler: userName}"
-          v-model="formData.userName"
-          @focus="nameFocus"
-          @blur="nameBlur"
-        />
-      </div>
-      <div class="formItem">
-        <label>手&nbsp;机&nbsp;号</label>
-        <input
-          class="duiqi"
-          type="text"
-          :class="{placeHodler: phone}"
-          v-model="formData.phone"
-          @focus="phoneFocus"
-          @blur="phoneBlur"
+      <van-popup v-model="showPicker" position="bottom">
+        <van-picker
+          title="意向产品"
+          show-toolbar
+          :columns="productList"
+          @confirm="onConfirm"
+          @cancel="onCancel"
         />
-      </div>
-      <div class="formItem" @click="showPicker = true">
-        <label>意向产品</label>
-        <div class="duiqi" :class="{grey: !intendedProduct}">{{formData.intendedProduct || "请选择"}}</div>
-      </div>
-      <div class="formItem" @click="showArea = true">
-        <label>所在地区</label>
-        <div class="duiqi" :class="{grey: !address}">{{address || "请选择"}}</div>
-      </div>
-      <img @click="sumbit" class="submit" src="../../public/images/signup/submit.png" width="45%" />
+      </van-popup>
+      <area-picker :show.sync="showArea" @change="handleArea" @cancel="showArea=false"></area-picker>
     </div>
-    <van-popup v-model="showPicker" position="bottom">
-      <van-picker
-        title="意向产品"
-        show-toolbar
-        :columns="productList"
-        @confirm="onConfirm"
-        @cancel="onCancel"
-      />
-    </van-popup>
-    <area-picker :show.sync="showArea" @change="handleArea" @cancel="showArea=false"></area-picker>
   </div>
 </template>
 <script>
@@ -222,16 +224,10 @@ export default {
   width: 100%;
   min-height: 100%;
   z-index: 100;
-  top: 0;
-  transition: top 1s ease;
 
   & > img {
     width: 100%;
   }
-
-  &.hide {
-    top: -200vh;
-  }
 }
 
 .bgi {