developOne / harmonyPool

Go to a project
Toggle navigation Toggle navigation pinning
wuyanan
3d18e4d9 1 parent 517ff5dc

ref |> 调整直播详情直播间tab布局UI走查问题

Inline Side-by-side
Showing 1 changed file with 66 additions and 64 deletions
@@ -15,63 +15,66 @@ export struct TabLiveItemComponent { @@ -15,63 +15,66 @@ export struct TabLiveItemComponent {
15 } 15 }
16 16
17 build() { 17 build() {
18 - Row() {  
19 - Image(StringUtils.isEmpty(this.item.senderUserAvatarUrl) ? $r('app.media.default_head') : this.item.senderUserAvatarUrl)  
20 - .borderRadius(90)  
21 - .width(24)  
22 - .height(24)  
23 -  
24 - Column() {  
25 - Row() {  
26 - Text(this.item.senderUserName)  
27 - .maxLines(1)  
28 - .textOverflow({ overflow: TextOverflow.Ellipsis })  
29 - .fontSize('14vp')  
30 - .fontWeight(400)  
31 - .fontColor('#222222')  
32 - Text(this.item.role === 'host' ? '主持人' : '嘉宾')  
33 - .maxLines(1)  
34 - .textOverflow({ overflow: TextOverflow.Ellipsis })  
35 - .fontSize('11vp')  
36 - .fontWeight(400)  
37 - .fontColor('#968562')  
38 - .backgroundColor('#F1EFEB')  
39 - .padding({  
40 - left: 4,  
41 - top: 1,  
42 - right: 4,  
43 - bottom: 1  
44 - })  
45 - .borderRadius(2)  
46 - .margin({ left: 8 })  
47 - .visibility(StringUtils.isNotEmpty(this.item.role) ? Visibility.Visible : Visibility.None)  
48 -  
49 - Text(DateTimeUtils.getCommentTime(new Date(this.item.time).getTime()))  
50 - .maxLines(1)  
51 - .textOverflow({ overflow: TextOverflow.Ellipsis })  
52 - .fontSize('12vp')  
53 - .fontWeight(400)  
54 - .fontColor('#999999')  
55 - .margin({ left: 8 })  
56 - .visibility(StringUtils.isNotEmpty(this.item.time) ? Visibility.Visible : Visibility.None) 18 + Column() {
  19 + Row() {
  20 + Image(StringUtils.isEmpty(this.item.senderUserAvatarUrl) ? $r('app.media.default_head') : this.item.senderUserAvatarUrl)
  21 + .borderRadius(90)
  22 + .width(24)
  23 + .height(24)
  24 + .id("senderUserAvatar")
  25 + Text(this.item.senderUserName)
  26 + .maxLines(1)
  27 + .textOverflow({ overflow: TextOverflow.Ellipsis })
  28 + .fontSize('14vp')
  29 + .fontWeight(400)
  30 + .fontColor('#222222')
  31 + .alignRules({center:{anchor:"senderUserAvatar",align:VerticalAlign.Center}})
  32 + .margin({left:8})
  33 + Text(this.item.role === 'host' ? '主持人' : '嘉宾')
  34 + .maxLines(1)
  35 + .textOverflow({ overflow: TextOverflow.Ellipsis })
  36 + .fontSize('11vp')
  37 + .fontWeight(400)
  38 + .fontColor('#968562')
  39 + .backgroundColor('#F1EFEB')
  40 + .padding({
  41 + left: 4,
  42 + top: 1,
  43 + right: 4,
  44 + bottom: 1
  45 + })
  46 + .borderRadius(2)
  47 + .margin({ left: 8 })
  48 + .visibility(StringUtils.isNotEmpty(this.item.role) ? Visibility.Visible : Visibility.None)
57 49
58 - Text('置顶')  
59 - .fontSize('11vp')  
60 - .fontWeight(400)  
61 - .fontColor('#ED2800')  
62 - .backgroundColor('#F1EFEB')  
63 - .padding({  
64 - left: 4,  
65 - top: 1,  
66 - right: 4,  
67 - bottom: 1  
68 - })  
69 - .borderRadius(2)  
70 - .margin({ left: 8 })  
71 - .width(100)  
72 - .visibility(1 == this.item.isTop ? Visibility.Visible : Visibility.None)  
73 - } 50 + Text(DateTimeUtils.getCommentTime(new Date(this.item.time).getTime()))
  51 + .maxLines(1)
  52 + .textOverflow({ overflow: TextOverflow.Ellipsis })
  53 + .fontSize('12vp')
  54 + .fontWeight(400)
  55 + .fontColor('#999999')
  56 + .margin({ left: 8 })
  57 + .visibility(StringUtils.isNotEmpty(this.item.time) ? Visibility.Visible : Visibility.None)
74 58
  59 + Text('置顶')
  60 + .fontSize('11vp')
  61 + .fontWeight(400)
  62 + .fontColor('#ED2800')
  63 + .backgroundColor('#F1EFEB')
  64 + .padding({
  65 + left: 4,
  66 + top: 1,
  67 + right: 4,
  68 + bottom: 1
  69 + })
  70 + .borderRadius(2)
  71 + .margin({ left: 8 })
  72 + .width(100)
  73 + .visibility(1 == this.item.isTop ? Visibility.Visible : Visibility.None)
  74 + }
  75 + .justifyContent(FlexAlign.Start)
  76 + .width("100%")
  77 + Column() {
75 Text(this.item.text) 78 Text(this.item.text)
76 .fontSize('14vp') 79 .fontSize('14vp')
77 .fontWeight(400) 80 .fontWeight(400)
@@ -91,14 +94,14 @@ export struct TabLiveItemComponent { @@ -91,14 +94,14 @@ export struct TabLiveItemComponent {
91 if (this.item.pictureUrls.length > 1) { 94 if (this.item.pictureUrls.length > 1) {
92 Image(itemSub) 95 Image(itemSub)
93 .width(`${100 / this.item.pictureUrls.length}%`) 96 .width(`${100 / this.item.pictureUrls.length}%`)
94 - // .height(70) 97 + // .height(70)
95 .objectFit(ImageFit.Contain) 98 .objectFit(ImageFit.Contain)
96 .borderRadius(4) 99 .borderRadius(4)
97 } else { 100 } else {
98 Image(itemSub) 101 Image(itemSub)
99 .width(`100%`) 102 .width(`100%`)
100 - // .aspectRatio(this.getAspectRation())  
101 - // .height(177) 103 + // .aspectRatio(this.getAspectRation())
  104 + // .height(177)
102 .objectFit(ImageFit.Contain) 105 .objectFit(ImageFit.Contain)
103 .borderRadius(4) 106 .borderRadius(4)
104 } 107 }
@@ -171,17 +174,16 @@ export struct TabLiveItemComponent { @@ -171,17 +174,16 @@ export struct TabLiveItemComponent {
171 } 174 }
172 } 175 }
173 .margin({ 176 .margin({
174 - left: 8,  
175 - right: 16 177 + left: 32,
176 }) 178 })
177 - .layoutWeight(1)  
178 .alignItems(HorizontalAlign.Start) 179 .alignItems(HorizontalAlign.Start)
  180 + .justifyContent(FlexAlign.Start)
179 } 181 }
180 - .alignItems(VerticalAlign.Top)  
181 .padding({ 182 .padding({
182 left: 17, 183 left: 17,
183 - top: 8,  
184 - bottom: 8, 184 + top: 12,
  185 + right: 16,
  186 + bottom: 4,
185 }) 187 })
186 } 188 }
187 189