guochunsong

appStyle: 2,13 做到一个

import { Action, CompDTO, ContentDTO, Params } from 'wdBean';
import { CompStyle } from 'wdConstant';
import { Logger } from 'wdKit';
import { WDRouterRule } from 'wdRouter';
const TAG = 'SingleImageCardApp2Component';
const FULL_PARENT: string = '100%';
/**
* 单图卡-3行标题/2行标题
* 枚举值13
*
* 重磅推荐/精选/电视剧/电影/综艺/短剧/更多>/
*/
@Entry
@Component
export struct SingleImageCardApp2Component {
@State compDTO: CompDTO = {} as CompDTO
// @State compDTO: CompDTO = {
// operDataList: [
// {
// coverSize: '660*371',
// coverType: 1,
// visitorComment: 10,
// coverUrl: 'https://cdnjdphoto.aikan.pdnews.cn/zhbj-20240116/image/content/a9028e7011bb440e94ba7c63d80b39b7.png?x-oss-process=image/resize,w_550/quality,q_90/format,jpg',
// newsTitle: '一条江豚的自述',
// newsSummary: '我是生活在长江里的一头江豚,是长江中唯一的水生哺乳动物,更是国家一级保护动物。但曾几何时,我和我的江中小伙伴出现了生存危机……直到有一天,我突然发现,打渔人变成护渔人,江水变清澈了,长江逐渐恢复了生机,我的家族数量上升到了1249头。当长江之水再一次悠悠流淌,我们相拥在清澈波光中起舞。长江,我的家园。'
// } as ContentDTO
// ]
// } as CompDTO
aboutToAppear() {
}
build() {
Column() {
Text(this.compDTO.operDataList[0].newsTitle)
.fontSize(16)
.fontWeight(FontWeight.Bold)
.alignSelf(ItemAlign.Start)
.maxLines(3)
.textOverflow({ overflow: TextOverflow.Ellipsis }) // 超出的部分显示省略号。
Image(this.compDTO.operDataList[0].coverUrl)
.borderRadius(5)
.aspectRatio(16 / 9)
.padding({ top: 10 })
Text(this.compDTO.operDataList[0].newsSummary)
.fontSize(14)
.padding({ top: 10 })
.alignSelf(ItemAlign.Start)
.maxLines(3)
.textOverflow({ overflow: TextOverflow.Ellipsis }) // 超出的部分显示省略号。
Row() {
Text(this.compDTO.operDataList[0].visitorComment + "评")
.fontSize(12)
.fontColor(Color.Gray)
Image($r('app.media.icon_share'))
.width(16)
.height(16)
.margin(10)
.backgroundColor(Color.Brown)
}.width(FULL_PARENT)
.justifyContent(FlexAlign.SpaceBetween)
}
.margin(16)
}
}
\ No newline at end of file
... ... @@ -3,7 +3,7 @@ import { CompStyle } from 'wdConstant';
import { Logger } from 'wdKit';
import { WDRouterRule } from 'wdRouter';
const TAG = 'SingleImageCardAppComponent';
const TAG = 'SingleImageCardApp2Component';
const FULL_PARENT: string = '100%';
/**
... ... @@ -15,17 +15,31 @@ const FULL_PARENT: string = '100%';
@Entry
@Component
export struct SingleImageCardAppComponent {
@State compDTO: CompDTO = {} as CompDTO
// @State compDTO: CompDTO = {
// operDataList: [
// {
// coverSize: '660*371',
// coverType: 1,
// coverUrl: 'https://cdnjdphoto.aikan.pdnews.cn/zhbj-20240116/image/content/a9028e7011bb440e94ba7c63d80b39b7.png?x-oss-process=image/resize,w_550/quality,q_90/format,jpg',
// newsTitle: '时政微观察丨从外贸“成绩单”看中国经济新亮色',
// } as ContentDTO
// ]
// } as CompDTO
// @State compDTO: CompDTO = {} as CompDTO
@State compDTO: CompDTO = {
operDataList: [
{
coverSize: '660*371',
coverType: 1,
visitorComment: 10,
coverUrl: 'https://cdnjdphoto.aikan.pdnews.cn/zhbj-20240116/image/content/a9028e7011bb440e94ba7c63d80b39b7.png?x-oss-process=image/resize,w_550/quality,q_90/format,jpg',
newsTitle: '一条江豚的自述',
newsSummary: '我是生活在长江里的一头江豚,是长江中唯一的水生哺乳动物,更是国家一级保护动物。但曾几何时,我和我的江中小伙伴出现了生存危机……直到有一天,我突然发现,打渔人变成护渔人,江水变清澈了,长江逐渐恢复了生机,我的家族数量上升到了1249头。当长江之水再一次悠悠流淌,我们相拥在清澈波光中起舞。长江,我的家园。',
videoInfo: {
// clarity: 1,
resolutionHeight: 20,
resolutionWidth: 20,
videoDuration: '229',
videoLandScape: 1,
videoType: 1,
videoUrl: "https://cdnjdout.aikan.pdnews.cn/zhbj-20240116/vod/content/output/c72f4170db2c4d34befa453f60d39a69_opt.mp4",
firstFrameImageUri: "", // 首帧图;【视频内容,contentPictures中】
},
} as ContentDTO
]
} as CompDTO
aboutToAppear() {
}
... ... @@ -36,16 +50,47 @@ export struct SingleImageCardAppComponent {
.fontSize(16)
.fontWeight(FontWeight.Bold)
.alignSelf(ItemAlign.Start)
.maxLines(3)
.textOverflow({ overflow: TextOverflow.Ellipsis }) // 超出的部分显示省略号。
Image(this.compDTO.operDataList[0].coverUrl)
.borderRadius(5)
.aspectRatio(16 / 9)
.padding({ top: 10 })
Image($r('app.media.icon_share'))
.width(16)
.height(16)
.margin(10)
}.alignItems(HorizontalAlign.End)
.margin(16)
if (this.compDTO.operDataList[0].coverUrl) {
Stack() {
Image(this.compDTO.operDataList[0].coverUrl)
.borderRadius(5)
.aspectRatio(16 / 9)
.padding({ top: 10 })
if(this.compDTO.operDataList[0].videoInfo) {
Stack() {
Text(this.compDTO.operDataList[0].videoInfo.videoDuration)
.backgroundColor(Color.Black)
.opacity(0.6)
.width(FULL_PARENT)
.padding({left:40})
Image($r('app.media.iv_card_play_yellow_flag'))
.fitOriginalSize(true)
}.width(FULL_PARENT)
}
}
}
if (this.compDTO.operDataList[0].newsSummary) {
Text(this.compDTO.operDataList[0].newsSummary)
.fontSize(14)
.padding({ top: 10 })
.alignSelf(ItemAlign.Start)
.maxLines(3)
.textOverflow({ overflow: TextOverflow.Ellipsis }) // 超出的部分显示省略号。
}
Row() {
Text(this.compDTO.operDataList[0].visitorComment + "评")
.fontSize(12)
.fontColor(Color.Gray)
Image($r('app.media.icon_share'))
.width(16)
.height(16)
.margin(10)
.backgroundColor(Color.Brown)
}.width(FULL_PARENT)
.justifyContent(FlexAlign.SpaceBetween)
}
.margin(22)
}
}
\ No newline at end of file
... ...