lichengjun

大图卡(compstyle-2),三图卡(compstyle-4):长宽比调整

... ... @@ -29,7 +29,10 @@ export struct BigPicCardComponent {
//大图
Stack() {
Image(this.compDTO.operDataList[0].coverUrl)
.backgroundColor('#888888')
.borderRadius(4)
.width('100%')
.aspectRatio(343 / 192)
//播放状态+时长
... ... @@ -50,7 +53,6 @@ export struct BigPicCardComponent {
}
.width('100%')
.height(192)
.alignContent(Alignment.BottomEnd)
.margin({top:8})
... ... @@ -91,97 +93,6 @@ export struct BigPicCardComponent {
}
/**
* 大图卡 中部
* 包括:视频图、视频时长
*/
@Component
export struct myBigCard_body {
private newsSrc:string ="https://k.sinaimg.cn/n/default/crawl/190/w550h440/20240118/6772-7c2385bb2741c6f88906af3514d27343.png/w700d1q75cms.jpg";
private newsTitle:string ="时政微观察丨新征程金融工作怎么干?“新年第一课”这样讲";
build() {
Column() {
//新闻标题
Text(this.newsTitle)
.fontSize(17)
.fontColor('#222222')
.maxLines(3)
.textOverflow({ overflow: TextOverflow.Ellipsis }) // 超出的部分显示省略号。
//大图
Stack() {
Image(this.newsSrc)
.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)
}
}
/**
* 大图卡 底部
* 包括:分享、评论、点赞 三个按钮
*/
@Component
export struct myBigCard_bottom {
private bottom_height:number = 18
private itemSubtitle1:string = "人民日报"
private itemSubtitle2:string = "25分钟前"
private itemSubtitle3:string = "786条评论"
build() {
//子标题
Row() {
Text(this.itemSubtitle1)
.bottomTextStyle()
//间隔点
Image($r('app.media.point'))
.width(12)
.height(12)
Text(this.itemSubtitle2)
.bottomTextStyle()
Text(' ')
Text(this.itemSubtitle3)
.bottomTextStyle()
}
.width('100%')
.height(this.bottom_height)
.justifyContent(FlexAlign.Start)
}
}
@Extend(Text) function bottomTextStyle() {
.fontSize(12)
.fontColor('#B0B0B0')
... ...
//全标题 "compStyle":"4",
import { CommonConstants } from 'wdConstant'
import { DateTimeUtils } from 'wdKit';
import { CompDTO } from '../../repository/bean/CompDTO'
const TAG: string = 'TriPicCardComponent';
... ... @@ -10,7 +11,7 @@ const TAG: string = 'TriPicCardComponent';
* 卡片宽度:充满父窗口
* 卡片高度,仅包含横板图片:图片高度由图片的宽度及宽高比决定,图片宽度占父窗口'100%',宽高比为16:9:
*/
// @Entry
@Entry
@Component
export struct TriPicCardComponent {
@State compDTO: CompDTO = {} as CompDTO
... ... @@ -31,23 +32,21 @@ export struct TriPicCardComponent {
Row() {
Image(this.compDTO.operDataList[0].fullColumnImgUrls[0]?.url)
.width('32%')
.height(75)
.aspectRatio(113 / 75)
.borderRadius({ topLeft:4,bottomLeft:4 })
Image(this.compDTO.operDataList[0].fullColumnImgUrls[1]?.url)
.width('32%')
.height(75)
.aspectRatio(113 / 75)
Image(this.compDTO.operDataList[0].fullColumnImgUrls[2]?.url)
.width('32%')
.height(75)
.aspectRatio(113 / 75)
.borderRadius({ topRight:4,bottomRight:4 })
}
.justifyContent(FlexAlign.SpaceBetween)
.width('100%')
.height(75)
.margin({top:8})
.borderRadius(8)
... ... @@ -67,7 +66,7 @@ export struct TriPicCardComponent {
.width(12)
.height(12)
Text(this.compDTO.operDataList[0].publishTime)
Text(DateTimeUtils.getCommentTime(Number.parseFloat(this.compDTO.operDataList[0].publishTime)))
.bottomTextStyle()
Text(' ')
... ...