From 37c3f51caf2299f2d78ef0100c760c9ff857a148 Mon Sep 17 00:00:00 2001 From: 26thE <962961353@qq.com> Date: Mon, 16 Jun 2025 17:44:28 +0800 Subject: [PATCH] =?UTF-8?q?UX=E4=BC=98=E5=8C=96?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../main/ets/entryability/EntryAbility.ets | 4 + entry/src/main/ets/pages/Index.ets | 78 +++- entry/src/main/ets/view/TrafficInfoView.ets | 128 +++--- entry/src/main/ets/view/TrafficView.ets | 394 +++++++++++------- .../main/resources/base/element/color.json | 28 +- .../main/resources/base/element/string.json | 30 +- .../base/media/turn_right_light_rectangle.png | Bin 0 -> 1091 bytes .../main/resources/dark/element/color.json | 8 - .../main/resources/en_US/element/string.json | 30 +- .../main/resources/zh_CN/element/string.json | 30 +- 10 files changed, 516 insertions(+), 214 deletions(-) create mode 100644 entry/src/main/resources/base/media/turn_right_light_rectangle.png diff --git a/entry/src/main/ets/entryability/EntryAbility.ets b/entry/src/main/ets/entryability/EntryAbility.ets index d95a8a6..0593706 100644 --- a/entry/src/main/ets/entryability/EntryAbility.ets +++ b/entry/src/main/ets/entryability/EntryAbility.ets @@ -75,6 +75,10 @@ export default class EntryAbility extends UIAbility { try { windowObj.on('windowSizeChange', (windowSize) => { this.updateBreakpoint(windowSize); + const type: window.AvoidAreaType = window.AvoidAreaType.TYPE_NAVIGATION_INDICATOR; + const avoidArea: window.AvoidArea = windowObj.getWindowAvoidArea(type); + const bottomRectHeight: number = avoidArea.bottomRect.height; + AppStorage.setOrCreate('bottomRectHeight', bottomRectHeight); }); windowObj.setWindowSystemBarProperties({ diff --git a/entry/src/main/ets/pages/Index.ets b/entry/src/main/ets/pages/Index.ets index 387c24a..de0d46f 100644 --- a/entry/src/main/ets/pages/Index.ets +++ b/entry/src/main/ets/pages/Index.ets @@ -13,14 +13,87 @@ * limitations under the License. */ +import { hilog } from '@kit.PerformanceAnalysisKit'; import { LiveView } from '../utils/LiveView'; import { TrafficView } from '../view/TrafficView'; +const TAG = '[LiveViewLockScreenPage]'; + +@CustomDialog +struct TipDialog { + public controller?: CustomDialogController; + public onConfirm: () => void = () => { + }; + + build() { + Column() { + Row() { + Text($r('app.string.tip')) + .fontSize(20) + .fontWeight(FontWeight.Bold) + .lineHeight(27) + .fontColor($r('app.color.tip')) + } + .height(56) + .width('100%') + .justifyContent(FlexAlign.Center) + .alignItems(VerticalAlign.Center) + + Text($r('app.string.tip_text')) + .fontSize(16) + .fontWeight(FontWeight.Medium) + .lineHeight(21) + .fontColor($r('app.color.tip')) + + Row() { + Text($r('app.string.tip_get')) + .width('100%') + .height(40) + .fontColor($r('app.color.tip_text')) + .textAlign(TextAlign.Center) + .onClick(() => { + hilog.info(0x0000, TAG, 'Button-clicking callback'); + this.onConfirm(); + }) + } + .height(56) + .width('100%') + .margin({ top: 8 }) + .padding({ left: 16, right: 16 }) + .alignItems(VerticalAlign.Top) + .justifyContent(FlexAlign.Center) + } + .width('100%') + .height('100%') + .alignItems(HorizontalAlign.Center) + .borderRadius(32) + .backgroundColor($r('app.color.tip_background')) + } +} + @Entry -@Component -struct Index { +export struct LiveViewLockScreenPage { + private customDialogController: CustomDialogController = new CustomDialogController({ + builder: TipDialog({ + onConfirm: () => { + this.customDialogController?.close(); + } + }), + cancel: () => { + }, + onWillDismiss: (dismissDialogAction: DismissDialogAction) => { + dismissDialogAction.dismiss() + }, + alignment: DialogAlignment.Center, + autoCancel: true, + cornerRadius: 32, + width: 338, + height: 141 + }); + aboutToAppear(): void { LiveView.getInstance().createLiveView(); + this.customDialogController?.open(); } build() { @@ -28,6 +101,7 @@ struct Index { Image($r('app.media.traffic_background')) .width('110%') .height('110%') + TrafficView() } .width('100%') diff --git a/entry/src/main/ets/view/TrafficInfoView.ets b/entry/src/main/ets/view/TrafficInfoView.ets index cc91902..f874b06 100644 --- a/entry/src/main/ets/view/TrafficInfoView.ets +++ b/entry/src/main/ets/view/TrafficInfoView.ets @@ -12,76 +12,90 @@ * See the License for the specific language governing permissions and * limitations under the License. */ + import { LiveView } from '../utils/LiveView' @Component export struct TrafficInfoView { - @State private isStart: boolean = true; + @State private isShowButton: boolean = false; build() { Row() { - Column() { - Text($r('app.string.traffic_info_first')) - .fontWeight(FontWeight.Bold) - .alignSelf(ItemAlign.Start) - .fontSize($r('sys.float.padding_level12')) - .margin({ - top: $r('sys.float.padding_level8'), + if (this.isShowButton === false) { + Column() { + Text($r('app.string.traffic_info_first')) + .fontColor(Color.Black) + .fontWeight(FontWeight.Bold) + .alignSelf(ItemAlign.Start) + .fontSize($r('sys.float.padding_level12')) + .margin({ + left: $r('sys.float.padding_level12'), + }) + Row() { + Text($r('app.string.traffic_info_second')) + .fontColor(Color.Grey) + .fontWeight(FontWeight.Bold) + .alignSelf(ItemAlign.Start) + .fontSize($r('sys.float.padding_level8')) + Image($r('app.media.traffic_light')) + .height($r('sys.float.padding_level8')) + Text($r('app.string.traffic_info_third')) + .fontColor(Color.Grey) + .fontWeight(FontWeight.Bold) + .alignSelf(ItemAlign.Start) + .fontSize($r('sys.float.padding_level8')) + } + .padding({ + top: $r('sys.float.padding_level4'), left: $r('sys.float.padding_level12'), + bottom: $r('sys.float.padding_level12'), }) + } + .alignItems(HorizontalAlign.Start) + + Column() { + SymbolGlyph($r('sys.symbol.arrow_right_and_square')) + .fontColor([Color.Black]) + .fontSize(25) + .margin(10) + } + .onClick(() => { + this.isShowButton = true; + }) + .backgroundColor($r('app.color.component_background_color')) + .borderRadius(32) + .position({ + right: 16, + }) + } else { Row() { - Text($r('app.string.traffic_info_second')) - .fontColor(Color.Grey) - .fontWeight(FontWeight.Bold) - .alignSelf(ItemAlign.Start) - .fontSize($r('sys.float.padding_level8')) - Image($r('app.media.traffic_light')) - .height($r('sys.float.padding_level8')) - Text($r('app.string.traffic_info_third')) - .fontColor(Color.Grey) - .fontWeight(FontWeight.Bold) - .alignSelf(ItemAlign.Start) - .fontSize($r('sys.float.padding_level8')) + Blank() + Button($r('app.string.Continue')) + .fontColor($r('sys.color.font_emphasize')) + .backgroundColor($r('app.color.traffic_info_button')) + .fontSize(16) + .width('40%') + .onClick(() => { + this.isShowButton = false; + LiveView.getInstance().createLiveView(); + }) + Blank() + Button($r('app.string.Finish')) + .fontColor($r('sys.color.warning')) + .backgroundColor($r('app.color.traffic_info_button')) + .fontSize(16) + .width('40%') + .onClick(() => { + this.isShowButton = false; + LiveView.getInstance().finishLiveView(); + }) + Blank() } - .padding({ - top: $r('sys.float.padding_level4'), - left: $r('sys.float.padding_level12'), - bottom: $r('sys.float.padding_level16'), + .margin({ + top: 6, }) + .width('100%') } - .alignItems(HorizontalAlign.Start) - - Column() { - Button('开始导航') - .fontColor(this.isStart ? $r('sys.color.comp_background_emphasize') : Color.White) - .backgroundColor(this.isStart ? $r('sys.color.comp_background_secondary') : - $r('sys.color.comp_background_emphasize')) - .fontSize(12) - .width(80) - .height(30) - .onClick(() => { - this.isStart = true; - LiveView.getInstance().createLiveView(); - }) - Button('结束导航') - .fontColor(!this.isStart ? $r('sys.color.comp_background_emphasize') : Color.White) - .backgroundColor(!this.isStart ? $r('sys.color.comp_background_secondary') : - $r('sys.color.comp_background_emphasize')) - .fontSize(12) - .width(80) - .height(30) - .onClick(() => { - this.isStart = false; - LiveView.getInstance().finishLiveView(); - }) - .margin({ - top: $r('sys.float.padding_level4') - }) - } - .position({ - top: 10, - right: 16, - }) } .width('100%') } diff --git a/entry/src/main/ets/view/TrafficView.ets b/entry/src/main/ets/view/TrafficView.ets index 5163588..8a82296 100644 --- a/entry/src/main/ets/view/TrafficView.ets +++ b/entry/src/main/ets/view/TrafficView.ets @@ -14,191 +14,305 @@ */ import { Constants } from '../constant/Constant'; -import { LaneData } from '../model/RouteDataModel'; -import { TrafficInfoView } from './TrafficInfoView'; import { BreakpointType } from '../utils/BreakpointUtil'; +import { TrafficInfoView } from './TrafficInfoView'; @Component export struct TrafficView { + @StorageProp('bottomRectHeight') bottomRectHeight: number = 0; @StorageLink('horizontalBreakpoint') horizontalBreakpoint: string = Constants.BREAK_POINT_SM; @StorageLink('verticalBreakpoint') verticalBreakpoint: string = Constants.BREAK_POINT_SM; - @State roadInfo: LaneData | undefined = undefined; - @State isShow: boolean = false; + @Prop lane: number = 2; + private updateInterval: number | undefined; + + aboutToAppear(): void { + this.updateInterval = setInterval(() => { + if (this.lane === 2) { + this.lane = 1; + } else { + this.lane = 2; + } + }, 2000) + } - @Builder - myBuilder() { - Row() { - TrafficInfoView() + aboutToDisappear(): void { + if (this.updateInterval !== undefined) { + clearInterval(this.updateInterval); + this.updateInterval = undefined; } - .backgroundColor($r('sys.color.background_secondary')) - .width('100%') - .height('100%') } build() { - Column() { - Row() { - Column() { + if (this.horizontalBreakpoint !== Constants.BREAK_POINT_SM || + this.verticalBreakpoint !== Constants.BREAK_POINT_MD) { + Column() { + Row() { Column() { - Row() { - Image($r('app.media.big_arrow')) - .objectFit(ImageFit.Contain) - .height(new BreakpointType(80, 70, 70).getValue(this.horizontalBreakpoint)) - Column() { - Text($r('app.string.traffic_info_meter')) - .fontColor(Color.White) - .fontWeight(FontWeight.Bold) - .alignSelf(ItemAlign.Start) - .fontSize(40) - .margin({ - top: $r('sys.float.padding_level8'), - left: $r('sys.float.padding_level8'), - }) - Text($r('app.string.road_name')) + Column() { + Row() { + Image($r('app.media.big_arrow')) + .objectFit(ImageFit.Contain) + .height(new BreakpointType(80, 70, 70,).getValue(this.horizontalBreakpoint)) + Column() { + Text($r('app.string.traffic_info_meter')) + .fontColor(Color.White) + .fontWeight(FontWeight.Bold) + .alignSelf(ItemAlign.Start) + .fontSize(40) + .margin({ + top: $r('sys.float.padding_level8'), + left: $r('sys.float.padding_level8'), + }) + Text($r('app.string.road_name')) + .fontColor(Color.White) + .fontWeight(FontWeight.Regular) + .alignSelf(ItemAlign.Start) + .fontSize(24) + .margin({ + left: $r('sys.float.padding_level8'), + }) + } + } + .borderRadius({ + topLeft: new BreakpointType(0, 16, 16,).getValue(this.horizontalBreakpoint), + topRight: new BreakpointType(0, 16, 16,).getValue(this.horizontalBreakpoint), + }) + .backgroundColor($r('app.color.Index_background_first')) + .width(new BreakpointType('100%', '50%', '30%',).getValue(this.horizontalBreakpoint)) + .padding({ + bottom: $r('sys.float.padding_level8'), + top: new BreakpointType($r('sys.float.padding_level16'), $r('sys.float.padding_level0'), + $r('sys.float.padding_level0'),).getValue(this.horizontalBreakpoint), + left: new BreakpointType($r('sys.float.padding_level8'), $r('sys.float.padding_level12'), + $r('sys.float.padding_level16'),).getValue(this.horizontalBreakpoint), + }) + + Row() { + Text($r('app.string.then')) .fontColor(Color.White) .fontWeight(FontWeight.Regular) .alignSelf(ItemAlign.Start) - .fontSize(24) + .fontSize(22) .margin({ left: $r('sys.float.padding_level8'), + right: $r('sys.float.padding_level2'), }) + Image($r('app.media.little_arrow')) + .objectFit(ImageFit.Contain) + .height(25) } - } - .borderRadius({ - topLeft: new BreakpointType(0, 16, 16).getValue(this.horizontalBreakpoint), - topRight: new BreakpointType(0, 16, 16).getValue(this.horizontalBreakpoint), - }) - .backgroundColor($r('app.color.Index_background_first')) - .width(new BreakpointType('100%', '50%', '30%').getValue(this.horizontalBreakpoint)) - .padding({ - bottom: $r('sys.float.padding_level8'), - top: new BreakpointType(this.verticalBreakpoint === Constants.BREAK_POINT_MD ? - ('sys.float.padding_level8') : $r('sys.float.padding_level16'), $r('sys.float.padding_level0'), - $r('sys.float.padding_level0')).getValue(this.horizontalBreakpoint), - left: new BreakpointType($r('sys.float.padding_level8'), $r('sys.float.padding_level12'), - $r('sys.float.padding_level16')).getValue(this.horizontalBreakpoint), - }) + .borderRadius({ + bottomLeft: new BreakpointType(0, 16, 16,).getValue(this.horizontalBreakpoint), + bottomRight: new BreakpointType(0, 16, 16,).getValue(this.horizontalBreakpoint), + }) + .padding({ + bottom: $r('sys.float.padding_level2'), + top: $r('sys.float.padding_level2'), + }) + .width(new BreakpointType('100%', '50%', '30%',).getValue(this.horizontalBreakpoint)) + .backgroundColor($r('app.color.Index_background_second')) - Row() { - Text($r('app.string.then')) - .fontColor(Color.White) - .fontWeight(FontWeight.Regular) - .alignSelf(ItemAlign.Start) - .fontSize(22) - .margin({ - left: $r('sys.float.padding_level8'), - right: $r('sys.float.padding_level2'), - }) - Image($r('app.media.little_arrow')) - .objectFit(ImageFit.Contain) - .height(new BreakpointType(25, 25, 25).getValue(this.horizontalBreakpoint)) + if (this.horizontalBreakpoint !== Constants.BREAK_POINT_SM) { + Image($r('app.media.traffic_info_speed')) + .objectFit(ImageFit.Contain) + .height(80) + .position({ + top: 0, + left: this.horizontalBreakpoint === Constants.BREAK_POINT_MD ? '51%' : '31%', + }) + } } - .borderRadius({ - bottomLeft: new BreakpointType(0, 16, 16).getValue(this.horizontalBreakpoint), - bottomRight: new BreakpointType(0, 16, 16).getValue(this.horizontalBreakpoint), - }) - .padding({ - bottom: $r('sys.float.padding_level2'), - top: $r('sys.float.padding_level2'), - }) - .width(new BreakpointType('100%', '50%', '30%').getValue(this.horizontalBreakpoint)) - .backgroundColor($r('app.color.Index_background_second')) - if (this.horizontalBreakpoint !== Constants.BREAK_POINT_SM) { - Image($r('app.media.traffic_info_speed')) + Row() { + if (this.horizontalBreakpoint === Constants.BREAK_POINT_SM) { + Image($r('app.media.traffic_info_speed')) + .objectFit(ImageFit.Contain) + .height(70) + } + Image($r('app.media.traffic_info_label')) .objectFit(ImageFit.Contain) - .height(80) - .position({ - top: 0, - left: this.horizontalBreakpoint === Constants.BREAK_POINT_MD ? '51%' : '31%', - }) + .height(new BreakpointType(70, 80, 80,).getValue(this.horizontalBreakpoint)) } + .width(new BreakpointType('100%', '40%', '30%',).getValue(this.horizontalBreakpoint)) } + .margin({ + left: new BreakpointType($r('sys.float.padding_level0'), $r('sys.float.padding_level12'), + $r('sys.float.padding_level16'),).getValue(this.horizontalBreakpoint), + top: new BreakpointType($r('sys.float.padding_level0'), $r('sys.float.padding_level16'), + $r('sys.float.padding_level16'),).getValue(this.horizontalBreakpoint), + }) + } + .width('100%') + .justifyContent(FlexAlign.Start) - Row() { - if (this.horizontalBreakpoint === Constants.BREAK_POINT_SM) { - Image($r('app.media.traffic_info_speed')) - .objectFit(ImageFit.Contain) - .height(70) + Blank() + + Row() { + Stack({ alignContent: Alignment.Top }) { + if (this.lane === 2) { + Image($r('app.media.traffic_right')) + .width(new BreakpointType('70%', '50%', '30%',).getValue(this.horizontalBreakpoint)) + } else { + Image($r('app.media.traffic_left')) + .width(new BreakpointType('70%', '50%', '30%',).getValue(this.horizontalBreakpoint)) } - Image($r('app.media.traffic_info_label')) + + Image($rawfile('traffic_light.svg')) .objectFit(ImageFit.Contain) - .height(new BreakpointType(70, 80, 80).getValue(this.horizontalBreakpoint)) + .width(new BreakpointType('20%', '15%', '10%',).getValue(this.horizontalBreakpoint)) + .position({ + left: '70%', + top: 30 + }) } - .width(new BreakpointType('100%', '40%', '30%').getValue(this.horizontalBreakpoint)) + .width('100%') } - .margin({ - left: new BreakpointType($r('sys.float.padding_level0'), $r('sys.float.padding_level12'), - $r('sys.float.padding_level16')).getValue(this.horizontalBreakpoint), - top: new BreakpointType($r('sys.float.padding_level0'), $r('sys.float.padding_level16'), - $r('sys.float.padding_level16')).getValue(this.horizontalBreakpoint), - }) - } - .width('100%') - .justifyContent(FlexAlign.Start) - Blank() + Blank() + Blank() - Row() { - Stack({ alignContent: Alignment.Top }) { - Image($r('app.media.traffic_right')) - .width(new BreakpointType(this.verticalBreakpoint === Constants.BREAK_POINT_MD ? '35%' : '70%', '50%', - '30%').getValue(this.horizontalBreakpoint)) - Image($rawfile('traffic_light.svg')) + Row() { + Column() { + Divider() + .strokeWidth(4) + .color($r('app.color.traffic_info_line')) + .width($r('sys.float.padding_level24')) + .lineCap(LineCapStyle.Round) + .margin({ + top: $r('sys.float.padding_level3'), + bottom: $r('sys.float.padding_level7') + }) + + TrafficInfoView() + } + .height(100) + .width(new BreakpointType('100%', '300vp', '360vp',).getValue(this.horizontalBreakpoint)) + .borderColor($r('sys.color.comp_divider')) + .borderRadius({ + topLeft: $r('sys.float.corner_radius_level12'), + topRight: $r('sys.float.corner_radius_level12'), + bottomLeft: new BreakpointType($r('sys.float.padding_level0'), $r('sys.float.corner_radius_level12'), + $r('sys.float.corner_radius_level12'),).getValue(this.horizontalBreakpoint), + bottomRight: new BreakpointType($r('sys.float.padding_level0'), $r('sys.float.corner_radius_level12'), + $r('sys.float.corner_radius_level12'),).getValue(this.horizontalBreakpoint), + }) + .backgroundColor($r('app.color.traffic_info_background_color')) + .shadow(ShadowStyle.OUTER_DEFAULT_XS) + .position({ + bottom: 0, + left: new BreakpointType($r('sys.float.padding_level0'), $r('sys.float.corner_radius_level12'), + $r('sys.float.corner_radius_level16'),).getValue(this.horizontalBreakpoint), + }) + .padding({ + bottom: new BreakpointType(px2vp(this.bottomRectHeight), 0, 0,).getValue(this.horizontalBreakpoint), + }) + .margin({ + bottom: new BreakpointType(0, px2vp(this.bottomRectHeight), + px2vp(this.bottomRectHeight),).getValue(this.horizontalBreakpoint), + }) + } + .width('100%') + } + .width('100%') + .height('100%') + .backgroundImage($r('app.media.traffic_background')) + .backgroundImageSize(ImageSize.Cover) + .backgroundImagePosition(Alignment.Center) + } else { + Column() { + Stack() { + Image($r('app.media.traffic_info_speed')) .objectFit(ImageFit.Contain) - .width(new BreakpointType('20%', '20%', '10%').getValue(this.horizontalBreakpoint)) + .height(70) .position({ - left: '70%', - top: 30 + top: 16, + left: 16, }) - } - .width('100%') - .onClick(() => { - if (this.horizontalBreakpoint === Constants.BREAK_POINT_SM && - this.verticalBreakpoint === Constants.BREAK_POINT_MD) { - this.isShow = true; + + if (this.lane === 2) { + Image($r('app.media.traffic_right')) + .width('60%') + .offset({ + y: 15, + }) } else { - this.isShow = false; + Image($r('app.media.traffic_left')) + .width('60%') + .offset({ + y: 15, + }) } - }) - } - Blank() + Column() { + Image($r('app.media.turn_right_light_rectangle')) + .objectFit(ImageFit.Contain) + .width(40) + .height(25) + .margin({ + top: 8, + }) - Row(){ - if (this.horizontalBreakpoint !== Constants.BREAK_POINT_SM || - this.verticalBreakpoint !== Constants.BREAK_POINT_MD) { - Row() { - TrafficInfoView() + Text($r('app.string.traffic_info_smmd_first')) + .fontColor(Color.Black) + .alignSelf(ItemAlign.Start) + .fontSize(20) + .fontWeight(FontWeight.Bold) + .margin({ + left: 16, + right: 16, + top: 8, + bottom: 8, + }) + Text($r('app.string.traffic_info_smmd_second')) + .fontColor(Color.Black) + .alignSelf(ItemAlign.Start) + .fontSize(20) + .fontWeight(FontWeight.Bold) + .margin({ + left: 16, + right: 16, + bottom: 8, + }) } - .onSizeChange(() => { - this.isShow = false; + .justifyContent(FlexAlign.Center) + .borderRadius(16) + .backgroundColor($r('sys.color.ohos_id_blur_style_component_thick_color')) + .position({ + top: 16, + right: 16 }) - .margin({ - left: new BreakpointType($r('sys.float.padding_level0'), $r('sys.float.padding_level12'), - $r('sys.float.padding_level16')).getValue(this.horizontalBreakpoint), - }) - .backgroundColor($r('sys.color.background_secondary')) - .width(new BreakpointType('100%', '50%', '30%').getValue(this.horizontalBreakpoint)) - .height(120) + } + .width('100%') + + Blank() + + Row() { + Column() { + Divider() + .strokeWidth(4) + .color($r('app.color.traffic_info_line')) + .width($r('sys.float.padding_level24')) + .lineCap(LineCapStyle.Round) + .margin({ + top: $r('sys.float.padding_level3'), + bottom: $r('sys.float.padding_level7') + }) + + TrafficInfoView() + } + .height(100) + .width(new BreakpointType('100%', '300vp', '360vp',).getValue(this.horizontalBreakpoint)) + .borderColor($r('sys.color.comp_divider')) .borderRadius({ - topLeft: 32, - topRight: 32, + topLeft: $r('sys.float.corner_radius_level12'), + topRight: $r('sys.float.corner_radius_level12'), }) + .backgroundColor($r('app.color.traffic_info_background_color')) + .shadow(ShadowStyle.OUTER_DEFAULT_XS) } + .width('100%') } - .width('100%') + .height('100%') } - .bindSheet($$this.isShow, this.myBuilder(), { - height: 90, - width: 440, - preferType: SheetType.BOTTOM, - showClose: false, - }) - .width('100%') - .height('100%') - .backgroundImage($r('app.media.traffic_background')) - .backgroundImageSize(ImageSize.Cover) - .backgroundImagePosition(Alignment.Center) } } \ No newline at end of file diff --git a/entry/src/main/resources/base/element/color.json b/entry/src/main/resources/base/element/color.json index a332bbb..4ed1297 100644 --- a/entry/src/main/resources/base/element/color.json +++ b/entry/src/main/resources/base/element/color.json @@ -13,12 +13,32 @@ "value": "#303030" }, { - "name": "xmark_foreground", - "value": "#E5000000" + "name": "component_background_color", + "value": "#0C000000" }, { - "name": "xmark_background", - "value": "#19000000" + "name": "traffic_info_line", + "value": "#33000000" + }, + { + "name": "traffic_info_background_color", + "value": "#F1F3F5" + }, + { + "name": "traffic_info_button", + "value": "#08000000" + }, + { + "name": "tip", + "value": "#000000" + }, + { + "name": "tip_background", + "value": "#ffffff" + }, + { + "name": "tip_text", + "value": "#0A57F7" } ] } \ No newline at end of file diff --git a/entry/src/main/resources/base/element/string.json b/entry/src/main/resources/base/element/string.json index 2a8552a..46b8d3a 100644 --- a/entry/src/main/resources/base/element/string.json +++ b/entry/src/main/resources/base/element/string.json @@ -14,12 +14,20 @@ }, { "name": "reason_background", - "value": "Background operation to update the live view" + "value": "后台更新实况窗数据" }, { "name": "traffic_info_meter", "value": "800米" }, + { + "name": "traffic_info_smmd_first", + "value": "800米" + }, + { + "name": "traffic_info_smmd_second", + "value": "后右转" + }, { "name": "traffic_info_first", "value": "1 小时 24 分钟" @@ -63,6 +71,26 @@ { "name": "then", "value": "然后" + }, + { + "name": "Continue", + "value": "继续导航" + }, + { + "name": "Finish", + "value": "停止导航" + }, + { + "name": "tip", + "value": "提示" + }, + { + "name": "tip_text", + "value": "申请锁屏沉浸实况窗权限可完整体验该功能" + }, + { + "name": "tip_get", + "value": "知道了" } ] } \ No newline at end of file diff --git a/entry/src/main/resources/base/media/turn_right_light_rectangle.png b/entry/src/main/resources/base/media/turn_right_light_rectangle.png new file mode 100644 index 0000000000000000000000000000000000000000..cd3bbc2f67d07b8f898d5fc777fe07e64fa8a247 GIT binary patch literal 1091 zcmeAS@N?(olHy`uVBq!ia0vp^4Is?H1|$#LC7xzrVBzv~aSW-5dwct0u5`Fa%ftOG zQ%byN^IdYXvgEJyP}Ed0^yLaFQwg?-VY1x)nbAH$LX7j?&84Zg+B$w*%HMwN+4ILN z*ZTk6Ecv<9qOrAqKKDbHy5sKmx818NlsRAaX8o=hjp^?NA0_Pj%=cmA*UzgT8R(UN zEqhWOt2fJHg8O~edr?OeOYX523Cj3RasHZn5J~e95kD7CTz^zbIK$ zuOINE+rGMcas-enUcU47eVso7=Wab};j-`8yE^~N^ZtMPw*LJUUcPJhzq5zY8Ci;i~c{&AS+`zF2rztp$T<$GV-3)LB%4|(%m^uNg;lls-={T~ijE<5^9 z?4Ql~l3%<3Ek4A*BKo5gcl|oQov-Z!e>j#3uiscZ&#(JO$iw!lzHjm$p8xFe)9roV zA^x?qZ`}W8DVHf&E?QS`_sBl6e=_$q%l|TS*&oPDvgfY<^S