ct

src/apps/AppGridManagement/FamilyList.vue

@@ -9,17 +9,19 @@
               <img src="./components/img/xz.png" alt="" class="checkbox" v-if="!item.checked" @click="userClick(index)">
               <img src="./components/img/xzh.png" alt="" class="checkbox" v-else @click="userClick(index)">
             </div>
-            <div>
-              <img :src="item.photo" class="userImg" v-if="item.photo">
-              <img src="./components/img/user-img.png" alt="" class="userImg" v-else>
-            </div>
             <div class="info">
-              <div class="name">
-                <span class="user-name">{{item.name}}</span>
-                <span class="user-tel">{{item.phone}}</span>
+              <div>
+                <img :src="item.photo" class="userImg" v-if="item.photo">
+                <img src="./components/img/user-img.png" alt="" class="userImg" v-else>
+              </div>
+              <div class="userInfo">
+                <div class="name">
+                  <span class="user-name">{{item.name}}</span>
+                  <span class="user-tel">{{item.phone}}</span>
+                </div>
+                <div class="idCard">{{item.idNumber && item.idNumber.replace(/(.{6}).*(.{4})/,"$1********$2")}}</div>
+                <div class="address">{{item.currentAreaName || ''}}{{ item.currentAddress || '' }}</div>
               </div>
-              <div class="idCard">{{item.idNumber && item.idNumber.replace(/(.{6}).*(.{4})/,"$1********$2")}}</div>
-              <div class="address">{{item.currentAreaName || ''}}{{ item.currentAddress || '' }}</div>
             </div>
           </div>
         </li>
@@ -29,7 +31,6 @@
     <div style="height:70px;"></div>
     <div class="footer" @click="toAddFamily()" v-if="edit">新增责任家庭</div>
     <div class="footer" @click="delFamily()" v-else>删除</div>
-
   </div>
 </template>
 
@@ -67,7 +68,6 @@ export default {
           ids.push(item.gmrId)
         }
       })
-
       if(!ids.length) {
         return this.$u.toast('请选中需要删除的家庭户主')
       }
@@ -121,7 +121,7 @@ export default {
   .main {
     padding-bottom: 112px;
     ul {
-      padding: 0px 32px;
+      padding-left: 32px;
       background-color: #fff;
       li {
       list-style-type: none;
@@ -135,18 +135,20 @@ export default {
           width: 48px;
           height: 48px;
         }
+        .info {
+          display: flex;
+          justify-content: flex-start;
+           width: 100%;
           .userImg {
-          padding-right: 32px;
+          margin-right: 32px;
           width: 80px;
           height: 80px;
         }
-        .info {
-          border-bottom: 1px solid #E4E5E6;
-          width: 606px;
-          div {
-            margin: 2px 0;
-          }
-          .name {
+          .userInfo {
+            width: 100%;
+            padding-right: 32px;
+            border-bottom: 1px solid #E4E5E6;
+            .name {
             display: flex;
             justify-content: space-between;
             font-size: 32px;
@@ -171,6 +173,8 @@ export default {
            font-size: 26px;
            color: #999999;
          }
+          }
+          
         }
       }
       }