四邻信息

project/sanjianxi/AppNeighborLinkage/myNeighborInfo.vue

@@ -1,5 +1,20 @@
 <template>
-  <div class="myNeighborInfo"></div>
+  <div class="myNeighborInfo">
+    <div class="card-list">
+      <div class="item" @click="$linkTo('./familyInfo')">
+        <div class="userpic">
+          <img src="../static/avatar.png" alt="">
+        </div>
+        <div class="user-info">
+          <p class="name">李白</p>
+          <div class="idNumber">42068219980502252x</div>
+        </div>
+        <div class="arrowRoght">
+          <u-icon name="arrow-right"></u-icon>
+        </div>
+      </div>
+    </div>
+  </div>
 </template>
 
 <script>
@@ -11,6 +26,44 @@ export default {
 
 <style lang="scss" scoped>
 .myNeighborInfo {
+
+  .card-list {
+    padding: 32px 32px 32px 20px;
+    box-sizing: border-box;
+    .item {
+      display: flex;
+      background: #FFF;
+      padding: 32px;
+      border-radius: 16px;
+      box-shadow: 0px 0px 8px 0px rgba(0, 0, 0, 0.04);
+      .userpic {
+        width: 96px;
+        height: 96px;
+        margin-right: 10px;
+        img {
+          width: 100%;
+          height: 100%;
+        }
+      }
+
+      .user-info {
+        width: calc(100% - 146px);
+        .name {
+          font-size: 32px;
+          font-weight: 600;
+        }
+        .idNumber {
+          margin-top: 8px;
+          color: #999999;
+        }
+      }
+
+      .arrowRoght {
+        width: 40px;
+        align-self: center;
+      }
+    }
+  }
   
 }
 </style>