.

src/pages/signup.vue

@@ -1,5 +1,5 @@
 <template>
-  <div>
+  <div class="signup-box">
     <img class="bgi" src="../../public/images/signup/bgi.jpg" />
     <div class="form">
       <div class="formItem">
@@ -167,40 +167,63 @@ export default {
 }
 </script>
 <style lang="scss" scoped>
+// * {
+//   margin: 0;
+//   padding: 0;
+// }
+
+.signup-box {
+  overflow: hidden;
+  height: 100%;
+}
+
 .bgi {
-  z-index: 1;
   width: 100%;
   position: absolute;
 }
 .form {
+  position: relative;
   color: #a6b1ab;
-  position: absolute;
-  margin-top: 18%;
-  z-index: 2;
+  margin-top: 80px;
+  padding: 0 8vw;
+  box-sizing: border-box;
+
+
   .formItem {
-    position: absolute;
-    width: 82vw;
-    height: 3vh;
-    line-height: 3vh;
-    margin: 6vw;
-    padding: 3vw;
+    width: 100%;
+    font-size: 16px;
+    line-height: 2.6em;
+    padding: 0 1em;
     border: 1px solid #4f5054;
     background-color: #212226;
+    box-sizing: border-box;
+
+    & + .formItem {
+      margin-top: 1.2em;
+    }
 
     & > label {
       display: inline-block;
       width: 4.5em;
     }
+    
     .duiqi {
-      background-color: #212226;
+      display: inline-block;
+      background-color: transparent;
       border: none;
       text-align: right;
-      float: right;
-      width: calc(100% - 7em);
+      width: calc(100% - 5em);
+      height: 2.6em;
+      line-height: 2.6em;
       overflow: hidden;
       text-overflow: ellipsis;
       white-space: nowrap;
+      vertical-align: middle;
+      padding: 0;
+      margin: 0;
+      outline: none;
     }
+
     .checkedImg {
       width: 16px;
       top: 2px;
@@ -213,21 +236,11 @@ export default {
     color: #696969;
   }
 
-  .name {
-    margin-top: 23%;
-  }
-  .phonediv {
-    margin-top: 40%;
-  }
-  .intendedProductdiv {
-    margin-top: 57%;
-  }
-  .addressdiv {
-    margin-top: 74%;
-  }
   .submit {
-    margin: 93% 0 0 27.5vw;
-    width: 45%;
+    display: block;
+    margin-top: 2em;
+    margin-left: auto;
+    margin-right: auto;
   }
 }
 </style>