Card4Component.ets
2.26 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
96
97
98
99
//全标题 "appStyle":"4",
import { ContentDTO } from 'wdBean';
import { ProcessUtils } from '../../utils/ProcessUtils';
const TAG: string = 'Card4Component';
/**
* 三图卡:
* compstyle:4
* 卡片结构：上下结构
* 卡片宽度:充满父窗口
* 卡片高度,仅包含横板图片：图片高度由图片的宽度及宽高比决定，图片宽度占父窗口'100%'，宽高比为16:9:
*/
@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%')
.height(75)
.borderRadius({ topLeft:4,bottomLeft:4 })
Image(this.contentDTO.fullColumnImgUrls[1]?.url)
.width('32%')
.height(75)
Image(this.contentDTO.fullColumnImgUrls[2]?.url)
.width('32%')
.height(75)
.borderRadius({ topRight:4,bottomRight:4 })
}
.justifyContent(FlexAlign.SpaceBetween)
.width('100%')
.height(75)
.margin({top:8})
.borderRadius(8)
}
.width('100%')
.justifyContent(FlexAlign.Start)
.alignItems(HorizontalAlign.Start)
.padding({top:14})
.onClick((event: ClickEvent)=>{
ProcessUtils.processPage(this.contentDTO)
})
//bottom
Row() {
Text(this.contentDTO.source)
.bottomTextStyle()
//间隔点
Image($r('app.media.point'))
.width(12)
.height(12)
Text(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')
}