developOne / harmonyPool

Go to a project
Toggle navigation Toggle navigation pinning
wangyong_wd
aaf63bd2 1 parent 1085fe89

删除冗余样式卡，样式卡集中在cardView和compView文件夹中

Inline Side-by-side
Showing 13 changed files with 0 additions and 1149 deletions
@@ -43,16 +43,8 @@ export { ImageAndTextWebComponent } from "./src/main/ets/components/ImageAndText @@ -43,16 +43,8 @@ export { ImageAndTextWebComponent } from "./src/main/ets/components/ImageAndText
43 43
44 export { DetailViewModel } from "./src/main/ets/viewmodel/DetailViewModel" 44 export { DetailViewModel } from "./src/main/ets/viewmodel/DetailViewModel"
45 45
46 -export { SingleImageCardComponent } from "./src/main/ets/components/view/SingleImageCardComponent"  
47 -  
48 -export { TriPicCardComponent } from "./src/main/ets/components/view/TriPicCardComponent"  
49 -  
50 export { BigPicCardComponent } from "./src/main/ets/components/view/BigPicCardComponent" 46 export { BigPicCardComponent } from "./src/main/ets/components/view/BigPicCardComponent"
51 47
52 -export { HeadPictureCardComponent } from "./src/main/ets/components/view/HeadPictureCardComponent"  
53 -  
54 -export { ZhGridLayoutComponent } from "./src/main/ets/components/view/ZhGridLayoutComponent"  
55 -  
56 export { MultiPictureDetailPageComponent } from "./src/main/ets/components/MultiPictureDetailPageComponent" 48 export { MultiPictureDetailPageComponent } from "./src/main/ets/components/MultiPictureDetailPageComponent"
57 49
58 export { AudioDetailComponent } from "./src/main/ets/components/AudioDetailComponent" 50 export { AudioDetailComponent } from "./src/main/ets/components/AudioDetailComponent"
1 -import { Action, CompDTO, Params } from 'wdBean';  
2 -import { ExtraDTO } from 'wdBean/src/main/ets/bean/component/extra/ExtraDTO';  
3 -import { CommonConstants } from 'wdConstant/Index';  
4 -import { DateTimeUtils, Logger } from 'wdKit';  
5 -import { WDRouterRule } from 'wdRouter';  
6 -  
7 -const TAG = 'AlbumCardComponent';  
8 -  
9 -@Preview  
10 -@Component  
11 -export struct AlbumCardComponent {  
12 - @State compDTO: CompDTO = {} as CompDTO  
13 -  
14 - aboutToAppear() {  
15 - Logger.debug(TAG + "this.compDTO.operDataList" + JSON.stringify(this.compDTO.operDataList));  
16 -  
17 - }  
18 -  
19 - build() {  
20 - Column({ space: 8 }) {  
21 - Text(this.compDTO.operDataList[0].newsTitle)  
22 - .textOverflow({ overflow: TextOverflow.Ellipsis })  
23 - .fontSize(17)  
24 - .fontColor(0x222222)  
25 - .lineHeight(25)  
26 - .maxLines(3)  
27 - .width(CommonConstants.FULL_WIDTH)  
28 -  
29 - RelativeContainer() {  
30 - Image(this.compDTO.operDataList[0].fullColumnImgUrls[0].url)  
31 - .width('66.6%')  
32 - .aspectRatio(16/9)  
33 - .alignRules({  
34 - top: { anchor: "__container__", align: VerticalAlign.Top },  
35 - left: { anchor: "__container__", align: HorizontalAlign.Start }  
36 - })  
37 - .id('mainImage')  
38 -  
39 - Image(this.compDTO.operDataList[0].fullColumnImgUrls[1].url)  
40 - .width('33%')  
41 - .aspectRatio(16/9)  
42 - .alignRules({  
43 - top: { anchor: "__container__", align: VerticalAlign.Top },  
44 - right: { anchor: "__container__", align: HorizontalAlign.End }  
45 - })  
46 - .id('subTopImage')  
47 -  
48 - Image(this.compDTO.operDataList[0].fullColumnImgUrls[2].url)  
49 - .width('33%')  
50 - .aspectRatio(16/9)  
51 - .alignRules({  
52 - right: { anchor: "__container__", align: HorizontalAlign.End },  
53 - bottom: { anchor: "__container__", align: VerticalAlign.Bottom }  
54 - })  
55 - .id('subBottomImage')  
56 - // 下面是渲染右下角图标  
57 - Shape() {  
58 - Rect().width(33).height(18)  
59 - }  
60 - // .viewPort({ x: -2, y: -2, width: 304, height: 130 })  
61 - .fill(0x000000)  
62 - .fillOpacity(0.3)  
63 - // .strokeDashArray([20])  
64 - // .strokeDashOffset(10)  
65 - .strokeLineCap(LineCapStyle.Round)  
66 - .strokeLineJoin(LineJoinStyle.Round)  
67 - .antiAlias(true)  
68 - .id('shape')  
69 - .alignRules({  
70 - right: { anchor: "__container__", align: HorizontalAlign.End },  
71 - bottom: { anchor: "__container__", align: VerticalAlign.Bottom }  
72 - })  
73 - .margin({ right: 4,  
74 - bottom: 4 })  
75 -  
76 - Image($r('app.media.album_card_shape'))  
77 - .width(22)  
78 - .height(18)  
79 - .alignRules({  
80 - left: { anchor: "shape", align: HorizontalAlign.Start },  
81 - top: { anchor: "shape", align: VerticalAlign.Top }  
82 - })  
83 - .id('shapeSubImage')  
84 -  
85 - Text(this.compDTO.operDataList[0].fullColumnImgUrls.length + '')  
86 - .fontSize(13)  
87 - .fontColor(0xFFFFFF)  
88 - .id('pageIndex')  
89 - .alignRules({  
90 - right: { anchor: "shape", align: HorizontalAlign.End },  
91 - top: { anchor: "shape", align: VerticalAlign.Top }  
92 - })  
93 - .margin({ right: 2 })  
94 - .textAlign(TextAlign.Center)  
95 - .width(17)  
96 - .height(17)  
97 - }  
98 - .width(CommonConstants.FULL_WIDTH)  
99 - .aspectRatio(24/9)  
100 - .onClick((event: ClickEvent) => {  
101 - let taskAction: Action = {  
102 - type: 'JUMP_DETAIL_PAGE',  
103 - params: {  
104 - detailPageType: 17,  
105 - contentID: this.compDTO.operDataList?.[0].objectId,  
106 - extra: {  
107 - relType: this.compDTO.operDataList?.[0].relType,  
108 - relId: `${this.compDTO.operDataList?.[0].relId}`,  
109 - } as ExtraDTO  
110 - } as Params,  
111 - };  
112 - WDRouterRule.jumpWithAction(taskAction)  
113 - })  
114 -  
115 - Row() {  
116 - if (this.compDTO.operDataList[0].source) {  
117 - Text(this.compDTO.operDataList[0].source)  
118 - .fontSize(13)  
119 - .fontColor(0xB0B0B0)  
120 - Image($r('app.media.point'))  
121 - .width(16)  
122 - .height(16)  
123 - }  
124 - if (this.compDTO.operDataList[0].publishTime && this.compDTO.operDataList[0].publishTime.length === 13) {  
125 - Text(DateTimeUtils.getCommentTime(Number.parseFloat(this.compDTO.operDataList[0].publishTime)))  
126 - .fontSize(13)  
127 - .fontColor(0xB0B0B0)  
128 - }  
129 - Text('328评')  
130 - .fontSize(13)  
131 - .fontColor(0xB0B0B0)  
132 - .margin({  
133 - left: 6  
134 - })  
135 - }  
136 - .width(CommonConstants.FULL_WIDTH)  
137 - .height(16)  
138 - .id('label')  
139 - }  
140 - .width(CommonConstants.FULL_WIDTH)  
141 - .padding({  
142 - top: 14,  
143 - left: 16,  
144 - right: 16,  
145 - bottom: 14  
146 - })  
147 - }  
148 -}  
1 -import { CompDTO, slideShows } from 'wdBean';  
2 -import { CommonConstants } from 'wdConstant'  
3 -import { DateTimeUtils } from 'wdKit';  
4 -import { ProcessUtils } from '../../utils/ProcessUtils';  
5 -/**  
6 - * 时间链卡--CompStyle: 09  
7 - */  
8 -@Component  
9 -export struct CompStyle_09 {  
10 - @State compDTO: CompDTO = {} as CompDTO  
11 -  
12 - build() {  
13 - Column(){  
14 - // 顶部标题，最多两行  
15 - if(this.compDTO.operDataList[0].newsTitle) {  
16 - Text(this.compDTO.operDataList[0].newsTitle)  
17 - .width(CommonConstants.FULL_WIDTH)  
18 - .fontSize($r('app.float.font_size_17'))  
19 - .fontWeight(600)  
20 - .maxLines(2)  
21 - .textOverflow({overflow: TextOverflow.Ellipsis})  
22 - .margin({ bottom: 19 })  
23 - }  
24 - // 大图  
25 - Stack(){  
26 - Image(this.compDTO.operDataList[0].coverUrl)  
27 - .width('100%')  
28 - .borderRadius({topLeft: $r('app.float.image_border_radius'), topRight: $r('app.float.image_border_radius')})  
29 - Text('专题')  
30 - .fontSize($r('app.float.font_size_12'))  
31 - .padding({left: 8, right: 8, top: 3, bottom: 3})  
32 - .backgroundColor(Color.Red)  
33 - .fontColor(Color.White)  
34 - .borderRadius($r('app.float.button_border_radius'))  
35 - .margin({left: 5, bottom: 5})  
36 - }.alignContent(Alignment.BottomStart)  
37 - // 时间线--后端返回三个，  
38 - Column(){  
39 - ForEach(this.compDTO.operDataList[0].slideShows, (item:slideShows, index:number) => {  
40 - this.timelineItem(item, index)  
41 - })  
42 - }  
43 - // 底部-查看更多。根据接口返回的isMore判断是否显示查看更多  
44 - if(this.compDTO.operDataList[0].hasMore == 1) {  
45 - Row() {  
46 - Text("查看更多")  
47 - .fontSize($r("app.float.font_size_14"))  
48 - .fontColor($r("app.color.color_222222"))  
49 - .margin({ right: 1 })  
50 - Image($r("app.media.more"))  
51 - .width(14)  
52 - .height(14)  
53 - }  
54 - .backgroundColor($r('app.color.color_F5F5F5'))  
55 - .width(CommonConstants.FULL_WIDTH)  
56 - .height(40)  
57 - .borderRadius($r('app.float.button_border_radius'))  
58 - .justifyContent(FlexAlign.Center)  
59 - .margin({top: 5})  
60 - }  
61 - }  
62 - .width(CommonConstants.FULL_WIDTH)  
63 - .padding({  
64 - top: 14,  
65 - left: 16,  
66 - right: 16,  
67 - bottom: 14  
68 - })  
69 - .backgroundColor($r("app.color.white"))  
70 - .margin({ bottom: 8 })  
71 - .onClick((event: ClickEvent) => {  
72 - ProcessUtils.processPage(this.compDTO?.operDataList[0])  
73 - })  
74 - }  
75 -  
76 - @Builder timelineItem (item:slideShows, index:number) {  
77 - Column(){  
78 - Stack() {  
79 - if(index < this.compDTO.operDataList[0].slideShows.length - 1) {  
80 - Divider()  
81 - .vertical(true)  
82 - .color($r('app.color.color_EDEDED'))  
83 - .strokeWidth(1)  
84 - .margin({top: index > 0 ? 0 : 16, left: 4})  
85 - }  
86 - if(index > 0 && index == this.compDTO.operDataList[0].slideShows.length - 1) {  
87 - Divider()  
88 - .vertical(true)  
89 - .color($r('app.color.color_EDEDED'))  
90 - .strokeWidth(1)  
91 - .height(16)  
92 - .margin({left: 4})  
93 - }  
94 -  
95 - Column(){  
96 - Row() {  
97 - // 标题  
98 - Image($r("app.media.point_icon"))  
99 - .width(9)  
100 - .height(9)  
101 - .margin({ right: 5 })  
102 - Text(DateTimeUtils.formatDate(item.publishTime, "MM月dd日 HH:mm"))  
103 - .fontSize($r('app.float.font_size_12'))  
104 - .fontColor($r('app.color.color_222222'))  
105 - .fontWeight(600)  
106 - }  
107 - .width(CommonConstants.FULL_WIDTH)  
108 - .height(32)  
109 - .alignItems(VerticalAlign.Center)  
110 - Row() {  
111 - Text(item.newsTitle)  
112 - .fontSize($r('app.float.font_size_17'))  
113 - .fontWeight(400)  
114 - .fontColor($r('app.color.color_222222'))  
115 - .layoutWeight(1)  
116 - .maxLines(2)  
117 - .textOverflow({ overflow: TextOverflow.Ellipsis })  
118 - .alignSelf(ItemAlign.Center)  
119 - .margin({left: 12})  
120 - if(item.fullColumnImgUrls[0] && item.fullColumnImgUrls[0].url) {  
121 - Image(item.fullColumnImgUrls[0].url)  
122 - .width(90)  
123 - .height(60)  
124 - .borderRadius($r('app.float.image_border_radius'))  
125 - }  
126 - }  
127 - }  
128 - }  
129 - .alignContent(Alignment.TopStart)  
130 - }  
131 - .height(item.fullColumnImgUrls[0] && item.fullColumnImgUrls[0].url ? 100 : 78)  
132 - .alignItems(HorizontalAlign.Start)  
133 - }  
134 -}  
1 -import { CompDTO, ContentDTO, slideShows } from 'wdBean';  
2 -import { CommonConstants } from 'wdConstant'  
3 -import { DateTimeUtils } from 'wdKit';  
4 -import { ProcessUtils } from '../../utils/ProcessUtils';  
5 -  
6 -  
7 -/**  
8 - * 大专题卡--CompStyle: 10  
9 - */  
10 -@Component  
11 -export struct CompStyle_10 {  
12 - @State compDTO: CompDTO = {} as CompDTO  
13 -  
14 - build() {  
15 - Column(){  
16 - // 顶部标题，最多两行  
17 - if(this.compDTO.operDataList[0].newsTitle) {  
18 - Text(this.compDTO.operDataList[0].newsTitle)  
19 - .width(CommonConstants.FULL_WIDTH)  
20 - .fontSize($r('app.float.font_size_17'))  
21 - .fontWeight(600)  
22 - .maxLines(2)  
23 - .textOverflow({overflow: TextOverflow.Ellipsis})  
24 - .margin({ bottom: 19 })  
25 - }  
26 - // 大图  
27 - Stack(){  
28 - Image(this.compDTO.operDataList[0] && this.compDTO.operDataList[0].coverUrl)  
29 - .width('100%')  
30 - .borderRadius({topLeft: $r('app.float.image_border_radius'), topRight: $r('app.float.image_border_radius')})  
31 - .onClick((event: ClickEvent) => {  
32 - ProcessUtils.processPage(this.compDTO?.operDataList[0])  
33 - })  
34 - Text('专题')  
35 - .fontSize($r('app.float.font_size_12'))  
36 - .padding({left: 8, right: 8, top: 3, bottom: 3})  
37 - .backgroundColor(Color.Red)  
38 - .fontColor(Color.White)  
39 - .borderRadius($r('app.float.button_border_radius'))  
40 - .margin({left: 5, bottom: 5})  
41 - }.alignContent(Alignment.BottomStart)  
42 - // 专题列表--后端返回三个，  
43 - Column(){  
44 - ForEach(this.compDTO.operDataList[0].slideShows, (item:slideShows, index:number) => {  
45 - this.timelineItem(item, index)  
46 - })  
47 - }  
48 - // 底部-查看更多。根据接口返回的isMore判断是否显示查看更多  
49 - if(this.compDTO.operDataList[0].hasMore == 1) {  
50 - Row() {  
51 - Text("查看更多")  
52 - .fontSize($r("app.float.font_size_14"))  
53 - .fontColor($r("app.color.color_222222"))  
54 - .margin({ right: 1 })  
55 - Image($r("app.media.more"))  
56 - .width(14)  
57 - .height(14)  
58 - }  
59 - .backgroundColor($r('app.color.color_F5F5F5'))  
60 - .width(CommonConstants.FULL_WIDTH)  
61 - .height(40)  
62 - .borderRadius($r('app.float.button_border_radius'))  
63 - .justifyContent(FlexAlign.Center)  
64 - .margin({top: 5})  
65 - .onClick((event: ClickEvent) => {  
66 - ProcessUtils.processPage(this.compDTO?.operDataList[0])  
67 - })  
68 - }  
69 - }  
70 - .width(CommonConstants.FULL_WIDTH)  
71 - .padding({  
72 - top: 14,  
73 - left: 16,  
74 - right: 16,  
75 - bottom: 14  
76 - })  
77 - .backgroundColor($r("app.color.white"))  
78 - .margin({ bottom: 8 })  
79 - }  
80 - @Builder timelineItem (item:slideShows, index:number) {  
81 - Row() {  
82 - Column(){  
83 - Text(item.newsTitle)  
84 - .fontSize($r('app.float.font_size_17'))  
85 - .fontWeight(400)  
86 - .fontColor($r('app.color.color_222222'))  
87 - .maxLines(2)  
88 - .textOverflow({ overflow: TextOverflow.Ellipsis })  
89 - Row(){  
90 - // 展示发稿人  
91 - if(item.source) {  
92 - Text(item.source)  
93 - .fontSize($r('app.float.font_size_12'))  
94 - .fontColor($r('app.color.color_B0B0B0'))  
95 - .textOverflow({overflow: TextOverflow.Ellipsis})  
96 - .maxLines(1)  
97 - .width(item.source.length > 10 ? '60%' : '')  
98 -  
99 - Image($r('app.media.point'))  
100 - .width(16)  
101 - .height(16)  
102 - }  
103 - Text(DateTimeUtils.getCommentTime(Number.parseFloat(String(item.publishTime))))  
104 - .fontSize($r("app.float.font_size_12"))  
105 - .fontColor($r("app.color.color_B0B0B0"))  
106 - }  
107 - .margin({top: 12})  
108 - }  
109 - .layoutWeight(1)  
110 - .alignItems(HorizontalAlign.Start)  
111 -  
112 - // 右侧图片  
113 - if(item.fullColumnImgUrls[0] && item.fullColumnImgUrls[0].url) {  
114 - Image(item.fullColumnImgUrls[0].url)  
115 - .width(117)  
116 - .height(78)  
117 - .objectFit(ImageFit.Cover)  
118 - .borderRadius($r('app.float.image_border_radius'))  
119 - .margin({left: 12})  
120 - }  
121 - }  
122 - .padding({top: 10, bottom: 10})  
123 - .onClick((event: ClickEvent) => {  
124 - const str: string = JSON.stringify(this.compDTO.operDataList[0]);  
125 - const data: ContentDTO = JSON.parse(str)  
126 - data.objectId = item.newsId  
127 - data.relId = item.relId  
128 - data.objectType = String(item.objectType)  
129 - ProcessUtils.processPage(data)  
130 - })  
131 - }  
132 -}  
1 -import { CompDTO } from 'wdBean';  
2 -import { CommonConstants } from 'wdConstant';  
3 -import { ProcessUtils } from '../../utils/ProcessUtils';  
4 -  
5 -@Component  
6 -export struct HeadPictureCardComponent {  
7 - @State compDTO: CompDTO = {} as CompDTO  
8 -  
9 - build() {  
10 - Stack() {  
11 - Image(this.compDTO.operDataList[0].coverUrl)  
12 - .width(CommonConstants.FULL_WIDTH)  
13 - .autoResize(true)  
14 - .borderRadius($r('app.float.image_border_radius'))  
15 - if (this.compDTO.operDataList[0].newsTitle) {  
16 - Row()  
17 - .width(CommonConstants.FULL_WIDTH)  
18 - .height(59)  
19 - .linearGradient({  
20 - colors: [  
21 - ['rgba(0, 0, 0, 0.0)', 0.0], ['rgba(0, 0, 0, 0.3)', 1.0]  
22 - ]  
23 - })  
24 - Row() {  
25 - Text(this.compDTO.operDataList[0].newsTitle)  
26 - .width(CommonConstants.FULL_WIDTH)  
27 - .height(CommonConstants.FULL_HEIGHT)  
28 - .fontColor(Color.White)  
29 - .fontSize($r('app.float.normal_text_size'))  
30 - .fontWeight(FontWeight.Bold)  
31 - .maxLines(2)  
32 - .align(Alignment.Bottom)  
33 - }  
34 - .justifyContent(FlexAlign.Start)  
35 - .height(40)  
36 - .margin({ left: 12, bottom: 10, right: 12 })  
37 - }  
38 - }  
39 - .alignContent(Alignment.Bottom)  
40 - .width(CommonConstants.FULL_WIDTH)  
41 - .padding(  
42 - { top: 16, bottom: 16, left: 14, right: 14 })  
43 - .onClick((event: ClickEvent) => {  
44 - ProcessUtils.processPage(this.compDTO?.operDataList[0])  
45 - })  
46 - }  
47 -}  
1 -import { Action, CompDTO, ContentDTO, Params } from 'wdBean';  
2 -import { CompStyle } from 'wdConstant';  
3 -import { Logger, DateTimeUtils } from 'wdKit';  
4 -import { WDRouterRule } from 'wdRouter';  
5 -  
6 -const TAG = 'SingleImageCardAppComponent';  
7 -const FULL_PARENT: string = '100%';  
8 -  
9 -/**  
10 - * 单图卡-3行标题/2行标题  
11 - * 枚举值13  
12 - *  
13 - * 重磅推荐/精选/电视剧/电影/综艺/短剧/更多>/  
14 - */  
15 -@Entry  
16 -@Component  
17 -export struct SingleImageCardAppComponent {  
18 - // @State compDTO: CompDTO = {} as CompDTO  
19 -  
20 - @State compDTO: CompDTO = {  
21 - operDataList: [  
22 - {  
23 - coverSize: '660*371',  
24 - coverType: 1,  
25 - visitorComment: 10,  
26 - coverUrl: 'https://cdnjdphoto.aikan.pdnews.cn/zhbj-20240116/image/content/a9028e7011bb440e94ba7c63d80b39b7.png?x-oss-process=image/resize,w_550/quality,q_90/format,jpg',  
27 - newsTitle: '一条江豚的自述',  
28 - newsSummary: '我是生活在长江里的一头江豚，是长江中唯一的水生哺乳动物，更是国家一级保护动物。但曾几何时，我和我的江中小伙伴出现了生存危机……直到有一天，我突然发现，打渔人变成护渔人，江水变清澈了，长江逐渐恢复了生机，我的家族数量上升到了1249头。当长江之水再一次悠悠流淌，我们相拥在清澈波光中起舞。长江，我的家园。',  
29 - videoInfo: {  
30 - // clarity: 1,  
31 - resolutionHeight: 20,  
32 - resolutionWidth: 20,  
33 - videoDuration: 229,  
34 - videoLandScape: 1,  
35 - videoType: 1,  
36 - videoUrl: "https://cdnjdout.aikan.pdnews.cn/zhbj-20240116/vod/content/output/c72f4170db2c4d34befa453f60d39a69_opt.mp4",  
37 - firstFrameImageUri: "", // 首帧图；【视频内容，contentPictures中】  
38 - },  
39 -  
40 - } as ContentDTO  
41 - ]  
42 - } as CompDTO  
43 -  
44 - aboutToAppear() {  
45 - }  
46 -  
47 - build() {  
48 - Column() {  
49 - Text(this.compDTO.operDataList[0].newsTitle)  
50 - .fontSize(16)  
51 - .fontWeight(FontWeight.Bold)  
52 - .alignSelf(ItemAlign.Start)  
53 - .maxLines(3)  
54 - .textOverflow({ overflow: TextOverflow.Ellipsis }) // 超出的部分显示省略号。  
55 - if (this.compDTO.operDataList[0].coverUrl) {  
56 - Stack() {  
57 - Image(this.compDTO.operDataList[0].coverUrl)  
58 - .borderRadius(5)  
59 - .aspectRatio(16 / 9)  
60 - .padding({ top: 10 })  
61 - if (this.compDTO.operDataList[0].videoInfo) {  
62 - Row() {  
63 - Image($r('app.media.iv_card_play_yellow_flag'))  
64 - .width(22)  
65 - .height(18)  
66 - Text(DateTimeUtils.getFormattedDuration(this.compDTO.operDataList[0].videoInfo.videoDuration * 1000))  
67 - .fontSize($r('app.float.font_size_13'))  
68 - .fontWeight(400)  
69 - .fontColor($r('app.color.color_fff'))  
70 - }  
71 - .alignItems(VerticalAlign.Bottom)  
72 - .height(18)  
73 - .padding({ right: 4 })  
74 - .margin({  
75 - right: 4,  
76 - bottom: 4  
77 - })  
78 - .backgroundColor($r('app.color.color_4d000000'))  
79 - }  
80 - }.alignContent(Alignment.BottomEnd)  
81 - }  
82 - if (this.compDTO.operDataList[0].newsSummary) {  
83 - Text(this.compDTO.operDataList[0].newsSummary)  
84 - .fontSize(14)  
85 - .padding({ top: 10 })  
86 - .alignSelf(ItemAlign.Start)  
87 - .maxLines(3)  
88 - .textOverflow({ overflow: TextOverflow.Ellipsis }) // 超出的部分显示省略号。  
89 - }  
90 - Row() {  
91 - Text(this.compDTO.operDataList[0].visitorComment + "评")  
92 - .fontSize(12)  
93 - .fontColor(Color.Gray)  
94 - Image($r('app.media.icon_share'))  
95 - .width(16)  
96 - .height(16)  
97 - .margin(10)  
98 - }.width(FULL_PARENT)  
99 - .justifyContent(FlexAlign.SpaceBetween)  
100 - }  
101 - .margin(22)  
102 - }  
103 -}  
1 -import { Action, CompDTO, Params } from 'wdBean';  
2 -import { ExtraDTO } from 'wdBean/src/main/ets/bean/component/extra/ExtraDTO';  
3 -import { CompStyle } from 'wdConstant';  
4 -import { Logger, DateTimeUtils } from 'wdKit';  
5 -import { WDRouterRule } from 'wdRouter';  
6 -import { ProcessUtils } from '../../utils/ProcessUtils';  
7 -  
8 -const TAG = 'SingleImageCardComponent';  
9 -const FULL_PARENT: string = '100%';  
10 -  
11 -/**  
12 - * 单图卡-3行标题/2行标题  
13 - * 枚举值13  
14 - * ImageCard-03  
15 - * 重磅推荐/精选/电视剧/电影/综艺/短剧/更多>/  
16 - */  
17 -  
18 -@Component  
19 -export struct SingleImageCardComponent {  
20 - @State compDTO: CompDTO = {} as CompDTO  
21 -  
22 - aboutToAppear() {  
23 - //Logger.debug(TAG + "" + JSON.stringify(this.compDTO.operDataList));  
24 -  
25 - }  
26 -  
27 - build() {  
28 - Row() {  
29 - Column() {  
30 - Column() {  
31 - Text(this.compDTO.operDataList[0].newsTitle)  
32 - .fontSize(16)  
33 - .fontWeight(FontWeight.Normal)  
34 - .maxLines(3)//  
35 - .alignSelf(ItemAlign.Start)  
36 - .textOverflow({ overflow: TextOverflow.Ellipsis }) // 超出的部分显示省略号。  
37 - }.height("80%")  
38 - .justifyContent(FlexAlign.Start)  
39 -  
40 - Row() {  
41 - if (this.compDTO.operDataList[0].source) {  
42 - Text(this.compDTO.operDataList[0].source)  
43 - .fontSize($r('app.float.font_size_12'))  
44 - .fontColor(Color.Gray)  
45 - .maxLines(1)  
46 - .textOverflow({ overflow: TextOverflow.Ellipsis })// 超出的部分显示省略号。  
47 - .width(this.compDTO.operDataList[0].source.length > 8 ? '50%' : '')  
48 - Image($r('app.media.point'))  
49 - .width(16)  
50 - .height(16)  
51 - }  
52 - if (this.compDTO.operDataList[0].publishTime && this.compDTO.operDataList[0].publishTime.length === 13) {  
53 - Text(DateTimeUtils.getCommentTime(Number.parseFloat(this.compDTO.operDataList[0].publishTime)))  
54 - .fontSize($r('app.float.font_size_12'))  
55 - .fontColor(Color.Gray)  
56 - }  
57 - Text(this.compDTO.operDataList[0].visitorComment + '评')  
58 - .fontSize($r('app.float.font_size_12'))  
59 - .fontColor(Color.Gray)  
60 - .padding({  
61 - left: 5  
62 - })  
63 - }.alignSelf(ItemAlign.Start)  
64 - .height("20%")  
65 - .justifyContent(FlexAlign.Start)  
66 - }  
67 - .alignItems(HorizontalAlign.Start)  
68 - .justifyContent(FlexAlign.Start)  
69 - .width('58%')  
70 -  
71 - Blank(16)  
72 - if (this.compDTO.operDataList[0].coverUrl) {  
73 - Stack() {  
74 - Image(this.compDTO.operDataList[0].coverUrl)  
75 - .borderRadius(5)  
76 - .aspectRatio(this.compDTO.compStyle === CompStyle.Card_13 ? 3 / 2 : 3 / 4)  
77 - .height(this.compDTO.compStyle === CompStyle.Card_13 ? 90 : 180)  
78 - if (this.compDTO.operDataList[0].videoInfo) {  
79 - Row() {  
80 - Image($r('app.media.iv_card_play_yellow_flag'))  
81 - .width(22)  
82 - .height(18)  
83 - Text(DateTimeUtils.getFormattedDuration(this.compDTO.operDataList[0].videoInfo.videoDuration * 1000))  
84 - .fontSize($r('app.float.font_size_13'))  
85 - .fontWeight(400)  
86 - .fontColor($r('app.color.color_fff'))  
87 - }  
88 - .alignItems(VerticalAlign.Bottom)  
89 - .height(18)  
90 - .padding({ right: 4 })  
91 - .margin({  
92 - right: 4,  
93 - bottom: 4  
94 - })  
95 - .backgroundColor($r('app.color.color_4d000000'))  
96 - } else if(this.compDTO.operDataList[0].voiceInfo) {  
97 - Row() {  
98 - Image($r('app.media.icon_listen'))  
99 - .width(22)  
100 - .height(18)  
101 - Text(DateTimeUtils.getFormattedDuration(this.compDTO.operDataList[0].voiceInfo  
102 - .voiceDuration * 1000))  
103 - .fontSize($r('app.float.font_size_13'))  
104 - .fontWeight(400)  
105 - .fontColor($r('app.color.color_fff'))  
106 - }  
107 - .alignItems(VerticalAlign.Bottom)  
108 - .height(18)  
109 - .padding({ right: 4 })  
110 - .margin({  
111 - right: 4,  
112 - bottom: 4  
113 - })  
114 - .backgroundColor($r('app.color.color_4d000000'))  
115 - }  
116 - }.alignContent(Alignment.BottomEnd)  
117 - }  
118 - }  
119 - .onClick((event: ClickEvent) => {  
120 - ProcessUtils.processPage(this.compDTO?.operDataList[0])  
121 - })  
122 - .padding(  
123 - { top: 16, bottom: 16, left: 14, right: 14 })  
124 - .width(FULL_PARENT)  
125 - .height(this.compDTO.compStyle === CompStyle.Card_13 ? 127 : 217)  
126 - .justifyContent(FlexAlign.SpaceBetween)  
127 - }  
128 -}  
1 -// import { CommonConstants } from 'wdConstant/src/main/ets/constants/CommonConstants'  
2 -  
3 -@Entry  
4 -@Component  
5 -export struct SmallVideoCardComponent {  
6 - build() {  
7 - Row() {  
8 - Column() {  
9 - Text('“畅享亚运”新模式活动打卡，看杭州打开“金角银边活动启动 跟着体育明星云打卡，看杭州打开“金角银边')  
10 - .fontWeight(400)  
11 - .fontSize($r('app.float.font_size_17'))  
12 - .maxLines(4)  
13 - .textOverflow({ overflow: TextOverflow.Ellipsis })  
14 - .fontColor($r('app.color.color_222222'))  
15 - .lineHeight(25)  
16 - Row() {  
17 - Text('人民日报')  
18 - .labelTextStyle()  
19 - Image($r('app.media.point'))  
20 - .width(16)  
21 - .height(16)  
22 - Text('20分钟前')  
23 - .labelTextStyle()  
24 - .margin({  
25 - right: 6  
26 - })  
27 - Text('2000评')  
28 - .labelTextStyle()  
29 - }  
30 - }  
31 - .height(156)  
32 - .layoutWeight(1)  
33 - .justifyContent(FlexAlign.SpaceBetween)  
34 - .alignItems(HorizontalAlign.Start)  
35 - .margin({ right: 12 })  
36 -  
37 - Stack({ alignContent: Alignment.BottomEnd }) {  
38 - Image('https://www.harmonyos.com/resource/image/partner/harmonyos-connect/pic_shengtai_connect_qudao_xianxia.jpg')  
39 - .width(117)  
40 - .aspectRatio(117 / 156)  
41 - .border({ radius: 4 })  
42 - Row() {  
43 - Image($r('app.media.iv_card_play_yellow_flag'))  
44 - .width(22)  
45 - .height(18)  
46 - Text('10:00')  
47 - .fontSize($r('app.float.font_size_13'))  
48 - .fontWeight(400)  
49 - .fontColor($r('app.color.color_fff'))  
50 - }  
51 - .height(18)  
52 - .padding({ right: 4 })  
53 - .margin({  
54 - right: 4,  
55 - bottom: 4  
56 - })  
57 - .backgroundColor($r('app.color.color_4d000000'))  
58 - }  
59 - }  
60 - // .width(CommonConstants.FULL_WIDTH)  
61 - .width('100%')  
62 - .height(184)  
63 - .padding({  
64 - top: 14,  
65 - bottom: 14,  
66 - left: 16,  
67 - right: 16  
68 - })  
69 - }  
70 -}  
71 -  
72 -@Extend(Text) function labelTextStyle() {  
73 - .fontSize($r('app.float.font_size_12'))  
74 - .fontWeight(400)  
75 - .fontColor($r('app.color.color_B0B0B0'))  
76 -}  
1 -//缩略标题  
2 -import { CommonConstants } from 'wdConstant'  
3 -import { CompDTO } from 'wdBean'  
4 -import { DateTimeUtils } from 'wdKit'  
5 -  
6 -@Component  
7 -export struct TitleAbbrComponent {  
8 - @State compDTO: CompDTO = {} as CompDTO  
9 -  
10 - build() {  
11 - Column() {  
12 - Text(this.compDTO.operDataList[0].newsTitle)  
13 - .fontSize($r("app.float.font_size_16"))  
14 - .fontColor($r("app.color.color_222222"))  
15 - .maxLines(3)  
16 - .textOverflow({ overflow: TextOverflow.Ellipsis })  
17 - .width(CommonConstants.FULL_WIDTH)  
18 - Row() {  
19 - Text("锐评")  
20 - .fontSize($r("app.float.font_size_12"))  
21 - .fontColor($r("app.color.color_ED2800"))  
22 - Text(this.compDTO.operDataList[0].source)  
23 - .fontSize($r("app.float.font_size_12"))  
24 - .fontColor($r("app.color.color_B0B0B0"))  
25 - .margin({ left: 6 })  
26 - Image($r("app.media.point"))  
27 - .width(16)  
28 - .height(16)  
29 -  
30 - Text(DateTimeUtils.formatDate(Number.parseFloat(this.compDTO.operDataList[0].publishTime)))  
31 - .fontSize($r("app.float.font_size_12"))  
32 - .fontColor($r("app.color.color_B0B0B0"))  
33 -  
34 - }.width(CommonConstants.FULL_WIDTH)  
35 - .justifyContent(FlexAlign.Start)  
36 - .margin({ top: 8 })  
37 -  
38 - }.width(CommonConstants.FULL_WIDTH)  
39 - .padding({  
40 - top: 14,  
41 - left: 16,  
42 - right: 16,  
43 - bottom: 14  
44 - })  
45 - .backgroundColor($r("app.color.white"))  
46 - .margin({ bottom: 8 })  
47 - }  
48 -}  
1 -//全标题 "compStyle":"3",  
2 -import { CommonConstants } from 'wdConstant'  
3 -import { CompDTO } from 'wdBean'  
4 -import { DateTimeUtils } from 'wdKit/src/main/ets/utils/DateTimeUtils'  
5 -import { Logger } from 'wdKit/src/main/ets/utils/Logger'  
6 -import { ProcessUtils } from '../../utils/ProcessUtils'  
7 -  
8 -@Component  
9 -export struct TitleAllComponent {  
10 - @State compDTO: CompDTO = {} as CompDTO  
11 -  
12 - build() {  
13 - Column() {  
14 - Text(this.compDTO.operDataList[0].newsTitle)  
15 - .fontSize($r("app.float.font_size_16"))  
16 - .fontColor($r("app.color.color_222222"))  
17 - .width(CommonConstants.FULL_WIDTH)  
18 - Row() {  
19 - Text("锐评")  
20 - .fontSize($r("app.float.font_size_12"))  
21 - .fontColor($r("app.color.color_ED2800"))  
22 - Text(this.compDTO.operDataList[0].source)  
23 - .fontSize($r("app.float.font_size_12"))  
24 - .fontColor($r("app.color.color_B0B0B0"))  
25 - .margin({ left: 6 })  
26 - Image($r("app.media.point"))  
27 - .width(16)  
28 - .height(16)  
29 -  
30 - Text(DateTimeUtils.formatDate(Number.parseFloat(this.compDTO.operDataList[0].publishTime)))  
31 - .fontSize($r("app.float.font_size_12"))  
32 - .fontColor($r("app.color.color_B0B0B0"))  
33 -  
34 - }.width(CommonConstants.FULL_WIDTH)  
35 - .justifyContent(FlexAlign.Start)  
36 - .margin({ top: 8 })  
37 -  
38 - }.width("100%")  
39 - .padding({  
40 - top: 14,  
41 - left: 16,  
42 - right: 16,  
43 - bottom: 14  
44 - })  
45 - .backgroundColor($r("app.color.white"))  
46 - .margin({ bottom: 8 })  
47 - .onClick((event: ClickEvent)=>{  
48 - ProcessUtils.processPage(this.compDTO.operDataList[0])  
49 - })  
50 - }  
51 - aboutToAppear(){  
52 - // Logger.info("ssx",JSON.stringify(this.compDTO.operDataList[0]))  
53 - }  
54 -}  
1 -import { CompDTO } from 'wdBean';  
2 -import { CommonConstants } from 'wdConstant'  
3 -import { ProcessUtils } from '../../utils/ProcessUtils';  
4 -  
5 -const TAG: string = 'TriPicCardComponent';  
6 -  
7 -/**  
8 - * 三图卡:  
9 - * compstyle:4  
10 - * 卡片结构：上下结构  
11 - * 卡片宽度:充满父窗口  
12 - * 卡片高度,仅包含横板图片：图片高度由图片的宽度及宽高比决定，图片宽度占父窗口'100%'，宽高比为16:9:  
13 - */  
14 -// @Entry  
15 -@Component  
16 -export struct TriPicCardComponent {  
17 - @State compDTO: CompDTO = {} as CompDTO  
18 -  
19 - build() {  
20 - Column() {  
21 -  
22 -  
23 - //body  
24 - Column() {  
25 - //新闻标题  
26 - Text(this.compDTO.operDataList[0].newsTitle)  
27 - .fontSize(17)  
28 - .fontColor('#222222')  
29 - .maxLines(3)  
30 - .textOverflow({ overflow: TextOverflow.Ellipsis }) // 超出的部分显示省略号。  
31 - //三图  
32 - Row() {  
33 - Image(this.compDTO.operDataList[0].fullColumnImgUrls[0]?.url)  
34 - .width('32%')  
35 -  
36 - .height(75)  
37 - .borderRadius({ topLeft:4,bottomLeft:4 })  
38 -  
39 - Image(this.compDTO.operDataList[0].fullColumnImgUrls[1]?.url)  
40 - .width('32%')  
41 - .height(75)  
42 -  
43 - Image(this.compDTO.operDataList[0].fullColumnImgUrls[2]?.url)  
44 - .width('32%')  
45 - .height(75)  
46 - .borderRadius({ topRight:4,bottomRight:4 })  
47 -  
48 - }  
49 - .justifyContent(FlexAlign.SpaceBetween)  
50 - .width('100%')  
51 - .height(75)  
52 - .margin({top:8})  
53 - .borderRadius(8)  
54 -  
55 - }  
56 - .width('100%')  
57 - .justifyContent(FlexAlign.Start)  
58 - .alignItems(HorizontalAlign.Start)  
59 - .padding({top:14})  
60 - .onClick((event: ClickEvent)=>{  
61 - ProcessUtils.processPage(this.compDTO.operDataList[0])  
62 - })  
63 -  
64 -  
65 - //bottom  
66 - Row() {  
67 - Text(this.compDTO.operDataList[0].source)  
68 - .bottomTextStyle()  
69 - //间隔点  
70 - Image($r('app.media.point'))  
71 - .width(12)  
72 - .height(12)  
73 -  
74 - Text(this.compDTO.operDataList[0].publishTime)  
75 - .bottomTextStyle()  
76 - Text(' ')  
77 -  
78 - Text('518条评论')  
79 - .bottomTextStyle()  
80 -  
81 - }  
82 - .width('100%')  
83 -  
84 - .justifyContent(FlexAlign.Start)  
85 - // .padding({bottom:14})  
86 - .margin({top:8})  
87 - .padding({bottom:14})  
88 -  
89 - }  
90 - .width('100%')  
91 - .padding({top:8,left:16,right:16})  
92 -  
93 -  
94 - }  
95 -  
96 -}  
97 -  
98 -  
99 -@Extend(Text) function bottomTextStyle() {  
100 - .fontSize(12)  
101 - .fontColor('#B0B0B0')  
102 -}  
1 -import { Action, CompDTO, ContentDTO, Params } from 'wdBean';  
2 -import { CompStyle } from 'wdConstant';  
3 -import { Logger } from 'wdKit';  
4 -import { WDRouterRule } from 'wdRouter';  
5 -import { ProcessUtils } from '../../utils/ProcessUtils';  
6 -  
7 -const TAG = 'Zh_Grid_Layout-03';  
8 -const FULL_PARENT: string = '100%';  
9 -let listSize: number = 4;  
10 -  
11 -/**  
12 - * 金刚卡位  
13 - * 枚举值Zh_Grid_Layout-03  
14 - * Zh_Grid_Layout-03  
15 - *  
16 - */  
17 -@Preview  
18 -@Component  
19 -export struct ZhGridLayoutComponent {  
20 - @State compDTO: CompDTO = {} as CompDTO  
21 -  
22 - aboutToAppear() {  
23 - if (this.compDTO.operDataList) {  
24 - listSize = this.compDTO.operDataList.length > 5 ? 4 : this.compDTO.operDataList.length;  
25 - }  
26 - }  
27 -  
28 - build() {  
29 - GridRow({  
30 - columns: { sm: listSize, md: 8 },  
31 - breakpoints: { value: ['320vp', '520vp', '840vp'] }  
32 - }) {  
33 - ForEach(this.compDTO.operDataList, (item: ContentDTO, index: number) => {  
34 - GridCol() {  
35 - this.buildItemCard(this.compDTO.operDataList[index]);  
36 - }  
37 - })  
38 - }  
39 - }  
40 -  
41 - /**  
42 - * 组件项  
43 - *  
44 - * @param programmeBean item 组件项, 上面icon,下面标题  
45 - */  
46 - @Builder  
47 - buildItemCard(item: ContentDTO) {  
48 - Column() {  
49 - Image(item.coverUrl)  
50 - .width(44)  
51 - .aspectRatio(1 / 1)  
52 - .margin(16)  
53 - Text(item.newsTitle)  
54 - .fontSize(13)  
55 - .maxLines(1)  
56 - .textOverflow({ overflow: TextOverflow.Ellipsis })  
57 - }  
58 - .width('100%')  
59 - .onClick((event: ClickEvent) => {  
60 - ProcessUtils.processPage(item)  
61 - })  
62 - }  
63 -}  
64 -  
65 -  
1 -import { CompDTO, ContentDTO } from 'wdBean';  
2 -import { CommonConstants } from 'wdConstant';  
3 -import { DateTimeUtils } from 'wdKit';  
4 -import { ProcessUtils } from '../../utils/ProcessUtils';  
5 -  
6 -/**  
7 - * 本地精选卡  
8 - * ZhSingleRow04  
9 - */  
10 -  
11 -@Component  
12 -export struct ZhSingleRow04 {  
13 - @State compDTO: CompDTO = {} as CompDTO  
14 -  
15 - aboutToAppear() {}  
16 -  
17 - build() {  
18 - Column(){  
19 - //顶部  
20 - Row(){  
21 - Row() {  
22 - Image($r("app.media.local_selection"))  
23 - .width(24)  
24 - .height(24)  
25 - .margin({ right: 4 })  
26 - Text(this.compDTO.objectTitle)  
27 - .fontSize($r("app.float.font_size_17"))  
28 - .fontColor($r("app.color.color_222222"))  
29 - .fontWeight(600)  
30 - }  
31 - Row() {  
32 - Text("更多")  
33 - .fontSize($r("app.float.font_size_14"))  
34 - .fontColor($r("app.color.color_999999"))  
35 - .margin({ right: 1 })  
36 - Image($r("app.media.more"))  
37 - .width(14)  
38 - .height(14)  
39 - }  
40 - }  
41 - .justifyContent(FlexAlign.SpaceBetween)  
42 - .margin({ top: 8, bottom: 8 })  
43 - .width('100%')  
44 - // 列表内容  
45 - List({ space: 12 }) {  
46 - ForEach(this.compDTO.operDataList, (item: ContentDTO) => {  
47 - ListItem() {  
48 - Row(){  
49 - if(item.coverUrl) {  
50 - Image(item.coverUrl)  
51 - .width(84)  
52 - .height(56)  
53 - .borderRadius(3)  
54 - .objectFit(ImageFit.Cover)  
55 - .padding({right: 6})  
56 - }  
57 - Column(){  
58 - Text(item.newsTitle)  
59 - .fontSize($r("app.float.font_size_16"))  
60 - .fontColor($r("app.color.color_212228"))  
61 - .fontWeight(400)  
62 - .maxLines(2)  
63 - .textOverflow({ overflow: TextOverflow.Ellipsis })// 超出的部分显示省略号。  
64 - .margin({ top: 8 })  
65 -  
66 - Row(){  
67 - Text(item.source)  
68 - .fontSize($r('app.float.font_size_12'))  
69 - .fontColor($r('app.color.color_B0B0B0'))  
70 - .textOverflow({overflow: TextOverflow.Ellipsis})  
71 - .maxLines(1)  
72 - .width(item.source.length > 10 ? '60%' : '')  
73 - Image($r("app.media.point"))  
74 - .width(16)  
75 - .height(16)  
76 - Text(DateTimeUtils.getCommentTime(Number.parseFloat(this.compDTO.operDataList[0].publishTime)))  
77 - .fontSize($r("app.float.font_size_12"))  
78 - .fontColor($r("app.color.color_B0B0B0"))  
79 - }  
80 - .width('100%')  
81 - }  
82 - .width(200)  
83 - }  
84 - // .margin({right: 18})  
85 - .onClick(() =>{  
86 - ProcessUtils.processPage(item)  
87 - })  
88 - }  
89 - })  
90 - }  
91 - .listDirection(Axis.Horizontal)  
92 - .width('100%')  
93 - }  
94 - .width(CommonConstants.FULL_WIDTH)  
95 - .padding({  
96 - top: 14,  
97 - left: 16,  
98 - right: 16,  
99 - bottom: 14  
100 - })  
101 - .backgroundColor($r("app.color.white"))  
102 - .margin({ bottom: 8 })  
103 - }  
104 -}