desc：关于 适配折叠屏

@@ -23,6 +23,6 @@ struct SettingAboutPage {
   build() {
   build() {
     Column(){
     Column(){
       AboutPageUI()
       AboutPageUI()
-    }
+    }.backgroundColor($r('app.color.white'))
   }
   }
 }
 }

@@ -4,14 +4,15 @@ import router from '@ohos.router'
 export struct CustomTitleUI {
 export struct CustomTitleUI {
   imgBack:boolean = true
   imgBack:boolean = true
   titleName:ResourceStr = "默认标题"
   titleName:ResourceStr = "默认标题"
+  @Prop percent:number = 1
 
 
   build() {
   build() {
     RelativeContainer() {
     RelativeContainer() {
       //标题栏目
       //标题栏目
       if(this.imgBack){
       if(this.imgBack){
         Image($r('app.media.back_icon'))
         Image($r('app.media.back_icon'))
-          .width('46lpx')
-          .height('46lpx')
+          .width(`${this.calcHeight(46)}lpx`)
+          .height(`${this.calcHeight(46)}lpx`)
           .objectFit(ImageFit.Auto)
           .objectFit(ImageFit.Auto)
           .interpolation(ImageInterpolation.High)
           .interpolation(ImageInterpolation.High)
           .id("back_icon")
           .id("back_icon")
@@ -19,7 +20,7 @@ export struct CustomTitleUI {
             center: {anchor: "__container__", align: VerticalAlign.Center},
             center: {anchor: "__container__", align: VerticalAlign.Center},
             left: {anchor: "__container__", align: HorizontalAlign.Start}
             left: {anchor: "__container__", align: HorizontalAlign.Start}
           })
           })
-          .margin({left:'31lpx'})
+          .margin({left:`${this.calcHeight(31)}lpx`})
           .onClick(()=>{
           .onClick(()=>{
             router.back()
             router.back()
           })
           })
@@ -28,18 +29,22 @@ export struct CustomTitleUI {
       Text(this.titleName)
       Text(this.titleName)
         .maxLines(1)
         .maxLines(1)
         .id("title")
         .id("title")
-        .fontSize('30lpx')
+        .fontSize(`${this.calcHeight(30)}lpx`)
         .fontWeight(400)
         .fontWeight(400)
         .fontColor($r('app.color.color_222222'))
         .fontColor($r('app.color.color_222222'))
-        .lineHeight('43lpx')
+        .lineHeight(`${this.calcHeight(43)}lpx`)
         .alignRules({
         .alignRules({
           center: {anchor: "__container__", align: VerticalAlign.Center},
           center: {anchor: "__container__", align: VerticalAlign.Center},
           middle: {anchor: "__container__", align: HorizontalAlign.Center}
           middle: {anchor: "__container__", align: HorizontalAlign.Center}
         })
         })
 
 
     }
     }
-    .height('84lpx')
+    .height(`${this.calcHeight(84)}lpx`)
     .width('100%')
     .width('100%')
     .backgroundColor($r('app.color.white'))
     .backgroundColor($r('app.color.white'))
   }
   }
+
+  calcHeight(value:number): number{
+    return value * this.percent
+  }
 }
 }

 import { Params } from 'wdBean';
 import { Params } from 'wdBean';
-import { AppUtils, StringUtils } from 'wdKit/Index';
+import { AppUtils, BreakpointSystem, StringUtils } from 'wdKit/Index';
 import { WDRouterPage, WDRouterRule } from 'wdRouter';
 import { WDRouterPage, WDRouterRule } from 'wdRouter';
 import { TrackingButton, TrackConstants } from 'wdTracking/Index';
 import { TrackingButton, TrackConstants } from 'wdTracking/Index';
 import { CustomTitleUI } from '../reusable/CustomTitleUI';
 import { CustomTitleUI } from '../reusable/CustomTitleUI';
@@ -24,11 +24,25 @@ export struct AboutPageUI {
     alignment: DialogAlignment.Center
     alignment: DialogAlignment.Center
   })
   })
 
 
+  @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
+    }
+  }
+
   build() {
   build() {
       this.aboutUi()
       this.aboutUi()
   }
   }
 
 
   aboutToAppear() {
   aboutToAppear() {
+    this.breakpointSystem.register();
+    this.currentChanged()
     let context = getContext();
     let context = getContext();
     context.getApplicationContext();
     context.getApplicationContext();
     let appVerion = AppUtils.getAppVersionName()
     let appVerion = AppUtils.getAppVersionName()
@@ -37,15 +51,19 @@ export struct AboutPageUI {
     }
     }
   }
   }
 
 
