1.宫格布局

2. 单元格布局

src/pages/my/my.vue

@@ -1,4 +1,5 @@
 <template>
+<view>
   <view class="user">
     <!-- 1. 已登录 -->
     <block v-if="userInfo.nickName">
@@ -9,6 +10,63 @@
     <!-- 2. 未登录 -->
     <button v-else open-type="getUserInfo" @getuserinfo="getUserInfo" class="user_btn">去登录</button>
   </view>
+
+  <!-- 3 菜单:宫格布局 -->
+  <view class="grid">
+    <u-grid
+      :col="4"
+      :border="false"
+    >
+      <u-grid-item>
+        <u-icon
+          name="file-text"
+          :size="46"
+        ></u-icon>
+        <view class="grid-text">待付款</view>
+      </u-grid-item>
+      <u-grid-item>
+        <u-icon
+          name="car"
+          :size="46"
+        ></u-icon>
+        <view class="grid-text">待收货</view>
+      </u-grid-item>
+      <u-grid-item>
+        <u-icon
+          name="rmb-circle"
+          :size="46"
+        ></u-icon>
+        <view class="grid-text">退货/退款</view>
+      </u-grid-item>
+      <u-grid-item>
+        <u-icon
+          name="order"
+          :size="46"
+        ></u-icon>
+        <view class="grid-text">全部订单</view>
+      </u-grid-item>
+    </u-grid>
+  </view>
+
+  <!-- 4. 单元格布局 -->
+  <u-cell-group>
+    <u-cell-item
+      icon="setting-fill"
+      title="个人设置"
+      :arrow="false"
+    ></u-cell-item>
+    <u-cell-item
+      icon="server-man"
+      title="联系客服"
+      value="400-618-40000"
+    ></u-cell-item>
+    <u-cell-item
+      icon="integral-fill"
+      title="当前版本"
+      value="v4.1.1"
+    ></u-cell-item>
+  </u-cell-group>
+</view>
 </template>
 
 <script>
@@ -72,4 +130,9 @@ page {
   z-index: -1;
   filter: blur(30px) grayscale(20%);
 }
+
+.grid {
+  margin: 20rpx;
+  border-radius: 5rpx;
+}
 </style>