同行人组件

src/project/pingchang/AppGetwayRegister/components/namePhone.vue

@@ -2,16 +2,15 @@
   <div class="namePhone">
     <div class="uForm">
       <div class="uName">
-        <h4>姓名</h4>
-        <u-input v-model="username" type="text" placeholder="请输入" :maxlength="10" clearable />
-      </div>
-      <div class="uPhone">
-        <h4>手机号</h4>
-        <u-input v-model="userphone" type="number" placeholder="请输入" :maxlength="11" clearable />
+        <u-input v-model="username" type="text" placeholder="姓名" :maxlength="10" />
+        <u-input v-model="userphone" type="number" placeholder="手机号" :maxlength="11" />
+
+        <div class="line"></div>
       </div>
+      
     </div>
-    <div class="btn">
-      <div class="removeBtn" @click="removeMe">删除</div>
+    <div class="btn" @click="removeMe">
+      <img src="../../../../static/img/del.png" alt="">
     </div>
   </div>
 </template>
@@ -58,32 +57,40 @@ export default {
   margin-bottom: 10px;
 
   .uForm {
-    width: calc(100% - 100px);
+    width: calc(100% - 60px);
     background: #EFF5FA;
     border-radius: 8px;
-    .uName,
-    .uPhone {
+    .uName {
       display: flex;
       align-items: center;
       height: 96px;
       line-height: 96px;
+      position: relative;
       h4 {
         width: 200px;
         text-align: center;
       }
       u-input {
         width: 100%;
+        padding-left: 20px;
+        box-sizing: border-box;
+      }
+      .line {
+        position: absolute;
+        left: 310px;
+        top: 18px;
+        width: 3px;
+        height: 64px;
+        background: #BACBDA;
       }
     }
   }
   .btn {
-    width: 100px;
-    .removeBtn {
-      width: 80px;
-      background: #ff0000;
-      border-radius: 8px;
-      color: #fff;
-      text-align: center;
+    width: 60px;
+    text-align: center;
+    img {
+      width: 32px;
+      height: 32px;
     }
   }
 }