四邻信息

2022-04-18 09:52:37 +08:00
parent 2e8be19e77
commit 3b8d858759
5 changed files with 331 additions and 6 deletions
--- a/project/sanjianxi/AppNeighborLinkage/familyInfo.vue
+++ b/project/sanjianxi/AppNeighborLinkage/familyInfo.vue
@@ -0,0 +1,77 @@
+<template>
+  <div class="familyInfo">
+    <div class="card-list">
+      <div class="item">
+        <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="relation">
+          户主
+        </div>
+        <div class="arrowRoght">
+          <u-icon name="arrow-right"></u-icon>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'familyInfo',
+  appName: '家庭详情'
+}
+</script>
+
+<style lang="scss" scoped>
+.familyInfo {
+
+  .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% - 226px);
+        .name {
+          font-size: 32px;
+          font-weight: 600;
+        }
+        .idNumber {
+          margin-top: 8px;
+          color: #999999;
+        }
+      }
+
+      .relation {
+        width: 80px;
+        align-self: center;
+      }
+
+      .arrowRoght {
+        width: 40px;
+        align-self: center;
+      }
+    }
+  }
+  
+}
+</style>