From a6f258d5955ebb6b5fd22a254646f37509ce114b Mon Sep 17 00:00:00 2001 From: lon9 <815882449@qq.com> Date: Thu, 12 Dec 2024 15:54:32 +0800 Subject: [PATCH] =?UTF-8?q?=E4=BF=AE=E5=A4=8D=E5=BE=80=E6=9C=9F=E5=9B=9E?= =?UTF-8?q?=E9=A1=BE=E7=9A=84=E5=B8=83=E5=B1=80=E6=98=BE=E7=A4=BA=E9=97=AE?= =?UTF-8?q?=E9=A2=98?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../home/src/main/ets/view/PreviousVideo.ets | 353 ++++++++---------- 1 file changed, 163 insertions(+), 190 deletions(-) diff --git a/features/home/src/main/ets/view/PreviousVideo.ets b/features/home/src/main/ets/view/PreviousVideo.ets index d87ce9a..b05b84f 100644 --- a/features/home/src/main/ets/view/PreviousVideo.ets +++ b/features/home/src/main/ets/view/PreviousVideo.ets @@ -31,210 +31,183 @@ export struct PreviousVideo { build() { Column() { SubtitleComponent({ title: HomeConstants.HOME_SUB_TITLES[2] }) - .margin({ bottom: $r('app.float.sub_title_row_margin') }) - Row() { - GridRow({ - columns: { - sm: BreakpointConstants.GRID_ROW_COLUMNS[2], - md: BreakpointConstants.GRID_ROW_COLUMNS[0], - lg: BreakpointConstants.GRID_ROW_COLUMNS[1] - }, - gutter: $r('app.float.grid_row_gutter') - }) { - ForEach(this.previousVideoImgListOne, (item: VideoImage, index: number) => { - GridCol({ - span: { - sm: BreakpointConstants.GRID_COLUMN_SPANS[5], - md: BreakpointConstants.GRID_COLUMN_SPANS[1], - lg: BreakpointConstants.GRID_COLUMN_SPANS[3] - } - }) { - Row() { - Image(item.getImgSrc()) - .objectFit(ImageFit.Fill) - .margin({ right: this.currentWidthBreakpoint === BreakpointConstants.BREAKPOINT_SM ? - $r('app.float.previous_one_image_margin_sm') : $r('app.float.previous_one_image_margin') }) - .layoutWeight(CommonConstants.THREE) - .height(CommonConstants.FULL_PERCENT) - .borderRadius($r('app.float.banner_img_border_radius')) - .focusable(true) + GridRow({ + columns: { + sm: BreakpointConstants.GRID_ROW_COLUMNS[2], + md: BreakpointConstants.GRID_ROW_COLUMNS[0], + lg: BreakpointConstants.GRID_ROW_COLUMNS[1] + }, + gutter: $r('app.float.grid_row_gutter') + }) { + ForEach(this.previousVideoImgListOne, (item: VideoImage, index: number) => { + GridCol({ + span: { + sm: BreakpointConstants.GRID_COLUMN_SPANS[5], + md: BreakpointConstants.GRID_COLUMN_SPANS[1], + lg: BreakpointConstants.GRID_COLUMN_SPANS[3] + } + }) { + Row() { + Image(item.getImgSrc()) + .objectFit(ImageFit.Fill) + .margin({ right: this.currentWidthBreakpoint === BreakpointConstants.BREAKPOINT_SM ? + $r('app.float.previous_one_image_margin_sm') : $r('app.float.previous_one_image_margin') }) + .layoutWeight(CommonConstants.THREE) + .height(CommonConstants.FULL_PERCENT) + .borderRadius($r('app.float.banner_img_border_radius')) - Column() { - Text(item.getTitle()) - .fontSize(new BreakpointType($r('app.float.previous_one_title_font_sm'), - $r('app.float.previous_one_title_font_md'), $r('app.float.previous_one_title_font_lg')) - .getValue(this.currentWidthBreakpoint)) - .fontWeight(CommonConstants.FONT_WEIGHT_500) - .maxLines(2) - .textOverflow({ overflow: TextOverflow.Ellipsis }) - Text(item.getContent()) - .fontSize(new BreakpointType($r('app.float.previous_one_content_font_sm'), - $r('app.float.previous_one_content_font_md'), $r('app.float.previous_one_content_font_lg')) - .getValue(this.currentWidthBreakpoint)) - .opacity(CommonConstants.TEXT_OPACITY[1]) - .fontWeight(FontWeight.Normal) - .margin({ top: $r('app.float.previous_one_content_margin') }) - .maxLines(1) - Text(item.getOtherInfo()) - .fontSize(new BreakpointType($r('app.float.previous_one_content_font_sm'), - $r('app.float.previous_one_content_font_md'), $r('app.float.previous_one_content_font_lg')) - .getValue(this.currentWidthBreakpoint)) - .opacity(CommonConstants.TEXT_OPACITY[1]) - .fontWeight(FontWeight.Normal) - .margin({ top: $r('app.float.previous_one_content_margin') }) - .maxLines(1) + Column() { + Text(item.getTitle()) + .fontSize(new BreakpointType($r('app.float.previous_one_title_font_sm'), + $r('app.float.previous_one_title_font_md'), $r('app.float.previous_one_title_font_lg')) + .getValue(this.currentWidthBreakpoint)) + .fontWeight(CommonConstants.FONT_WEIGHT_500) + .maxLines(2) + .textOverflow({ overflow: TextOverflow.Ellipsis }) + Text(item.getContent()) + .fontSize(new BreakpointType($r('app.float.previous_one_content_font_sm'), + $r('app.float.previous_one_content_font_md'), $r('app.float.previous_one_content_font_lg')) + .getValue(this.currentWidthBreakpoint)) + .opacity(CommonConstants.TEXT_OPACITY[1]) + .fontWeight(FontWeight.Normal) + .margin({ top: $r('app.float.previous_one_content_margin') }) + .maxLines(1) + Text(item.getOtherInfo()) + .fontSize(new BreakpointType($r('app.float.previous_one_content_font_sm'), + $r('app.float.previous_one_content_font_md'), $r('app.float.previous_one_content_font_lg')) + .getValue(this.currentWidthBreakpoint)) + .opacity(CommonConstants.TEXT_OPACITY[1]) + .fontWeight(FontWeight.Normal) + .margin({ top: $r('app.float.previous_one_content_margin') }) + .maxLines(1) - Row() { - Button(index === 0 ? HomeConstants.HOME_BUTTON_TEXT[1] : HomeConstants.HOME_BUTTON_TEXT[2]) - .borderRadius($r('app.float.previous_one_button_radius')) - .backgroundColor($r('app.color.previous_one_button_origin')) - .fontWeight(CommonConstants.FONT_WEIGHT_500) - .fontSize(this.currentWidthBreakpoint === BreakpointConstants.BREAKPOINT_LG ? - $r('app.float.previous_one_button_font_lg') : $r('app.float.previous_one_button_font')) - .fontColor(Color.White) - .height(this.currentWidthBreakpoint === BreakpointConstants.BREAKPOINT_LG ? - $r('app.float.previous_one_button_height_lg') : $r('app.float.previous_one_button_height')) - .layoutWeight(1) - .focusable(true) - .onClick(() => { - this.pageInfo.setPageName(CommonConstants.PAGE_NAMES[1]); - this.pageInfo.pushPath({ name: CommonConstants.PAGE_NAMES[1] }); - }) + Row() { + Button(index === 0 ? HomeConstants.HOME_BUTTON_TEXT[1] : HomeConstants.HOME_BUTTON_TEXT[2]) + .borderRadius($r('app.float.previous_one_button_radius')) + .backgroundColor($r('app.color.previous_one_button_origin')) + .fontWeight(CommonConstants.FONT_WEIGHT_500) + .fontSize(this.currentWidthBreakpoint === BreakpointConstants.BREAKPOINT_LG ? + $r('app.float.previous_one_button_font_lg') : $r('app.float.previous_one_button_font')) + .fontColor(Color.White) + .height(this.currentWidthBreakpoint === BreakpointConstants.BREAKPOINT_LG ? + $r('app.float.previous_one_button_height_lg') : $r('app.float.previous_one_button_height')) + .layoutWeight(1) + .groupDefaultFocus(index === 0 ? true : false) + .onClick(() => { + this.pageInfo.setPageName(CommonConstants.PAGE_NAMES[1]); + this.pageInfo.pushPath({ name: CommonConstants.PAGE_NAMES[1] }); + }) - Blank() - .width(this.currentWidthBreakpoint === BreakpointConstants.BREAKPOINT_MD ? - $r('app.float.previous_blank_width_md') : $r('app.float.previous_blank_width')) + Blank() + .width(this.currentWidthBreakpoint === BreakpointConstants.BREAKPOINT_MD ? + $r('app.float.previous_blank_width_md') : $r('app.float.previous_blank_width')) - Button(HomeConstants.HOME_BUTTON_TEXT[3]) - .borderRadius($r('app.float.previous_one_button_radius')) - .backgroundColor($r('app.color.button_background')) - .fontWeight(CommonConstants.FONT_WEIGHT_500) - .fontSize(this.currentWidthBreakpoint === BreakpointConstants.BREAKPOINT_LG ? - $r('app.float.previous_one_button_font_lg') : $r('app.float.previous_one_button_font')) - .fontColor($r('app.color.previous_one_button_origin')) - .height(this.currentWidthBreakpoint === BreakpointConstants.BREAKPOINT_LG ? - $r('app.float.previous_one_button_height_lg') : $r('app.float.previous_one_button_height')) - .layoutWeight(1) - .focusable(true) - } - .width(CommonConstants.FULL_PERCENT) - .alignItems(VerticalAlign.Bottom) - .layoutWeight(1) + Button(HomeConstants.HOME_BUTTON_TEXT[3]) + .borderRadius($r('app.float.previous_one_button_radius')) + .backgroundColor($r('app.color.button_background')) + .fontWeight(CommonConstants.FONT_WEIGHT_500) + .fontSize(this.currentWidthBreakpoint === BreakpointConstants.BREAKPOINT_LG ? + $r('app.float.previous_one_button_font_lg') : $r('app.float.previous_one_button_font')) + .fontColor($r('app.color.previous_one_button_origin')) + .height(this.currentWidthBreakpoint === BreakpointConstants.BREAKPOINT_LG ? + $r('app.float.previous_one_button_height_lg') : $r('app.float.previous_one_button_height')) + .layoutWeight(1) } - .alignItems(HorizontalAlign.Start) - .justifyContent(FlexAlign.Start) - .layoutWeight(CommonConstants.FOUR) + .width(CommonConstants.FULL_PERCENT) + .alignItems(VerticalAlign.Bottom) + .layoutWeight(1) } - .aspectRatio(CommonConstants.PREVIOUS_ONE_ROW_RATIO) - .width(CommonConstants.FULL_PERCENT) - .padding({ - top: this.currentWidthBreakpoint === BreakpointConstants.BREAKPOINT_SM ? - $r('app.float.previous_one_row_padding_sm') : $r('app.float.previous_one_row_padding'), - bottom: this.currentWidthBreakpoint === BreakpointConstants.BREAKPOINT_SM ? - $r('app.float.previous_one_row_padding_sm') : $r('app.float.previous_one_row_padding'), - left: this.currentWidthBreakpoint === BreakpointConstants.BREAKPOINT_SM ? - $r('app.float.previous_one_row_padding_sm') : $r('app.float.previous_one_row_padding'), - right: this.currentWidthBreakpoint === BreakpointConstants.BREAKPOINT_SM ? - $r('app.float.previous_one_row_padding_sm') : $r('app.float.previous_one_row_padding') - }) - .backgroundColor($r('app.color.home_component_background')) - .borderRadius($r('app.float.card_radius')) + .alignItems(HorizontalAlign.Start) + .justifyContent(FlexAlign.Start) + .layoutWeight(CommonConstants.FOUR) } - .focusable(true) - }, (item: VideoImage, index: number) => index + JSON.stringify(item)) - } - .focusable(true) - .padding({ - left: new BreakpointType($r('app.float.home_content_padding_sm'), $r('app.float.home_content_padding_md'), - $r('app.float.home_content_padding_lg')).getValue(this.currentWidthBreakpoint), - right: new BreakpointType($r('app.float.home_content_padding_sm'), $r('app.float.home_content_padding_md'), - $r('app.float.home_content_padding_lg')).getValue(this.currentWidthBreakpoint) - }) - } - .width(CommonConstants.FULL_PERCENT) + .aspectRatio(CommonConstants.PREVIOUS_ONE_ROW_RATIO) + .width(CommonConstants.FULL_PERCENT) + .padding({ + top: this.currentWidthBreakpoint === BreakpointConstants.BREAKPOINT_SM ? + $r('app.float.previous_one_row_padding_sm') : $r('app.float.previous_one_row_padding'), + bottom: this.currentWidthBreakpoint === BreakpointConstants.BREAKPOINT_SM ? + $r('app.float.previous_one_row_padding_sm') : $r('app.float.previous_one_row_padding'), + left: this.currentWidthBreakpoint === BreakpointConstants.BREAKPOINT_SM ? + $r('app.float.previous_one_row_padding_sm') : $r('app.float.previous_one_row_padding'), + right: this.currentWidthBreakpoint === BreakpointConstants.BREAKPOINT_SM ? + $r('app.float.previous_one_row_padding_sm') : $r('app.float.previous_one_row_padding') + }) + .backgroundColor($r('app.color.home_component_background')) + .borderRadius($r('app.float.card_radius')) + } + }, (item: VideoImage, index: number) => index + JSON.stringify(item)) - Row() { - GridRow({ - columns: { - sm: BreakpointConstants.GRID_ROW_COLUMNS[2], - md: BreakpointConstants.GRID_ROW_COLUMNS[0], - lg: BreakpointConstants.GRID_ROW_COLUMNS[1] - }, - gutter: $r('app.float.grid_row_gutter') - }) { - ForEach(this.previousVideoImgListTwo, (item: VideoImage, index: number) => { - GridCol({ - span: { - sm: BreakpointConstants.GRID_COLUMN_SPANS[6], - md: BreakpointConstants.GRID_COLUMN_SPANS[4], - lg: BreakpointConstants.GRID_COLUMN_SPANS[4] - } - }) { - Column() { - Image(item.getImgSrc()) - .width(CommonConstants.FULL_PERCENT) - .aspectRatio(PreviousVideoUtil.getImgAspectRatio(this.currentWidthBreakpoint, index)) - .objectFit(ImageFit.Fill) - .focusable(true) - .borderRadius({ - topLeft: $r('app.float.previous_two_radius'), - topRight: $r('app.float.previous_two_radius') - }) - - Column() { - Text(item.getTitle()) - .fontWeight(FontWeight.Normal) - .fontSize(this.currentWidthBreakpoint === BreakpointConstants.BREAKPOINT_LG ? - $r('app.float.previous_two_title_font_lg') : $r('app.float.previous_two_title_font')) - .maxLines(1) - .lineHeight(this.currentWidthBreakpoint === BreakpointConstants.BREAKPOINT_LG ? - $r('app.float.previous_two_title_line_lg') : $r('app.float.previous_two_title_line')) - Text(item.getContent()) - .fontWeight(FontWeight.Normal) - .fontSize(this.currentWidthBreakpoint === BreakpointConstants.BREAKPOINT_LG ? - $r('app.float.previous_two_content_font_lg') : $r('app.float.previous_two_content_font')) - .margin({ top: this.currentWidthBreakpoint === BreakpointConstants.BREAKPOINT_LG ? - $r('app.float.previous_two_content_margin_lg') : $r('app.float.previous_two_content_margin') }) - .opacity(CommonConstants.TEXT_OPACITY[0]) - .maxLines(1) - .lineHeight(this.currentWidthBreakpoint === BreakpointConstants.BREAKPOINT_LG ? - $r('app.float.previous_two_content_line_lg') : $r('app.float.previous_two_content_line')) - } - .alignItems(HorizontalAlign.Start) - .height(this.currentWidthBreakpoint === BreakpointConstants.BREAKPOINT_LG ? - $r('app.float.previous_two_column_height_lg') : $r('app.float.previous_two_column_height')) + ForEach(this.previousVideoImgListTwo, (item: VideoImage, index: number) => { + GridCol({ + span: { + sm: BreakpointConstants.GRID_COLUMN_SPANS[6], + md: BreakpointConstants.GRID_COLUMN_SPANS[4], + lg: BreakpointConstants.GRID_COLUMN_SPANS[4] + } + }) { + Column() { + Image(item.getImgSrc()) .width(CommonConstants.FULL_PERCENT) - .padding({ - top: this.currentWidthBreakpoint === BreakpointConstants.BREAKPOINT_LG ? - $r('app.float.previous_two_column_padding_lg') : $r('app.float.previous_two_column_padding'), - bottom: this.currentWidthBreakpoint === BreakpointConstants.BREAKPOINT_LG ? - $r('app.float.previous_two_column_bottom_lg') : $r('app.float.previous_two_column_bottom'), - left: this.currentWidthBreakpoint === BreakpointConstants.BREAKPOINT_LG ? - $r('app.float.previous_two_column_padding_lg') : $r('app.float.previous_two_column_padding'), - right: this.currentWidthBreakpoint === BreakpointConstants.BREAKPOINT_LG ? - $r('app.float.previous_two_column_padding_lg') : $r('app.float.previous_two_column_padding') + .aspectRatio(PreviousVideoUtil.getImgAspectRatio(this.currentWidthBreakpoint, index)) + .objectFit(ImageFit.Fill) + .focusable(true) + .borderRadius({ + topLeft: $r('app.float.previous_two_radius'), + topRight: $r('app.float.previous_two_radius') }) + + Column() { + Text(item.getTitle()) + .fontWeight(FontWeight.Normal) + .fontSize(this.currentWidthBreakpoint === BreakpointConstants.BREAKPOINT_LG ? + $r('app.float.previous_two_title_font_lg') : $r('app.float.previous_two_title_font')) + .maxLines(1) + .lineHeight(this.currentWidthBreakpoint === BreakpointConstants.BREAKPOINT_LG ? + $r('app.float.previous_two_title_line_lg') : $r('app.float.previous_two_title_line')) + Text(item.getContent()) + .fontWeight(FontWeight.Normal) + .fontSize(this.currentWidthBreakpoint === BreakpointConstants.BREAKPOINT_LG ? + $r('app.float.previous_two_content_font_lg') : $r('app.float.previous_two_content_font')) + .margin({ top: this.currentWidthBreakpoint === BreakpointConstants.BREAKPOINT_LG ? + $r('app.float.previous_two_content_margin_lg') : $r('app.float.previous_two_content_margin') }) + .opacity(CommonConstants.TEXT_OPACITY[0]) + .maxLines(1) + .lineHeight(this.currentWidthBreakpoint === BreakpointConstants.BREAKPOINT_LG ? + $r('app.float.previous_two_content_line_lg') : $r('app.float.previous_two_content_line')) } - .translate({ y: (((index === 2) || (index === 3)) && (this.currentWidthBreakpoint === - BreakpointConstants.BREAKPOINT_MD)) ? HomeConstants.PREVIOUS_TWO_TRANSLATE_MD : '0' }) - .backgroundColor($r('app.color.home_component_background')) - .borderRadius($r('app.float.previous_two_radius')) + .alignItems(HorizontalAlign.Start) + .height(this.currentWidthBreakpoint === BreakpointConstants.BREAKPOINT_LG ? + $r('app.float.previous_two_column_height_lg') : $r('app.float.previous_two_column_height')) + .width(CommonConstants.FULL_PERCENT) + .padding({ + top: this.currentWidthBreakpoint === BreakpointConstants.BREAKPOINT_LG ? + $r('app.float.previous_two_column_padding_lg') : $r('app.float.previous_two_column_padding'), + bottom: this.currentWidthBreakpoint === BreakpointConstants.BREAKPOINT_LG ? + $r('app.float.previous_two_column_bottom_lg') : $r('app.float.previous_two_column_bottom'), + left: this.currentWidthBreakpoint === BreakpointConstants.BREAKPOINT_LG ? + $r('app.float.previous_two_column_padding_lg') : $r('app.float.previous_two_column_padding'), + right: this.currentWidthBreakpoint === BreakpointConstants.BREAKPOINT_LG ? + $r('app.float.previous_two_column_padding_lg') : $r('app.float.previous_two_column_padding') + }) } - }, (item: VideoImage, index: number) => index + JSON.stringify(item)) - } - .focusable(true) - .onBreakpointChange((breakPoints) => { - this.previousVideoImgListTwo = new VideoImgViewModel().getPreviousVideoTwo(breakPoints); - }) - .padding({ - left: new BreakpointType($r('app.float.home_content_padding_sm'), $r('app.float.home_content_padding_md'), - $r('app.float.home_content_padding_lg')).getValue(this.currentWidthBreakpoint), - right: new BreakpointType($r('app.float.home_content_padding_sm'), $r('app.float.home_content_padding_md'), - $r('app.float.home_content_padding_lg')).getValue(this.currentWidthBreakpoint) - }) + .translate({ y: (((index === 2) || (index === 3)) && (this.currentWidthBreakpoint === + BreakpointConstants.BREAKPOINT_MD)) ? HomeConstants.PREVIOUS_TWO_TRANSLATE_MD : '0' }) + .backgroundColor($r('app.color.home_component_background')) + .borderRadius($r('app.float.previous_two_radius')) + } + }, (item: VideoImage, index: number) => index + JSON.stringify(item)) } - .width(CommonConstants.FULL_PERCENT) + .onBreakpointChange((breakPoints) => { + this.previousVideoImgListTwo = new VideoImgViewModel().getPreviousVideoTwo(breakPoints); + }) + .padding({ + left: new BreakpointType($r('app.float.home_content_padding_sm'), $r('app.float.home_content_padding_md'), + $r('app.float.home_content_padding_lg')).getValue(this.currentWidthBreakpoint), + right: new BreakpointType($r('app.float.home_content_padding_sm'), $r('app.float.home_content_padding_md'), + $r('app.float.home_content_padding_lg')).getValue(this.currentWidthBreakpoint)}) + .margin({ top: $r('app.float.main_daily_margin') }) } .tabIndex(getTabIndex(HomeConstants.DIRECTION_LIST[8])) .padding({ left: this.currentWidthBreakpoint === BreakpointConstants.BREAKPOINT_LG && this.currentTopIndex === 2 ? -- Gitee