Merge remote-tracking branch 'origin/main'

-import { CustomToast, DateTimeUtils} from 'wdKit/Index';
+import { BreakpointSystem, CustomToast, DateTimeUtils} from 'wdKit/Index';
 import { WDRouterPage, WDRouterRule } from 'wdRouter/Index';
 import { LoginModel } from './LoginModel';
 import { ModifyPasswordRequestItem } from './ModifyPasswordRequestItem';
@@ -29,6 +29,27 @@ struct ModifyPasswordPage {
   })
   pageShowTime:number = 0;
   pageHideTime:number = 0;
+  @StorageProp('currentBreakpoint') @Watch("currentChanged")currentBreakpoint: string = 'sm';
+  private breakpointSystem = new BreakpointSystem();
+  @State percent:number = 1
+
+  currentChanged(){
+    if(this.currentBreakpoint == "md" || this.currentBreakpoint == "lg"){
+      this.percent = 0.7
+    }else {
+      this.percent = 1
+    }
+  }
+
+  aboutToAppear() {
+    this.breakpointSystem.register();
+    this.currentChanged()
+  }
+
+  aboutToDisappear(): void {
+    this.breakpointSystem.unregister();
+  }
+
 
   onPageShow() {
     this.pageShowTime = DateTimeUtils.getTimeStamp()
@@ -42,25 +63,54 @@ struct ModifyPasswordPage {
   }
 
   build() {
-    Row() {
-      Column() {
+    Column(){
+      this.TitleBackComponent('')
       this.ModifyPasswordLayout()
     }
-      .width('100%')
-      .height('100%')
-    }.width('100%')
-    .height('100%')
+
+  }
+
+  @Builder TitleBackComponent(title:string){
+    RelativeContainer() {
+      Text(title)
+        .fontColor('#FF333333')
+        .fontSize(18)
+        .textAlign(TextAlign.Center)
+        .height(44)
+        .alignRules({
+          top: { anchor: "__container__", align: VerticalAlign.Top },
+          left: { anchor: "__container__", align: HorizontalAlign.Start },
+          right: { anchor: "__container__", align: HorizontalAlign.End },
+
+        })
+        .id('titleContent')
+      Image($r("app.media.login_back_icon"))
+        .objectFit(ImageFit.Auto)
+        .height(24)
+        .width(24)
+        .margin({
+          left: 16, top: 8
+        })
+        .alignRules({
+          top: { anchor: "__container__", align: VerticalAlign.Top },
+          left: { anchor: "__container__", align: HorizontalAlign.Start },
+        })
+        .onClick(() => {
+          router.back()
+        })
+        .id('backImage')
+
+    }.height(44)
   }
 
 
   @Builder ModifyPasswordLayout(){
-    Navigation() {
       Column(){
         Column() {
           Text("修改密码").fontWeight(FontWeight.Bold).fontSize(20).maxLines(1)
         }
         .width('100%')
-        .height('75lpx')
+        .height(`${this.calcHeight(75)}lpx`)
         .alignItems(HorizontalAlign.Start)
 
         Row() {
@@ -77,12 +127,12 @@ struct ModifyPasswordPage {
               })
           }
           .alignItems(VerticalAlign.Center)
-          .height('80lpx')
+          .height(`${this.calcHeight(80)}lpx`)
           .backgroundColor('#f5f5f5')
           .borderRadius('4vp')
         }
         .width('100%')
-        .height('110lpx')
+        .height(`${this.calcHeight(110)}lpx`)
         .backgroundColor(0xffffff0)
         .alignItems(VerticalAlign.Center)
 
@@ -100,12 +150,12 @@ struct ModifyPasswordPage {
               })
           }
           .alignItems(VerticalAlign.Center)
-          .height('80lpx')
+          .height(`${this.calcHeight(80)}lpx`)
           .backgroundColor('#f5f5f5')
           .borderRadius('4vp')
         }
         .width('100%')
-        .height('110lpx')
+        .height(`${this.calcHeight(110)}lpx`)
         .backgroundColor(0xffffff0)
         .alignItems(VerticalAlign.Center)
 
@@ -123,32 +173,32 @@ struct ModifyPasswordPage {
               })
           }
           .alignItems(VerticalAlign.Center)
-          .height('80lpx')
+          .height(`${this.calcHeight(80)}lpx`)
           .backgroundColor('#f5f5f5')
           .borderRadius('4vp')
         }
         .width('100%')
-        .height('110lpx')
+        .height(`${this.calcHeight(110)}lpx`)
         .backgroundColor(0xffffff0)
         .alignItems(VerticalAlign.Center)
 
         Column() {
-          Text("提示：密码长度6~20位，使用大写字母、小写字母、数字、特殊字符中三种或三种以上").fontSize(12).maxLines(3).fontColor(0x999999).padding({top:'10lpx'})
+          Text("提示：密码长度6~20位，使用大写字母、小写字母、数字、特殊字符中三种或三种以上").fontSize(12).maxLines(3).fontColor(0x999999).padding({top:`${this.calcHeight(10)}lpx`})
         }
         .width('100%')
-        .height('85lpx')
+        .height(`${this.calcHeight(85)}lpx`)
         .alignItems(HorizontalAlign.Start)
 
         Row() {
           Button( { type: ButtonType.Normal, stateEffect: true }){
             Text("确认")
               .fontColor("#fff")
-              .fontSize("35lpx")
-              .lineHeight("50lpx")
+              .fontSize(`${this.calcHeight(35)}lpx`)
+              .lineHeight(`${this.calcHeight(50)}lpx`)
               .opacity(this.btnStatus ?1:0.5)
           }
             .width('100%')
-            .height('80lpx')
+            .height(`${this.calcHeight(80)}lpx`)
             .backgroundColor(this.btnStatus ? '#ED2800' : '#99ED2800')
             .borderRadius('4vp')
             .onClick(() => {
@@ -158,25 +208,22 @@ struct ModifyPasswordPage {
               }
             })
         }
-        .padding({top:'25lpx'})
+        .padding({top:`${this.calcHeight(25)}lpx`})
         .alignItems(VerticalAlign.Center)
         .width('100%')
-        .height('120lpx')
+        .height(`${this.calcHeight(120)}lpx`)
 
         Column() {
-          Text("忘记密码").fontSize(12).maxLines(3).fontColor(0x999999).padding({top:'10lpx'})
+          Text("忘记密码").fontSize(12).maxLines(3).fontColor(0x999999).padding({top:`${this.calcHeight(10)}lpx`})
             .onClick(()=>{
               WDRouterRule.jumpWithPage(WDRouterPage.forgetPasswordPage)
             })
         }
         .width('100%')
-        .height('85lpx')
+        .height(`${this.calcHeight(85)}lpx`)
         .alignItems(HorizontalAlign.Center)
-      }.padding({top:"92lpx",left:"48lpx",right:"48lpx"})
+      }.padding({top:`${this.calcHeight(92)}lpx`,left:`${this.calcHeight(48)}lpx`,right:`${this.calcHeight(48)}lpx`})
 
-    }.titleMode(NavigationTitleMode.Mini)
-    .backButtonIcon($r("app.media.login_back_icon"))
-    .title('')
   }
 
   inputTextChange(){
@@ -211,6 +258,10 @@ struct ModifyPasswordPage {
     this.toastText = msg
     this.dialogToast.open()
   }
+
+  calcHeight(value:number): number{
+    return value * this.percent
+  }
 }