添加模拟页面：个人中心-基本信息

src/components/userinfo/accountsetting/components/boundtel.vue

@@ -1,10 +1,38 @@
 <template>
   <div class="boundtel-container">
-    <div class="contenttitle">
+    <div class="contenttitle" style="border-bottom: none;margin-top: 16px;margin-bottom: 0;">
-      <span v-if="!istelshow" style="font-size: 14px;">绑定手机</span>
+      <!-- <span v-if="!istelshow" style="font-size: 14px;">绑定手机</span>
-      <span v-else style="font-size: 14px;">已绑定手机</span>
+      <span v-else style="font-size: 14px;">已绑定手机</span> -->
+      <span style="font-size: 20px;margin-bottom: 32px;color: #333;font-weight: 600;">基本信息</span>
     </div>
-    <div v-if="isShow">
+    <div>
+      <a-form
+        :form="form"
+        layout="horizontal"
+        @submit="handleSubmit"
+      >
+        <a-form-item label="用户名">
+          <a-input placeholder="请输入用户名" v-model="form.user" style="width: 240px;" />
+        </a-form-item>
+
+        <a-form-item label="性别">
+          <a-radio-group v-model="form.sex">
+            <a-radio :value="1">
+              男
+            </a-radio>
+            <a-radio :value="2">
+              女
+            </a-radio>
+          </a-radio-group>
+        </a-form-item>
+
+        <a-form-item style="margin-top: -5px;">
+          <a-button type="primary" style="height: 32px;overflow: hidden;">更新基本信息</a-button>
+        </a-form-item>
+      </a-form>
+    </div>
+
+    <div v-if="false">
       <div class="contentbody" v-if="!istelshow">
         <div class="warninginfo">您的账号可能存在安全风险，为了确保为您本人操作，请先进行安全验证</div>
         <div class="tel">
@@ -61,6 +89,11 @@ export default {
       istelshow: false,
       isShow: false,
       trigger: false,
+
+      form:{
+        user:'',
+        sex:1
+      }
     }
   },
   // 计算属性
@@ -142,6 +175,16 @@ export default {
   height: 100px;
 }
 .boundtel-container {
+  .ant-form-item{
+    display: flex;
+  }
+  /deep/ .ant-form-item-label{
+    width: 55.38px;
+    text-align: right;
+  }
+
+
+
   .warninginfo {
     font-size: 14px;
     color: #4d575e;
@@ -184,17 +227,17 @@ export default {
       }
     }
   }
-  button {
+  // button {
-    width: 64px;
+  //   width: 64px;
-    height: 32px;
+  //   height: 32px;
-    background: #1890ff;
+  //   background: #1890ff;
-    border-radius: 6px;
+  //   border-radius: 6px;
-    border: none;
+  //   border: none;
-    font-size: 14px;
+  //   font-size: 14px;
-    color: #fff;
+  //   color: #fff;
-    &:hover {
+  //   &:hover {
-      background-color: #1890ffcc;
+  //     background-color: #1890ffcc;
-    }
+  //   }
-  }
+  // }
 }
 </style>

src/components/userinfo/accountsetting/inedex.vue

@@ -481,7 +481,7 @@ export default {
     overflow: hidden;
     margin-right: 20px;
     .userinfobox {
-      width: 320px;
+      width: 300px;
       height: 158px;
       background: #ffffff;
       border-radius: 6px;
@@ -685,9 +685,9 @@ export default {
     }
   }
   .rightcontent {
-    width: 620px;
+    width: 640px;
     min-height: 600px;
-    padding: 0 16px;
+    padding: 0 32px;
     background-color: #fff;
     border: 1px solid #ededed;
   }