修改手机号相关页面布局完成

components/ver_code.vue

@@ -25,7 +25,6 @@ export default {
 .input {
   width: 311px;
   height: 44px;
-  border-radius:3px;
 }
 .ver-btn {
   position: absolute;

pages/check/change_mobile.vue

@@ -1,12 +1,62 @@
 <template>
-  <div class="check">cm</div>
+  <div class="change-info">
+    <h1>修改手机号</h1>
+    <div class="line"></div>
+    <div class="contents">
+      <div class="mobile">新手机号</div>
+      <ver-code></ver-code>
+      <div class="code">验证码</div>
+      <el-input placeholder="请输入验证码"></el-input>
+    </div>
+    <div class="sub-container">
+      <el-button class="next-btn" type="primary">完成</el-button>
+    </div>
+  </div>
 </template>
 
 <script>
-export default {
+import VerCode from '@/components/ver_code'
 
+export default {
+  components: {
+    VerCode,
+  }
 }
 </script>
 
 <style scoped>
+.change-info {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  width: 1000px;
+  height: 588px;
+  background: white;
+  margin-top: 20px;
+}
+h1 {
+  margin: 27px 0 25px;
+}
+.line {
+  width: 960px;
+  height: 2px;
+  background: rgba(0, 0, 0, 0.06);
+}
+.el-input {
+  width: 311px;
+  height: 44px;
+}
+.mobile {
+  margin: 102px 0 5px;
+}
+.code {
+  margin: 20px 0 5px;
+}
+.sub-container {
+  width: 311px;
+}
+.next-btn {
+  width: 125px;
+  margin: 20px 0 41px;
+}
 </style>

pages/check/real_info.vue

@@ -1,12 +1,62 @@
 <template>
-  <div class="check">ri</div>
+  <div class="real-info">
+    <h1>实名信息验证</h1>
+    <div class="line"></div>
+    <div class="contents">
+      <div class="mobile">旧手机号</div>
+      <el-input placeholder="请输入手机号"></el-input>
+      <div class="code">身份证号</div>
+      <el-input placeholder="请输入身份证号"></el-input>
+    </div>
+    <div class="sub-container">
+      <el-button class="next-btn" type="primary">下一步</el-button>
+    </div>
+  </div>
 </template>
 
 <script>
-export default {
+import VerCode from '@/components/ver_code'
 
+export default {
+  components: {
+    VerCode,
+  }
 }
 </script>
 
 <style scoped>
+.real-info {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  width: 1000px;
+  height: 588px;
+  background: white;
+  margin-top: 20px;
+}
+h1 {
+  margin: 27px 0 25px;
+}
+.line {
+  width: 960px;
+  height: 2px;
+  background: rgba(0, 0, 0, 0.06);
+}
+.el-input {
+  width: 311px;
+  height: 44px;
+}
+.mobile {
+  margin: 102px 0 5px;
+}
+.code {
+  margin: 20px 0 5px;
+}
+.sub-container {
+  width: 311px;
+}
+.next-btn {
+  width: 125px;
+  margin: 20px 0 41px;
+}
 </style>