Card4Component.ets
2.27 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
//全标题 "compStyle":"4",
import { DateTimeUtils } from 'wdKit';
import { ContentDTO } from '../../repository/bean/ContentDTO';
const TAG: string = 'TriPicCardComponent';
/**
* 三图卡:
* compstyle:4
* 卡片结构：上下结构
* 卡片宽度:充满父窗口
* 卡片高度,仅包含横板图片：图片高度由图片的宽度及宽高比决定，图片宽度占父窗口'100%'，宽高比为16:9:
*/
@Entry
@Component
export struct Card4Component {
@State contentDTO: ContentDTO = {} as ContentDTO;
build() {
Column() {
//body
Column() {
//新闻标题
Text(this.contentDTO.newsTitle)
.fontSize(17)
.fontColor('#222222')
.maxLines(3)
.textOverflow({ overflow: TextOverflow.Ellipsis }) // 超出的部分显示省略号。
//三图
Row() {
Image(this.contentDTO.fullColumnImgUrls[0]?.url)
.width('32%')
.aspectRatio(113 / 75)
.borderRadius({ topLeft: 4, bottomLeft: 4 })
Image(this.contentDTO.fullColumnImgUrls[1]?.url)
.width('32%')
.aspectRatio(113 / 75)
Image(this.contentDTO.fullColumnImgUrls[2]?.url)
.width('32%')
.aspectRatio(113 / 75)
.borderRadius({ topRight: 4, bottomRight: 4 })
}
.justifyContent(FlexAlign.SpaceBetween)
.width('100%')
.margin({ top: 8 })
.borderRadius(8)
}
.width('100%')
.justifyContent(FlexAlign.Start)
.alignItems(HorizontalAlign.Start)
.padding({ top: 14 })
//bottom
Row() {
Text(this.contentDTO.source)
.bottomTextStyle()
//间隔点
Image($r('app.media.point'))
.width(12)
.height(12)
Text(DateTimeUtils.getCommentTime(Number.parseFloat(this.contentDTO.publishTime)))
.bottomTextStyle()
Text(' ')
Text('518条评论')
.bottomTextStyle()
}
.width('100%')
.justifyContent(FlexAlign.Start)
// .padding({bottom:14})
.margin({ top: 8 })
.padding({ bottom: 14 })
}
.width('100%')
.padding({ top: 8, left: 16, right: 16 })
}
}
@Extend(Text) function bottomTextStyle() {
.fontSize(12)
.fontColor('#B0B0B0')
}