新建分支

component/my/my.wxml

@@ -1,6 +1,21 @@
 <template name="my">
   <view class='mine-container'>
-    
+    <view class='mine-center'>
+      <view class='mine-info'>
+        <view class='mine-bg'>
+          <view class='mine-avatar'>
+            <image class='avatar-image' src='{{ myData.imgUrl }}'></image>
+          </view>
+        </view>
+        <view class='mine-edit'>
+          <view class='edit-image'>
+            <image class='edit-img' src='../../static/image/edit.png'></image>
+          </view>
+          <view class='edit-text'>修改个人资料</view>
+        </view>
+      </view>
+
+    </view>
   </view>
   <!-- <view class='containers'> 
     <view class='mine-top' bindtap='toAttentionMe'>

component/my/my.wxss

@@ -2,16 +2,70 @@
   width: 750rpx;
   height: 1116rpx;
   background: #F0F1F5;
-  padding: 0 17rpx;
+  position: relative;
+}
+
+.mine-center{
+  width: 716rpx;
+  margin: 0 auto;
 }
 
+.mine-info{
+  margin-top: 80rpx;
+  width: 100%;
+  height: 344rpx;
+  background: #FFFFFF;
+  border-radius: 20rpx;
+}
 
+.mine-bg{
+  width: 156rpx;
+  height: 156rpx;
+  background: #61CA54;
+  border-radius: 50%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  position: absolute;
+  left: 280rpx;
+  top: 18rpx;
+}
 
+.mine-avatar{
+  width: 138rpx;
+  height: 138rpx;
+  border-radius: 50%;
+  background: gray;
+}
 
+.avatar-image{
+  width: 100%;
+  height: 100%;
+  border-radius: 50%;
+}
 
+.mine-edit{
+  width: 224rpx;
+  height: 46rpx;
+  border-radius: 22rpx;
+  background: #3DBEF9;
+  display: flex;
+  align-items: center;
+}
 
+.edit-image{
+  width: 24rpx;
+  height: 36rpx;
+}
 
+.edit-img{
+  width: 100%;
+  height: 100%;
+}
 
+.edit-text{
+  
+}
 
 /* .containers{
   padding-top: 0;