my

src/sass/AppHome/my.vue

@@ -1,6 +1,34 @@
 <template>
   <div class="my">
-    
+    <!-- 个人信息 -->
+    <div class="card">
+      <div class="userInfoCard">
+        <div class="user">
+          <div>
+          <img src="./components/img/tx@2x.png" alt="" class="avtar">
+          <!-- <img src="" alt="" class="avtar"> -->
+        </div>
+        <div class="user-info">
+          <div class="user-name">李文盛</div>
+          <div class="user-job">长岗路街道办事处花园社区网格员</div>
+        </div>
+        </div>
+        <div class="myGrid">
+          <div class="my-grid">我的网格<span class="num">9</span></div>
+          <div class="all-grid">
+            <div class="gridBox">
+              <div class="grid-name"><span>长港路网格一</span></div>
+              <div class="grid-name"><span>长港路网格二</span></div>
+              <div class="grid-name"><span>长港路网格三</span></div>
+            </div>
+            <div class="arrow-right"><u-icon name="arrow-right"></u-icon></div>
+          </div>
+        </div>
+      </div>
+    </div>
+    <!--  -->
+    <div>
+    </div>
   </div>
 </template>
 
@@ -26,6 +54,91 @@ export default {
 
 <style lang="scss" scoped>
 .my {
+  .card {
+    position: relative;
+    height: 458px;
+    background: url(./components/img/bg.png) no-repeat;
+    background-size: 100%;
+    
+    .userInfoCard {
+      position: absolute;
+      top: 180px;
+      left: 32px;
+      width: 686px;
+      height: 320px;
+      background-color: #FFFFFF;
+      border-radius: 12px;
+      padding-left: 32px;
+      box-sizing: border-box;
+      box-shadow: 0px 2px 4px 2px rgba(0, 0, 0, 0.12);
+
+      .user {
+        display: flex;
+        justify-content: flex-start;
+        padding-top: 44px;
+        margin-bottom: 15px;
+
+        .avtar {
+          width: 90px;
+          height: 90px;
+          margin-right: 24px;
+        }
+
+        .user-name {
+          font-size: 44px;
+          color: #333333;
+          font-weight: 800;
+        }
+
+        .user-job {
+          font-size: 28px;
+          color: #999999;
+        }
+      }
+
+      .myGrid {
+        padding: 5px 15px;
+
+        .my-grid {
+          font-size: 28px;
+          font-weight: 800;
+          color: #333333;
+
+          .num {
+            font-weight: normal;
+            margin-left: 15px;
+            font-size: 26px;
+            color: #3476B9;
+          }
+        }
+        .all-grid {
+          display: flex;
+          justify-content: space-between;
+          margin-top: 16px;
+
+          .gridBox {
+            display: flex;
+            justify-content: flex-start;
+
+            .grid-name {
+            margin-right: 10px;
+            height: 46px;
+            line-height: 46px;
+            background-color: #F4F9FF;
+            color: #3476B9;
+            font-size: 24px;
+            padding: 6px 16px;
+            }
+          }
+
+          .arrow-right {
+            width: 40px;
+            padding-top: 10px;
+          }
+        }
+      }
+    }
+  }
   
 }
 </style>