css

src/apps/AppGridManagement/FamilyList.vue

@@ -9,11 +9,12 @@
               <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 class="info">
               <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="userInfo">
                 <div class="name">
                   <span class="user-name">{{item.name}}</span>
                   <span class="user-tel">{{item.phone}}</span>
@@ -22,6 +23,7 @@
                 <div class="address">{{item.currentAreaName || ''}}{{ item.currentAddress || '' }}</div>
               </div>
             </div>
+          </div>
         </li>
       </ul>
     </div>
@@ -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,17 +135,19 @@ 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 {
+          .userInfo {
+            width: 100%;
+            padding-right: 32px;
             border-bottom: 1px solid #E4E5E6;
-          width: 606px;
-          div {
-            margin: 2px 0;
-          }
             .name {
             display: flex;
             justify-content: space-between;
@@ -172,6 +174,8 @@ export default {
            color: #999999;
          }
           }
+          
+        }
       }
       }
     }