add Page Me list

Author: uniquexiaobai

app.wxss

@@ -1,16 +1,24 @@
 .container {
   display: flex;
   height: 100%;
-  padding: 200rpx 0;
   box-sizing: border-box;
 }
-.center {
-  align-items: center;
-  justify-content: center;
+.flex {
+  display: flex;
 }
 .row {
   flex-direction: row;
 }
 .col {
   flex-direction: column;
 }
+.align_center {
+  align-items: center;
+}
+.justify_center {
+  justify-content: center;
+}
+.center {
+  align-items: center;
+  justify-content: center;
+}

img/me/angle-right.png

@@ -1,5 +1,8 @@
 
 var app = getApp()
 Page({
-
+  data: {
+    login: 'uniquexiaobai',
+    avatar_url: "https://avatars.githubusercontent.com/u/12796673?v=3"
+  }
 });

img/me/cog.png

@@ -0,0 +1,3 @@
+{
+    "navigationBarTitleText": "Me"
+}

img/me/edit.png

@@ -1,3 +1,17 @@
-<view class="container center">
-  <text>Me</text>
+<view class="container col me">
+  <view class="item">
+    <image src="{{avatar_url}}" class="avatar"></image>
+    <text class="flex1">{{login}}</text>
+    <image src="/img/me/angle-right.png" class="icon-right"></image>
+  </view>
+  <view class="item">
+    <image src="/img/me/edit.png" class="icon"></image>
+    <text class="flex1">Edit Profile</text>
+    <image src="/img/me/angle-right.png" class="icon-right"></image>
+  </view>
+  <view class="item">
+    <image src="/img/me/cog.png" class="icon"></image>
+    <text class="flex1">Settings</text>
+    <image src="/img/me/angle-right.png" class="icon-right"></image>
+  </view>
 </view>

pages/me/me.js

@@ -0,0 +1,29 @@
+.me {
+  background: #F0EFF5;
+}
+.item {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 5px;
+  margin-top: 20px;
+  background: #fff;
+}
+.avatar {
+  width: 40px;
+  height: 40px;
+  border: 1px solid #9A9A9A;
+  margin-right: 10px;
+}
+.icon {
+  width: 15px;
+  height: 15px;
+  margin-right: 20px;
+}
+.icon-right {
+  width: 20px;
+  height: 20px;
+}
+.flex1 {
+  flex: 1;
+}