desc:个人中心 UI 界面绘制

+import router from '@ohos.router';
+import common from '@ohos.app.ability.common';
 const TAG = 'PageComponent';
 const TAG = 'PageComponent';
 
 
 /**
 /**
@@ -5,9 +7,146 @@ const TAG = 'PageComponent';
  */
  */
 @Component
 @Component
 export struct MinePageComponent {
 export struct MinePageComponent {
-  // TODO 待完善
+  //是否是创作者
+  @State isActive:boolean = false
+  @State isLogin:boolean = true
+
+  private context = getContext(this) as common.UIAbilityContext
+
+  aboutToAppear(){
+    // TODO 获取用户信息
+  }
+
   build() {
   build() {
-    Text('我的页面')
+    Column(){
+      Stack({alignContent:Alignment.Top}){
+        Image($r('app.media.mine_head_bg'))
+          .setFullWidth()
+          .height('50%')
+          .objectFit(ImageFit.Auto)
+        this.TopUI()
+      }.setFullWidthAndHeight()
+      .backgroundColor($r('app.color.color_F5F5F5'))
+    }.setFullWidthAndHeight()
+
+  }
+
+
+  @Builder TopUI(){
+    Column(){
+      //头像层
+      this.HeaderUI()
+      //Grid 区域
+      this.GridUI()
+      //Card
+      this.CardUI()
+      //滑动区域
+      this.ScrollUI()
+    }
+    .padding({left:11,right:11})
+    .setFullWidthAndHeight()
+  }
+
+  @Builder HeaderUI(){
+    Row(){
+      //头像
+      Stack(){
+        Button({type:ButtonType.Circle})
+          .backgroundColor($r('app.color.white'))
+          .width(74)
+          .height(74)
+
+        Image($r('app.media.mine_head_icon'))
+          .width(70)
+          .height(70)
+          .objectFit(ImageFit.Cover)
+          .borderRadius(50)
+      }.width(74)
+      .height(74)
+
+      //昵称信息
+      Column(){
+        Row(){
+          Text("人民日报网友ABCDEF")
+            .fontColor($r('app.color.white'))
+
+          Image($r('app.media.mine_user_edit'))
+            .width(20)
+            .height(20)
+        }
+        Text("等级8")
+          .textAlign(TextAlign.Center)
+          .backgroundImage($r('app.media.mine_grade_bg'))
+          .backgroundImageSize({width:55})
+          .fontColor($r('app.color.white'))
+          .fontSize(12)
+          .width(40)
+          .margin({top:20})
+      }.alignItems(HorizontalAlign.Start)
+      .width(200)
+      .margin({left:10})
+
+      Blank()
+
+      Stack({alignContent:Alignment.Start}){
+        Text("签到")
+          .textAlign(TextAlign.Center)
+          .borderRadius({ topLeft:10,bottomLeft:10})
+          .width(50)
+          .fontColor($r('app.color.white'))
+          .backgroundColor($r('app.color.color_FFC460'))
+          .margin({left:20})
+        Image($r("app.media.mine_sign_icon"))
+          .width(30)
+          .height(30)
+      }.width(60)
+
+    }
+    .setFullWidth()
+    .margin({top:30})
+  }
+
+  @Builder GridUI(){
+    Column(){
+
+    }
+  }
+
+  @Builder CardUI(){
+    Row(){
+
+    }
+  }
+
+  @Builder ScrollUI(){
+    Column(){
+      Scroll(){
+
+      }
+    }
   }
   }
+
+  @Styles setFullWidthAndHeight(){
+    .width('100%')
+    .height('100%')
+  }
+
+  @Styles setFullWidth(){
+    .width('100%')
+  }
+
+  @Styles setFullHeight(){
+    .width('100%')
+  }
+
+  change(){
+    router.pushUrl({
+      url: 'pages/IndexPage',
+      params: {
+      }
+    }).catch((error: Error) => {
+    });
+  }
+
 }
 }
 
 

@@ -47,6 +47,14 @@
     {
     {
       "name": "color_80000000",
       "name": "color_80000000",
       "value": "#80000000"
       "value": "#80000000"
+    },
+    {
+      "name": "color_F5F5F5",
+      "value": "#F5F5F5"
+    },
+    {
+      "name": "color_FFC460",
+      "value": "#FFC460"
     }
     }
   ]
   ]
 }
 }

 /**
 /**
  * 应用ability上下文管理类
  * 应用ability上下文管理类
  */
  */
+import common from '@ohos.app.ability.common';
 export class AppContext {
 export class AppContext {
   private static sContext: Context;
   private static sContext: Context;
+  private context = getContext(this) as common.UIAbilityContext
 
 
   public static init(abilityContext: Context) {
   public static init(abilityContext: Context) {
     this.sContext = abilityContext;
     this.sContext = abilityContext;
@@ -11,4 +13,5 @@ export class AppContext {
   public static getAbilityContext() {
   public static getAbilityContext() {
     return this.sContext;
     return this.sContext;
   }
   }
+
 }
 }