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 { @@ -35,63 +35,63 @@ export struct DynamicDetailComponent {
35 //logo、日期 35 //logo、日期
36 Row() { 36 Row() {
37 Image($r('app.media.ic_article_rmh')) 37 Image($r('app.media.ic_article_rmh'))
38 - .width(80)  
39 - .height(28)  
40 - .margin({ left: 16 }) 38 + .width($r('app.float.margin_80'))
  39 + .height($r('app.float.margin_28'))
  40 + .margin({ left: $r('app.float.margin_16') })
41 Blank() 41 Blank()
42 Text("2023年03月14日 08:16") 42 Text("2023年03月14日 08:16")
43 .fontColor($r('app.color.color_B0B0B0')) 43 .fontColor($r('app.color.color_B0B0B0'))
44 - .fontSize(12)  
45 - .lineHeight(28)  
46 - .margin({ right: 16 }) 44 + .fontSize($r('app.float.font_size_12'))
  45 + .lineHeight($r('app.float.margin_28'))
  46 + .margin({ right: $r('app.float.margin_16') })
47 } 47 }
48 - .height(48) 48 + .height($r('app.float.margin_48'))
49 .width('100%') 49 .width('100%')
50 //分割线 50 //分割线
51 Image($r('app.media.ic_news_detail_division')) 51 Image($r('app.media.ic_news_detail_division'))
52 .width('100%') 52 .width('100%')
53 - .height(7)  
54 - .margin({left: 16, right: 16} ) 53 + .height($r('app.float.margin_7'))
  54 + .margin({left: $r('app.float.margin_16'), right: $r('app.float.margin_16')} )
55 //号主信息 55 //号主信息
56 Row() { 56 Row() {
57 //头像 57 //头像
58 Stack() { 58 Stack() {
59 Image(this.contentDetailData.rmhInfo?.rmhHeadUrl) 59 Image(this.contentDetailData.rmhInfo?.rmhHeadUrl)
60 .alt(this.contentDetailData.rmhInfo?.userType=='1'?$r('app.media.default_head'):$r('app.media.icon_default_head_mater')) 60 .alt(this.contentDetailData.rmhInfo?.userType=='1'?$r('app.media.default_head'):$r('app.media.icon_default_head_mater'))
61 - .width('32')  
62 - .height('32') 61 + .width($r('app.float.margin_32'))
  62 + .height($r('app.float.margin_32'))
63 .objectFit(ImageFit.Cover) 63 .objectFit(ImageFit.Cover)
64 - .borderRadius(16) 64 + .borderRadius($r('app.float.margin_16'))
65 Image($r('app.media.icon_border_test')) 65 Image($r('app.media.icon_border_test'))
66 - .width('48')  
67 - .height('48') 66 + .width($r('app.float.margin_48'))
  67 + .height($r('app.float.margin_48'))
68 .objectFit(ImageFit.Cover) 68 .objectFit(ImageFit.Cover)
69 - .borderRadius(24) 69 + .borderRadius($r('app.float.margin_24'))
70 } 70 }
71 - .width(48)  
72 - .height(48) 71 + .width($r('app.float.margin_48'))
  72 + .height($r('app.float.margin_48'))
73 .alignContent(Alignment.Center) 73 .alignContent(Alignment.Center)
74 Column(){ 74 Column(){
75 //昵称 75 //昵称
76 Text("this.contentDetailData.rmhInfo?.rmhName") 76 Text("this.contentDetailData.rmhInfo?.rmhName")
77 - .fontSize(14) 77 + .fontSize($r('app.float.font_size_14'))
78 .fontColor($r('app.color.color_222222')) 78 .fontColor($r('app.color.color_222222'))
79 .fontWeight(FontWeight.Medium) 79 .fontWeight(FontWeight.Medium)
80 - .margin({ left: 5 }) 80 + .margin({ left: $r('app.float.margin_5') })
81 //简介 81 //简介
82 Text("this.contentDetailData.rmhInfo?.rmhDesc") 82 Text("this.contentDetailData.rmhInfo?.rmhDesc")
83 - .fontSize(14) 83 + .fontSize($r('app.float.font_size_14'))
84 .fontColor($r('app.color.color_B0B0B0')) 84 .fontColor($r('app.color.color_B0B0B0'))
85 .fontWeight(FontWeight.Medium) 85 .fontWeight(FontWeight.Medium)
86 - .margin({ left: 5 }) 86 + .margin({ left: $r('app.float.margin_5') })
87 } 87 }
88 if (!this.followStatus) { 88 if (!this.followStatus) {
89 Text('关注') 89 Text('关注')
90 .width(60) 90 .width(60)
91 - .height(24) 91 + .height($r('app.float.margin_48'))
92 .textAlign(TextAlign.Center) 92 .textAlign(TextAlign.Center)
93 .fontSize($r('app.float.font_size_12')) 93 .fontSize($r('app.float.font_size_12'))
94 - .borderRadius($r('app.float.button_border_radius')) 94 + .borderRadius($r('app.float.vp_3'))
95 .backgroundColor($r('app.color.color_ED2800')) 95 .backgroundColor($r('app.color.color_ED2800'))
96 .fontColor($r('app.color.color_fff')) 96 .fontColor($r('app.color.color_fff'))
97 .onClick(() => { 97 .onClick(() => {
@@ -99,12 +99,12 @@ export struct DynamicDetailComponent { @@ -99,12 +99,12 @@ export struct DynamicDetailComponent {
99 }) 99 })
100 } else { 100 } else {
101 Text('已关注') 101 Text('已关注')
102 - .width(60)  
103 - .height(24) 102 + .width($r('app.float.margin_60'))
  103 + .height($r('app.float.margin_48'))
104 .borderWidth(1) 104 .borderWidth(1)
105 .textAlign(TextAlign.Center) 105 .textAlign(TextAlign.Center)
106 .fontSize($r('app.float.font_size_12')) 106 .fontSize($r('app.float.font_size_12'))
107 - .borderRadius($r('app.float.button_border_radius')) 107 + .borderRadius($r('app.float.vp_3'))
108 .borderColor($r('app.color.color_CCCCCC')) 108 .borderColor($r('app.color.color_CCCCCC'))
109 .fontColor($r('app.color.color_CCCCCC')) 109 .fontColor($r('app.color.color_CCCCCC'))
110 .onClick(() => { 110 .onClick(() => {
@@ -113,6 +113,53 @@ export struct DynamicDetailComponent { @@ -113,6 +113,53 @@ export struct DynamicDetailComponent {
113 } 113 }
114 } 114 }
115 .width('100%') 115 .width('100%')
  116 + //内容
  117 + Text("这里展示标题这里展示标题这里展示标题这里这里展示标题这里展示标题这里展示标题这里这里展示标题这里展示标题这里展示标题这里")
  118 + .fontColor($r('app.color.color_222222'))
  119 + .fontSize($r('app.float.font_size_18'))
  120 + .lineHeight($r('app.float.margin_25'))
  121 + .margin({ top: $r('app.float.margin_6')
  122 + ,left: $r('app.float.margin_16')
  123 + ,right: $r('app.float.margin_16') })
  124 + //特别声明
  125 + Text("特别声明：本文为人民日报新媒体平台“人民号”作者上传并发布，仅代表作者观点。人民日报仅提供信息发布平台。")
  126 + .fontColor($r('app.color.color_CCCCCC'))
  127 + .fontSize($r('app.float.font_size_12'))
  128 + .lineHeight($r('app.float.margin_16'))
  129 + .margin({ top: $r('app.float.margin_16')
  130 + ,left: $r('app.float.margin_16')
  131 + ,right: $r('app.float.margin_16') })
  132 + //微信/朋友圈/微博
  133 + Row(){
  134 + Image($r('app.media.xxhdpi_pic_wechat'))
  135 + .width($r('app.float.margin_116'))
  136 + .height($r('app.float.margin_36'))
  137 + .objectFit(ImageFit.Cover)
  138 + Image($r('app.media.xxhdpi_pic_pyq'))
  139 + .width($r('app.float.margin_116'))
  140 + .height($r('app.float.margin_36'))
  141 + .margin({ left: $r('app.float.margin_4_negative')})
  142 + .objectFit(ImageFit.Cover)
  143 + Image($r('app.media.xxhdpi_pic_wb'))
  144 + .width($r('app.float.margin_116'))
  145 + .height($r('app.float.margin_36'))
  146 + .margin({ left: $r('app.float.margin_4_negative')})
  147 + .objectFit(ImageFit.Cover)
  148 + }
  149 + .margin({ top: $r('app.float.margin_24')})
  150 + //点赞
  151 + Row(){
  152 + Image($r('app.media.icon_like_selected_redheart'))
  153 + .width($r('app.float.margin_24'))
  154 + .height($r('app.float.margin_24'))
  155 + .objectFit(ImageFit.Cover)
  156 + Text("2.6万")
  157 + .fontColor($r('app.color.color_999999'))
  158 + .fontSize($r('app.float.font_size_16'))
  159 + .lineHeight($r('app.float.margin_20'))
  160 + .margin({ left: $r('app.float.margin_2')})
  161 + }
  162 + //评论组件/底部组件
116 } 163 }
117 } 164 }
118 .backgroundColor('#FFFFFFFF') 165 .backgroundColor('#FFFFFFFF')
@@ -37,6 +37,10 @@ @@ -37,6 +37,10 @@
37 "value": "18fp" 37 "value": "18fp"
38 }, 38 },
39 { 39 {
  40 + "name": "font_size_18",
  41 + "value": "18fp"
  42 + },
  43 + {
40 "name": "font_size_24", 44 "name": "font_size_24",
41 "value": "24fp" 45 "value": "24fp"
42 }, 46 },
@@ -49,6 +53,10 @@ @@ -49,6 +53,10 @@
49 "value": "36fp" 53 "value": "36fp"
50 }, 54 },
51 { 55 {
  56 + "name": "margin_4_negative",
  57 + "value": "-4vp"
  58 + },
  59 + {
52 "name": "main_margin", 60 "name": "main_margin",
53 "value": "14vp" 61 "value": "14vp"
54 }, 62 },
@@ -77,6 +85,46 @@ @@ -77,6 +85,46 @@
77 "value": "160vp" 85 "value": "160vp"
78 }, 86 },
79 { 87 {
  88 + "name": "margin_80",
  89 + "value": "80vp"
  90 + },
  91 + {
  92 + "name": "margin_2",
  93 + "value": "2vp"
  94 + },
  95 + {
  96 + "name": "margin_5",
  97 + "value": "5vp"
  98 + },
  99 + {
  100 + "name": "margin_7",
  101 + "value": "7vp"
  102 + },
  103 + {
  104 + "name": "margin_20",
  105 + "value": "20vp"
  106 + },
  107 + {
  108 + "name": "margin_24",
  109 + "value": "24vp"
  110 + },
  111 + {
  112 + "name": "margin_25",
  113 + "value": "25vp"
  114 + },
  115 + {
  116 + "name": "margin_28",
  117 + "value": "28vp"
  118 + },
  119 + {
  120 + "name": "margin_48",
  121 + "value": "48vp"
  122 + },
  123 + {
  124 + "name": "margin_60",
  125 + "value": "60vp"
  126 + },
  127 + {
80 "name": "single_row_03_img_height", 128 "name": "single_row_03_img_height",
81 "value": "88vp" 129 "value": "88vp"
82 }, 130 },
@@ -133,6 +181,10 @@ @@ -133,6 +181,10 @@
133 "value": "24vp" 181 "value": "24vp"
134 }, 182 },
135 { 183 {
  184 + "name": "margin_6",
  185 + "value": "6vp"
  186 + },
  187 + {
136 "name": "margin_16", 188 "name": "margin_16",
137 "value": "16vp" 189 "value": "16vp"
138 }, 190 },
@@ -141,6 +193,14 @@ @@ -141,6 +193,14 @@
141 "value": "20vp" 193 "value": "20vp"
142 }, 194 },
143 { 195 {
  196 + "name": "margin_32",
  197 + "value": "32vp"
  198 + },
  199 + {
  200 + "name": "margin_36",
  201 + "value": "36vp"
  202 + },
  203 + {
144 "name": "vp_3", 204 "name": "vp_3",
145 "value": "3vp" 205 "value": "3vp"
146 }, 206 },
@@ -167,6 +227,10 @@ @@ -167,6 +227,10 @@
167 { 227 {
168 "name": "card_comp_pagePadding_tb", 228 "name": "card_comp_pagePadding_tb",
169 "value": "14fp" 229 "value": "14fp"
  230 + },
  231 + {
  232 + "name": "margin_116",
  233 + "value": "116vp"
170 } 234 }
171 ] 235 ]
172 } 236 }