developOne / harmonyPool

Go to a project
Toggle navigation Toggle navigation pinning
张善主
3e469d71 1 parent 3e8c1f7f

feat(动态详情)：UI绘制

Inline Side-by-side
Showing 6 changed files with 137 additions and 26 deletions
... ... @@ -35,63 +35,63 @@ export struct DynamicDetailComponent {
//logo、日期
Row() {
Image($r('app.media.ic_article_rmh'))
.width(80)
.height(28)
.margin({ left: 16 })
.width($r('app.float.margin_80'))
.height($r('app.float.margin_28'))
.margin({ left: $r('app.float.margin_16') })
Blank()
Text("2023年03月14日 08:16")
.fontColor($r('app.color.color_B0B0B0'))
.fontSize(12)
.lineHeight(28)
.margin({ right: 16 })
.fontSize($r('app.float.font_size_12'))
.lineHeight($r('app.float.margin_28'))
.margin({ right: $r('app.float.margin_16') })
}
.height(48)
.height($r('app.float.margin_48'))
.width('100%')
//分割线
Image($r('app.media.ic_news_detail_division'))
.width('100%')
.height(7)
.margin({left: 16, right: 16} )
.height($r('app.float.margin_7'))
.margin({left: $r('app.float.margin_16'), right: $r('app.float.margin_16')} )
//号主信息
Row() {
//头像
Stack() {
Image(this.contentDetailData.rmhInfo?.rmhHeadUrl)
.alt(this.contentDetailData.rmhInfo?.userType=='1'?$r('app.media.default_head'):$r('app.media.icon_default_head_mater'))
.width('32')
.height('32')
.width($r('app.float.margin_32'))
.height($r('app.float.margin_32'))
.objectFit(ImageFit.Cover)
.borderRadius(16)
.borderRadius($r('app.float.margin_16'))
Image($r('app.media.icon_border_test'))
.width('48')
.height('48')
.width($r('app.float.margin_48'))
.height($r('app.float.margin_48'))
.objectFit(ImageFit.Cover)
.borderRadius(24)
.borderRadius($r('app.float.margin_24'))
}
.width(48)
.height(48)
.width($r('app.float.margin_48'))
.height($r('app.float.margin_48'))
.alignContent(Alignment.Center)
Column(){
//昵称
Text("this.contentDetailData.rmhInfo?.rmhName")
.fontSize(14)
.fontSize($r('app.float.font_size_14'))
.fontColor($r('app.color.color_222222'))
.fontWeight(FontWeight.Medium)
.margin({ left: 5 })
.margin({ left: $r('app.float.margin_5') })
//简介
Text("this.contentDetailData.rmhInfo?.rmhDesc")
.fontSize(14)
.fontSize($r('app.float.font_size_14'))
.fontColor($r('app.color.color_B0B0B0'))
.fontWeight(FontWeight.Medium)
.margin({ left: 5 })
.margin({ left: $r('app.float.margin_5') })
}
if (!this.followStatus) {
Text('关注')
.width(60)
.height(24)
.height($r('app.float.margin_48'))
.textAlign(TextAlign.Center)
.fontSize($r('app.float.font_size_12'))
.borderRadius($r('app.float.button_border_radius'))
.borderRadius($r('app.float.vp_3'))
.backgroundColor($r('app.color.color_ED2800'))
.fontColor($r('app.color.color_fff'))
.onClick(() => {
... ... @@ -99,12 +99,12 @@ export struct DynamicDetailComponent {
})
} else {
Text('已关注')
.width(60)
.height(24)
.width($r('app.float.margin_60'))
.height($r('app.float.margin_48'))
.borderWidth(1)
.textAlign(TextAlign.Center)
.fontSize($r('app.float.font_size_12'))
.borderRadius($r('app.float.button_border_radius'))
.borderRadius($r('app.float.vp_3'))
.borderColor($r('app.color.color_CCCCCC'))
.fontColor($r('app.color.color_CCCCCC'))
.onClick(() => {
... ... @@ -113,6 +113,53 @@ export struct DynamicDetailComponent {
}
}
.width('100%')
//内容
Text("这里展示标题这里展示标题这里展示标题这里这里展示标题这里展示标题这里展示标题这里这里展示标题这里展示标题这里展示标题这里")
.fontColor($r('app.color.color_222222'))
.fontSize($r('app.float.font_size_18'))
.lineHeight($r('app.float.margin_25'))
.margin({ top: $r('app.float.margin_6')
,left: $r('app.float.margin_16')
,right: $r('app.float.margin_16') })
//特别声明
Text("特别声明：本文为人民日报新媒体平台“人民号”作者上传并发布，仅代表作者观点。人民日报仅提供信息发布平台。")
.fontColor($r('app.color.color_CCCCCC'))
.fontSize($r('app.float.font_size_12'))
.lineHeight($r('app.float.margin_16'))
.margin({ top: $r('app.float.margin_16')
,left: $r('app.float.margin_16')
,right: $r('app.float.margin_16') })
//微信/朋友圈/微博
Row(){
Image($r('app.media.xxhdpi_pic_wechat'))
.width($r('app.float.margin_116'))
.height($r('app.float.margin_36'))
.objectFit(ImageFit.Cover)
Image($r('app.media.xxhdpi_pic_pyq'))
.width($r('app.float.margin_116'))
.height($r('app.float.margin_36'))
.margin({ left: $r('app.float.margin_4_negative')})
.objectFit(ImageFit.Cover)
Image($r('app.media.xxhdpi_pic_wb'))
.width($r('app.float.margin_116'))
.height($r('app.float.margin_36'))
.margin({ left: $r('app.float.margin_4_negative')})
.objectFit(ImageFit.Cover)
}
.margin({ top: $r('app.float.margin_24')})
//点赞
Row(){
Image($r('app.media.icon_like_selected_redheart'))
.width($r('app.float.margin_24'))
.height($r('app.float.margin_24'))
.objectFit(ImageFit.Cover)
Text("2.6万")
.fontColor($r('app.color.color_999999'))
.fontSize($r('app.float.font_size_16'))
.lineHeight($r('app.float.margin_20'))
.margin({ left: $r('app.float.margin_2')})
}
//评论组件/底部组件
}
}
.backgroundColor('#FFFFFFFF')
... ...
... ... @@ -37,6 +37,10 @@
"value": "18fp"
},
{
"name": "font_size_18",
"value": "18fp"
},
{
"name": "font_size_24",
"value": "24fp"
},
... ... @@ -49,6 +53,10 @@
"value": "36fp"
},
{
"name": "margin_4_negative",
"value": "-4vp"
},
{
"name": "main_margin",
"value": "14vp"
},
... ... @@ -77,6 +85,46 @@
"value": "160vp"
},
{
"name": "margin_80",
"value": "80vp"
},
{
"name": "margin_2",
"value": "2vp"
},
{
"name": "margin_5",
"value": "5vp"
},
{
"name": "margin_7",
"value": "7vp"
},
{
"name": "margin_20",
"value": "20vp"
},
{
"name": "margin_24",
"value": "24vp"
},
{
"name": "margin_25",
"value": "25vp"
},
{
"name": "margin_28",
"value": "28vp"
},
{
"name": "margin_48",
"value": "48vp"
},
{
"name": "margin_60",
"value": "60vp"
},
{
"name": "single_row_03_img_height",
"value": "88vp"
},
... ... @@ -133,6 +181,10 @@
"value": "24vp"
},
{
"name": "margin_6",
"value": "6vp"
},
{
"name": "margin_16",
"value": "16vp"
},
... ... @@ -141,6 +193,14 @@
"value": "20vp"
},
{
"name": "margin_32",
"value": "32vp"
},
{
"name": "margin_36",
"value": "36vp"
},
{
"name": "vp_3",
"value": "3vp"
},
... ... @@ -167,6 +227,10 @@
{
"name": "card_comp_pagePadding_tb",
"value": "14fp"
},
{
"name": "margin_116",
"value": "116vp"
}
]
}
... ...