Showing
1 changed file
with
37 additions
and
6 deletions
| @@ -12,7 +12,8 @@ import { SearchShowRed, titleInitRes, textItem } from '../../utils/searchShowRed | @@ -12,7 +12,8 @@ import { SearchShowRed, titleInitRes, textItem } from '../../utils/searchShowRed | ||
| 12 | const TAG = 'Card16Component'; | 12 | const TAG = 'Card16Component'; |
| 13 | 13 | ||
| 14 | interface fullColumnImgUrlItem { | 14 | interface fullColumnImgUrlItem { |
| 15 | - url: string | 15 | + url: string, |
| 16 | + fullUrl: string | ||
| 16 | } | 17 | } |
| 17 | 18 | ||
| 18 | 19 | ||
| @@ -81,16 +82,46 @@ export struct Card16Component { | @@ -81,16 +82,46 @@ export struct Card16Component { | ||
| 81 | .lineHeight(25) | 82 | .lineHeight(25) |
| 82 | } | 83 | } |
| 83 | if (this.contentDTO.fullColumnImgUrls?.length > 0) { | 84 | if (this.contentDTO.fullColumnImgUrls?.length > 0) { |
| 84 | - Flex() { | 85 | + //三图 |
| 86 | + Stack(){ | ||
| 87 | + Row() { | ||
| 88 | + GridRow({ gutter: 2 }) { | ||
| 85 | ForEach(this.contentDTO.fullColumnImgUrls.slice(0, 3), (item: fullColumnImgUrlItem, index: number) => { | 89 | ForEach(this.contentDTO.fullColumnImgUrls.slice(0, 3), (item: fullColumnImgUrlItem, index: number) => { |
| 86 | - Image(this.loadImg ? item.url : '') | 90 | + if (index < 3) { |
| 91 | + GridCol({ span: { xs: 4 } }) { | ||
| 92 | + Image(this.loadImg ? item.url || item.fullUrl : '') | ||
| 87 | .backgroundColor(0xf5f5f5) | 93 | .backgroundColor(0xf5f5f5) |
| 88 | - .flexBasis(113) | ||
| 89 | - .height(75) | ||
| 90 | - .margin({ right: index > 1 ? 0 : 2 }) | 94 | + .width('100%') |
| 95 | + .aspectRatio(113 / 75) | ||
| 96 | + .borderRadius({ | ||
| 97 | + topLeft: index === 0 ? $r('app.float.image_border_radius') : 0, | ||
| 98 | + topRight: index === 2 ? $r('app.float.image_border_radius') : 0, | ||
| 99 | + bottomLeft: index === 0 ? $r('app.float.image_border_radius') : 0, | ||
| 100 | + bottomRight: index === 2 ? $r('app.float.image_border_radius') : 0, | ||
| 91 | }) | 101 | }) |
| 92 | } | 102 | } |
| 93 | } | 103 | } |
| 104 | + }) | ||
| 105 | + } | ||
| 106 | + } | ||
| 107 | + .width(CommonConstants.FULL_PARENT) | ||
| 108 | + .margin({ top: 8 }) | ||
| 109 | + CardMediaInfo({ | ||
| 110 | + contentDTO: this.contentDTO | ||
| 111 | + }) | ||
| 112 | + } | ||
| 113 | + .width(CommonConstants.FULL_PARENT) | ||
| 114 | + .alignContent(Alignment.BottomEnd) | ||
| 115 | + // Flex() { | ||
| 116 | + // ForEach(this.contentDTO.fullColumnImgUrls.slice(0, 3), (item: fullColumnImgUrlItem, index: number) => { | ||
| 117 | + // Image(this.loadImg ? item.url : '') | ||
| 118 | + // .backgroundColor(0xf5f5f5) | ||
| 119 | + // .flexBasis(113) | ||
| 120 | + // .height(75) | ||
| 121 | + // .margin({ right: index > 1 ? 0 : 2 }) | ||
| 122 | + // }) | ||
| 123 | + // } | ||
| 124 | + } | ||
| 94 | CarderInteraction({contentDTO: this.contentDTO}) | 125 | CarderInteraction({contentDTO: this.contentDTO}) |
| 95 | //TODO 底部的:分享、评论、点赞 功能;需要引用一个公共组件 | 126 | //TODO 底部的:分享、评论、点赞 功能;需要引用一个公共组件 |
| 96 | } | 127 | } |
-
Please register or login to post a comment