SmallVideoCardHorComponent.ets
1.99 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
import { CompDTO } from '../../repository/bean/CompDTO'
import { ContentDTO } from '../../repository/bean/ContentDTO'
/**
* 通用 小视频卡3张以下
*/
@Component
export struct SmallVideoCardHorComponent {
@State compDTO: CompDTO = {} as CompDTO
build() {
Column() {
this.labelTabStyle()
List({ space: 8 }) {
ForEach(this.compDTO.operDataList, (item: ContentDTO, index: number) => {
ListItem() {
this.itemStyle(item)
}
}, (item: string, index: number) => {
return index.toString()
})
}
.listDirection(Axis.Horizontal)
.margin({
left: 16
})
}
}
@Builder
itemStyle(item: ContentDTO) {
Stack({ alignContent: Alignment.Bottom }) {
Image(item.coverUrl)
.width(156)
.aspectRatio(156 / 208)
Row() {
Text(item.title)
.fontColor('#FFFFFF')
.fontSize('14fp')
.fontWeight(600)
}
.height(80)
.aspectRatio(156 / 80)
.linearGradient({ angle: 0, colors: [['#0000000', 0], ['#4d000000', 0.7], [Color.Transparent, 1]] })
.alignItems(VerticalAlign.Bottom)
.padding({ left: 8,
right: 8,
bottom: 8 })
}.border({ radius: 2 })
}
@Builder
labelTabStyle() {
Row() {
Image($r('app.media.iv_line_vertical_label'))
.width(3)
.height(16)
Text(this.compDTO.name)
.fontSize('17sp')
.fontColor('#222222')
.fontWeight(600)
.maxLines(1)
.textOverflow({ overflow: TextOverflow.Ellipsis })
.layoutWeight(1)
.margin({
left: 5
})
if (this.compDTO.operDataList.length >= 3) {
Text('更多')
.fontSize('14sp')
.fontColor('#999999')
.fontWeight(400)
Image($r('app.media.iv_arrow_right_gray'))
.width(14)
.height(14)
}
}
.width('100%')
.height('44vp')
.padding({
left: 16,
right: 16
})
}
}