From f82e1ef5d00e89e2064d38ced3c9c13da2a68f1e Mon Sep 17 00:00:00 2001 From: wpp <58198665+879356503@users.noreply.github.com> Date: Wed, 12 Mar 2025 15:51:23 +0800 Subject: [PATCH 1/3] =?UTF-8?q?HMOSWorld=E6=95=B4=E6=94=B9=20(1)UX?= =?UTF-8?q?=E9=A3=8E=E6=A0=BC=E9=80=82=E9=85=8D;=20(2)=E6=B7=B1=E6=B5=85?= =?UTF-8?q?=E8=89=B2=E9=80=82=E9=85=8D;=20(3)=E6=B2=89=E6=B5=B8=E5=BC=8F?= =?UTF-8?q?=E9=80=82=E9=85=8D;=20(4)=E4=B8=80=E5=A4=9A=E8=AE=BE=E5=A4=87?= =?UTF-8?q?=E6=95=B4=E6=94=B9;=20(5)=E5=9B=BE=E6=A0=87/=E5=9B=BE=E7=89=87?= =?UTF-8?q?=E6=9B=BF=E6=8D=A2;=20(6)=E5=9B=BD=E9=99=85=E5=8C=96=E6=95=B4?= =?UTF-8?q?=E6=94=B9;?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- entry/src/main/ets/common/Constants.ets | 137 +++++++----- .../main/ets/entryability/EntryAbility.ets | 67 +++++- .../main/ets/pages/BackgroundColorChange.ets | 63 ++++-- entry/src/main/ets/pages/BottomWithBar.ets | 83 ++++--- entry/src/main/ets/pages/Index.ets | 203 ++++-------------- .../main/ets/pages/SelectVerificationCode.ets | 130 +++++++---- .../main/ets/pages/SliderVerificationCode.ets | 133 +++++++----- .../src/main/ets/pages/TextBoxShowCursor.ets | 79 ++++--- entry/src/main/module.json5 | 4 +- .../main/resources/base/element/float.json | 26 ++- .../main/resources/base/element/string.json | 6 +- .../main/resources/en_US/element/string.json | 4 + .../main/resources/zh_CN/element/string.json | 6 +- 13 files changed, 544 insertions(+), 397 deletions(-) diff --git a/entry/src/main/ets/common/Constants.ets b/entry/src/main/ets/common/Constants.ets index 73369f0..25b8df4 100644 --- a/entry/src/main/ets/common/Constants.ets +++ b/entry/src/main/ets/common/Constants.ets @@ -20,272 +20,270 @@ export default class Constants { * One hundred percent. */ static readonly ONE_HUNDRED_PERCENT: string = '100%'; - /** * Ninety percent. */ static readonly NINETY_PERCENT: string = '90%'; - /** * Eighty percent. */ static readonly EIGHTY_PERCENT: string = '80%'; - /** * Eighty-five percent. */ static readonly EIGHTY_FIVE_PERCENT: string = '85%'; - /** * Rotate angle. */ static readonly ANGLE: number = 45; - /** * Change value. */ static readonly CHANGE_VALUE: number = 77; - /** * Zero. */ static readonly ZERO: number = 0; - /** * Eight hundred. */ static readonly EIGHT_HUNDRED: number = 800; - /** * Two thousand. */ static readonly TWO_THOUSAND: number = 2000; - /** * Three thousand. */ static readonly THREE_THOUSAND: number = 3000; - /** * One hundred. */ static readonly ONE_HUNDRED: number = 100; - /** * Iteration. */ static readonly ITERATION: number = -1; - /** * Negative two. */ static readonly NEGATIVE_TWO: number = -2; - /** * Negative one hundred ninety-seven. */ static readonly ONE_HUNDRED_NINETY_SEVEN: number = -197; - /** * Negative one hundred and fourteen. */ static readonly ONE_HUNDRED_FOURTEEN: number = -114; - + /** + * Font weight 700. + */ + static readonly FONT_WEIGHT_700: number = 700; + /** + * Bar height. + */ + static readonly BAR_HEIGHT: number = 60; /** * Negative one hundred twenty. */ static readonly NEGATIVE_ONE_HUNDRED_TWENTY: number = -120; - /** * Coefficient of movement. */ static readonly COEFFICIENT: number = 2.83; - /** * Twenty. */ static readonly TWENTY: number = 20; - /** * Negative twenty. */ static readonly NEGATIVE_TWENTY: number = -20; - /** * Thirty. */ static readonly THIRTY: number = 30; - /** * One hundred and twenty. */ static readonly ONE_HUNDRED_AND_TWENTY: number = 120; - /** * Three hundred and forty. */ static readonly THREE_HUNDRED_AND_FORTY: number = 340; - /** * Ninety. */ static readonly NINETY: number = 90; - /** * Ninety five. */ static readonly NINETY_FIVE: number = 95; - /** * Two. */ static readonly TWO: number = 2; - /** * Three. */ static readonly THREE: number = 3; - /** * Four. */ static readonly FOUR: number = 4; - /** * Line move. */ static readonly LINE_MOVE: number = 14; - /** * Line height. */ static readonly LINE_HEIGHT: number = 1; - /** * Line width. */ static readonly LINE_WIDTH: number = 48; - /** * Item divider. */ static readonly ITEM_DIVIDER: number = 5; - /** * Fifty-eight point five. */ static readonly FIFTY_EIGHT_POINT_FIVE: number = 58.5; - /** * Fifty-nine. */ static readonly FIFTY_NINE: number = 59; - /** * Sixty. */ static readonly SIXTY: number = 60; - /** * Negative sixty. */ static readonly NEGATIVE_SIXTY: number = -60; - /** * Forty. */ static readonly FORTY: number = 40; - /** * One hundred forty. */ static readonly ONE_HUNDRED_FORTY: number = 120; - /** * Negative one hundred. */ static readonly NEGATIVE_ONE_HUNDRED: number = -100; - /** * Negative one hundred ten. */ static readonly NEGATIVE_ONE_HUNDRED_TEN: number = -110; - /** * Negative thirty-five. */ static readonly NEGATIVE_THIRTY_FIVE: number = -35; - /** * Negative seventy-five. */ static readonly NEGATIVE_SEVENTY_FIVE: number = -75; - /** * Ten. */ static readonly TEN: number = 10; - /** * Negative twelve. */ static readonly NEGATIVE_TWELVE: number = -12; - /** * Negative twenty-five. */ static readonly NEGATIVE_TWENTY_FIVE: number = -25; - /** * Negative five. */ static readonly NEGATIVE_FIVE: number = -5; - /** * Minus thirty. */ static readonly MINUS_THIRTY: number = -30; - /** * Draw. */ static readonly DRAW: string = '画'; - /** * Therefore. */ static readonly THEREFORE: string = '故'; - /** * Weir. */ static readonly WEIR: string = '堰'; - /** * Communes. */ static readonly COMMUNES: string = '乡'; - /** * Hua. */ static readonly HUA: string = '华'; - /** * Ancients. */ static readonly ANCIENTS: string = '古'; - /** * Hunan. */ static readonly HUNAN: string = '湘'; - /** * Word. */ static readonly WORD: string = '古堰画乡'; - + /** + * All breakpoints + */ + static readonly BREAKPOINTS: string[] = ['sm', 'md', 'lg']; + /** + * Full Screen width + */ + static readonly FULL_WIDTH: string = "100%"; + /** + * Full Screen height + */ + static readonly FULL_HEIGHT: string = "100%"; + /** + * Index page padding top size. + */ + static readonly PADDING_TOP_INDEX: number = 64; + /** + * Index page padding bottom size. + */ + static readonly PADDING_BOTTOM_INDEX: number = 16; + /** + * Icon padding sm. + */ + static readonly PADDING_SM: number = 16; + /** + * Icon padding md. + */ + static readonly PADDING_MD: number = 24; + /** + * Icon padding lg. + */ + static readonly PADDING_LG: number = 32; + /** + * Breakpoint sm. + */ + static readonly BREAK_POINT_SM: string = 'sm'; + /** + * Breakpoint md. + */ + static readonly BREAK_POINT_MD: string = 'md'; + /** + * Breakpoint lg. + */ + static readonly BREAK_POINT_LG: string = 'lg'; /** * Destination. */ @@ -298,6 +296,37 @@ export default class Constants { }, { name: 'BackgroundColorChange', detail: $r('app.string.background') + }, + { + name: 'VerificationCode', detail: $r('app.string.select_verification_code') + }, + { + name: 'SliderVerification', detail: $r('app.string.slider_verification_code') } ]; +} + +export class BreakpointType { + sm: T + md: T + lg: T + + constructor(sm: T, md: T, lg: T) { + this.sm = sm; + this.md = md; + this.lg = lg; + } + + GetValue(currentBreakpoint: string) { + if (currentBreakpoint === 'sm') { + return this.sm; + } + if (currentBreakpoint === 'md') { + return this.md; + } + if (currentBreakpoint === 'lg') { + return this.lg; + } + return undefined; + } } \ No newline at end of file diff --git a/entry/src/main/ets/entryability/EntryAbility.ets b/entry/src/main/ets/entryability/EntryAbility.ets index 49f2996..67aae59 100644 --- a/entry/src/main/ets/entryability/EntryAbility.ets +++ b/entry/src/main/ets/entryability/EntryAbility.ets @@ -13,14 +13,44 @@ * limitations under the License. */ -import { AbilityConstant, UIAbility, Want } from '@kit.AbilityKit'; -import { BusinessError } from '@kit.BasicServicesKit'; +import { AbilityConstant, Configuration, ConfigurationConstant, UIAbility, Want } from '@kit.AbilityKit'; +import { display, window } from '@kit.ArkUI'; import { hilog } from '@kit.PerformanceAnalysisKit'; -import { window } from '@kit.ArkUI'; +import { BusinessError } from '@kit.BasicServicesKit'; export default class EntryAbility extends UIAbility { + private windowObj?: window.Window; + private curBp: string = ''; + + private updateBreakpoint(windowWidth: number): void { + let windowWidthVp = windowWidth / display.getDefaultDisplaySync().densityPixels; + let newBp: string = ''; + if (windowWidthVp < 600) { + newBp = 'sm'; + } else if (windowWidthVp < 840) { + newBp = 'md'; + } else { + newBp = 'lg'; + } + if (this.curBp !== newBp) { + this.curBp = newBp; + AppStorage.setOrCreate('currentBreakpoint', this.curBp); + } + } + onCreate(want: Want, launchParam: AbilityConstant.LaunchParam): void { hilog.info(0x0000, 'testTag', '%{public}s', 'Ability onCreate'); + AppStorage.setOrCreate('systemColorMode', this.context.config.colorMode); + this.context.getApplicationContext().setColorMode(ConfigurationConstant.ColorMode.COLOR_MODE_NOT_SET); + } + + onConfigurationUpdate(newConfig: Configuration): void { + let newColorMode: ConfigurationConstant.ColorMode = + newConfig.colorMode || ConfigurationConstant.ColorMode.COLOR_MODE_DARK; + let currentColorMode = AppStorage.get('systemColorMode'); + if (newColorMode !== currentColorMode) { + AppStorage.setOrCreate('systemColorMode', newColorMode); + } } onDestroy(): void { @@ -28,16 +58,35 @@ export default class EntryAbility extends UIAbility { } onWindowStageCreate(windowStage: window.WindowStage): void { - // Main window is created, set main page for this ability - hilog.info(0x0000, 'testTag', '%{public}s', 'Ability onWindowStageCreate'); - - windowStage.loadContent('pages/Index', (err) => { + windowStage.getMainWindow().then((windowObj: window.Window) => { + let type = window.AvoidAreaType.TYPE_NAVIGATION_INDICATOR; + let avoidArea = windowObj.getWindowAvoidArea(type); + let bottomRectHeight = avoidArea.bottomRect.height; + AppStorage.setOrCreate('bottomRectHeight', bottomRectHeight); + type = window.AvoidAreaType.TYPE_SYSTEM; + avoidArea = windowObj.getWindowAvoidArea(type); + let topRectHeight = avoidArea.topRect.height; + AppStorage.setOrCreate('topRectHeight', topRectHeight); + this.windowObj = windowObj; + this.updateBreakpoint(windowObj.getWindowProperties().windowRect.width); + windowObj.on('windowSizeChange', (windowSize) => { + this.updateBreakpoint(windowSize.width); + }) + }); + windowStage.loadContent('pages/Index', (err, data) => { if (err.code) { hilog.error(0x0000, 'testTag', 'Failed to load the content. Cause: %{public}s', JSON.stringify(err) ?? ''); return; } this.setWindowClass(windowStage); - hilog.info(0x0000, 'testTag', 'Succeeded in loading the content.'); + hilog.info(0x0000, 'testTag', 'Succeeded in loading the content. Data: %{public}s', JSON.stringify(data) ?? ''); + let windowClass: window.Window = windowStage.getMainWindowSync(); + let isLayoutFullScreen = true; + windowClass.setWindowLayoutFullScreen(isLayoutFullScreen).then(() => { + console.info('Succeeded in setting the window layout to full-screen mode.'); + }).catch((err: BusinessError) => { + console.error('Failed to set the window layout to full-screen mode. Cause:' + JSON.stringify(err)); + }); }); } @@ -66,4 +115,4 @@ export default class EntryAbility extends UIAbility { // Ability has back to background hilog.info(0x0000, 'testTag', '%{public}s', 'Ability onBackground'); } -} \ No newline at end of file +} diff --git a/entry/src/main/ets/pages/BackgroundColorChange.ets b/entry/src/main/ets/pages/BackgroundColorChange.ets index 6ba8379..eb0903e 100644 --- a/entry/src/main/ets/pages/BackgroundColorChange.ets +++ b/entry/src/main/ets/pages/BackgroundColorChange.ets @@ -17,7 +17,7 @@ import { BusinessError } from '@kit.BasicServicesKit'; import { hilog } from '@kit.PerformanceAnalysisKit'; import { inputMethod } from '@kit.IMEKit'; import { window } from '@kit.ArkUI'; -import Constants from '../common/Constants'; +import Constants, { BreakpointType } from '../common/Constants'; @Extend(Text) function verifyCodeUnitStyle() { @@ -39,6 +39,10 @@ const TAG = 'BackgroundColorChange'; @Component struct BackgroundColorChange { @State codeText: string = ''; + @Consume('pathInfos') pathInfos: NavPathStack; + @StorageProp('currentBreakpoint') curBp: string = Constants.BREAK_POINT_SM; + @StorageProp('topRectHeight') + topRectHeight: number = 0; private inputController: inputMethod.InputMethodController = inputMethod.getController(); private arrArea: number[] = [0.0, 1, 0]; private verifyCodeLength: number = 6; @@ -104,8 +108,8 @@ struct BackgroundColorChange { ForEach(this.codeIndexArray, (item: number) => { Text(this.codeText[item]) .verifyCodeUnitStyle() - .backgroundColor(this.codeText[item] === undefined ? $r('app.color.index_background') : - $r('app.color.theme_color_m')) + .backgroundColor(this.codeText[item] === undefined ? $r('sys.color.comp_background_secondary') : + $r('app.color.theme_color_m')) }, (item: number) => JSON.stringify(item)) } .onVisibleAreaChange(this.arrArea, async (isVisible: boolean, currentRatio: number) => { @@ -116,12 +120,9 @@ struct BackgroundColorChange { this.detach(); } }) + .width(328) .backgroundColor(Color.Transparent) .height($r('app.float.text_height')) - .margin({ - left: $r('app.float.background_margin'), - right: $r('app.float.background_margin') - }) .defaultFocus(true) .onClick(() => { this.inputController.attach(true, this.textConfig); @@ -130,27 +131,47 @@ struct BackgroundColorChange { build() { Column() { + Row() { + Button({ type: ButtonType.Circle }) { + SymbolGlyph($r('sys.symbol.chevron_backward')) + .fontColor([$r('sys.color.icon_primary')]) + .fontSize($r('sys.float.Title_M')) + } + .height($r('app.float.back_button_height')) + .aspectRatio(1) + .backgroundColor($r('sys.color.comp_background_tertiary')) + .onClick(() => this.pathInfos.pop()) + + Text($r('app.string.background')) + .margin({ left: $r('sys.float.padding_level4') }) + .font({ size: $r('app.float.bar_font_size'), weight: Constants.FONT_WEIGHT_700 }) + .fontColor($r('sys.color.font_primary')) + } + .width(Constants.FULL_WIDTH) + .height($r('app.float.bar_height')) + .zIndex(2) + Row() { Text($r('app.string.enter_the_verification_code')) .fontSize($r('app.float.font_size_l')) .fontWeight(FontWeight.Medium) } .height($r('app.float.list_padding_top')) + .margin({ top: $r('sys.float.padding_level8') }) + .alignSelf(ItemAlign.Center) Row() { Text($r('app.string.Verification_code_sent_to')) .fontSize($r('app.float.font_size_m')) - .fontColor($r('app.color.phone_color')) + .fontColor($r('sys.color.font_tertiary')) .fontWeight(FontWeight.Regular) Text($r('app.string.phone_number1')) .fontSize($r('app.float.font_size_m')) - .fontColor($r('app.color.theme_color')) + .fontColor($r('sys.color.brand')) .fontWeight(FontWeight.Regular) } - .margin({ - top: $r('app.float.row_width'), - bottom: $r('app.float.margin_bottom') - }) + .margin({ bottom: $r('sys.float.padding_level6') }) + .alignSelf(ItemAlign.Center) this.buildVerifyCodeComponent() @@ -158,13 +179,18 @@ struct BackgroundColorChange { Text($r('app.string.reacquire')) .fontSize($r('app.float.font_size')) .fontWeight(FontWeight.Medium) - .fontColor($r('app.color.theme_color')) + .fontColor($r('sys.color.brand')) } - .width(Constants.NINETY_PERCENT) - .margin({ top: $r('app.float.row_margin') }) - .justifyContent(FlexAlign.End) + .margin({ top: $r('sys.float.padding_level6') }) + .alignSelf(ItemAlign.End) } - .padding({ top: Constants.LINE_WIDTH }) + .padding({ + left: new BreakpointType($r('sys.float.padding_level8'), $r('sys.float.padding_level12'), + $r('sys.float.padding_level16')).GetValue(this.curBp), + right: new BreakpointType($r('sys.float.padding_level8'), $r('sys.float.padding_level12'), + $r('sys.float.padding_level16')).GetValue(this.curBp), + top: px2vp(this.topRectHeight) + }) .height(Constants.ONE_HUNDRED_PERCENT) .width(Constants.ONE_HUNDRED_PERCENT) } @@ -176,6 +202,7 @@ export function getColorChange(name: string): void { NavDestination() { BackgroundColorChange() } + .hideTitleBar(true) } } diff --git a/entry/src/main/ets/pages/BottomWithBar.ets b/entry/src/main/ets/pages/BottomWithBar.ets index ff97138..f464641 100644 --- a/entry/src/main/ets/pages/BottomWithBar.ets +++ b/entry/src/main/ets/pages/BottomWithBar.ets @@ -13,22 +13,48 @@ * limitations under the License. */ -import Constants from '../common/Constants'; +import Constants, { BreakpointType } from '../common/Constants'; @Entry @Component struct BottomWithBar { + @Consume('pathInfos') pathInfos: NavPathStack; + @StorageProp('currentBreakpoint') curBp: string = Constants.BREAK_POINT_SM; + @StorageProp('topRectHeight') + topRectHeight: number = 0; private maxLength: number = 6; private strokeWidth: number = 1; build() { Column() { + Row() { + Button({ type: ButtonType.Circle }) { + SymbolGlyph($r('sys.symbol.chevron_backward')) + .fontColor([$r('sys.color.icon_primary')]) + .fontSize($r('sys.float.Title_M')) + } + .height($r('app.float.back_button_height')) + .aspectRatio(1) + .backgroundColor($r('sys.color.comp_background_tertiary')) + .onClick(() => this.pathInfos.pop()) + + Text($r('app.string.bottom')) + .margin({ left: $r('sys.float.padding_level4') }) + .font({ size: $r('app.float.bar_font_size'), weight: Constants.FONT_WEIGHT_700 }) + .fontColor($r('sys.color.font_primary')) + } + .width(Constants.FULL_WIDTH) + .height($r('app.float.bar_height')) + .zIndex(2) + Row() { Text($r('app.string.enter_the_verification_code')) .fontSize($r('app.float.font_size_l')) .fontWeight(FontWeight.Medium) } .height($r('app.float.list_padding_top')) + .margin({ top: $r('sys.float.padding_level8') }) + .alignSelf(ItemAlign.Center) Row() { Text($r('app.string.Verification_code_sent_to')) @@ -40,42 +66,42 @@ struct BottomWithBar { .fontColor($r('app.color.theme_color')) .fontWeight(FontWeight.Regular) } - .margin({ - top: $r('app.float.row_width'), - bottom: $r('app.float.margin_bottom_one') - }) + .alignSelf(ItemAlign.Center) + .margin({ bottom: $r('app.float.margin_bottom_one') }) - Row() { - TextInput() - .backgroundColor(Color.Transparent) - .width(Constants.EIGHTY_PERCENT) - .maxLength(this.maxLength) - .type(InputType.Number) - .translate({ x: Constants.NEGATIVE_TWELVE }) - Text($r('app.string.reacquire')) - .fontSize($r('app.float.font_size')) - .fontWeight(FontWeight.Medium) - .fontColor($r('app.color.theme_color')) - } - .width(Constants.EIGHTY_FIVE_PERCENT) + TextInput() + .backgroundColor(Color.Transparent) + .maxLength(this.maxLength) + .type(InputType.Number) + .translate({ x: Constants.NEGATIVE_TWELVE }) + .width(this.curBp === 'sm' ? '100%' : 328) + .alignSelf(ItemAlign.Center) Divider() .strokeWidth(this.strokeWidth) - .width(Constants.EIGHTY_FIVE_PERCENT) - .color($r('app.color.line_divider')) + .color($r('sys.color.comp_divider')) .margin({ top: $r('app.float.text_margin'), - bottom: $r('app.float.divider_bottom') + bottom: $r('sys.float.padding_level6') }) + .width(this.curBp === 'sm' ? '100%' : 328) - Button($r('app.string.login')) - .backgroundColor($r('app.color.theme_color')) - .fontColor(Color.White) - .width(Constants.EIGHTY_FIVE_PERCENT) - .height($r('app.float.bottom_height')) - + Row() { + Text($r('app.string.reacquire')) + .fontSize($r('app.float.font_size')) + .fontWeight(FontWeight.Medium) + .fontColor($r('sys.color.brand')) + } + .margin({ top: $r('sys.float.padding_level6') }) + .alignSelf(ItemAlign.End) } - .padding({ top: Constants.LINE_WIDTH }) + .padding({ + left: new BreakpointType($r('sys.float.padding_level8'), $r('sys.float.padding_level12'), + $r('sys.float.padding_level16')).GetValue(this.curBp), + right: new BreakpointType($r('sys.float.padding_level8'), $r('sys.float.padding_level12'), + $r('sys.float.padding_level16')).GetValue(this.curBp), + top: px2vp(this.topRectHeight) + }) .height(Constants.ONE_HUNDRED_PERCENT) .width(Constants.ONE_HUNDRED_PERCENT) } @@ -87,6 +113,7 @@ export function getBottomWithBar(name: string): void { NavDestination() { BottomWithBar() } + .hideTitleBar(true) } } diff --git a/entry/src/main/ets/pages/Index.ets b/entry/src/main/ets/pages/Index.ets index 803b983..891fabf 100644 --- a/entry/src/main/ets/pages/Index.ets +++ b/entry/src/main/ets/pages/Index.ets @@ -21,9 +21,12 @@ import { GlobalBuilderContext } from '../common/GlobalBuilderContext'; @Component struct Index { private NavDestinationData: NavDestinationItem[] = Constants.NAV_DESTINATION_DATA; - private stringName: string = 'VerificationCode'; - private stringName1: string = 'SliderVerification'; - pageInfos: NavPathStack = new NavPathStack(); + @Provide('pathInfos') pathInfos: NavPathStack = new NavPathStack(); + @StorageProp('currentBreakpoint') curBp: string = Constants.BREAKPOINTS[0]; + @StorageProp('bottomRectHeight') + bottomRectHeight: number = 0; + @StorageProp('topRectHeight') + topRectHeight: number = 0; @Builder PagesMap(name: string) { @@ -33,174 +36,52 @@ struct Index { } } - @Builder - itemHead(text: Resource) { - Text(text) - .fontSize($r('app.float.font_size')) - .fontWeight(FontWeight.Medium) - .width(Constants.ONE_HUNDRED_PERCENT) - .padding({ bottom: $r('app.float.padding_bottom') }) - .fontColor($r('sys.color.mask_secondary')) - } - aboutToAppear(): void { AppStorage.setOrCreate('listData', this.NavDestinationData); } build() { - Column() { - Navigation(this.pageInfos) { - List() { - this.itemHead($r('app.string.verification_code')) + Navigation(this.pathInfos) { + Column() { + Text($r("app.string.project_name")) + .fontWeight(FontWeight.Bold) + .fontColor($r('sys.color.font_primary')) + .fontSize($r('sys.float.Title_L')) + .alignSelf(ItemAlign.Start) + .margin({ + left: this.curBp === 'sm' ? $r('sys.float.padding_level0') : + this.curBp === 'md' ? $r('sys.float.padding_level4') : $r('sys.float.padding_level8') + }) + Column() { ForEach(this.NavDestinationData, (item: NavDestinationItem, index: number) => { - ListItem() { - Column() { - Row() { - Column() { - Text(item.detail) - .fontSize($r('app.float.font_size')) - .fontWeight(FontWeight.Medium) - } - .alignItems(HorizontalAlign.Start) - - Blank() - Row() - .width($r('app.float.row_width')) - .height($r('app.float.row_width')) - .margin({ right: $r('app.float.row_margin') }) - .border({ - width: { - top: $r('app.float.border_width'), - right: $r('app.float.border_width') - }, - color: $r('app.color.border_color') - }) - .rotate({ angle: Constants.ANGLE }) - } - .borderRadius({ - topLeft: index === Constants.ZERO ? $r('app.float.padding') : $r('app.float.zero'), - topRight: index === Constants.ZERO ? $r('app.float.padding') : $r('app.float.zero'), - bottomLeft: index === Constants.TWO ? $r('app.float.padding') : $r('app.float.zero'), - bottomRight: index === Constants.TWO ? $r('app.float.padding') : $r('app.float.zero') - }) - .width(Constants.ONE_HUNDRED_PERCENT) - .height($r('app.float.list_item_height')) - .alignItems(VerticalAlign.Center) - .padding({ - left: $r('app.float.padding'), - top: $r('app.float.padding'), - bottom: $r('app.float.padding') - }) - .backgroundColor(Color.White) - .onClick(() => { - this.pageInfos.pushPathByName(item.name, Constants.ZERO); - }) - - Row() - .height($r('app.float.row_height_one')) - .width(Constants.NINETY_PERCENT) - .backgroundColor($r('app.color.line_color')) - } - .width(Constants.ONE_HUNDRED_PERCENT) - .backgroundColor(Color.White) - .borderRadius({ - topLeft: index === Constants.ZERO ? $r('app.float.padding') : $r('app.float.zero'), - topRight: index === Constants.ZERO ? $r('app.float.padding') : $r('app.float.zero'), - bottomLeft: index === Constants.TWO ? $r('app.float.padding') : $r('app.float.zero'), - bottomRight: index === Constants.TWO ? $r('app.float.padding') : $r('app.float.zero') + Button(item.detail) + .fontSize($r('sys.float.Subtitle_M')) + .fontColor($r('sys.color.font_on_primary')) + .width(this.curBp === 'sm' ? '100%' : $r('app.float.index_button_width_lg')) + .height($r('app.float.button_height')) + .margin({ top: $r('sys.float.padding_level6') }) + .backgroundColor($r('sys.color.comp_background_emphasize')) + .onClick(() => { + this.pathInfos.pushPathByName(item.name, Constants.ZERO); }) - } }, (item: NavDestinationItem) => JSON.stringify(item)) - - ListItem() { - Row() { - Column() { - Text($r('app.string.select_verification_code')) - .fontSize($r('app.float.font_size')) - .fontWeight(FontWeight.Medium) - } - .alignItems(HorizontalAlign.Start) - - Blank() - Row() - .width($r('app.float.row_width')) - .height($r('app.float.row_width')) - .margin({ right: $r('app.float.row_margin') }) - .border({ - width: { - top: $r('app.float.border_width'), - right: $r('app.float.border_width') - }, - color: $r('app.color.border_color') - }) - .rotate({ angle: Constants.ANGLE }) - } - .borderRadius($r('app.float.padding')) - .width(Constants.ONE_HUNDRED_PERCENT) - .height($r('app.float.list_item_height')) - .alignItems(VerticalAlign.Center) - .padding({ - left: $r('app.float.padding'), - top: $r('app.float.padding'), - bottom: $r('app.float.padding') - }) - .backgroundColor(Color.White) - .onClick(() => { - this.pageInfos.pushPathByName(this.stringName, Constants.ZERO); - }) - } - .margin({ top: $r('app.float.item_list') }) - - ListItem() { - Row() { - Column() { - Text($r('app.string.slider_verification_code')) - .fontSize($r('app.float.font_size')) - .fontWeight(FontWeight.Medium) - } - .alignItems(HorizontalAlign.Start) - - Blank() - Row() - .width($r('app.float.row_width')) - .height($r('app.float.row_width')) - .margin({ right: $r('app.float.row_margin') }) - .border({ - width: { top: $r('app.float.border_width'), right: $r('app.float.border_width') }, - color: $r('app.color.border_color') - }) - .rotate({ angle: Constants.ANGLE }) - } - .borderRadius($r('app.float.padding')) - .width(Constants.ONE_HUNDRED_PERCENT) - .height($r('app.float.list_item_height')) - .alignItems(VerticalAlign.Center) - .padding({ - left: $r('app.float.padding'), - top: $r('app.float.padding'), - bottom: $r('app.float.padding') - }) - .backgroundColor(Color.White) - .onClick(() => { - this.pageInfos.pushPathByName(this.stringName1, Constants.ZERO); - }) - } - .margin({ top: $r('app.float.item_list') }) } - .height(Constants.ONE_HUNDRED_PERCENT) - .width(Constants.ONE_HUNDRED_PERCENT) - .padding({ - left: $r('app.float.change'), - right: $r('app.float.change'), - top: $r('app.float.list_padding_top') - }) + .width(Constants.FULL_WIDTH) } - .mode(NavigationMode.Stack) - .navDestination(this.PagesMap) + .backgroundColor($r('sys.color.background_primary')) + .width(Constants.FULL_WIDTH) + .height(Constants.FULL_HEIGHT) + .alignItems(HorizontalAlign.Center) + .justifyContent(FlexAlign.SpaceBetween) + .padding({ + left: $r('sys.float.padding_level8'), + right: $r('sys.float.padding_level8'), + top: Constants.PADDING_TOP_INDEX + px2vp(this.topRectHeight), + bottom: Constants.PADDING_BOTTOM_INDEX + px2vp(this.bottomRectHeight) + }) } - .expandSafeArea([SafeAreaType.KEYBOARD, SafeAreaType.SYSTEM], [SafeAreaEdge.BOTTOM, SafeAreaEdge.TOP]) - .height(Constants.ONE_HUNDRED_PERCENT) - .width(Constants.ONE_HUNDRED_PERCENT) - .backgroundColor($r('app.color.index_background')) + .mode(NavigationMode.Stack) + .hideTitleBar(true) + .navDestination(this.PagesMap) } } \ No newline at end of file diff --git a/entry/src/main/ets/pages/SelectVerificationCode.ets b/entry/src/main/ets/pages/SelectVerificationCode.ets index db62dcd..e6a316a 100644 --- a/entry/src/main/ets/pages/SelectVerificationCode.ets +++ b/entry/src/main/ets/pages/SelectVerificationCode.ets @@ -13,7 +13,7 @@ * limitations under the License. */ -import Constants from '../common/Constants'; +import Constants, { BreakpointType } from '../common/Constants'; @Extend(Text) function word() { @@ -60,6 +60,13 @@ function toast() { @Entry @Component struct SelectVerificationCode { + @Consume('pathInfos') pathInfos: NavPathStack; + @StorageProp('currentBreakpoint') @Watch('deviceTypeChange') curBp: string = Constants.BREAK_POINT_SM; + @StorageProp('bottomRectHeight') + bottomRectHeight: number = 0; + @StorageProp('topRectHeight') + topRectHeight: number = 0; + @State showNumberIcon: Visibility[] = [Visibility.Hidden, Visibility.Hidden, Visibility.Hidden, Visibility.Hidden]; @State text: string = ''; @State wordNumber: number = 1; @State wordArr: string[] = []; @@ -87,21 +94,25 @@ struct SelectVerificationCode { if (flag && this.wordArr.length < 4) { this.wordArr.push(word); if (this.wordNumber === 1) { - this.oneX = e.displayX; - this.oneY = e.displayY; + this.oneX = e.windowX - 18; + this.oneY = e.windowY - 18; this.wordNumber++; + this.showNumberIcon[0] = Visibility.Visible; } else if (this.wordNumber === 2) { - this.twoX = e.displayX; - this.twoY = e.displayY; + this.twoX = e.windowX - 18; + this.twoY = e.windowY - 18; this.wordNumber++; + this.showNumberIcon[1] = Visibility.Visible; } else if (this.wordNumber === 3) { - this.threeX = e.displayX; - this.threeY = e.displayY; + this.threeX = e.windowX - 18; + this.threeY = e.windowY - 18; this.wordNumber++; + this.showNumberIcon[2] = Visibility.Visible; } else if (this.wordNumber === 4) { - this.fourX = e.displayX; - this.fourY = e.displayY; + this.fourX = e.windowX - 18; + this.fourY = e.windowY - 18; this.wordNumber++; + this.showNumberIcon[3] = Visibility.Visible; } } return false; @@ -127,47 +138,84 @@ struct SelectVerificationCode { this.flagWordSeven = true; } + deviceTypeChange() { + this.showNumberIcon = [Visibility.Hidden, Visibility.Hidden, Visibility.Hidden, Visibility.Hidden]; + this.initWord(); + } + build() { Column() { + Row() { + Button({ type: ButtonType.Circle }) { + SymbolGlyph($r('sys.symbol.chevron_backward')) + .fontColor([$r('sys.color.icon_primary')]) + .fontSize($r('sys.float.Title_M')) + } + .height($r('app.float.back_button_height')) + .aspectRatio(1) + .backgroundColor($r('sys.color.comp_background_tertiary')) + .onClick(() => this.pathInfos.pop()) + + Text($r('app.string.select_verification_code')) + .margin({ left: $r('sys.float.padding_level4') }) + .font({ size: $r('app.float.bar_font_size'), weight: Constants.FONT_WEIGHT_700 }) + .fontColor($r('sys.color.font_primary')) + } + .width(Constants.FULL_WIDTH) + .height($r('app.float.bar_height')) + .zIndex(2) + Stack() { Text(Constants.LINE_HEIGHT.toString()) .number() .translate({ - x: Constants.ONE_HUNDRED_NINETY_SEVEN + this.oneX, - y: Constants.ONE_HUNDRED_FOURTEEN + this.oneY + x: this.oneX - (this.curBp === 'sm' ? Constants.PADDING_SM : + this.curBp === 'md' ? Constants.PADDING_MD : Constants.PADDING_LG), + y: this.oneY - px2vp(this.topRectHeight) - Constants.BAR_HEIGHT }) + .visibility(this.showNumberIcon[0]) Text(Constants.TWO.toString()) .number() .translate({ - x: Constants.ONE_HUNDRED_NINETY_SEVEN + this.twoX, - y: Constants.ONE_HUNDRED_FOURTEEN + this.twoY + x: this.twoX - (this.curBp === 'sm' ? Constants.PADDING_SM : + this.curBp === 'md' ? Constants.PADDING_MD : Constants.PADDING_LG), + y: this.twoY - px2vp(this.topRectHeight) - Constants.BAR_HEIGHT }) + .visibility(this.showNumberIcon[1]) Text(Constants.THREE.toString()) .number() .translate({ - x: Constants.ONE_HUNDRED_NINETY_SEVEN + this.threeX, - y: Constants.ONE_HUNDRED_FOURTEEN + this.threeY + x: this.threeX - (this.curBp === 'sm' ? Constants.PADDING_SM : + this.curBp === 'md' ? Constants.PADDING_MD : Constants.PADDING_LG), + y: this.threeY - px2vp(this.topRectHeight) - Constants.BAR_HEIGHT }) + .visibility(this.showNumberIcon[2]) + Text(Constants.FOUR.toString()) .number() .translate({ - x: Constants.ONE_HUNDRED_NINETY_SEVEN + this.fourX, - y: Constants.ONE_HUNDRED_FOURTEEN + this.fourY + x: this.fourX - (this.curBp === 'sm' ? Constants.PADDING_SM : + this.curBp === 'md' ? Constants.PADDING_MD : Constants.PADDING_LG), + y: this.fourY - px2vp(this.topRectHeight) - Constants.BAR_HEIGHT }) + .visibility(this.showNumberIcon[3]) + } + .alignSelf(ItemAlign.Start) .zIndex(Constants.ONE_HUNDRED) - Row() { - Text($r('app.string.complete')) - .fontSize($r('app.float.font_size_l')) - .fontWeight(FontWeight.Medium) - } - .height($r('app.float.list_padding_top')) - .margin({ bottom: $r('app.float.margin_bottom') }) + // Row() { + // Text($r('app.string.complete')) + // .fontSize($r('app.float.font_size_l')) + // .fontWeight(FontWeight.Medium) + // } + // .alignSelf(ItemAlign.Start) + // .height($r('app.float.list_padding_top')) + // .margin({ bottom: $r('sys.float.padding_level6') }) Stack() { Image($r('app.media.img_1')) - .width($r('app.float.image_width')) + .width(this.curBp === 'sm' ? '100%' : $r('app.float.image_width')) .height($r('app.float.image_height')) Column() { Text($r('app.string.hua')) @@ -237,39 +285,39 @@ struct SelectVerificationCode { this.flagWordSeven = this.clickContent(this.flagWordSeven, Constants.HUNAN, e); }) } - .width($r('app.float.image_width')) + .width(Constants.FULL_WIDTH) .height($r('app.float.image_height')) } Row() { Text($r('app.string.sentence')) - .fontColor($r('app.color.word_color')) + .fontColor($r('sys.color.font_primary')) .fontSize($r('app.float.font_size')) .fontWeight(FontWeight.Medium) Text($r('app.string.change_another')) - .fontSize($r('app.float.font_size_min')) + .fontSize($r('app.float.font_size')) .fontWeight(FontWeight.Regular) - .fontColor($r('app.color.theme_color')) + .fontColor($r('sys.color.brand')) .textAlign(TextAlign.Center) .margin({ right: $r('app.float.change_margin') }) - Image($r('app.media.img')) - .width($r('app.float.change')) - .height($r('app.float.change')) - .backgroundColor(Color.White) + SymbolGlyph($r('sys.symbol.arrow_clockwise')) + .fontSize($r('app.float.change')) + .fontColor([$r('sys.color.brand')]) } .margin({ top: $r('app.float.word_margin_top'), bottom: $r('app.float.word_margin_bottom') }) - .width(Constants.EIGHTY_FIVE_PERCENT) + .width(this.curBp === 'sm' ? '100%' : $r('app.float.image_width')) .justifyContent(FlexAlign.SpaceBetween) Button($r('app.string.commit')) - .backgroundColor($r('app.color.theme_color')) - .fontColor(Color.White) - .width(Constants.EIGHTY_FIVE_PERCENT) + .backgroundColor($r('sys.color.brand')) + .fontColor($r('sys.color.font_on_primary')) + .width(this.curBp === 'sm' ? '100%' : 448) .height($r('app.float.bottom_height')) .onClick(() => { + this.showNumberIcon = [Visibility.Hidden, Visibility.Hidden, Visibility.Hidden, Visibility.Hidden]; clearTimeout(this.timer); if (this.wordArr.join('') === Constants.WORD) { this.opacitySuccess = Constants.LINE_HEIGHT; @@ -298,6 +346,13 @@ struct SelectVerificationCode { .toast() } } + .padding({ + left: new BreakpointType($r('sys.float.padding_level8'), $r('sys.float.padding_level12'), + $r('sys.float.padding_level16')).GetValue(this.curBp), + right: new BreakpointType($r('sys.float.padding_level8'), $r('sys.float.padding_level12'), + $r('sys.float.padding_level16')).GetValue(this.curBp), + top: px2vp(this.topRectHeight) + }) .width(Constants.ONE_HUNDRED_PERCENT) .height(Constants.ONE_HUNDRED_PERCENT) } @@ -309,6 +364,7 @@ export function getVerificationCode(name: string): void { NavDestination() { SelectVerificationCode() } + .hideTitleBar(true) } } diff --git a/entry/src/main/ets/pages/SliderVerificationCode.ets b/entry/src/main/ets/pages/SliderVerificationCode.ets index 68e28c9..c9811f9 100644 --- a/entry/src/main/ets/pages/SliderVerificationCode.ets +++ b/entry/src/main/ets/pages/SliderVerificationCode.ets @@ -13,7 +13,7 @@ * limitations under the License. */ -import Constants from '../common/Constants'; +import Constants, { BreakpointType } from '../common/Constants'; @Entry @Component @@ -21,6 +21,12 @@ struct SliderVerificationCode { @State tipText: string = ''; @State inSetValueOne: number = 0; @State opacityNumber: number = 0; + @Consume('pathInfos') pathInfos: NavPathStack; + @StorageProp('currentBreakpoint') curBp: string = Constants.BREAK_POINT_SM; + @StorageProp('bottomRectHeight') + bottomRectHeight: number = 0; + @StorageProp('topRectHeight') + topRectHeight: number = 0; getTargetTranslateX() { return this.inSetValueOne * Constants.COEFFICIENT; @@ -29,19 +35,34 @@ struct SliderVerificationCode { build() { Column() { Row() { - Text($r('app.string.complete')) - .fontSize($r('app.float.font_size_l')) - .fontWeight(FontWeight.Medium) + Button({ type: ButtonType.Circle }) { + SymbolGlyph($r('sys.symbol.chevron_backward')) + .fontColor([$r('sys.color.icon_primary')]) + .fontSize($r('sys.float.Title_M')) + } + .height($r('app.float.back_button_height')) + .aspectRatio(1) + .backgroundColor($r('sys.color.comp_background_tertiary')) + .onClick(() => this.pathInfos.pop()) + + Text($r('app.string.slider_verification_code')) + .margin({ left: $r('sys.float.padding_level4') }) + .font({ size: $r('app.float.bar_font_size'), weight: Constants.FONT_WEIGHT_700 }) + .fontColor($r('sys.color.font_primary')) } - .height($r('app.float.list_padding_top')) - .margin({ - bottom: $r('app.float.margin_bottom'), - top: $r('app.float.margin_bottom') + .width(Constants.FULL_WIDTH) + .height($r('app.float.bar_height')) + .zIndex(2) + .padding({ + left: new BreakpointType($r('sys.float.padding_level8'), $r('sys.float.padding_level12'), + $r('sys.float.padding_level16')).GetValue(this.curBp), + right: new BreakpointType($r('sys.float.padding_level8'), $r('sys.float.padding_level12'), + $r('sys.float.padding_level16')).GetValue(this.curBp), }) Stack() { Image($r('app.media.sliderBackground')) - .width($r('app.float.image_width')) + .width(this.curBp === 'sm' ? $r('app.float.image_width') : $r('app.float.image_width')) .height($r('app.float.image_height')) Image($r('app.media.slider')) @@ -52,73 +73,69 @@ struct SliderVerificationCode { y: Constants.NEGATIVE_TWO }) } + .margin({ top: $r('sys.float.padding_level8') }) .alignContent(Alignment.Start) Stack() { - Row() - .width($r('app.float.row_width_l')) - .height(Constants.ANGLE) - .backgroundColor($r('app.color.row_background_color')) - .borderRadius($r('app.float.cursor_height')) Text($r('app.string.slide')) .fontColor($r('sys.color.mask_tertiary')) - Row() { - Slider({ - value: this.inSetValueOne, - min: Constants.ZERO, - max: Constants.ONE_HUNDRED, - style: SliderStyle.InSet + Slider({ + value: this.inSetValueOne, + min: Constants.ZERO, + max: Constants.ONE_HUNDRED, + style: SliderStyle.InSet + }) + .blockSize({ width: $r('app.float.button_width'), height: $r('app.float.button_width') }) + .blockStyle({ type: SliderBlockType.IMAGE, image: $r('app.media.button') }) + .width(this.curBp === 'sm' ? $r('app.float.image_width') : $r('app.float.image_width')) + .trackColor(Color.Transparent) + .selectedColor($r('app.color.select_color')) + .showTips(false) + .trackThickness(Constants.ANGLE) + .sliderInteractionMode(SliderInteraction.SLIDE_ONLY) + .onChange((value: number, mode: SliderChangeMode) => { + this.inSetValueOne = value; + if (value === Constants.CHANGE_VALUE && mode.valueOf() === Constants.TWO) { + this.inSetValueOne = Constants.CHANGE_VALUE; + this.opacityNumber = Constants.LINE_HEIGHT; + setTimeout(() => { + this.opacityNumber = Constants.ZERO; + if (this.inSetValueOne === Constants.CHANGE_VALUE) { + this.inSetValueOne = Constants.ZERO; + } + }, Constants.THREE_THOUSAND); + } + if (value !== Constants.CHANGE_VALUE && mode.valueOf() === Constants.TWO) { + this.inSetValueOne = Constants.ZERO; + } }) - .width(Constants.THREE_HUNDRED_AND_FORTY) - .trackColor(Color.Transparent) - .selectedColor($r('app.color.select_color')) - .showTips(false) - .trackThickness(Constants.ANGLE) - .sliderInteractionMode(SliderInteraction.SLIDE_ONLY) - .onChange((value: number, mode: SliderChangeMode) => { - this.inSetValueOne = value; - if (value === Constants.CHANGE_VALUE && mode.valueOf() === Constants.TWO) { - this.inSetValueOne = Constants.CHANGE_VALUE; - this.opacityNumber = Constants.LINE_HEIGHT; - setTimeout(() => { - this.opacityNumber = Constants.ZERO; - if (this.inSetValueOne === Constants.CHANGE_VALUE) { - this.inSetValueOne = Constants.ZERO; - } - }, Constants.THREE_THOUSAND); - } - if (value !== Constants.CHANGE_VALUE && mode.valueOf() === Constants.TWO) { - this.inSetValueOne = Constants.ZERO; - } - }) - } - Image($r('app.media.button')) - .fillColor(Color.White) - .width($r('app.float.button_width')) - .height($r('app.float.button_width')) - .margin({ left: $r('app.float.margin_left') }) - .translate({ x: this.getTargetTranslateX() }) - .hitTestBehavior(HitTestMode.Transparent) + + // Image($r('app.media.button')) + // .fillColor(Color.White) + // .width($r('app.float.button_width')) + // .height($r('app.float.button_width')) + // .margin({ left: $r('app.float.margin_left') }) + // .translate({ x: this.getTargetTranslateX() }) + // .hitTestBehavior(HitTestMode.Transparent) } .margin({ top: $r('app.float.padding') }) Row() { Text($r('app.string.change')) - .fontSize($r('app.float.font_size_min')) - .fontColor($r('app.color.change_color')) + .fontSize($r('app.float.font_size_m')) + .fontColor($r('sys.color.brand')) .textAlign(TextAlign.Center) .margin({ top: $r('app.float.row_margin') }) .lineHeight($r('app.float.change')) - Image($r('app.media.img')) - .width($r('app.float.change')) - .height($r('app.float.change')) + SymbolGlyph($r('sys.symbol.arrow_clockwise')) + .fontSize($r('app.float.change')) + .fontColor([$r('sys.color.brand')]) .translate({ y: Constants.TEN, x: Constants.ITEM_DIVIDER }) - .backgroundColor(Color.White) } .justifyContent(FlexAlign.Center) .alignItems(VerticalAlign.Center) @@ -141,6 +158,9 @@ struct SliderVerificationCode { color: $r('app.color.shadow') }) } + .padding({ + top: px2vp(this.topRectHeight) + }) .width(Constants.ONE_HUNDRED_PERCENT) .height(Constants.ONE_HUNDRED_PERCENT) } @@ -152,6 +172,7 @@ export function getSliderVerification(name: string): void { NavDestination() { SliderVerificationCode() } + .hideTitleBar(true) } } diff --git a/entry/src/main/ets/pages/TextBoxShowCursor.ets b/entry/src/main/ets/pages/TextBoxShowCursor.ets index 82772fa..c25bbb0 100644 --- a/entry/src/main/ets/pages/TextBoxShowCursor.ets +++ b/entry/src/main/ets/pages/TextBoxShowCursor.ets @@ -17,7 +17,7 @@ import { BusinessError } from '@kit.BasicServicesKit'; import { hilog } from '@kit.PerformanceAnalysisKit'; import { inputMethod } from '@kit.IMEKit'; import { window } from '@kit.ArkUI'; -import Constants from '../common/Constants'; +import Constants, { BreakpointType } from '../common/Constants'; @Extend(Text) function verifyCodeUnitStyle() { @@ -38,6 +38,10 @@ const TAG = 'TextBoxShowCursor'; @Entry @Component struct TextBoxShowCursor { + @Consume('pathInfos') pathInfos: NavPathStack; + @StorageProp('currentBreakpoint') curBp: string = Constants.BREAK_POINT_SM; + @StorageProp('topRectHeight') + topRectHeight: number = 0; @State codeText: string = ''; @State opacityColumn: number = 0; @State flag: boolean = true; @@ -130,7 +134,7 @@ struct TextBoxShowCursor { .border({ width: { bottom: $r('app.float.row_height_one') }, color: { - bottom: this.codeText[item] === undefined ? $r('app.color.line_divider') : $r('app.color.theme_color') + bottom: this.codeText[item] === undefined ? $r('sys.color.comp_divider') : $r('sys.color.brand') }, style: { bottom: BorderStyle.Solid } }) @@ -148,17 +152,13 @@ struct TextBoxShowCursor { }) .backgroundColor(Color.Transparent) .height($r('app.float.text_height')) - .width($r('app.float.context_area')) - .margin({ - left: $r('sys.float.ohos_id_card_margin_start'), - right: $r('sys.float.ohos_id_card_margin_start') - }) .defaultFocus(true) .onClick(() => { // When you click this component, the input method is displayed. Because the Text component is used here, // you need to re-attach it instead of directly using showSoftKeyboard. this.inputController.attach(true, this.textConfig); }) + .width(this.curBp === 'sm' ? Constants.FULL_WIDTH : $r('app.float.context_area')) Row() { Column() { @@ -166,7 +166,7 @@ struct TextBoxShowCursor { .opacity(this.opacityColumn) .width(Constants.TWO) .height($r('app.float.cursor_height')) - .backgroundColor($r('app.color.theme_color')) + .backgroundColor($r('sys.color.font_primary')) .borderRadius($r('app.float.row_height_one')) .animation({ duration: Constants.EIGHT_HUNDRED, @@ -179,18 +179,13 @@ struct TextBoxShowCursor { expected: Constants.NINETY } }) - - Text() - .height(Constants.LINE_HEIGHT) - .width(Constants.LINE_WIDTH) - .backgroundColor($r('app.color.theme_color')) - .translate({ y: Constants.LINE_MOVE }) } .visibility(this.flag ? Visibility.Visible : Visibility.Hidden) .translate({ - x: this.codeText.length === Constants.ZERO ? Constants.ITEM_DIVIDER : this.codeText.length * - (this.codeText.length > Constants.TWO ? (this.codeText.length === Constants.ITEM_DIVIDER ? - Constants.FIFTY_EIGHT_POINT_FIVE : Constants.FIFTY_NINE) : Constants.SIXTY) + x: (this.codeText.length === Constants.ZERO ? Constants.ITEM_DIVIDER : this.codeText.length * + (this.codeText.length > Constants.TWO ? + (this.codeText.length === Constants.ITEM_DIVIDER ? Constants.FIFTY_EIGHT_POINT_FIVE : + Constants.FIFTY_NINE) : Constants.SIXTY)) }) .hitTestBehavior(HitTestMode.Transparent) .onClick(() => { @@ -201,33 +196,53 @@ struct TextBoxShowCursor { } .hitTestBehavior(HitTestMode.Transparent) .height($r('app.float.text_height')) - .width($r('app.float.context_area')) + .width(this.curBp === 'sm' ? Constants.FULL_WIDTH : $r('app.float.context_area')) } } build() { Column() { + Row() { + Button({ type: ButtonType.Circle }) { + SymbolGlyph($r('sys.symbol.chevron_backward')) + .fontColor([$r('sys.color.icon_primary')]) + .fontSize($r('sys.float.Title_M')) + } + .height($r('app.float.back_button_height')) + .aspectRatio(1) + .backgroundColor($r('sys.color.comp_background_tertiary')) + .onClick(() => this.pathInfos.pop()) + + Text($r('app.string.word')) + .margin({ left: $r('sys.float.padding_level4') }) + .font({ size: $r('app.float.bar_font_size'), weight: Constants.FONT_WEIGHT_700 }) + .fontColor($r('sys.color.font_primary')) + } + .width(Constants.FULL_WIDTH) + .height($r('app.float.bar_height')) + .zIndex(2) + Row() { Text($r('app.string.enter_the_verification_code')) .fontSize($r('app.float.font_size_l')) .fontWeight(FontWeight.Medium) } + .margin({ top: $r('sys.float.padding_level8') }) .height($r('app.float.list_padding_top')) + .alignSelf(ItemAlign.Center) Row() { Text($r('app.string.Verification_code_sent_to')) .fontSize($r('app.float.font_size_m')) - .fontColor($r('app.color.phone_color')) + .fontColor($r('sys.color.font_tertiary')) .fontWeight(FontWeight.Regular) Text($r('app.string.phone_number')) .fontSize($r('app.float.font_size_m')) - .fontColor($r('app.color.theme_color')) + .fontColor($r('sys.color.brand')) .fontWeight(FontWeight.Regular) } - .margin({ - top: $r('app.float.row_width'), - bottom: $r('app.float.margin_bottom') - }) + .margin({ bottom: $r('app.float.margin_bottom') }) + .alignSelf(ItemAlign.Center) this.buildVerifyCodeComponent() @@ -235,13 +250,20 @@ struct TextBoxShowCursor { Text($r('app.string.reacquire')) .fontSize($r('app.float.font_size')) .fontWeight(FontWeight.Medium) - .fontColor($r('app.color.theme_color')) + .fontColor($r('sys.color.brand')) } - .width(Constants.NINETY_PERCENT) - .margin({ top: $r('app.float.row_margin') }) + .width(Constants.FULL_WIDTH) + .margin({ top: $r('sys.float.padding_level6') }) .justifyContent(FlexAlign.End) } - .padding({ top: Constants.LINE_WIDTH }) + .backgroundColor($r('sys.color.background_secondary')) + .padding({ + left: new BreakpointType($r('sys.float.padding_level8'), $r('sys.float.padding_level12'), + $r('sys.float.padding_level16')).GetValue(this.curBp), + right: new BreakpointType($r('sys.float.padding_level8'), $r('sys.float.padding_level12'), + $r('sys.float.padding_level16')).GetValue(this.curBp), + top: px2vp(this.topRectHeight) + }) .height(Constants.ONE_HUNDRED_PERCENT) .width(Constants.ONE_HUNDRED_PERCENT) } @@ -253,6 +275,7 @@ export function getShowCursor(name: string): void { NavDestination() { TextBoxShowCursor() } + .hideTitleBar(true) } } diff --git a/entry/src/main/module.json5 b/entry/src/main/module.json5 index 5f6f8e1..de78b5c 100644 --- a/entry/src/main/module.json5 +++ b/entry/src/main/module.json5 @@ -5,7 +5,9 @@ "description": "$string:module_desc", "mainElement": "EntryAbility", "deviceTypes": [ - "phone" + "phone", + "tablet", + "2in1" ], "deliveryWithInstall": true, "installationFree": false, diff --git a/entry/src/main/resources/base/element/float.json b/entry/src/main/resources/base/element/float.json index 55ecf67..1d94b38 100644 --- a/entry/src/main/resources/base/element/float.json +++ b/entry/src/main/resources/base/element/float.json @@ -16,10 +16,30 @@ "name": "row_margin", "value": "20vp" }, + { + "name": "index_button_width_lg", + "value": "448vp" + }, + { + "name": "button_height", + "value": "40vp" + }, { "name": "border_width", "value": "2vp" }, + { + "name": "back_button_height", + "value": "40vp" + }, + { + "name": "bar_height", + "value": "56vp" + }, + { + "name": "bar_font_size", + "value": "20vp" + }, { "name": "zero", "value": "0vp" @@ -66,7 +86,7 @@ }, { "name": "font_size_l", - "value": "24fp" + "value": "18fp" }, { "name": "font_size_m", @@ -118,7 +138,7 @@ }, { "name": "margin_left", - "value": "-285vp" + "value": "-269vp" }, { "name": "change", @@ -166,7 +186,7 @@ }, { "name": "word_margin_bottom", - "value": "42vp" + "value": "16vp" }, { "name": "background_margin", diff --git a/entry/src/main/resources/base/element/string.json b/entry/src/main/resources/base/element/string.json index 4d528ef..db74d4b 100644 --- a/entry/src/main/resources/base/element/string.json +++ b/entry/src/main/resources/base/element/string.json @@ -70,7 +70,7 @@ }, { "name": "sentence", - "value": "请依次点击“古 堰 画 乡”" + "value": "请依次点击 '古 堰 画 乡'" }, { "name": "change_another", @@ -119,6 +119,10 @@ { "name": "hunan", "value": "湘" + }, + { + "name": "project_name", + "value": "Collection Of Verification Codes" } ] } \ No newline at end of file diff --git a/entry/src/main/resources/en_US/element/string.json b/entry/src/main/resources/en_US/element/string.json index 9d6a163..335dce1 100644 --- a/entry/src/main/resources/en_US/element/string.json +++ b/entry/src/main/resources/en_US/element/string.json @@ -119,6 +119,10 @@ { "name": "hunan", "value": "hunan" + }, + { + "name": "project_name", + "value": "Collection Of Verification Codes" } ] } \ No newline at end of file diff --git a/entry/src/main/resources/zh_CN/element/string.json b/entry/src/main/resources/zh_CN/element/string.json index 19e01f7..6c439a0 100644 --- a/entry/src/main/resources/zh_CN/element/string.json +++ b/entry/src/main/resources/zh_CN/element/string.json @@ -70,7 +70,7 @@ }, { "name": "sentence", - "value": "请依次点击“古 堰 画 乡”" + "value": "请依次点击 '古 堰 画 乡'" }, { "name": "change_another", @@ -119,6 +119,10 @@ { "name": "hunan", "value": "湘" + }, + { + "name": "project_name", + "value": "验证码合集" } ] } \ No newline at end of file -- Gitee From 4760f68f88984de62ad0733082b64f4114c751a1 Mon Sep 17 00:00:00 2001 From: wpp <58198665+879356503@users.noreply.github.com> Date: Wed, 12 Mar 2025 17:28:38 +0800 Subject: [PATCH 2/3] =?UTF-8?q?HMOSWorld=E6=95=B4=E6=94=B9=20(1)UX?= =?UTF-8?q?=E9=A3=8E=E6=A0=BC=E9=80=82=E9=85=8D;=20(2)=E6=B7=B1=E6=B5=85?= =?UTF-8?q?=E8=89=B2=E9=80=82=E9=85=8D;=20(3)=E6=B2=89=E6=B5=B8=E5=BC=8F?= =?UTF-8?q?=E9=80=82=E9=85=8D;=20(4)=E4=B8=80=E5=A4=9A=E8=AE=BE=E5=A4=87?= =?UTF-8?q?=E6=95=B4=E6=94=B9;=20(5)=E5=9B=BE=E6=A0=87/=E5=9B=BE=E7=89=87?= =?UTF-8?q?=E6=9B=BF=E6=8D=A2;=20(6)=E5=9B=BD=E9=99=85=E5=8C=96=E6=95=B4?= =?UTF-8?q?=E6=94=B9;?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- entry/src/main/ets/common/Constants.ets | 2 +- entry/src/main/ets/pages/BackgroundColorChange.ets | 5 ++++- entry/src/main/ets/pages/BottomWithBar.ets | 4 +++- entry/src/main/ets/pages/Index.ets | 2 ++ entry/src/main/ets/pages/TextBoxShowCursor.ets | 3 ++- 5 files changed, 12 insertions(+), 4 deletions(-) diff --git a/entry/src/main/ets/common/Constants.ets b/entry/src/main/ets/common/Constants.ets index 25b8df4..74e622b 100644 --- a/entry/src/main/ets/common/Constants.ets +++ b/entry/src/main/ets/common/Constants.ets @@ -255,7 +255,7 @@ export default class Constants { /** * Index page padding top size. */ - static readonly PADDING_TOP_INDEX: number = 64; + static readonly PADDING_TOP_INDEX: number = 56; /** * Index page padding bottom size. */ diff --git a/entry/src/main/ets/pages/BackgroundColorChange.ets b/entry/src/main/ets/pages/BackgroundColorChange.ets index eb0903e..b5eafda 100644 --- a/entry/src/main/ets/pages/BackgroundColorChange.ets +++ b/entry/src/main/ets/pages/BackgroundColorChange.ets @@ -182,7 +182,10 @@ struct BackgroundColorChange { .fontColor($r('sys.color.brand')) } .margin({ top: $r('sys.float.padding_level6') }) - .alignSelf(ItemAlign.End) + .padding({ right: new BreakpointType(0, 6, 6).GetValue(this.curBp) }) + .alignSelf(ItemAlign.Center) + .justifyContent(FlexAlign.End) + .width(this.curBp === 'sm' ? '100%' : 328) } .padding({ left: new BreakpointType($r('sys.float.padding_level8'), $r('sys.float.padding_level12'), diff --git a/entry/src/main/ets/pages/BottomWithBar.ets b/entry/src/main/ets/pages/BottomWithBar.ets index f464641..1638cd7 100644 --- a/entry/src/main/ets/pages/BottomWithBar.ets +++ b/entry/src/main/ets/pages/BottomWithBar.ets @@ -92,8 +92,10 @@ struct BottomWithBar { .fontWeight(FontWeight.Medium) .fontColor($r('sys.color.brand')) } + .alignSelf(ItemAlign.Center) + .justifyContent(FlexAlign.End) + .width(this.curBp === 'sm' ? '100%' : 328) .margin({ top: $r('sys.float.padding_level6') }) - .alignSelf(ItemAlign.End) } .padding({ left: new BreakpointType($r('sys.float.padding_level8'), $r('sys.float.padding_level12'), diff --git a/entry/src/main/ets/pages/Index.ets b/entry/src/main/ets/pages/Index.ets index 891fabf..0b8e846 100644 --- a/entry/src/main/ets/pages/Index.ets +++ b/entry/src/main/ets/pages/Index.ets @@ -47,11 +47,13 @@ struct Index { .fontWeight(FontWeight.Bold) .fontColor($r('sys.color.font_primary')) .fontSize($r('sys.float.Title_L')) + .height(56) .alignSelf(ItemAlign.Start) .margin({ left: this.curBp === 'sm' ? $r('sys.float.padding_level0') : this.curBp === 'md' ? $r('sys.float.padding_level4') : $r('sys.float.padding_level8') }) + .padding({ top: $r('sys.float.padding_level8') }) Column() { ForEach(this.NavDestinationData, (item: NavDestinationItem, index: number) => { Button(item.detail) diff --git a/entry/src/main/ets/pages/TextBoxShowCursor.ets b/entry/src/main/ets/pages/TextBoxShowCursor.ets index c25bbb0..059828b 100644 --- a/entry/src/main/ets/pages/TextBoxShowCursor.ets +++ b/entry/src/main/ets/pages/TextBoxShowCursor.ets @@ -252,9 +252,10 @@ struct TextBoxShowCursor { .fontWeight(FontWeight.Medium) .fontColor($r('sys.color.brand')) } - .width(Constants.FULL_WIDTH) .margin({ top: $r('sys.float.padding_level6') }) + .alignSelf(ItemAlign.Center) .justifyContent(FlexAlign.End) + .width(this.curBp === 'sm' ? '100%' : 328) } .backgroundColor($r('sys.color.background_secondary')) .padding({ -- Gitee From 3942fb893e6eaee86be730178acdbb929d4377ae Mon Sep 17 00:00:00 2001 From: wpp <58198665+879356503@users.noreply.github.com> Date: Mon, 17 Mar 2025 21:55:44 +0800 Subject: [PATCH 3/3] =?UTF-8?q?HMOSWorld=E6=95=B4=E6=94=B9=20(1)UX?= =?UTF-8?q?=E9=A3=8E=E6=A0=BC=E9=80=82=E9=85=8D;=20(2)=E6=B7=B1=E6=B5=85?= =?UTF-8?q?=E8=89=B2=E9=80=82=E9=85=8D;=20(3)=E6=B2=89=E6=B5=B8=E5=BC=8F?= =?UTF-8?q?=E9=80=82=E9=85=8D;=20(4)=E4=B8=80=E5=A4=9A=E8=AE=BE=E5=A4=87?= =?UTF-8?q?=E6=95=B4=E6=94=B9;=20(5)=E5=9B=BE=E6=A0=87/=E5=9B=BE=E7=89=87?= =?UTF-8?q?=E6=9B=BF=E6=8D=A2;=20(6)=E5=9B=BD=E9=99=85=E5=8C=96=E6=95=B4?= =?UTF-8?q?=E6=94=B9;?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- entry/src/main/resources/base/element/string.json | 6 +++--- entry/src/main/resources/en_US/element/string.json | 6 +++--- entry/src/main/resources/zh_CN/element/string.json | 4 ++-- 3 files changed, 8 insertions(+), 8 deletions(-) diff --git a/entry/src/main/resources/base/element/string.json b/entry/src/main/resources/base/element/string.json index db74d4b..23f5c00 100644 --- a/entry/src/main/resources/base/element/string.json +++ b/entry/src/main/resources/base/element/string.json @@ -82,15 +82,15 @@ }, { "name": "word", - "value": "文本框显示光标" + "value": "光标风格" }, { "name": "bottom", - "value": "底部加横条" + "value": "底部横条风格" }, { "name": "background", - "value": "背景颜色改变" + "value": "背景改变风格" }, { "name": "hua", diff --git a/entry/src/main/resources/en_US/element/string.json b/entry/src/main/resources/en_US/element/string.json index 335dce1..890e92c 100644 --- a/entry/src/main/resources/en_US/element/string.json +++ b/entry/src/main/resources/en_US/element/string.json @@ -82,15 +82,15 @@ }, { "name": "word", - "value": "The text box displays the cursor" + "value": "Cursor style" }, { "name": "bottom", - "value": "Add horizontal bars at the bottom" + "value": "Bottom bar style" }, { "name": "background", - "value": "Background color change" + "value": "Background change style" }, { "name": "hua", diff --git a/entry/src/main/resources/zh_CN/element/string.json b/entry/src/main/resources/zh_CN/element/string.json index 6c439a0..3b5e489 100644 --- a/entry/src/main/resources/zh_CN/element/string.json +++ b/entry/src/main/resources/zh_CN/element/string.json @@ -82,7 +82,7 @@ }, { "name": "word", - "value": "文本框显示光标" + "value": "光标风格" }, { "name": "bottom", @@ -90,7 +90,7 @@ }, { "name": "background", - "value": "背景颜色改变" + "value": "背景改变风格" }, { "name": "hua", -- Gitee