Card2Component.ets
2.3 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
100
//全标题 "appStyle":"2",
import { ContentDTO } from 'wdBean';
import { ProcessUtils } from '../../utils/ProcessUtils';
const TAG: string = 'Card2Component';
/**
* 大图卡:
* compstyle:2
* 卡片结构：上下结构
* 卡片宽度:充满父窗口
* 卡片高度,仅包含横板图片：图片高度由图片的宽度及宽高比决定，图片宽度占父窗口'100%'，宽高比为16:9:
*/
// @Entry
@Component
export struct Card2Component {
@State contentDTO: ContentDTO = {} as ContentDTO;
build() {
Column() {
Column() {
//新闻标题
Text(this.contentDTO.newsTitle)
.fontSize(17)
.fontColor('#222222')
.maxLines(3)
.textOverflow({ overflow: TextOverflow.Ellipsis })// 超出的部分显示省略号。
.align(Alignment.Start)
//大图
Stack() {
Image(this.contentDTO.coverUrl)
.borderRadius(4)
//播放状态+时长
Row() {
Image($r('app.media.icon_live'))
.width(22)
.height(18)
Stack() {
Text('直播中')
.fontColor('#FFFFFF')
.fontSize(11)
}
.width(44)
.height(18)
.backgroundColor('#4d000000')
}.margin({ right: 8, bottom: 8 })
}
.width('100%')
.height(192)
.alignContent(Alignment.BottomEnd)
.margin({ top: 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(this.contentDTO.source)
.bottomTextStyle()
Text(' ')
Text(this.contentDTO.subtitle)
.bottomTextStyle()
}
.width('100%')
.height(18)
.justifyContent(FlexAlign.Start)
// .padding({bottom:14})
.margin({ top: 8 })
}
.width('100%')
.padding({ left: 16, right: 16 })
.onClick((event: ClickEvent) => {
ProcessUtils.processPage(this.contentDTO)
})
}
}
@Extend(Text)
function bottomTextStyle() {
.fontSize(12)
.fontColor('#B0B0B0')
}