+  aboutToDisappear(): void {
+    this.breakpointSystem.unregister();
+  }
+
   @Builder
   @Builder
   aboutUi() {
   aboutUi() {
     Column() {
     Column() {
-      CustomTitleUI({titleName:'关于'})
+      CustomTitleUI({titleName:'关于',percent:this.percent})
 
 
       Image($r('app.media.setting_about_logo'))
       Image($r('app.media.setting_about_logo'))
-        .width('278lpx')
-        .height('154lpx')
-        .margin({ top: '173lpx', bottom: '154lpx' })
+        .width(`${this.calcHeight(278)}lpx`)
+        .height(`${this.calcHeight(154)}lpx`)
+        .margin({ top: `${this.calcHeight2(173)}lpx`, bottom: `${this.calcHeight2(154)}lpx` })
         .gesture(
         .gesture(
           TapGesture({ count: 2 })
           TapGesture({ count: 2 })
             .onAction((event: GestureEvent) => {
             .onAction((event: GestureEvent) => {
@@ -77,28 +95,28 @@ export struct AboutPageUI {
         })
         })
       }.divider({
       }.divider({
         strokeWidth: 1,
         strokeWidth: 1,
-        startMargin: '29lpx',
-        endMargin: '29lpx',
+        startMargin: `${this.calcHeight(29)}lpx`,
+        endMargin: `${this.calcHeight(29)}lpx`,
         color: '#EDEDED'
         color: '#EDEDED'
       })
       })
 
 
       Blank()
       Blank()
 
 
       Image($r('app.media.about_us_code'))
       Image($r('app.media.about_us_code'))
-        .width('192lpx')
-        .height('192lpx')
+        .width(`${this.calcHeight(192)}lpx`)
+        .height(`${this.calcHeight(192)}lpx`)
 
 
       Text(this.version)
       Text(this.version)
-        .fontSize('25lpx')
+        .fontSize(`${this.calcHeight(25)}lpx`)
         .textAlign(TextAlign.Center)
         .textAlign(TextAlign.Center)
         .fontColor($r("app.color.color_666666"))
         .fontColor($r("app.color.color_666666"))
-        .margin({ bottom: '31lpx' })
+        .margin({ bottom: `${this.calcHeight(31)}lpx` })
 
 
       Text(this.message)
       Text(this.message)
-        .fontSize('19lpx')
+        .fontSize(`${this.calcHeight(19)}lpx`)
         .textAlign(TextAlign.Center)
         .textAlign(TextAlign.Center)
         .fontColor($r("app.color.color_999999"))
         .fontColor($r("app.color.color_999999"))
-        .margin({ bottom: '35lpx' })
+        .margin({ bottom: `${this.calcHeight(35)}lpx` })
     }
     }
     .width('100%')
     .width('100%')
     .height('100%')
     .height('100%')
@@ -112,18 +130,30 @@ export struct AboutPageUI {
       // 左侧标题
       // 左侧标题
       Text(`${item}`)
       Text(`${item}`)
         .fontColor('#666666')
         .fontColor('#666666')
-        .fontSize('31lpx')
+        .fontSize(`${this.calcHeight(31)}lpx`)
 
 
       Image($r('app.media.mine_user_arrow'))
       Image($r('app.media.mine_user_arrow'))
-        .width('27lpx')
-        .height('27lpx')
+        .width(`${this.calcHeight(27)}lpx`)
+        .height(`${this.calcHeight(27)}lpx`)
         .objectFit(ImageFit.Auto)
         .objectFit(ImageFit.Auto)
     }
     }
     .alignItems(VerticalAlign.Center)
     .alignItems(VerticalAlign.Center)
     .justifyContent(FlexAlign.SpaceBetween)
     .justifyContent(FlexAlign.SpaceBetween)
-    .height('97lpx')
+    .height(`${this.calcHeight(97)}lpx`)
     .width('100%')
     .width('100%')
-    .padding({ left: '29lpx', right: '29lpx' })
+    .padding({ left:`${this.calcHeight(29)}lpx`, right: `${this.calcHeight(29)}lpx` })
+  }
+
+  calcHeight(value:number): number{
+    return value * this.percent
+  }
+
+  calcHeight2(value:number): number{
+    if(this.percent < 1){
+      return value * 0.3
+    }else{
+      return value * 1
+    }
   }
   }
 }
 }